/* ============================================================================
   Los 40 de Yenny · Hoja de estilo
   ============================================================================

   Escrita para un teléfono en la mano, de noche, con una copa en la otra.
   De ahí salen casi todas las decisiones:

     · Fondo oscuro. Una pantalla blanca a las dos de la mañana deslumbra.
     · Botones grandes (56 px de alto). Un dedo que baila no acierta en 40.
     · Nada de scroll horizontal, nada de zoom, nada de rebote. Cuanto menos
       se parezca a una página web, más se parece a una app.
     · El menú de abajo siempre visible y por encima del área del gesto de
       inicio del iPhone (env(safe-area-inset-bottom)).
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1 · Paleta y medidas
   ------------------------------------------------------------------------ */
:root {
    --noche:        #140826;
    --noche-alta:   #1d1038;
    --noche-baja:   #0d0418;

    --carta:        rgba(255, 255, 255, .055);
    --carta-borde:  rgba(255, 255, 255, .10);

    --oro:          #f6c667;
    --oro-hondo:    #d79f2f;
    --rosa:         #ff4d8d;
    --violeta:      #9b6bff;

    --texto:        #f4eeff;
    --texto-suave:  #b6a6d2;
    --texto-tenue:  #7d6f97;

    --peligro:      #ff5a6e;
    --exito:        #4ade80;

    --radio:        18px;
    --radio-chico:  12px;

    --alto-barra:   62px;
    --seguro-abajo: env(safe-area-inset-bottom, 0px);
    --seguro-arriba: env(safe-area-inset-top, 0px);

    --tipo:      'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tipo-fina: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* ---------------------------------------------------------------------------
   2 · Reinicio
   ------------------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    height: 100%;
    overflow: hidden;          /* el que desplaza es <main>, no el documento */
    overscroll-behavior: none; /* sin el rebote elástico que delata al navegador */
}

body {
    display: flex;
    flex-direction: column;

    font-family: var(--tipo);
    font-size: 16px;           /* menos de 16 y iOS hace zoom al enfocar un campo */
    line-height: 1.5;
    color: var(--texto);

    background: var(--noche);
    /* Dos luces de fiesta, quietas, para que el negro no sea plano. */
    background-image:
        radial-gradient(90vw 60vh at 12% -6%,  rgba(155, 107, 255, .30), transparent 62%),
        radial-gradient(80vw 55vh at 92% 104%, rgba(255,  77, 141, .24), transparent 60%);
    background-attachment: fixed;

    /* Que no se pueda seleccionar texto: en una app nativa no se puede, y el
       menú de «Copiar» saliendo de un título rompe la ilusión al instante. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Los campos sí, claro: ahí sí se escribe y se corrige. */
input,
textarea {
    -webkit-user-select: text;
    user-select: text;
}

img {
    display: block;
    max-width: 100%;
}

button,
input {
    font: inherit;
    color: inherit;
}

button {
    border: 0;
    background: none;
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

.oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   3 · Cabecera
   ------------------------------------------------------------------------ */
.cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: calc(var(--seguro-arriba) + 12px) 18px 12px;

    background: linear-gradient(180deg, rgba(13, 4, 24, .92), rgba(13, 4, 24, 0));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    flex: 0 0 auto;
    z-index: 20;
}

.cabecera-titulo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cabecera-nombre {
    font-family: var(--tipo-fina);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;

    background: linear-gradient(92deg, var(--oro), #ffe6a8 48%, var(--rosa));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cabecera-pista {
    font-size: 12px;
    color: var(--texto-tenue);
}

/* La pastilla con la inicial de quien está usando la app. */
.chip-yo {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;

    display: grid;
    place-items: center;

    font-size: 15px;
    font-weight: 600;
    color: var(--noche-baja);

    background: linear-gradient(140deg, var(--oro), var(--rosa));
    box-shadow: 0 4px 14px rgba(255, 77, 141, .32);
}

/* ---------------------------------------------------------------------------
   4 · Zona de contenido y pantallas
   ------------------------------------------------------------------------ */
#contenido {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;

    /* Hueco para que el menú de abajo no tape el final del contenido. */
    padding-bottom: calc(var(--alto-barra) + var(--seguro-abajo) + 20px);
}

.pantalla {
    padding: 8px 20px 0;
    animation: entrar .26s ease both;
}

.pantalla-ancha {
    padding: 8px 14px 0;
}

@keyframes entrar {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Las dos pantallas de acción (cámara y pedir) van centradas en vertical. */
.centrado {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding-top: 6px;
}

.titulo-pantalla {
    font-family: var(--tipo-fina);
    font-size: 27px;
    font-weight: 600;
    line-height: 1.15;
}

.texto-suave {
    max-width: 30ch;
    font-size: 14.5px;
    color: var(--texto-suave);
}

.titulo-menor {
    font-size: 16px;
    font-weight: 600;
}

/* El aro con el emoji grande. Late despacio, como una luz de fiesta. */
.aro-camara {
    width: 128px;
    height: 128px;
    margin-top: 10px;
    border-radius: 50%;

    display: grid;
    place-items: center;

    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .16), transparent 58%),
        linear-gradient(145deg, rgba(155, 107, 255, .40), rgba(255, 77, 141, .30));
    border: 1px solid var(--carta-borde);
    box-shadow: 0 18px 44px rgba(155, 107, 255, .26);

    animation: latir 3.4s ease-in-out infinite;
}

