/*
  EL MOTOR DEL RELATO — qué pantalla se ve en cada momento del día y qué cambia dentro.

  Un mismo vocabulario sirve para el escenario pegado y para las figuras de cada paso (sin
  JavaScript), que el build copia del escenario:

    .estado            el contenedor que lleva el momento
    .p1 … .p9          ACUMULATIVO: el paso 4 deja puestas p1…p4, así lo pasado sigue pasado
    [data-paso-actual] el momento exacto: decide qué vista se ve
    .desde-N / .hasta-N   visible a partir de N / hasta N
    .alterna           apila sus hijos en la misma celda: el cambio no mueve nada alrededor
    .marca-N / .pulsa-N   casilla marcada / chip pulsado a partir de N
    .cae / .foto-llega    lo que entra en cascada (el reparto, las fotos)

  El panel del producto no se actualiza solo: aquí nada late ni dice «en vivo». Lo que cambia es lo
  que vería quien coordina al recargar, con el sello «Calculado HH:MM» de esa hora.
*/

/* ── El escenario pegado (con JavaScript; en móvil, en pequeño: ver más abajo) ───────── */

.escenario { display: none; }

@media (min-width: 64rem) {
  .js .escenario {
    display: block;
    position: sticky;
    top: max(var(--e-5), calc(50svh - 24.5rem));
    align-self: start;
    container-type: inline-size;
    /* En un portátil bajo (1366×650) el escenario entero cabe en la ventana; a 1440×900 no cambia. */
    width: min(100%, calc((100svh - 3rem - 3.5rem) / 1.04));
    justify-self: end;
  }
}

.escenario-lienzo { position: relative; height: calc(3.5rem + 104cqi); }

