/* level-instalar-app.css — el banner "Descargá la app".
   Va como archivo servido y no dentro de la vista: el mismo banner se usa en el
   inicio, en la portada y en el ingreso, y esas tres pantallas tienen cada una
   su propio <head>. Ver resources/views/components/app-instalar.blade.php. */

/* El banner no existe fuera del teléfono: de 768px para arriba, la app
   instalada no aporta nada sobre la pestaña del escritorio. */
.lg-instalar { display: none; }

/* La marca la pone el script del encabezado cuando ya está instalada o el
   usuario lo cerró. Gana sobre todo lo de abajo. */
.lg-sin-instalar .lg-instalar { display: none !important; }

@media (max-width: 767.98px) {
    .lg-instalar {
        position: relative;
        display: block;
        /* El aire de arriba es propio: en el inicio, el encabezado de página le
           saca el padding-top al <main> y sin este margen el banner quedaría
           pegado al borde de la pantalla. */
        margin: .75rem 0 1rem;
        padding: .95rem 1rem;
        border-radius: 18px;
        color: #f8fafc;
        background:
            radial-gradient(120% 140% at 100% 0%, rgba(56,189,248,.55) 0%, rgba(56,189,248,0) 55%),
            linear-gradient(135deg, #0284c7 0%, #0ea5e9 52%, #0891b2 100%);
        box-shadow: 0 6px 18px rgba(2,132,199,.28), 0 1px 2px rgba(15,23,42,.10);
        overflow: hidden;
        text-align: left;
    }

    /* Entra sola, una vez. */
    @media (prefers-reduced-motion: no-preference) {
        .lg-instalar { animation: lg-instalar-in .28s ease-out both; }
        @keyframes lg-instalar-in {
            from { opacity: 0; transform: translateY(-8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
    }

    .lg-instalar[hidden] { display: none; }

    .lg-instalar-fila {
        display: flex;
        align-items: center;
        gap: .8rem;
    }

    .lg-instalar-logo {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(255,255,255,.96);
        display: grid;
        place-items: center;
        box-shadow: 0 2px 6px rgba(15,23,42,.18);
    }
    .lg-instalar-logo img { width: 30px; height: 30px; object-fit: contain; }

    /* El padding derecho deja lugar a la "x" para que no se monte sobre el
       texto. */
    .lg-instalar-txt { min-width: 0; flex: 1 1 auto; padding-right: 1.1rem; }
    .lg-instalar-tit {
        font-size: .9rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -.01em;
        color: #f8fafc;
    }
    .lg-instalar-sub {
        margin-top: .12rem;
        font-size: .75rem;
        line-height: 1.3;
        color: rgba(241,245,249,.86);
    }

    .lg-instalar-btn {
        flex: 0 0 auto;
        appearance: none;
        border: 0;
        border-radius: 999px;
        padding: .5rem .95rem;
        font-size: .8rem;
        font-weight: 700;
        color: #0369a1;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(15,23,42,.18);
        cursor: pointer;
        white-space: nowrap;
    }
    .lg-instalar-btn:active { transform: translateY(1px); }

    /* La "x" no compite con el botón: chica, arriba a la derecha y con área
       táctil propia. */
    .lg-instalar-x {
        position: absolute;
        top: .3rem;
        right: .35rem;
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: rgba(241,245,249,.75);
        font-size: .9rem;
        line-height: 1;
        cursor: pointer;
    }
    .lg-instalar-x:active { background: rgba(15,23,42,.18); }

    /* Los pasos a mano, para cuando el navegador no ofrece su instalador. */
    .lg-instalar-pasos {
        margin-top: .8rem;
        padding-top: .7rem;
        border-top: 1px solid rgba(255,255,255,.22);
        font-size: .78rem;
        line-height: 1.45;
        color: rgba(241,245,249,.94);
    }
    .lg-instalar-pasos[hidden] { display: none; }
    .lg-instalar-pasos ol {
        margin: .35rem 0 .7rem;
        padding-left: 1.05rem;
        list-style: decimal;
    }
    .lg-instalar-pasos ol[hidden] { display: none; }
    .lg-instalar-pasos li { margin-bottom: .2rem; }
    .lg-instalar-listo {
        appearance: none;
        border: 1px solid rgba(255,255,255,.55);
        background: transparent;
        color: #f8fafc;
        border-radius: 999px;
        padding: .34rem .8rem;
        font-size: .75rem;
        font-weight: 600;
        cursor: pointer;
    }
}