.aro-musica {
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .16), transparent 58%),
        linear-gradient(145deg, rgba(246, 198, 103, .38), rgba(255, 77, 141, .30));
    box-shadow: 0 18px 44px rgba(246, 198, 103, .22);
}

@keyframes latir {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}

.icono-xxl {
    font-size: 54px;
    line-height: 1;
}

/* ---------------------------------------------------------------------------
   5 · Botones y campos
   ------------------------------------------------------------------------ */
.boton {
    min-height: 54px;
    padding: 0 26px;
    border-radius: 999px;

    font-size: 16px;
    font-weight: 600;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    transition: transform .12s ease, opacity .12s ease, box-shadow .2s ease;
}

.boton:active {
    transform: scale(.965);
}

.boton:disabled {
    opacity: .5;
    pointer-events: none;
}

.boton-ancho {
    width: 100%;
    max-width: 380px;
}

.boton-principal {
    color: #24123a;
    background: linear-gradient(120deg, var(--oro), #ffd98b 46%, var(--rosa));
    box-shadow: 0 10px 26px rgba(255, 77, 141, .30);
}

.boton-fantasma {
    color: var(--texto);
    background: var(--carta);
    border: 1px solid var(--carta-borde);
}

.boton-texto {
    margin-top: 6px;
    padding: 10px;
    width: 100%;
    font-size: 14px;
    color: var(--texto-tenue);
}

.boton-mini {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;

    background: var(--carta);
    border: 1px solid var(--carta-borde);
}

.boton-peligro {
    color: var(--peligro);
    border-color: rgba(255, 90, 110, .35);
}

.campo {
    width: 100%;
    max-width: 380px;
    min-height: 52px;
    padding: 0 18px;

    border-radius: var(--radio);
    border: 1px solid var(--carta-borde);
    background: rgba(255, 255, 255, .05);
    color: var(--texto);

    outline: none;
    transition: border-color .15s ease, background .15s ease;
}

.campo::placeholder {
    color: var(--texto-tenue);
}

.campo:focus {
    border-color: rgba(246, 198, 103, .55);
    background: rgba(255, 255, 255, .08);
}

.campo-grande {
    min-height: 58px;
    font-size: 17px;
    text-align: center;
}

.forma {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}

.etiqueta {
    font-size: 13px;
    color: var(--texto-suave);
}

.pista {
    max-width: 30ch;
    font-size: 12.5px;
    color: var(--texto-tenue);
}

.error {
    font-size: 13.5px;
    color: var(--peligro);
}

.aviso {
    max-width: 34ch;
    padding: 12px 16px;
    border-radius: var(--radio-chico);

    font-size: 14px;
    color: var(--exito);

    background: rgba(74, 222, 128, .10);
    border: 1px solid rgba(74, 222, 128, .28);
}

/* ---------------------------------------------------------------------------
   6 · Cortina de bienvenida
   ------------------------------------------------------------------------ */
.cortina {
    position: fixed;
    inset: 0;
    z-index: 60;

    display: grid;
    place-items: center;
    padding: 28px;

    background: var(--noche-baja);
    background-image:
        radial-gradient(80vw 50vh at 20% 4%,  rgba(155, 107, 255, .40), transparent 62%),
        radial-gradient(80vw 50vh at 86% 96%, rgba(255,  77, 141, .32), transparent 62%);
}

.cortina-caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    width: 100%;
    max-width: 400px;
}

.chispa {
    font-size: 46px;
    animation: latir 3s ease-in-out infinite;
}

.titulo-fiesta {
    font-family: var(--tipo-fina);
    font-size: clamp(32px, 9vw, 44px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;

    background: linear-gradient(94deg, var(--oro), #ffeec2 44%, var(--rosa));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.subtitulo {
    font-size: 15px;
    color: var(--texto-suave);
    margin-bottom: 8px;
}

/* ---------------------------------------------------------------------------
   7 · Subidas en curso
   ------------------------------------------------------------------------ */
.cola-subidas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 6px;
}

.subida {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--carta-borde);
    background: var(--carta);
}

