/* ==========================================================================
   La lámina de instalación

   Va abajo y ancorada al borde, no en el centro: un diálogo centrado bloquea la
   página y obliga a atenderlo. Esto es una oferta, no un trámite — se puede
   ignorar y seguir leyendo.

   Respeta el área segura del iPhone (safe-area-inset-bottom): sin eso, en un
   teléfono con barra de gestos el botón queda debajo de la franja y no se
   alcanza a tocar.
   ========================================================================== */

.ie-instalar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;

    padding: 0 clamp(12px, 4vw, 20px);
    padding-bottom: calc(clamp(12px, 4vw, 20px) + env(safe-area-inset-bottom, 0px));

    display: flex;
    justify-content: center;
    pointer-events: none;

    /* Entra desde abajo. Arranca fuera de pantalla para que el primer cuadro
       no la enseñe ya colocada. */
    transform: translateY(120%);
    opacity: 0;
    transition: transform .38s cubic-bezier(.16, 1, .3, 1), opacity .38s ease;
}

.ie-instalar.esta-dentro {
    transform: none;
    opacity: 1;
}

.ie-instalar__caja {
    pointer-events: auto;
    position: relative;

    width: 100%;
    max-width: 420px;

    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 14px;

    padding: 18px 18px 16px;
    background: #FAF7F3;
    border: 1px solid #DED5CC;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(36, 16, 18, .10), 0 18px 44px rgba(36, 16, 18, .22);
}

.ie-instalar__icono {
    width: 56px;
    height: 56px;
    border-radius: 13px;
    display: block;
}

.ie-instalar__texto { min-width: 0; }

.ie-instalar__titulo {
    margin: 0 0 4px;
    /* La condensada de la marca; si no cargó, la del sistema. */
    font-family: 'This Appeal IE', 'Anton', 'Archivo Black', Impact, sans-serif;
    font-size: 21px;
    line-height: 1.05;
    text-transform: uppercase;
    color: #BA1F27;
}

.ie-instalar__cuerpo {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #6B5B58;
}

/* El botón ocupa las dos columnas: a lo ancho es más fácil de acertar con el
   pulgar que apretado junto al texto. */
