/* ═══════════════════════════════════════════════════════════════════════════
   Aplicación de vencimientos — la capa cinematográfica
   ═══════════════════════════════════════════════════════════════════════════

   QUÉ ES ESTE ARCHIVO. Se carga DESPUÉS de sistema.css y app.css y no los
   reemplaza: los viste. Todo lo que ya protege el trabajo diario —la densidad
   de la tabla, las pastillas de estado con color, forma y texto, los 44 px del
   dedo, la impresión— sigue viviendo allá y aquí no se toca. Si este archivo
   no cargara, la aplicación seguiría entera y usable, solo que sobria.

   DE DÓNDE SALE. David pidió nivel Awwwards con dos referencias: vectrfl.com
   (atmósfera de un solo tono, una línea de luz que une los nodos, pasos
   numerados) y el reloj de 60fps (letras que ruedan). Y pidió que el cliente
   sienta la web y la aplicación como una sola cosa. Los valores de aquí están
   MEDIDOS de la portada nueva de la web con `estudiar.js`, no elegidos a ojo:

     · fondo de escena  #17131F            · lila de acento  #D4ABED
     · píldora          #E8D5F7 / #241330  · rótulo agua     #B8D9D9
     · titular Plus Jakarta Sans 600, tracking −0,075 em, interlínea 0,99
     · acento en cursiva DM Serif Display
     · la cinta: #AD69CE → #D4ABED → #7BE3D3

   DÓNDE VA LA ENERGÍA Y DÓNDE NO. Las referencias son vitrinas: se miran una
   vez. Esto se usa ocho horas al día. Así que el momento cinematográfico
   completo va en las pantallas de ENTRADA, que se ven una vez por sesión, y en
   el interior la misma artesanía se pone al servicio del dato: transiciones
   entre pantallas, números que ruedan, líneas que se dibujan, filas que
   entran. Todo dura menos de un segundo, nada se repite mientras se trabaja, y
   nada secuestra el desplazamiento.

   LA FIRMA: «la línea que avisa». La cinta de la web convertida en la cadena
   de avisos —30, 15, 7, 3, 1 y 0 días— con un pulso de luz que la recorre. Es
   lo mismo a tres escalas: el escenario de entrada, el eje del tablero y el
   medidor de cada fila.

   LO QUE SE QUITÓ, por el consejo de Chanel: botones magnéticos y revelados al
   desplazarse. En una herramienta de trabajo esconden contenido y cansan.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 0 · Tokens de la escena ────────────────────────────────────────────────
   La escena es SIEMPRE oscura, con esquema claro u oscuro del sistema: es el
   fondo de la portada de la web y tiene que ser el mismo. Por eso estos
   valores no cambian en la sección de modo oscuro de abajo.

   Los colores de estado sobre la noche no pueden ser los del papel: el rojo de
   señal #B3261E sobre #17131F da 2,6:1. Estos son sus versiones luminosas,
   medidas contra #17131F: rojo 8,3:1 · ámbar 11,1:1 · verde 11,2:1. */