.subida img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .45;
}

.subida.lista img {
    opacity: 1;
}

.subida-capa {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 22px;
    background: rgba(13, 4, 24, .45);
}

.subida.lista .subida-capa {
    background: none;
}

.subida.fallo .subida-capa {
    color: var(--peligro);
    background: rgba(13, 4, 24, .66);
}

/* Girador de carga, hecho con un borde y nada más. */
.girando {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .25);
    border-top-color: var(--oro);
    animation: girar .8s linear infinite;
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   8 · Galería
   ------------------------------------------------------------------------ */
.barra-seccion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 6px 12px;
}

.titulo-seccion {
    font-family: var(--tipo-fina);
    font-size: 23px;
    font-weight: 600;
    white-space: nowrap;
}

.contador {
    font-size: 13px;
    color: var(--texto-tenue);
}

.rejilla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

/* En pantallas anchas (una tablet en la mesa del DJ) caben más columnas. */
@media (min-width: 560px) {
    .rejilla { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}

@media (min-width: 860px) {
    .rejilla { grid-template-columns: repeat(6, 1fr); }
}

.celda {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--carta);

    animation: aparecer .3s ease both;
}

@keyframes aparecer {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: none; }
}

.celda img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}

.celda:active img {
    transform: scale(.95);
}

/* El nombre del autor, en el borde inferior de cada miniatura. */
.celda-autor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 6px 4px;

    font-size: 10.5px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .62));
}

.vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;

    text-align: center;
    color: var(--texto-tenue);
}

/* ---------------------------------------------------------------------------
   9 · Cola de canciones
   ------------------------------------------------------------------------ */
.lista-cola {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 2px;
}

.cancion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;

    border-radius: var(--radio);
    background: var(--carta);
    border: 1px solid var(--carta-borde);

    animation: aparecer .28s ease both;
}

/* La que va primero se distingue: es la que el DJ tiene que mirar. */
.cancion.primera {
    background: linear-gradient(120deg, rgba(246, 198, 103, .16), rgba(255, 77, 141, .12));
    border-color: rgba(246, 198, 103, .38);
}

.cancion-num {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;

    display: grid;
    place-items: center;

    font-size: 12.5px;
    font-weight: 700;
    color: var(--texto-suave);
    background: rgba(255, 255, 255, .07);
}

.cancion.primera .cancion-num {
    color: #24123a;
    background: linear-gradient(140deg, var(--oro), var(--rosa));
}

.cancion-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.cancion-titulo {
    font-size: 15px;
    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cancion-linea {
    font-size: 12.5px;
    color: var(--texto-suave);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cancion-quien {
    color: var(--oro);
}

.cancion-dedic {
    margin-top: 3px;
    font-size: 12.5px;
    font-style: italic;
    color: var(--texto-tenue);
}

.cancion-acciones {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
}

.boton-icono {
    width: 36px;
    height: 36px;
    border-radius: 50%;

    display: grid;
    place-items: center;

    font-size: 15px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--carta-borde);
}

.boton-icono:active {
    transform: scale(.9);
}

.ya-sonaron {
    margin-top: 26px;
    padding: 0 4px 10px;
}

.lista-sonaron {
    list-style: none;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lista-sonaron li {
    display: flex;
    justify-content: space-between;
    gap: 10px;

    padding: 8px 12px;
    border-radius: var(--radio-chico);

    font-size: 13.5px;
    color: var(--texto-tenue);
    background: rgba(255, 255, 255, .03);
}

.lista-sonaron span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-dj {
    flex: 0 0 auto;
    padding: 8px 15px;
    border-radius: 999px;

    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;   /* si se parte en dos líneas, arrastra al título */
    color: var(--texto-suave);

    background: var(--carta);
    border: 1px solid var(--carta-borde);
}

.chip-dj.activo {
    color: #24123a;
    background: linear-gradient(120deg, var(--oro), var(--rosa));
    border-color: transparent;
}

/* ---------------------------------------------------------------------------
   10 · Menú inferior
   ------------------------------------------------------------------------ */
.barra-abajo {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    height: calc(var(--alto-barra) + var(--seguro-abajo));
    padding-bottom: var(--seguro-abajo);

    background: rgba(13, 4, 24, .82);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.pestana {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;

    color: var(--texto-tenue);
    transition: color .16s ease, transform .16s ease;
}

.pestana .icono {
    font-size: 21px;
    line-height: 1;
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);

    /* Los emoji de color no se tiñen; en las pestañas apagadas se atenúan
       con saturación y opacidad para que la activa destaque igual. */
    filter: saturate(.25);
    opacity: .55;
}

.pestana.activa {
    color: var(--oro);
}

.pestana.activa .icono {
    filter: none;
    opacity: 1;
    transform: translateY(-2px) scale(1.12);
}

.pestana:active .icono {
    transform: scale(.88);
}

.etiqueta-pestana {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .01em;
}

/* Punto de «hay algo nuevo aquí». */
.punto {
    position: absolute;
    top: 9px;
    left: 50%;
    margin-left: 9px;

    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rosa);
    box-shadow: 0 0 0 2px rgba(13, 4, 24, .9);
}

/* ---------------------------------------------------------------------------
   11 · Visor de foto
   ------------------------------------------------------------------------ */
.visor {
    position: fixed;
    inset: 0;
    z-index: 70;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(6, 2, 12, .96);
    animation: fundir .2s ease both;
}

@keyframes fundir {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.visor img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.visor-cerrar {
    position: absolute;
    top: calc(var(--seguro-arriba) + 14px);
    right: 14px;
    z-index: 2;

    width: 42px;
    height: 42px;
    border-radius: 50%;

    display: grid;
    place-items: center;

    font-size: 17px;
    color: #fff;
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.visor-pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 22px 20px calc(20px + var(--seguro-abajo));

    font-size: 14px;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78));
}