.escenario-reloj {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2.75rem;
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
}
.escenario-reloj time {
  display: inline-flex;
  font-family: var(--f-titular);
  font-size: var(--t-banda);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--marca);
  font-variant-numeric: tabular-nums;
}
.escenario-reloj .nombre {
  font-size: var(--t-etiqueta);
  font-weight: 600;
  color: var(--tinta-2);
}
.digito,
.separador { display: inline-block; overflow: hidden; }
.digito.cambia { animation: girar-digito var(--dur-hora) var(--ease-estandar); }
@keyframes girar-digito {
  from { transform: translateY(80%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* El móvil va abajo a la DERECHA [Sushi-ESC1]: a la izquierda del panel están los nombres y los estados,
   que es lo que cambia; a la derecha, zonas y selectores, que pueden quedar tapados. */
.escenario-panel { position: absolute; top: 3.5rem; left: 0; right: 6%; margin: 0; }
.escenario-panel .panel { aspect-ratio: 4 / 3; }
.escenario-movil {
  position: absolute;
  right: 0;
  top: calc(3.5rem + 29cqi);
  width: 34%;
  margin: 0;
  z-index: 2;
  transition: opacity var(--dur-larga) var(--ease-estandar), transform var(--dur-larga) var(--ease-estandar);
}
@media (max-width: 79.99rem) { .escenario-movil { width: 30%; top: calc(3.5rem + 31cqi); } }
.escenario[data-paso-actual="9"] .escenario-movil { opacity: 0; transform: translateY(1.5rem); }

.escenario-rotulo {
  position: absolute;
  left: 0;
  right: calc(34% + var(--e-5));
  top: calc(3.5rem + 70.5cqi + 1.25rem);
  max-width: 22rem;
  margin: 0;
  font-size: var(--t-etiqueta);
  color: var(--tinta-3);
}
.escenario-rotulo b { display: block; color: var(--tinta-2); font-weight: 600; }

/* ── El escenario en móvil y tableta (menos de 1024 px) [Sushi-MOV1] ────────────────────────
   Antes aquí se soltaba el escenario y cada paso llevaba su figura: la página medía 32 pantallas y
   al bajar no cambiaba nada (Josh, 3-oct: «se ve mal, muy larga, sin las transiciones»). Ahora se pega
   arriba en pequeño, con el reloj dentro (hace de banda horaria), y los pasos pasan por debajo, como en
   escritorio. El alto lo fija el celular, al 40 % del ancho y a 410/700, más el reloj; con tope de
   42svh, para que en un iPhone SE quede sitio al texto. El panel va al lado, cuadrado, a 480 de diseño
   como .panel--estrecho; el rótulo no cabe, y el texto del paso ya dice lo mismo. */
@media (max-width: 63.99rem) {
  .js .escenario {
    display: block;
    order: -1;
    position: sticky;
    top: 0;
    z-index: 20;
    container-type: inline-size;
    margin-inline: calc(-1 * var(--margen));
    padding: 0 var(--margen) var(--e-3);
    background: var(--papel);
    border-bottom: 1px solid var(--regla);
  }
  .js .escenario-lienzo {
    container-type: inline-size;
    width: min(100cqi, calc((42svh - var(--alto-banda)) / 0.683));
    height: min(calc(var(--alto-banda) + 68.3cqi), 42svh);
    margin-inline: auto;
  }
  .js .escenario-reloj { height: var(--alto-banda); align-items: center; }
  .js .escenario-panel {
    top: calc(var(--alto-banda) + 2cqi);
    right: auto;
    width: 64%;
    transition: transform var(--dur-larga) var(--ease-estandar);
  }
  .js .escenario-panel .panel { aspect-ratio: 1; }
  .js .escenario-movil { top: var(--alto-banda); width: 40%; }
  .js .escenario-movil .movil { aspect-ratio: 410 / 700; }
  .js .escenario-rotulo { display: none; }
  /* 14 días: el celular se va y el panel se queda solo, en el centro. */
  .js .escenario[data-paso-actual="9"] .escenario-panel { transform: translateX(28.125%); }
  .js .escenario .panel__marco,
  .js .escenario .pn { --px: calc(100cqi / 480); }
  .js .escenario .pn-cifras { grid-template-columns: repeat(2, 1fr); }
  .js .escenario .pn-zona { display: none; }
  /* 10:40: el aviso se enseña por su final en un celular de 700 de alto, como en las figuras. */
  .js .escenario[data-paso-actual="6"] .lz-pagina--ficha { transform: translateY(calc(-100% + 568 * var(--px))); }
  .js .escenario[data-paso-actual="6"] .pn { -webkit-mask-image: linear-gradient(#000 90%, transparent); mask-image: linear-gradient(#000 90%, transparent); }
}

/* ── Qué vista se ve en cada momento ──────────────────────────────────────────────────── */

.lz-vista,
.pn-vista {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-corta) var(--ease-salida), visibility 0s linear var(--dur-corta);
}

.estado[data-paso-actual="1"] .v-manana,
.estado[data-paso-actual="2"] .v-dia,
.estado[data-paso-actual="3"] .v-chat,
.estado[data-paso-actual="4"] .v-ficha,
.estado[data-paso-actual="5"] .v-ficha,
.estado[data-paso-actual="6"] .v-ficha,
.estado[data-paso-actual="7"] .v-brenda,
.estado[data-paso-actual="8"] .v-listo,
.estado[data-paso-actual="9"] .v-listo,
.estado[data-paso-actual="1"] .pv-calendario,
.estado[data-paso-actual="2"] .pv-tablero,
.estado[data-paso-actual="3"] .pv-equipo,
.estado[data-paso-actual="4"] .pv-tablero,
.estado[data-paso-actual="5"] .pv-fotos,
.estado[data-paso-actual="6"] .pv-incidencias,
.estado[data-paso-actual="7"] .pv-alarma,
.estado[data-paso-actual="8"] .pv-cierre,
.estado[data-paso-actual="9"] .pv-anteriores {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-media) var(--ease-salida), visibility 0s;
}

/* ── Utilidades de estado ─────────────────────────────────────────────────────────────── */

.alterna { display: inline-grid; }
.alterna > * { grid-area: 1 / 1; justify-self: start; }

[class*="desde-"],
[class*="hasta-"],
.tras-firma,
.hasta-firma { transition: opacity var(--dur-media) var(--ease-estandar), visibility 0s; }

.estado:not(.p2) .desde-2, .estado:not(.p3) .desde-3, .estado:not(.p4) .desde-4,
.estado:not(.p5) .desde-5, .estado:not(.p6) .desde-6, .estado:not(.p7) .desde-7,
.estado:not(.p8) .desde-8, .estado:not(.p9) .desde-9,
.estado.p2 .hasta-1, .estado.p3 .hasta-2, .estado.p4 .hasta-3, .estado.p5 .hasta-4,
.estado.p6 .hasta-5, .estado.p7 .hasta-6, .estado.p8 .hasta-7, .estado.p9 .hasta-8 {
  opacity: 0;
  visibility: hidden;
}

/* Casillas que se marcan y chips que se pulsan */
.estado.p4 .marca-4 .lz-casilla-marca,
.estado.p5 .marca-5 .lz-casilla-marca {
  border-color: var(--lz-verde);
  background-color: var(--lz-verde);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.estado.p4 .marca-4 .lz-casilla-texto,
.estado.p5 .marca-5 .lz-casilla-texto { color: var(--lz-tinta-suave); text-decoration: line-through; text-decoration-thickness: 1px; }
.escenario[data-paso-actual="4"] .marca-4 .lz-casilla-marca { transition-delay: calc(1.9s + var(--i, 0) * var(--escalonado)); }

.estado.p6 .pulsa-6 { background: var(--lz-azul); border-color: var(--lz-azul); color: #fff; }
.escenario[data-paso-actual="6"] .pulsa-6 { transition-delay: 0.5s; }
.escenario[data-paso-actual="6"] .lz-detalle.desde-6 { transition-delay: 0.7s; }
.escenario[data-paso-actual="6"] .ficha-aviso .lz-recibo.desde-6 { transition-delay: 1.6s; }

/* La ficha del relevo se desplaza como un dedo que baja: los botones, la lista, las fotos, el aviso.
   Las distancias están en píxeles de diseño del celular, medidas en el navegador. */
.lz-pagina--ficha {
  --y-lista: 658;
  --y-fotos: 1891;
  transition: transform var(--dur-larga) var(--ease-pantalla);
}
.escenario[data-paso-actual="4"] .lz-pagina--ficha { transform: translateY(calc(var(--y-lista) * -1 * var(--px))); transition-delay: 1.5s; }
.estado[data-paso-actual="5"] .lz-pagina--ficha { transform: translateY(calc(var(--y-fotos) * -1 * var(--px))); }
/* El aviso se enseña por su final, que es donde está el recibo: anclado al final de la ficha y no a
   un número, porque al escalar la réplica el texto parte en otras líneas. 732 es el alto visible. */
.estado[data-paso-actual="6"] .lz-pagina--ficha { transform: translateY(calc(-100% + 732 * var(--px))); }

/* La firma: el botón se hunde y la limpieza pasa a verde. */
.estado:not(.p8) .tras-firma,
.estado.p8 .hasta-firma { opacity: 0; visibility: hidden; }
/* La vista del cierre llega oculta desde el paso 7, y sin esto lo que tiene que desaparecer ya
   heredaba el «hidden»: la firma no se veía nunca (verificación visual del 11-sep). */
.pv-cierre .hasta-firma { visibility: visible; }
.escenario[data-paso-actual="8"] .hasta-firma { transition-delay: 1.4s, 1.64s; }
.escenario[data-paso-actual="8"] .tras-firma { transition-delay: 1.5s, 0s; }
.escenario[data-paso-actual="8"] .pn-firmar { animation: hundir 260ms var(--ease-estandar) 1.1s; }
@keyframes hundir { 50% { transform: scale(0.96); } }

/* 08:00: el dedo cae sobre el enlace. */
.escenario[data-paso-actual="3"] .lz-toque { animation: toque 700ms var(--ease-salida) 0.6s both; }
@keyframes toque { from { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } }

/* Lo que acaba de cambiar en el panel se subraya mientras dura su paso. */
.estado[data-paso-actual="2"] [data-destello~="2"]::after,
.estado[data-paso-actual="3"] [data-destello~="3"]::after,
.estado[data-paso-actual="4"] [data-destello~="4"]::after,
.estado[data-paso-actual="6"] [data-destello~="6"]::after,
.estado[data-paso-actual="7"] [data-destello~="7"]::after { opacity: 1; }
.escenario [data-destello]::after { transition-delay: 0.3s; }

/* ── Cascadas: el reparto y las fotos ─────────────────────────────────────────────────── */

.cae,
.foto-llega {
  transition: opacity var(--dur-media) var(--ease-salida), transform var(--dur-media) var(--ease-salida);
  transition-delay: calc(var(--i, 0) * var(--escalonado));
}
.escenario.vivo:not(.repartido) .cae { opacity: 0; transform: scale(0.6); }
.escenario.vivo:not(.p5) .foto-llega { opacity: 0; transform: scale(0.96); }
.escenario[data-paso-actual="5"] .foto-llega { transition-delay: calc(0.4s + var(--i, 0) * var(--escalonado)); }

/* ── Las figuras de cada paso (sin JavaScript) ──────────────────────────────────────────── */

.figura-paso { margin: var(--e-6) 0 0; display: grid; }
.figura-paso .lz-vista,
.figura-paso .pn-vista,
.portada-figura .lz-vista,
.portada-figura .pn-vista { opacity: 1; visibility: visible; }
.figura-paso .panel { aspect-ratio: 4 / 3; }
/* En móvil el celular va entero de ancho útil pero recortado de alto, y sin montarse sobre el panel:
   un texto encima de otro no se lee. */
.figura-paso .movil { width: min(70%, 16.5rem); aspect-ratio: 410 / 700; margin: var(--e-5) auto 0; }
.figura-paso--solo-panel .panel { aspect-ratio: 4 / 3; }
.figura-paso figcaption { margin-top: var(--e-3); font-size: var(--t-etiqueta); color: var(--tinta-3); }
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .figura-paso { grid-template-columns: 7fr 4fr; align-items: end; column-gap: var(--e-5); }
  .figura-paso .movil { width: 100%; margin: 0; }
  .figura-paso figcaption { grid-column: 1 / -1; }
  .figura-paso--solo-panel { grid-template-columns: minmax(0, 1fr); }
  .figura-paso--solo-panel .panel { max-width: var(--medida); }
}

/* ── Movimiento reducido: los estados cambian igual, pero de golpe ────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .estado *,
  .estado *::before,
  .estado *::after,
  .escenario-movil { transition-delay: 0s !important; transition-duration: 0s !important; animation: none !important; }
  .escenario.vivo:not(.repartido) .cae,
  .escenario.vivo:not(.p5) .foto-llega { opacity: 1; transform: none; }
  .escenario[data-paso-actual="4"] .lz-pagina--ficha { transform: none; }
  .digito.cambia { animation: none; }
}

/* ── Detalles de cada momento ─────────────────────────────────────────────────────────── */

/* 09:10: su tramo azul en la barra del día y su primer cuadradito. */
.estado.p4 .pv-tablero .pn-dia-pista { --curso: 8.3%; }
.estado.p4 .pv-tablero .pip-empece { background: var(--pn-azul); }

/* Lo que va dentro de una línea de texto no guarda su hueco: está o no está. */
.estado:not(.p2) .aparece-2, .estado:not(.p3) .aparece-3, .estado:not(.p4) .aparece-4,
.estado:not(.p5) .aparece-5, .estado:not(.p6) .aparece-6, .estado:not(.p7) .aparece-7,
.estado:not(.p8) .aparece-8, .estado:not(.p9) .aparece-9 { display: none; }

/* WhatsApp no es la app: sin sus pestañas, y la conversación ocupa la pantalla entera. */
.estado[data-paso-actual="3"] .lz-tabs { opacity: 0; visibility: hidden; }
.lz-vista.v-chat { bottom: 0; }

/* El botón y su recibo ocupan el mismo sitio y el mismo ancho: el recibo sustituye al botón. */
.alterna--ancha { display: grid; }
.alterna--ancha > * { justify-self: stretch; }

/* Un número que cambia de ancho se alinea por la derecha: «6/21», no «6 /21». */
.alterna--fin > * { justify-self: end; }

/* En la figura de móvil el celular va recortado (568 de diseño a la vista): el aviso se enseña por
   su final, que es donde está el recibo. Medido con scripts/medir-ficha.mjs. */
.figura-paso[data-paso-actual="6"] .lz-pagina--ficha { transform: translateY(calc(-100% + 568 * var(--px))); }
/* ── Coreografía, tras la verificación visual del 11-sep ─────────────────────────────── */

/* 09:10: primero se ve «Empecé», luego se pulsa, luego llega el recibo; y solo después baja la ficha. */
.lz-acciones .hasta-3 { visibility: visible; }
.escenario[data-paso-actual="4"] .lz-acciones .hasta-3 { transition-delay: 0.7s, 0.94s; }
.escenario[data-paso-actual="4"] .lz-acciones .desde-4 { transition-delay: 0.9s; }
.escenario[data-paso-actual="4"] .lz-recibo.desde-4 { transition-delay: 1.05s; }

/* 10:40: «Enviar aviso» se va cuando se envía, no antes; «Cargador» se pulsa cuando ya está a la vista. */
.escenario[data-paso-actual="6"] .ficha-aviso .hasta-5 { transition-delay: 1.45s, 1.69s; }
.escenario[data-paso-actual="6"] .lz-detalle .pulsa-6 { transition-delay: 1s; }

/* Hacia atrás no hay coreografía que esperar. */
.escenario[data-sentido="atras"] .lz-pagina--ficha { transition-delay: 0s !important; }

/* El calendario llena el panel del escenario: sin pie, sobraban 116 px en blanco. */
.escenario .pv-calendario .pn-cal-dia { min-height: calc(330 * var(--px)); }

/* ── Las figuras de móvil y tableta ───────────────────────────────────────────────────── */

/* En una figura nada acaba de cambiar: sin destellos, que se quedaban fijos y ensuciaban la alarma. */
.figura-paso [data-destello]::after,
.portada-figura [data-destello]::after { content: none; }
/* Sin animación, el círculo del toque parecía una mancha sobre el enlace. */
.figura-paso .lz-toque,
.portada-figura .lz-toque { display: none; }
.panel--estrecho .pn-zona { display: none; }
/* Cada figura enseña lo que cuenta su paso, no lo que cabe arriba del panel. */
.figura-paso[data-paso-actual="2"] .pn-cifras,
.figura-paso[data-paso-actual="7"] .pn-cifras { display: none; }
.figura-paso[data-paso-actual="8"] .panel { aspect-ratio: 1; }
.figura-paso .pv-cierre .pn-semaforo { display: none; }

/* Sin JavaScript en escritorio no hay escenario: cada figura va a dos columnas junto a su texto. */
@media (min-width: 64rem) {
  html:not(.js) .figura-paso { grid-template-columns: 7fr 4fr; align-items: end; column-gap: var(--e-5); max-width: 56rem; }
  html:not(.js) .figura-paso .movil { width: 100%; margin: 0; }
  html:not(.js) .figura-paso--solo-panel { grid-template-columns: minmax(0, 1fr); }
}

/* El rótulo de cada paso, como pie visible de su figura (sin JS). Con JS lo dice el escenario en
   escritorio, y en móvil el texto del paso: queda solo para lectores de pantalla, porque el escenario
   es decorativo. */
.figura-pie { margin-top: var(--e-3); font-size: var(--t-etiqueta); line-height: 1.5; color: var(--tinta-2); max-width: var(--medida); }
.figura-pie b { display: block; color: var(--tinta); font-weight: 600; }
.js .figura-pie { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 10:40: el aviso es más alto que la pantalla, y se enseña por su final (el recibo). Lo que queda cortado
   arriba se funde, como un contenido que se ha desplazado, en vez de partir una fila de chips. */
.estado[data-paso-actual="6"] .v-ficha {
  -webkit-mask-image: linear-gradient(transparent, #000 calc(44 * var(--px)));
  mask-image: linear-gradient(transparent, #000 calc(44 * var(--px)));
}