.ie-instalar__boton {
    grid-column: 1 / -1;
    margin-top: 14px;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background: #BA1F27;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.ie-instalar__boton:hover  { background: #9A1820; }
.ie-instalar__boton:active { transform: scale(.98); }

.ie-instalar__cerrar {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    color: #6B5B58;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.ie-instalar__cerrar:hover { color: #BA1F27; }

.ie-instalar__caja :focus-visible {
    outline: 3px solid #BA1F27;
    outline-offset: 2px;
    border-radius: 8px;
}

/* --- Los pasos de iOS --- */

.ie-instalar__pasos {
    margin: 12px 0 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.6;
    color: #241012;
}
.ie-instalar__pasos li + li { margin-top: 5px; }
.ie-instalar__pasos strong { color: #5E1719; }

/* El glifo de Compartir va en línea con el texto: sirve para reconocerlo en la
   barra de Safari, así que tiene que verse igual que ahí. */
.ie-instalar__glifo {
    display: inline-flex;
    vertical-align: -4px;
    width: 18px;
    height: 18px;
    color: #007AFF;   /* el azul de iOS, no el de la marca: es un icono ajeno */
}
.ie-instalar__glifo svg { width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
    .ie-instalar { transition: opacity .2s ease; transform: none; }
    .ie-instalar__boton:active { transform: none; }
}

/* ==========================================================================
   AVISO DE VERSIÓN NUEVA

   Aparece cuando el service worker instaló una versión y espera para tomar el
   control. Va arriba y no abajo: abajo ya están el botón del sonido y la lámina
   de instalación, y tres cosas peleando por la misma esquina no es un diseño.

   Es una oferta, no una alerta: se puede ignorar y seguir leyendo.
   ========================================================================== */

.ie-nueva {
    position: fixed;
    top: 0;
    left: 50%;
    translate: -50% 0;
    z-index: 80;

    margin-top: calc(12px + env(safe-area-inset-top, 0px));
    max-width: calc(100vw - 24px);

    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 18px;

    background: #FAF7F3;
    border: 1px solid var(--ie-line);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(36, 16, 18, .10), 0 14px 34px rgba(36, 16, 18, .18);

    opacity: 0;
    transform: translateY(-14px);
    transition: opacity .3s var(--ie-curva), transform .3s var(--ie-curva);
}

.ie-nueva.esta-dentro { opacity: 1; transform: none; }

.ie-nueva__texto {
    font-size: 13.5px;
    color: var(--ie-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ie-nueva__si {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--ie-red);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.ie-nueva__si:hover { background: var(--ie-red-hondo); }

.ie-nueva__no {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    background: none;
    color: var(--ie-ink-soft);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.ie-nueva__no:hover { color: var(--ie-red); }

.ie-nueva :focus-visible {
    outline: 3px solid var(--ie-red);
    outline-offset: 2px;
    border-radius: 999px;
}

/* En pantallas estrechas el texto se acorta antes que empujar los botones
   fuera: el botón es lo único que hay que poder tocar. */
@media (max-width: 420px) {
    .ie-nueva { padding-left: 14px; font-size: 13px; }
    .ie-nueva__texto { white-space: normal; line-height: 1.3; }
}

@media (prefers-reduced-motion: reduce) {
    .ie-nueva { transition: opacity .2s; transform: none; }
}

/* ==========================================================================
   EL BOTÓN PERMANENTE DE INSTALACIÓN

   Existe porque cuatro invitadas cerraron la lámina y se quedaron sin camino:
   el rechazo silenciaba el guion entero. Cerrar una oferta no puede dejar a
   nadie sin puerta.

   Va apilado sobre el interruptor del sonido, en la misma columna: abrir un
   tercer frente en otra esquina sería peor que compartir una.
   ========================================================================== */

.ie-instalar-atajo {
    position: fixed;
    right: clamp(14px, 3vw, 26px);
    /* Justo encima del botón del sonido (48 px + su separación). */
    bottom: calc(clamp(14px, 3vw, 26px) + 58px + env(safe-area-inset-bottom, 0px));
    z-index: 59;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px 0 13px;

    border: 1px solid var(--ie-line);
    border-radius: 999px;
    background: rgba(250, 247, 243, .94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--ie-maroon);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;

    box-shadow: 0 2px 6px rgba(36, 16, 18, .08), 0 10px 26px rgba(36, 16, 18, .12);
    transition: background .25s var(--ie-curva), color .25s var(--ie-curva),
                scale .25s var(--ie-curva);
}

.ie-instalar-atajo svg { width: 18px; height: 18px; display: block; }

.ie-instalar-atajo:hover  { background: var(--ie-red); color: #fff; scale: 1.04; }
.ie-instalar-atajo:active { scale: .97; }
.ie-instalar-atajo:focus-visible {
    outline: 3px solid var(--ie-red);
    outline-offset: 3px;
}

/* En pantallas estrechas se queda solo el icono: la etiqueta ocuparía un tercio
   del ancho para decir algo que el icono ya dice. */
@media (max-width: 560px) {
    .ie-instalar-atajo { padding: 0; width: 44px; justify-content: center; }
    .ie-instalar-atajo__texto {
        /* Fuera de la vista pero legible por un lector de pantalla. */
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* --- El video dentro del panel --- */

.ie-instalar__video { grid-column: 1 / -1; margin-top: 12px; }

.ie-instalar__ver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px 0 10px;
    border: 1px solid var(--ie-line);
    border-radius: 999px;
    background: transparent;
    color: var(--ie-maroon);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.ie-instalar__ver:hover { border-color: var(--ie-red); color: var(--ie-red); }

.ie-instalar__play {
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--ie-red);
    color: #fff;
}
.ie-instalar__play svg { width: 14px; height: 14px; }

.ie-instalar__clip {
    display: block;
    width: 100%;
    /* Vertical, como se grabó: es un video de un teléfono enseñando un
       teléfono, y recortarlo a apaisado dejaría fuera lo que importa. */
    aspect-ratio: 9 / 16;
    max-height: 60vh;
    margin: 0 auto;
    border-radius: 12px;
    background: var(--ie-noche);
}

.ie-instalar__video { position: relative; }

/* Solo aparece si el navegador se negó a arrancar el video con sonido. En ese
   caso el clip ya está corriendo mudo detrás, así que esto va encima. */
.ie-instalar__sonido {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--ie-red);
    color: #fff;
    font: inherit;
    font-size: .82rem;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: reduce) {
    .ie-instalar-atajo { transition: none; }
    .ie-instalar-atajo:hover, .ie-instalar-atajo:active { scale: none; }
}