:root{
  --noche:#17131F;
  --noche-2:#1F1829;
  --noche-panel:rgba(35,26,48,.74);
  --luz:#F7F4FB;
  --luz-media:rgba(247,244,251,.74);   /* 9,0:1 sobre la noche */
  --luz-tenue:rgba(247,244,251,.62);   /* 6,6:1: rótulos, nunca párrafos */
  --lila:#D4ABED;                      /* 9,8:1 */
  --pildora:#E8D5F7;
  --pildora-tinta:#241330;
  --agua-luz:#B8D9D9;
  --iris:linear-gradient(90deg,#AD69CE 0%,#D4ABED 52%,#7BE3D3 100%);
  --mal-luz:#FF8F85;
  --ojo-luz:#F2C27B;
  --bien-luz:#7FDDB0;
  --serif:"DM Serif Display",Georgia,"Times New Roman",serif;

  /* El grano. Un SVG de ruido de 160 px que el navegador rasteriza UNA vez y
     repite como azulejo: no es un filtro vivo, no cuesta por fotograma. */
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* El texto para lectores de pantalla: el número real detrás del contador que
   gira, el titular entero detrás de sus palabras sueltas. */
.sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* La banda del encabezado se sale del contenedor hasta los bordes de la
   ventana con `50% − 50vw`. En Windows `100vw` incluye la barra de
   desplazamiento, así que se pasaba 17 px por la derecha y aparecía una barra
   horizontal. `clip` corta ese sobrante sin volver al documento un contenedor
   de desplazamiento, que es lo que rompería la cabecera pegajosa. */
html{ overflow-x:clip }


/* ── 1 · Transiciones entre pantallas ───────────────────────────────────────
   Transiciones de documento a documento, las nativas del navegador: sin
   JavaScript y sin convertir la aplicación en una de página única. Al pasar
   del tablero a clientes, la cabecera se queda quieta, la píldora de la
   sección activa se DESLIZA a su nuevo sitio y el contenido cambia con un
   fundido corto.

   Las dos mitades del fundido duran lo mismo y usan la misma curva a
   propósito. Con tiempos distintos hay un instante en que ni la pantalla vieja
   ni la nueva cubren del todo, y por el hueco se ve el lienzo claro: la banda
   oscura parpadea. Con tiempos iguales las opacidades suman uno en todo
   momento.

   Donde el navegador no las soporta, la navegación es la de siempre. */
@view-transition{ navigation:auto }
.app-cab{ view-transition-name:cabecera }
.app-lienzo{ view-transition-name:principal }
.app-nav a[aria-current]{ view-transition-name:nav-activa }
.app-filtros a[aria-current]{ view-transition-name:filtro-activo }

::view-transition-old(principal){ animation:cin-vt-sale .34s cubic-bezier(.4,0,.2,1) both }
::view-transition-new(principal){ animation:cin-vt-entra .34s cubic-bezier(.4,0,.2,1) both }
::view-transition-group(nav-activa),
::view-transition-group(filtro-activo){ animation-duration:.46s;
  animation-timing-function:cubic-bezier(.34,1.3,.64,1) }
@media (prefers-reduced-motion:reduce){ @view-transition{ navigation:none } }
@keyframes cin-vt-sale { to  { opacity:0; transform:translateY(-10px) } }
@keyframes cin-vt-entra{ from{ opacity:0; transform:translateY(16px) } }


/* ── 2 · El escenario de entrada ────────────────────────────────────────────
   Equipo y portal del cliente. Es la continuación directa de la portada de la
   web: el mismo fondo, las mismas dos luces difuminadas, las mismas órbitas,
   el mismo logo sobre su pastilla clara. Quien llega desde el sitio no tiene
   que notar que cambió de sistema. */
.cin-noche{ background:var(--noche); color:var(--luz); color-scheme:dark }

.cin-escena{
  position:relative; min-height:100svh; overflow:hidden; isolation:isolate;
  background:var(--noche);
  display:grid; grid-template-rows:auto 1fr auto;
}
/* Las dos luces de la portada, con sus valores exactos. */
.cin-escena__fondo{ position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 55% at 78% 46%,#753E9240,transparent 62%),
    radial-gradient(ellipse 48% 42% at 64% 84%,#168D8433,transparent 58%),
    radial-gradient(ellipse 50% 50% at 8% 0%,#771571 -20%,transparent 60%);
}
.cin-escena__fondo::before,.cin-escena__fondo::after{
  content:""; position:absolute; border:1px solid #C9A5DF22; border-radius:50%;
}
.cin-escena__fondo::before{ width:64vw; height:64vw; right:-14%; top:-16%;
  transform:rotateX(62deg) rotate(-24deg) }
.cin-escena__fondo::after { width:46vw; height:46vw; right:-2%; top:4%;
  transform:rotateX(42deg) rotate(36deg) }
/* El grano va encima de todo, en «overlay»: no ensucia, da materia. */
.cin-escena::after{ content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background-image:var(--grano); opacity:.07; mix-blend-mode:overlay }

.cin-escena__cab{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:clamp(18px,2.4vw,26px) clamp(20px,5vw,72px); position:relative; z-index:3;
}
/* El logo va sobre una pastilla clara, como en la cabecera de la web: el
   logo es morado y sobre la noche no se lee. */
.cin-logo{ display:inline-flex; align-items:center; min-height:44px;
  background:#F7F5F9; border-radius:12px; padding:6px 13px;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6);
  transition:transform .25s var(--sal-larga) }
.cin-logo:hover{ transform:translateY(-2px) }
.cin-logo img{ height:40px; width:auto }
.cin-volver{
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  padding:0 18px; border-radius:999px; font-size:14px; font-weight:500;
  color:var(--luz); box-shadow:inset 0 0 0 1px rgba(247,244,251,.28);
  transition:background-color .25s var(--sal), box-shadow .25s var(--sal);
}
.cin-volver:hover{ background:rgba(247,244,251,.08); box-shadow:inset 0 0 0 1px rgba(247,244,251,.5) }
.cin-volver svg{ width:15px; height:15px; transition:transform .3s var(--sal-larga) }
.cin-volver:hover svg{ transform:translateX(-3px) }

.cin-escena__cuerpo{
  position:relative; z-index:3;
  display:grid; align-content:center; gap:clamp(14px,2.2vh,24px);
  padding:clamp(4px,1.5vh,22px) clamp(20px,5vw,72px) clamp(18px,3vh,34px);
  grid-template-columns:minmax(0,min(900px,100%));
}
.cin-rotulo{
  display:inline-flex; align-items:center; gap:10px; margin:0;
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--agua-luz);
}
.cin-rotulo::before{ content:""; width:7px; height:7px; border-radius:50%;
  background:#7BE3D3; box-shadow:0 0 0 4px rgba(123,227,211,.16), 0 0 14px #7BE3D3 }

/* ── El titular ──────────────────────────────────────────────────────────── */
.cin-titular{
  margin:0; font-family:var(--cuerpo); font-weight:600;
  font-size:clamp(48px,6.3vw,96px); line-height:.98; letter-spacing:-.068em;
  color:var(--luz); text-wrap:balance;
}
/* La palabra en cursiva con serifa: el mismo acento que los capítulos de la
   web. La serifa en cursiva se ve más chica que la grotesca al mismo cuerpo,
   así que sube un 6 %, y su tracking es otro: apretada como la grotesca, sus
   letras se tocan. */
.cin-titular em{ font-family:var(--serif); font-style:italic; font-weight:400;
  letter-spacing:-.02em; font-size:1.06em; color:var(--lila) }

/* PALABRA POR PALABRA, EN MÁSCARA. Cada palabra sube desde debajo de su propio
   renglón. La máscara es MÁS GRANDE que el renglón —relleno de .16 em arriba
   y .14 abajo, devuelto con margen negativo—: con la máscara del tamaño justo
   se cortan las tildes y las colas de la g y la coma, y en español eso es una
   falta de ortografía a tamaño de cartel. Ya pasó una vez en esta web. */
.pal{ display:inline-block; overflow:hidden; vertical-align:top;
  padding:.16em .04em .14em; margin:-.16em -.04em -.14em }
.pal > span{ display:inline-block }

.cin-escena__sub{ margin:0; max-width:46ch; font-size:clamp(15px,1.15vw,17px);
  line-height:1.7; color:var(--luz-media) }

/* ── La caja de ingreso: cristal oscuro ────────────────────────────────────
   Opaca al 74 % y con desenfoque: la línea pasa por detrás y se ve borrosa,
   que es lo que da la profundidad, pero el texto de la caja nunca compite con
   ella. El filo es un degradado de 1 px hecho con máscara, el recurso de las
   referencias de David. */
.app-caja.cin-caja{
  max-width:none; width:100%; position:relative; isolation:isolate;
  background:var(--noche-panel); background-image:none;
  -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5);
  border-radius:26px; padding:clamp(20px,2vw,28px) clamp(20px,2.2vw,30px);
  max-width:460px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07);
  color:var(--luz);
}
.cin-caja::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:-1;
  background:linear-gradient(140deg,rgba(212,171,237,.55),rgba(212,171,237,.08) 38%,
    rgba(123,227,211,.08) 64%,rgba(123,227,211,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
/* El reflejo que sigue al cursor. Lo mueve publico/js/cine.js; sin él, la luz
   se queda quieta arriba y la caja se ve igual de bien. */
.cin-caja::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
  background:radial-gradient(380px circle at var(--mx,30%) var(--my,-10%),rgba(212,171,237,.13),transparent 62%);
}
.cin-caja h1{ font-size:clamp(22px,2vw,26px); font-weight:600; letter-spacing:-.035em;
  color:var(--luz); margin:0 0 6px }
.cin-caja > p{ color:var(--luz-media) }
.cin-caja .app-campo label{ color:var(--luz-tenue) }
.cin-caja .app-campo input,
.cin-caja .app-campo select{
  background:rgba(247,244,251,.06); color:var(--luz);
  border-color:rgba(247,244,251,.18); min-height:46px; border-radius:14px;
}
.cin-caja .app-campo{ margin-bottom:12px!important }
.cin-caja > p{ margin-bottom:16px }
.cin-caja .app-campo input:hover{ border-color:rgba(212,171,237,.5) }
.cin-caja .app-campo input:focus{ border-color:var(--lila);
  box-shadow:0 0 0 4px rgba(212,171,237,.18); background:rgba(247,244,251,.09) }
/* El autocompletado de Chrome pinta el campo de amarillo pálido y la letra de
   negro, sobre la caja oscura: un parche claro con el correo ilegible. */
.cin-caja input:-webkit-autofill{ -webkit-text-fill-color:var(--luz);
  -webkit-box-shadow:0 0 0 40px #2A2138 inset; caret-color:var(--luz) }
.cin-caja .btn--pri{ background:var(--pildora); background-image:none; color:var(--pildora-tinta);
  min-height:52px; font-size:15.5px; box-shadow:0 14px 34px -16px rgba(212,171,237,.9) }
.cin-caja .btn--pri:hover{ background:#fff; transform:translateY(-2px);
  box-shadow:0 18px 40px -16px rgba(212,171,237,1) }
.cin-caja .btn--sec{ background:transparent; color:var(--luz);
  box-shadow:inset 0 0 0 1px rgba(247,244,251,.3) }
.cin-caja .btn--sec:hover{ color:var(--luz); background:rgba(247,244,251,.08) }
.cin-caja p a:not(.btn){ color:var(--lila) }
.cin-caja .app-error{ color:var(--mal-luz) }
.cin-caja .app-codigo-visible{ color:var(--lila) }
/* Los avisos dentro de la caja, en su versión de noche. */
.cin-caja .app-nota{ background:rgba(247,244,251,.05); color:var(--luz-media);
  box-shadow:inset 0 0 0 1px rgba(247,244,251,.12) }
.cin-caja .app-nota strong{ color:var(--luz) }
.cin-caja .app-nota--mal{ background:rgba(255,143,133,.1); box-shadow:inset 0 0 0 1px rgba(255,143,133,.34) }
.cin-caja .app-nota--mal::before{ background:var(--mal-luz) }
.cin-caja .app-nota--bien{ background:rgba(127,221,176,.09); box-shadow:inset 0 0 0 1px rgba(127,221,176,.3) }
.cin-caja .app-nota--bien::before{ background:var(--bien-luz) }
.cin-caja .app-nota--ojo{ background:rgba(242,194,123,.09); box-shadow:inset 0 0 0 1px rgba(242,194,123,.3) }
.cin-caja .app-nota--ojo::before{ background:var(--ojo-luz) }

/* El pie de la caja: «si olvidó la contraseña», «pedir otro código». Llevaba
   el color escrito en línea, pensado para el papel claro; sobre la caja oscura
   ese gris no se leía, y un estilo en línea le gana a cualquier regla de aquí.
   Ahora es una clase. */
.app-caja__pie{ margin:16px 0 0; font-size:var(--t-xs); color:var(--tenue); line-height:1.6 }
.cin-caja .app-caja__pie{ color:var(--luz-tenue) }
.cin-caja .app-caja__pie strong{ color:var(--luz) }

.cin-escena__pie{ position:relative; z-index:3; margin:0;
  padding:0 clamp(20px,5vw,72px) clamp(18px,2.4vw,26px);
  display:flex; flex-wrap:wrap; gap:6px 22px; justify-content:space-between;
  font-size:11px; letter-spacing:.17em; text-transform:uppercase; color:var(--luz-tenue) }


/* ── 3 · La línea que avisa ─────────────────────────────────────────────────
   El SVG lo arma src/cine.js y trae en su `style` los tiempos: --trazo,
   --arranque y --periodo. Cada nodo trae dos más: --t (cuándo llega el trazo
   a él) y --d (cuándo lo cruza el pulso). Están calculados allá sobre el largo
   REAL de la curva, para que el destello caiga justo cuando pasa la luz.

   Si se cambia VIAJE en cine.js, hay que cambiar el 72 % de @keyframes
   cin-pulso aquí abajo. Es el único valor que no puede viajar como variable:
   un porcentaje de @keyframes no acepta var(). */
.lin{ position:absolute; top:0; left:0; width:100%; height:100svh; z-index:-1; pointer-events:none }
.lin-halo,.lin-cuerpo,.lin-nucleo,.lin-pulso,.lin-pulso-halo{
  fill:none; stroke-linecap:round; stroke-linejoin:round }
/* Tres trazos del mismo recorrido, de ancho decreciente y opacidad creciente:
   el ojo los lee como un resplandor. Sin filtros de desenfoque, que en un
   teléfono de gama baja cuestan un fotograma entero. */
.lin-halo  { stroke:url(#lin-iris); stroke-width:22; opacity:.09 }
.lin-cuerpo{ stroke:url(#lin-iris); stroke-width:7;  opacity:.3 }
.lin-nucleo{ stroke:url(#lin-iris); stroke-width:2.4 }
.lin-pulso-halo{ stroke:#fff; stroke-width:16; opacity:.22;
  stroke-dasharray:.05 3; stroke-dashoffset:.11 }
.lin-pulso { stroke:#fff; stroke-width:3.2;
  stroke-dasharray:.05 3; stroke-dashoffset:.11 }

.lin-campo{ opacity:.5 }
.lin-aro  { fill:var(--noche); stroke:#D4ABED; stroke-width:1.5;
  transform-box:fill-box; transform-origin:center }
.lin-punto{ fill:#F7F4FB; transform-box:fill-box; transform-origin:center }
.lin-nodo--fin .lin-aro{ stroke:#7BE3D3; stroke-width:2 }
.lin-nodo--fin .lin-punto{ fill:#7BE3D3 }
.lin-onda{ fill:none; stroke:#7BE3D3; stroke-width:1.4; opacity:0;
  transform-box:fill-box; transform-origin:center }
.lin-rotulo{ font-family:var(--cuerpo); font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; fill:rgba(247,244,251,.66) }
.lin-rotulo--fin{ fill:#B8F0E7; font-size:13px }


/* ── 4 · La cabecera del interior ───────────────────────────────────────────
   Oscura, como la de la web sobre su portada. Se pega arriba y, al bajar,
   pasa por encima del lienzo claro como una lámina de cristal ahumado. */
.app-cab{
  /* Al 84 % se veía gris: lo que dejaba pasar era el lienzo CLARO de atrás, y
     84 % de noche sobre 16 % de lavanda da un gris violáceo, no la berenjena de
     la web. Al 96 % sigue siendo cristal —se nota al pasar la tabla por
     debajo— y ya es del color de la banda. */
  background:rgba(23,19,31,.96);
  -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:none; color:var(--luz);
}
.app-cab::after{ height:1px; background:var(--iris); opacity:.7 }
.app-cab[data-pegada]{ background:rgba(23,19,31,.92);
  box-shadow:0 14px 30px -18px rgba(23,19,31,.6) }
.app-cab__marca .cin-logo{ padding:4px 10px; border-radius:10px }
.app-cab__marca .cin-logo img{ height:30px }
.app-cab__marca span{ color:var(--agua-luz); border-left-color:rgba(247,244,251,.18) }
.app-nav a{ color:var(--luz-media) }
.app-nav a:hover{ color:var(--luz); background:rgba(247,244,251,.08) }
/* La sección activa, en la píldora lila de la web. Es la pieza que se desliza
   de un sitio al otro al cambiar de pantalla. */
.app-nav a[aria-current]{ color:var(--pildora-tinta); background:var(--pildora); font-weight:700 }
.app-quien{ color:var(--luz-tenue) }
.app-quien b{ color:var(--luz) }
.app-quien a{ color:var(--lila) }
.app-quien a:hover{ background:rgba(247,244,251,.08) }


/* ── 5 · La banda de cada pantalla ──────────────────────────────────────────
   El primer bloque de cada pantalla —su título— se vuelve una banda oscura que
   sale de la cabecera y se abre en el lienzo con las esquinas de abajo
   redondeadas. Es el paso de la escena de la web al papel de trabajo: arriba
   el nombre de lo que se está viendo, a lo grande; abajo, el trabajo, denso.

   src/html.js garantiza que este bloque sea el PRIMER hijo de <main>: si hay
   avisos permanentes, los pinta después de la banda y no antes. Ordenarlo con
   CSS haría que el lector de pantalla y el tabulador recorrieran un orden
   distinto del que se ve. */
.app-lienzo{ --arriba:clamp(18px,2.6vw,28px) }
.app-lienzo > .app-titulo:first-child,
.app-lienzo > .cin-banda:first-child{
  position:relative; isolation:isolate;
  margin:calc(-1 * var(--arriba)) calc(50% - 50vw) clamp(18px,2.4vw,26px);
  padding:clamp(30px,4.4vw,58px) calc(50vw - 50% + clamp(16px,3vw,30px)) clamp(30px,3.6vw,46px);
  background:
    radial-gradient(ellipse 42% 120% at 88% 0%,#753E924A,transparent 70%),
    radial-gradient(ellipse 30% 90% at 62% 120%,#168D8433,transparent 70%),
    radial-gradient(ellipse 40% 90% at 0% 0%,#77157140,transparent 70%),
    var(--noche);
  color:var(--luz);
  border-radius:0 0 clamp(26px,3vw,42px) clamp(26px,3vw,42px);
  overflow:hidden;
}
/* El grano, en su propia capa y al 6 %. La primera versión lo metía como una
   capa más del fondo, sin opacidad: el ruido es opaco y tapaba la banda
   entera, que se veía como la estática de un televisor. */
.app-lienzo > .app-titulo:first-child::before,
.app-lienzo > .cin-banda:first-child::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grano); opacity:.06; mix-blend-mode:overlay;
}
/* El filo de luz al pie de la banda: la cinta de la web, a un píxel. */
.app-lienzo > .app-titulo:first-child::after,
.app-lienzo > .cin-banda:first-child::after{
  content:""; position:absolute; left:8%; right:8%; bottom:0; height:1px;
  background:var(--iris); opacity:.55; z-index:-1 }

.app-lienzo > .app-titulo:first-child{ align-items:flex-end }
.app-lienzo > .app-titulo:first-child h1{
  font-size:clamp(34px,4.3vw,58px); font-weight:600; letter-spacing:-.055em;
  line-height:1.02; color:var(--luz); text-wrap:balance }
.app-lienzo > .app-titulo:first-child h1 em{ font-family:var(--serif); font-style:italic;
  font-weight:400; letter-spacing:-.015em; color:var(--lila) }
.app-lienzo > .app-titulo:first-child p{ color:var(--luz-media); font-size:15px; margin-top:10px }
/* El rótulo con punto («Su cuenta») usa el teal oscuro de apoyo, medido para
   papel claro. Sobre la banda se va al agua luminosa de la web, la misma del
   rótulo de la entrada. */
.app-lienzo > .app-titulo:first-child .app-rotulo{ color:var(--agua-luz); margin:0 0 10px;
  font-size:11.5px; letter-spacing:.2em }   /* la regla de párrafos de arriba le ponía 15 px */
.app-lienzo > .app-titulo:first-child .app-rotulo::before{ background:#7BE3D3;
  box-shadow:0 0 0 4px rgba(123,227,211,.16), 0 0 14px #7BE3D3 }
.app-lienzo > .app-titulo:first-child .btn--pri{ background:var(--pildora); background-image:none;
  color:var(--pildora-tinta); box-shadow:0 14px 34px -16px rgba(212,171,237,.8) }
.app-lienzo > .app-titulo:first-child .btn--pri:hover{ background:#fff }
.app-lienzo > .app-titulo:first-child .btn--sec{ background:transparent; color:var(--luz);
  box-shadow:inset 0 0 0 1px rgba(247,244,251,.32) }
.app-lienzo > .app-titulo:first-child .btn--sec:hover{ background:rgba(247,244,251,.08); color:var(--luz) }
/* Una pastilla de estado dentro de la banda va sobre su propia placa clara.
   Sus colores están medidos contra papel; sobre la noche, el ámbar y el verde
   de señal no pasan. La placa conserva los tres —color, forma y texto— tal
   como se midieron. */
.app-lienzo > .app-titulo:first-child .app-ins{ outline:4px solid #F7F4FB; background-clip:padding-box }
.app-lienzo > .app-titulo:first-child .app-ins:not(.app-ins--vencida):not(.app-ins--fecha_invalida){ background-color:#F7F4FB }


/* ── 6 · La banda del tablero y su eje ──────────────────────────────────────
   Los conteos no van en seis tarjetas iguales —la composición más común que
   existe— sino sentados sobre la línea del tiempo: lo vencido a la izquierda
   de «Hoy», lo que viene a la derecha. Dice de un golpe cómo se reparten los
   vencimientos, que es lo que seis tarjetas no dicen. */
.cin-banda__cab{ display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; flex-wrap:wrap }
.cin-banda__texto{ max-width:640px }
.cin-banda .cin-titular{ font-size:clamp(42px,5.6vw,80px); letter-spacing:-.062em; margin:14px 0 0 }
.cin-banda__sub{ margin:14px 0 0; color:var(--luz-media); font-size:15px; max-width:56ch; line-height:1.6 }

/* Las dos cifras de operación —los que no van a avisar, los avisos de hoy—
   no son posiciones en el tiempo, así que no van en el eje: van en pastillas
   de cristal arriba a la derecha, como los paneles pequeños de vectrfl. */
.cin-chips{ display:flex; flex-direction:column; gap:10px; align-items:flex-end }
.cin-chip{
  display:inline-flex; align-items:center; gap:12px; min-height:48px;
  padding:8px 18px 8px 14px; border-radius:999px;
  background:rgba(247,244,251,.06); box-shadow:inset 0 0 0 1px rgba(247,244,251,.14);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  font-size:13px; color:var(--luz-media);
}
.cin-chip b{ font-size:22px; font-weight:600; letter-spacing:-.03em; color:var(--luz);
  display:inline-flex; align-items:center; line-height:1 }
.cin-chip::before{ content:""; width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--luz-tenue) }
.cin-chip--mal::before{ background:var(--mal-luz); box-shadow:0 0 0 4px rgba(255,143,133,.18) }
.cin-chip--mal b{ color:var(--mal-luz) }
.cin-chip--bien::before{ background:var(--bien-luz) }

.eje{ --n-tam:clamp(38px,4.6vw,66px); --alto-n:calc(var(--n-tam) * 1.1 + 14px);
  position:relative; margin-top:clamp(28px,4vw,46px) }
.eje__lista{ list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:1fr 64px 1fr 1fr 1fr; align-items:start }
/* La línea del eje. Se dibuja de izquierda a derecha al llegar. */
.eje__lista::before{
  content:""; position:absolute; left:0; right:-2%; height:2px;
  top:calc(var(--alto-n) + 7px - 1px); border-radius:2px;
  background:var(--iris);
  box-shadow:0 0 14px rgba(212,171,237,.55), 0 0 2px rgba(255,255,255,.4);
  transform-origin:left center;
}
/* El pulso: una luz corta que recorre el eje DOS veces al llegar y se detiene.
   Mientras se trabaja, nada late en la banda. */
.eje__lista::after{
  content:""; position:absolute; left:0; width:120px; height:4px;
  top:calc(var(--alto-n) + 7px - 2px); border-radius:4px; opacity:0;
  background:linear-gradient(90deg,transparent,#fff 60%,transparent);
  filter:blur(1px);
}
.eje-nodo{ display:grid; grid-template-rows:var(--alto-n) 14px auto auto; justify-items:start;
  position:relative; padding-right:12px }
.eje-nodo__n{ align-self:end; padding-bottom:14px; font-size:var(--n-tam); font-weight:600;
  letter-spacing:-.045em; line-height:1; color:var(--luz) }
.eje-nodo__punto{ width:14px; height:14px; border-radius:50%; background:var(--noche);
  box-shadow:0 0 0 2px currentColor, 0 0 16px currentColor; color:var(--luz-media) }
.eje-nodo__r{ margin-top:16px; font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--luz) }
.eje-nodo__d{ margin-top:4px; font-size:13px; color:var(--luz-tenue) }
/* El color de cada nodo va en el número Y en el punto; el punto de lo vencido
   es el único relleno, que es la forma que lo distingue sin color. */
.eje-nodo--mal { color:var(--mal-luz) }
.eje-nodo--ojo { color:var(--ojo-luz) }
.eje-nodo--acc { color:var(--lila) }
.eje-nodo--bien{ color:var(--bien-luz) }
.eje-nodo--mal .eje-nodo__n,.eje-nodo--ojo .eje-nodo__n,
.eje-nodo--acc .eje-nodo__n,.eje-nodo--bien .eje-nodo__n{ color:inherit }
.eje-nodo--mal .eje-nodo__punto,.eje-nodo--ojo .eje-nodo__punto,
.eje-nodo--acc .eje-nodo__punto,.eje-nodo--bien .eje-nodo__punto{ color:inherit }
.eje-nodo--mal .eje-nodo__punto{ background:currentColor }
/* «Hoy»: una marca vertical que parte el eje en pasado y futuro. */
.eje-hoy{ position:relative; display:flex; justify-content:center; height:calc(var(--alto-n) + 44px) }
.eje-hoy::before{ content:""; position:absolute; top:calc(var(--alto-n) - 16px); bottom:0;
  left:50%; width:1px; background:linear-gradient(transparent,rgba(247,244,251,.55) 30%,rgba(247,244,251,.55) 70%,transparent) }
.eje-hoy span{ position:absolute; top:calc(var(--alto-n) - 40px); font-size:10.5px;
  font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--agua-luz) }


/* ── 7 · Números que ruedan ─────────────────────────────────────────────────
   Cada cifra es una columna de dos vueltas de dígitos; gira la primera entera
   y se detiene en la segunda. La altura de la ventana es 1,1 em y no 1 em: a
   1 em exacto, en Plus Jakarta Sans, el 6 y el 9 pierden un píxel de la curva
   de arriba. */
.rueda{ display:inline-flex; vertical-align:bottom }
.rueda__v{ display:inline-flex; height:1.1em; line-height:1.1em; overflow:hidden }
.rueda__c{ display:flex; flex-direction:column;
  transform:translateY(calc((10 + var(--n)) * -1.1em)) }
.rueda__c > span{ display:block; height:1.1em; text-align:center }


/* ── 8 · Tarjetas: el reflejo que sigue al cursor ───────────────────────────
   Una luz lila muy baja que sigue al puntero por encima de cada tarjeta.
   Va DETRÁS del contenido —capa −1 dentro de su propio contexto—, así que no
   tiñe ni una letra. Solo con ratón: con el dedo no hay cursor que seguir. */
.app-tarjeta,.app-cifra{ position:relative; isolation:isolate }
.app-tarjeta{ border-radius:20px }
.app-tarjeta::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,-300px),rgba(173,105,206,.09),transparent 60%);
  opacity:0; transition:opacity .35s var(--sal);
}
@media (pointer:fine){ .app-tarjeta:hover::before{ opacity:1 } }


/* ── 9 · El medidor de cada fila, como la línea que avisa ───────────────────
   El mismo medidor de siempre —la ventana que vigila el motor, las muescas de
   los hitos que faltan— con una cabeza de luz donde está hoy la obligación.
   Sigue midiendo 6 px: a 3 px se leía como un rayón. La trama de lo vencido
   se conserva: es la forma que lo distingue sin color. */
.vig{ overflow:visible }
.vig__c{ overflow:visible }
.vig__c::after{
  content:""; position:absolute; right:-4px; top:50%; width:11px; height:11px;
  border-radius:50%; background:var(--app-vig-color);
  transform:translateY(-50%);
  box-shadow:0 0 0 3px var(--papel2), 0 0 12px var(--app-vig-color);
}
.vig[data-estado="vencida"] .vig__c::after{ right:-2px }


/* ── 10 · La cadena por etapas, en la ficha ─────────────────────────────────
   El único lugar con marcadores numerados, y es porque aquí el orden ES la
   información: 30, 15, 7, 3, 1 y el día del vencimiento. La línea de la
   izquierda se llena hasta la última etapa enviada; la próxima se agranda. */
.etapas{ list-style:none; margin:6px 0 0; padding:0; position:relative; display:grid; gap:4px }
.etapas::before,.etapas::after{ content:""; position:absolute; left:21px; top:22px; bottom:22px;
  width:2px; border-radius:2px }
.etapas::before{ background:var(--filete) }
.etapas::after{ background:linear-gradient(#AD69CE,#771571); bottom:auto;
  height:calc((100% - 44px) * var(--avance)); box-shadow:0 0 12px rgba(173,105,206,.55) }
.eta{ display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:center;
  padding:10px 12px 10px 0; border-radius:14px; position:relative; z-index:1;
  transition:background-color .25s var(--sal) }
.eta__n{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--tenue);
  background:var(--papel2); box-shadow:inset 0 0 0 1.5px var(--filete), var(--s1) }
.eta__cuerpo{ display:grid; gap:1px }
.eta__t{ font-weight:600; letter-spacing:-.01em; color:var(--tinta) }
.eta__e{ font-size:13px; color:var(--tenue) }
.eta--enviado .eta__n{ background:var(--acento); color:#fff; box-shadow:0 6px 16px -6px rgba(119,21,113,.7) }
.eta--enviado .eta__e::before{ content:"\2713  "; font-weight:700; color:var(--ok) }
.eta--proximo{ background:rgba(119,21,113,.06); box-shadow:inset 0 0 0 1px rgba(119,21,113,.16) }
.eta--proximo .eta__n{ background:var(--papel2); color:var(--acento);
  box-shadow:inset 0 0 0 2px var(--acento), 0 0 0 5px rgba(119,21,113,.12) }
.eta--proximo .eta__t{ font-size:18px; font-weight:700; color:var(--acento) }
.eta--proximo .eta__e{ font-weight:600; color:var(--tinta) }
.eta--omitido .eta__t,.eta--omitido .eta__e{ color:var(--tenue) }
.eta--omitido .eta__t{ text-decoration:line-through; text-decoration-color:var(--filete) }
.eta--omitido .eta__n{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--filete);
  border:1.5px dashed var(--filete) }


/* ── 11 · Filtros: una píldora que se desliza ───────────────────────────────
   Los cuatro filtros del tablero son enlaces, y al cambiar de uno a otro la
   píldora activa viaja de su sitio al nuevo —es la transición de documento,
   §1—. En el interior es el segundo gesto memorable, después de la banda. */
.app-filtros{ gap:4px; padding:5px; border-radius:999px; width:fit-content; max-width:100%;
  background:var(--papel2); box-shadow:var(--filo-doble), var(--s1) }
.app-filtros a{ box-shadow:none; background:transparent }
.app-filtros a:hover{ box-shadow:none; background:rgba(119,21,113,.06) }
.app-filtros a[aria-current]{ background:var(--noche); color:var(--luz);
  box-shadow:0 8px 18px -10px rgba(23,19,31,.8) }
/* El buscador de clientes también es un .app-filtros, pero es un formulario:
   no va en píldora. */
form.app-filtros{ padding:0; background:transparent; box-shadow:none; width:auto; border-radius:0 }


/* ── 12 · El movimiento ─────────────────────────────────────────────────────
   Todo lo que se mueve vive dentro de este bloque, y TODO va detrás de la
   clase .cine-vivo, que pone la cabecera de la página solo cuando el navegador
   pinta su primer fotograma de verdad.

   POR QUÉ LA CLASE. Las entradas arrancan el contenido invisible —la caja de
   ingreso en opacidad 0, el contador en 0, el medidor vacío, la línea sin
   trazar— y dependen del reloj de animación para mostrarlo. Con la pestaña
   oculta, en segundo plano o en algunos modos de ahorro de energía, ese reloj
   se CONGELA, y el contenido se quedaba así: el formulario invisible y los
   contadores diciendo cero cuando había diez vencidas. Pasó en el panel del
   navegador de la aplicación de escritorio, medido: el reloj avanzó 0 ms en
   600 ms y la caja seguía en opacidad 0.

   Con la clase, un reloj congelado deja todo QUIETO Y EN SU ESTADO FINAL, igual
   que el movimiento reducido. Y cuando la pestaña vuelve a verse, el primer
   fotograma pone la clase y la entrada se reproduce entonces, que es cuando
   alguien la mira. Sin JavaScript tampoco hay entrada, y está bien: la página
   se ve entera, solo que quieta. */
@media (prefers-reduced-motion:no-preference){

  /* Titulares palabra por palabra. */
  .cine-vivo .cin-titular .pal > span{ animation:cin-subir .95s cubic-bezier(.22,1,.36,1)
    calc(.12s + var(--i) * .075s) both }
  .cine-vivo .app-lienzo > .app-titulo:first-child h1{ animation:cin-aparecer .8s cubic-bezier(.22,1,.36,1) .05s both }
  .cine-vivo .app-lienzo > .app-titulo:first-child p,
  .cine-vivo .app-lienzo > .app-titulo:first-child > :not(div){ animation:cin-aparecer .8s cubic-bezier(.22,1,.36,1) .16s both }
  .cine-vivo .cin-escena .cin-rotulo{ animation:cin-aparecer .7s cubic-bezier(.22,1,.36,1) both }
  .cine-vivo .cin-escena__sub{ animation:cin-aparecer .9s cubic-bezier(.22,1,.36,1) .45s both }
  .cine-vivo .cin-caja{ animation:cin-caja 1s cubic-bezier(.22,1,.36,1) .55s both }
  .cine-vivo .cin-banda__sub{ animation:cin-aparecer .9s cubic-bezier(.22,1,.36,1) .35s both }
  .cine-vivo .cin-chip{ animation:cin-aparecer .7s cubic-bezier(.22,1,.36,1) .5s both }
  .cine-vivo .cin-chip + .cin-chip{ animation-delay:.6s }

  /* La línea del escenario: se dibuja, los nodos saltan cuando el trazo los
     alcanza, y después sale un pulso cada --periodo que los hace destellar. */
  .cine-vivo .lin-halo,
  .cine-vivo .lin-cuerpo,
  .cine-vivo .lin-nucleo{ stroke-dasharray:1 1.02; stroke-dashoffset:1;
    animation:cin-trazar var(--trazo) linear var(--arranque) forwards }
  .cine-vivo .lin-pulso,
  .cine-vivo .lin-pulso-halo{ animation:cin-pulso var(--periodo) linear
    calc(var(--arranque) + var(--trazo) + .2s) infinite }
  .cine-vivo .lin-nodo{ animation:cin-nodo .6s cubic-bezier(.34,1.56,.64,1) var(--t) both }
  .cine-vivo .lin-nodo .lin-punto{ animation:cin-destello var(--periodo) ease-out var(--d) infinite }
  .cine-vivo .lin-nodo .lin-aro{ animation:cin-destello-aro var(--periodo) ease-out var(--d) infinite }
  .cine-vivo .lin-onda{ animation:cin-onda 3.2s cubic-bezier(.22,1,.36,1) calc(var(--t) + .4s) infinite }
  .cine-vivo .lin-onda--2{ animation-delay:calc(var(--t) + 1.47s) }
  .cine-vivo .lin-onda--3{ animation-delay:calc(var(--t) + 2.54s) }
  .cine-vivo .lin-campo{ animation:cin-respirar 6s ease-in-out 2s infinite alternate }

  /* El eje del tablero. */
  .cine-vivo .eje__lista::before{ animation:cin-eje 1.3s cubic-bezier(.22,1,.36,1) .25s both }
  .cine-vivo .eje__lista::after{ animation:cin-eje-pulso 1.6s cubic-bezier(.4,0,.2,1) 1.1s 2 }
  .cine-vivo .eje-nodo{ animation:cin-aparecer .8s cubic-bezier(.22,1,.36,1) calc(.4s + var(--k) * .12s) both }
  .cine-vivo .eje-nodo__punto{ animation:cin-nodo .7s cubic-bezier(.34,1.56,.64,1) calc(.55s + var(--k) * .16s) both }
  .cine-vivo .eje-nodo--mal .eje-nodo__punto{ animation:cin-nodo .7s cubic-bezier(.34,1.56,.64,1) .55s both,
    cin-latido 2.2s ease-out 1.6s 3 }
  .cine-vivo .eje-hoy{ animation:cin-aparecer .8s cubic-bezier(.22,1,.36,1) .5s both }

  /* Los números. */
  .cine-vivo .rueda__c{ animation:cin-rodar 1.5s cubic-bezier(.16,1,.3,1) calc(.3s + var(--k) * .1s) both }
  .cine-vivo .eje-nodo--ojo .rueda__c{ animation-delay:calc(.42s + var(--k) * .1s) }
  .cine-vivo .eje-nodo--acc .rueda__c{ animation-delay:calc(.54s + var(--k) * .1s) }
  .cine-vivo .eje-nodo--bien .rueda__c{ animation-delay:calc(.66s + var(--k) * .1s) }

  /* Las filas entran en cascada: las diez primeras, en poco más de medio
     segundo. Las demás ya están cuando se llega a verlas. Se animan las
     celdas y no la fila porque un <tr> no acepta transform en todos los
     motores. */
  .cine-vivo .app-tabla tbody td{ animation:cin-fila .5s cubic-bezier(.22,1,.36,1) .12s both }
  .cine-vivo .app-tabla tbody tr:nth-child(2) td{ animation-delay:.155s }
  .cine-vivo .app-tabla tbody tr:nth-child(3) td{ animation-delay:.19s }
  .cine-vivo .app-tabla tbody tr:nth-child(4) td{ animation-delay:.225s }
  .cine-vivo .app-tabla tbody tr:nth-child(5) td{ animation-delay:.26s }
  .cine-vivo .app-tabla tbody tr:nth-child(6) td{ animation-delay:.295s }
  .cine-vivo .app-tabla tbody tr:nth-child(7) td{ animation-delay:.33s }
  .cine-vivo .app-tabla tbody tr:nth-child(8) td{ animation-delay:.365s }
  .cine-vivo .app-tabla tbody tr:nth-child(9) td{ animation-delay:.4s }
  .cine-vivo .app-tabla tbody tr:nth-child(n+10) td{ animation-delay:.435s }

  /* Los medidores se llenan hasta hoy, y la cabeza de luz viaja con el borde
     del relleno. Se anima el ANCHO y no un recorte: un recorte de la barra
     cortaba también la cabeza, que es más alta que la barra y sobresale. */
  .cine-vivo .vig__c{ animation:cin-llenar 1.1s cubic-bezier(.22,1,.36,1) .35s both }

  /* La cadena de la ficha. */
  .cine-vivo .etapas::after{ animation:cin-crecer 1.2s cubic-bezier(.22,1,.36,1) .3s both }
  .cine-vivo .eta{ animation:cin-aparecer .6s cubic-bezier(.22,1,.36,1) calc(.15s + var(--k) * .07s) both }
  .cine-vivo .eta--proximo .eta__n{ animation:cin-latido-claro 2.4s ease-out 1.2s 3 }

  /* Las tarjetas suben apenas al llegar. */
  .cine-vivo .app-lienzo > .app-tarjeta,
  .cine-vivo .app-lienzo > .app-cifras{ animation:cin-aparecer .7s cubic-bezier(.22,1,.36,1) .08s both }
  .cine-vivo .app-lienzo > .app-tarjeta ~ .app-tarjeta{ animation-delay:.16s }

  /* SOLO en el escenario de entrada. La misma pastilla del logo va en la
     cabecera del interior, y con la regla suelta el logo «entraba» otra vez en
     CADA cambio de pantalla: desaparecía y volvía en medio segundo. Medido en
     el video, cuadro a cuadro: el brillo del recuadro caía de 211 a 33. La
     cabecera es lo único que tiene que quedarse quieto. */
  .cine-vivo .cin-escena .cin-logo,
  .cine-vivo .cin-volver{ animation:cin-aparecer .7s cubic-bezier(.22,1,.36,1) .1s both }
}

@keyframes cin-subir   { from{ transform:translateY(118%) rotate(4deg) } }
@keyframes cin-aparecer{ from{ opacity:0; transform:translateY(18px) } }
@keyframes cin-caja    { from{ opacity:0; transform:translateY(28px) scale(.985) } }
@keyframes cin-trazar  { to  { stroke-dashoffset:0 } }
/* VIAJE = .72 en src/cine.js. El pulso entra por detrás del principio del
   recorrido (.11) y sale por delante del final (−1,06); el resto del periodo
   espera fuera de la línea. */
@keyframes cin-pulso{
  0%   { stroke-dashoffset:.11 }
  72%  { stroke-dashoffset:-1.06 }
  100% { stroke-dashoffset:-1.06 }
}
@keyframes cin-nodo { from{ transform:scale(0); opacity:0 } }
@keyframes cin-destello{ 0%{ transform:scale(1.9); fill:#fff } 16%,100%{ transform:scale(1) } }
@keyframes cin-destello-aro{ 0%{ transform:scale(1.7); stroke-width:2.5 } 20%,100%{ transform:scale(1) } }
@keyframes cin-onda{ 0%{ transform:scale(1); opacity:.75 } 100%{ transform:scale(5.2); opacity:0 } }
@keyframes cin-respirar{ from{ opacity:.3 } to{ opacity:.62 } }
@keyframes cin-eje{ from{ transform:scaleX(0); opacity:.2 } }
@keyframes cin-eje-pulso{ 0%{ left:-10%; opacity:0 } 15%{ opacity:1 } 85%{ opacity:1 } 100%{ left:98%; opacity:0 } }
@keyframes cin-latido{ 0%{ box-shadow:0 0 0 2px currentColor,0 0 0 0 rgba(255,143,133,.6) }
  100%{ box-shadow:0 0 0 2px currentColor,0 0 0 18px rgba(255,143,133,0) } }
@keyframes cin-latido-claro{ 0%{ box-shadow:inset 0 0 0 2px var(--acento),0 0 0 0 rgba(119,21,113,.35) }
  100%{ box-shadow:inset 0 0 0 2px var(--acento),0 0 0 16px rgba(119,21,113,0) } }
@keyframes cin-rodar{ from{ transform:translateY(0) } }
@keyframes cin-fila { from{ opacity:0; transform:translateY(10px) } }
@keyframes cin-llenar{ from{ width:0 } }
@keyframes cin-crecer{ from{ height:0 } }


/* ── 13 · Pantalla angosta ──────────────────────────────────────────────── */
/* La leyenda del pie es decorativa: en pantallas bajas se va, para que la
   caja de ingreso quepa entera sin desplazarse. */
@media (max-height:980px){ .cin-escena__pie{ display:none } }
@media (max-width:900px){
  .cin-escena__cuerpo{ align-content:start; padding-top:clamp(20px,5vh,40px) }
  /* En el teléfono la línea no cabe al lado del texto: se queda abajo, detrás
     de la caja, y se apaga hacia arriba para no pasar por el titular. */
  .lin{ -webkit-mask:linear-gradient(transparent 38%,#000 72%); mask:linear-gradient(transparent 38%,#000 72%) }
  .cin-escena__pie{ display:none }
}
@media (max-width:760px){
  .cin-titular{ font-size:clamp(44px,12.4vw,64px); letter-spacing:-.06em }
  .cin-logo img{ height:32px }
  .cin-volver{ padding:0 14px; font-size:13px }
  .cin-banda__cab{ flex-direction:column }
  .cin-chips{ flex-direction:row; flex-wrap:wrap; align-items:flex-start }
  .eje{ --n-tam:clamp(30px,9vw,44px) }
  .eje__lista{ grid-template-columns:1fr 18px 1fr 1fr 1fr }
  .eje-nodo{ padding-right:4px }
  .eje-nodo__r{ font-size:10px; letter-spacing:.1em }
  .eje-nodo__d{ display:none }
  .eje-hoy span{ font-size:9px; letter-spacing:.12em }
  .app-filtros{ width:100%; justify-content:space-between }
}


/* ── 14 · Esquema oscuro del sistema ────────────────────────────────────────
   La escena y la banda ya son oscuras; lo que cambia es el papel de trabajo,
   que sistema.css ya invierte. Aquí solo se ajusta lo que esta capa añadió
   sobre ese papel: la cabeza del medidor recortaba contra papel claro y el
   lavado de la etapa próxima estaba pensado para él. */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .app-lienzo > .app-titulo:first-child,
  :root:not([data-tema="claro"]) .app-lienzo > .cin-banda:first-child{
    background:#100D16; box-shadow:inset 0 -1px 0 rgba(212,171,237,.14) }
  :root:not([data-tema="claro"]) .eta--proximo{ background:rgba(233,165,228,.07);
    box-shadow:inset 0 0 0 1px rgba(233,165,228,.2) }
  :root:not([data-tema="claro"]) .app-filtros a[aria-current]{ background:var(--pildora); color:var(--pildora-tinta) }
}


/* ── 15 · Impresión ─────────────────────────────────────────────────────────
   Nada de esto va al papel: ni la banda oscura, ni la línea, ni los relojes.
   Una ficha impresa para una reunión tiene que salir en tinta sobre blanco. */
@media print{
  .lin,.cin-escena__fondo,.cin-escena::after,.cin-chips{ display:none!important }
  .app-lienzo > .app-titulo:first-child,
  .app-lienzo > .cin-banda:first-child{ background:#fff!important; color:#000!important;
    margin:0 0 12px; padding:0; border-radius:0 }
  .app-lienzo > .app-titulo:first-child h1,
  .eje-nodo__n,.eje-nodo__r,.cin-titular{ color:#000!important }
  .rueda__c{ transform:translateY(calc((10 + var(--n)) * -1.1em))!important; animation:none!important }
  ::view-transition-group(*){ animation:none!important }
}