/* ---------------------------------------------------------------------------
   12 · Capas (clave del DJ, nombre, instalar)
   ------------------------------------------------------------------------ */
.capa {
    position: fixed;
    inset: 0;
    z-index: 65;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    background: rgba(6, 2, 12, .70);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fundir .18s ease both;
}

@media (min-width: 560px) {
    .capa { align-items: center; }
}

/* Sube desde abajo, como una hoja de acción del sistema. */
.capa-caja {
    width: 100%;
    max-width: 440px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;

    padding: 26px 22px calc(26px + var(--seguro-abajo));

    background: var(--noche-alta);
    border: 1px solid var(--carta-borde);
    border-radius: 26px 26px 0 0;

    animation: subir .26s cubic-bezier(.22, 1, .36, 1) both;
}

@media (min-width: 560px) {
    .capa-caja {
        border-radius: 26px;
        padding-bottom: 26px;
        margin: 20px;
    }
}

@keyframes subir {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

.fila-botones {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}

.fila-botones .boton {
    flex: 1;
    padding: 0 14px;
}

.pasos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin: 4px 0;

    text-align: left;
    font-size: 14.5px;
    color: var(--texto-suave);
}

.pasos p {
    display: flex;
    align-items: center;
    gap: 10px;
}

.paso {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;

    display: grid;
    place-items: center;

    font-size: 12px;
    font-weight: 700;
    color: #24123a;
    background: linear-gradient(140deg, var(--oro), var(--rosa));
}

/* ---------------------------------------------------------------------------
   13 · Avisos flotantes
   ------------------------------------------------------------------------ */
.avisos {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--alto-barra) + var(--seguro-abajo) + 12px);
    z-index: 80;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    pointer-events: none;
}

.burbuja {
    max-width: 92%;
    padding: 12px 18px;
    border-radius: 999px;

    font-size: 14px;
    font-weight: 500;
    text-align: center;

    color: var(--texto);
    background: rgba(40, 22, 66, .96);
    border: 1px solid var(--carta-borde);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);

    animation: burbujear .3s cubic-bezier(.22, 1, .36, 1) both;
}

.burbuja.malo {
    color: #ffd9de;
    background: rgba(102, 24, 40, .96);
    border-color: rgba(255, 90, 110, .40);
}

.burbuja.bueno {
    color: #d7ffe6;
    background: rgba(18, 74, 46, .96);
    border-color: rgba(74, 222, 128, .38);
}

.burbuja.saliendo {
    animation: desburbujear .25s ease both;
}

@keyframes burbujear {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes desburbujear {
    to { opacity: 0; transform: translateY(-8px); }
}

/* ---------------------------------------------------------------------------
   14 · Cuando ya está instalada
   ------------------------------------------------------------------------ */
/* Abierta desde el icono de la pantalla de inicio no hay barra de navegador,
   así que el contenido puede respirar un poco más arriba. */
@media (display-mode: standalone) {
    .cabecera {
        padding-top: calc(var(--seguro-arriba) + 16px);
    }
}

/* Quien haya pedido menos movimiento en los ajustes del sistema, que no lo
   tenga. Las animaciones aquí son decoración, no información. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}