/* ============================================================================
   Sistema OSECAC — Tokens
   ----------------------------------------------------------------------------
   Tres capas, y la dependencia va siempre hacia abajo:

       primitivas  →  semánticas  →  de componente

   • Primitivas: el valor crudo. Nunca se usan en un componente.
   • Semánticas: el rol. Es lo que se usa el 95 % del tiempo.
   • De componente: sólo cuando un componente necesita una medida propia.

   Dos temas, uno por portal:
       [data-tema="nocturna"]  → portal interno   (aurora oscura)
       [data-tema="diurno"]    → portal empresas  (aurora clara, azul institucional)

   El tema se declara en <html> o <body>. Nada fuera de este archivo define un
   color: si un componente necesita un color que acá no existe, se agrega acá.
   ========================================================================== */

:root{
  /* ── CAPA 1 · PRIMITIVAS ────────────────────────────────────────────────
     Valores crudos. No se referencian desde componentes. */

  /* Aurora — los pigmentos del fondo */
  --p-indigo-900:#2A2270;  --p-teal-800:#0E4E5E;   --p-violeta-900:#4A1C63;
  --p-noche:#0A0916;
  --p-cobalto-300:#8FBCFF; --p-aqua-300:#79DCEE;   --p-arena-200:#FFD2B9;
  --p-cobalto-200:#A8CBFF; --p-dia:#EAF1FB;

  /* Acentos de marca */
  --p-turquesa-400:#6FE3D2;  --p-turquesa-tinta:#05211D;
  --p-azul-700:#14509E;      --p-azul-tinta:#FFFFFF;

  /* Tintas */
  --p-tinta-clara:#F3F1FA;   /* texto sobre aurora oscura */
  --p-tinta-oscura:#0F1B33;  /* texto sobre aurora clara  */

  /* Vidrio — opacidades de superficie */
  --p-vidrio-oscuro:rgba(255,255,255,.078);
  --p-vidrio-oscuro-alto:rgba(255,255,255,.088);
  --p-vidrio-claro:rgba(255,255,255,.52);
  --p-vidrio-claro-alto:rgba(255,255,255,.66);

  /* Cromo — el vidrio de la superficie FIJA por la que pasa el contenido.
     No puede ser tan tenue como un panel: si se ve lo que va por debajo, la
     barra deja de leerse. Va tintada hacia el fondo del tema, no hacia el
     blanco, y siempre acompañada de desenfoque. */
  --p-cromo-oscuro:rgba(12,10,25,.86);
  --p-cromo-claro:rgba(238,244,253,.86);

  /* Semáforo del dominio — NUNCA es el color de marca */
  --p-ambar-400:#FFB48A;  --p-ambar-800:#9A3D0B;
  --p-verde-300:#79E9B4;  --p-verde-800:#0F6B45;
  --p-gris-300:#C3C0D6;   --p-gris-700:#465268;
  --p-azulado-300:#9FC4FF;--p-indigo-700:#54329E;
  --p-rojo-300:#FF9C93;   --p-rojo-800:#9E2116;
  --p-bermellon:#C42E1C;  --p-bermellon-claro:#FF6A5A;

  /* Escala de espaciado — base 4 */
  --esp-0:0; --esp-1:2px;  --esp-2:4px;  --esp-3:6px;  --esp-4:8px;
  --esp-5:10px; --esp-6:12px; --esp-7:16px; --esp-8:20px; --esp-9:24px;
  --esp-10:32px; --esp-11:40px; --esp-12:56px;

  /* Escala tipográfica */
  --fs-micro:9px;   --fs-etiqueta:10.5px; --fs-menor:11px;  --fs-dato:12px;
  --fs-base:13px;   --fs-medio:15px;      --fs-titulo:17px; --fs-cifra:21px;
  --fs-cifra-lg:23px;
  /* 🔑 **El titular de una portada, y sólo eso** (T089). La escala llegaba hasta 23 px, que es
     un escalón por encima de la cifra de una tarjeta —21 px— y por lo tanto **no alcanza para un
     titular**: si la cifra que la persona vino a saber mide casi lo mismo que las otras cuatro,
     no es un titular, es una más.

     Va en `clamp` y no en un valor fijo porque es la única medida del sistema que se lee de un
     metro de distancia en escritorio y a treinta centímetros en el teléfono del inspector. El
     piso son 38 px: por debajo deja de mandar. */
  --fs-titular:clamp(38px, 6vw, 52px);
  --peso-normal:400; --peso-medio:500; --peso-fuerte:600; --peso-negro:700;
  --track-titulo:-.025em; --track-cifra:-.035em;

  /* Tracking de versalitas — TRES especies, no una.

     El rótulo en mayúsculas necesita más separación que el texto corriente, pero **cuánta
     más depende de la familia**: la mono ya viene con las letras sueltas y pide menos; la
     Figtree en micro y negrita pide más para no empastarse. Un solo número para las dos deja
     una de las dos mal.

         --track-etiqueta   rótulo de dato, en --f-dato (mono)
         --track-rotulo     rótulo de texto, en --f-texto a --fs-micro y --peso-fuerte
         --track-seccion    separador de grupo en la navegación. Airea a propósito

     Hasta el 15/09/2026 estos dieciséis rótulos usaban CINCO valores distintos —.06, .08,
     .09, .12, .16— y doce estaban escritos a mano en el componente. Dos rótulos hermanos no
     se veían iguales y nadie sabía cuál copiar. Ver `AUDITORIA-DE-IDENTIDAD.md` § 2. */
  --track-etiqueta:.12em; --track-rotulo:.09em; --track-seccion:.16em;
  --alto-linea:1.45;

  /* Familias — las tres se sirven desde el proyecto, nunca desde un CDN.
     Los archivos y sus @font-face están en `tipografias.css`, que se carga antes
     que esta hoja. El respaldo de cada una está puesto para que el texto se lea
     desde el primer cuadro mientras la definitiva viaja (`font-display: swap`). */
  --f-titulo:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-texto:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-dato:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* Radios — la escala, y la regla que el sistema ya seguía, ahora escrita.

     `taste-frontend` §4.4 SHAPE CONSISTENCY LOCK admite sistemas mixtos **con la condición de
     que la regla esté documentada y se cumpla en todos lados**. La nuestra:

         interactivo (botón, campo, chip, pestaña, insignia)  →  --radio-pastilla
         panel (panel, hoja, tarjeta, totalizador)            →  --radio-panel
         control de formulario denso                          →  --radio-control
         celda de tabla, regla, separador                     →  --radio-0

     Es la opción «all-pill for interactive» de la skill, que es una de las tres válidas. No
     estaba escrita en ninguna parte: ése era el único incumplimiento real, y es lo que
     arregla este comentario. Un componente nuevo ya no necesita copiarle el radio al de al
     lado. */
  --radio-0:0; --radio-1:4px; --radio-2:6px; --radio-3:10px;
  --radio-4:14px; --radio-5:16px; --radio-6:20px; --radio-pastilla:999px;

  /* Vidrio — desenfoque */
  --desenfoque-cromo:14px; --desenfoque-panel:24px; --desenfoque-velo:18px;
  --saturacion-vidrio:160%;

  /* Movimiento — las curvas del sistema */
  --dur-instante:120ms; --dur-corta:180ms; --dur-media:340ms;
  --dur-larga:420ms; --dur-rodado:900ms; --dur-cielo:900ms; --dur-sello:1500ms;
  /* Cuánto espera el sistema antes de admitir que está esperando (gesto 11). Por
     debajo de esto, mostrar un indicador se ve como un parpadeo, no como una carga. */
  --demora-espera:140ms;
  --curva-salida:cubic-bezier(.2,.8,.2,1);
  --curva-hoja:cubic-bezier(.19,1,.22,1);
  --curva-rebote:cubic-bezier(.2,1.4,.35,1);
  --curva-cielo:cubic-bezier(.62,.01,.32,1);

  /* ── El cielo (gesto 10) ────────────────────────────────────────────────
     Las dos auroras viven acá, en primitivas y **fuera de los dos temas**, y
     no adentro de cada uno. El motivo es el gesto: las dos capas conviven en
     la pantalla durante el giro, así que las dos tienen que poder nombrarse
     con cualquier tema puesto. Un token que sólo existe bajo `[data-tema=X]`
     no se puede pintar mientras el tema es el otro.

     Cada aurora es sólo **las manchas**, sin piso: el piso lo pone el disco
     que gira, y una mancha con fondo opaco lo taparía. */
  --aurora-manchas-nocturna:
    radial-gradient(760px 440px at 6% -6%,  var(--p-indigo-900)  0%, transparent 62%),
    radial-gradient(700px 460px at 96% 6%,  var(--p-teal-800)    0%, transparent 60%),
    radial-gradient(820px 520px at 52% 118%,var(--p-violeta-900) 0%, transparent 58%);
  --aurora-manchas-diurno:
    radial-gradient(700px 420px at 2% -10%, var(--p-cobalto-300) 0%, transparent 62%),
    radial-gradient(660px 400px at 99% 0%,  var(--p-aqua-300)    0%, transparent 60%),
    radial-gradient(740px 470px at 56% 118%,var(--p-arena-200)   0%, transparent 60%),
    radial-gradient(520px 340px at 30% 52%, var(--p-cobalto-200) 0%, transparent 66%);

  /* El degradé del disco: el día arriba, la noche abajo, y el horizonte —con su
     banda de crepúsculo— apretado contra la costura. Girar el disco 180° es lo
     que hace amanecer o anochecer.

     ⚠️ **El horizonte va apretado a propósito, y esto costó una vuelta.** La
     primera versión repartía los tonos parejo —el día de 0 a 45 %, la noche de
     55 a 100 %— y quedaba precioso y equivocado: por geometría, lo que se ve en
     pantalla es siempre la franja **17 %–46 %** del disco, así que en reposo la
     noche se veía violeta e índigo en vez de casi negra. El fondo dejaba de ser
     el nuestro.

     Con el horizonte encerrado entre **47 % y 53 %**, en reposo la pantalla es
     exactamente el piso del tema —`--p-dia` o `--p-noche`, con 1 % de margen a
     cada lado— y se ve igual que antes de este gesto. El horizonte no está
     ausente: está **fuera de cuadro**, y entra sólo mientras el disco gira, que
     es cuando tiene que verse. A 90° la pantalla muestra cerca del 44 % del
     degradé, así que una banda del 6 % cruza como una cuña bien visible.

     Los tres tonos del medio son la mezcla calculada entre el último del día y
     el primero de la noche: no son colores nuevos, es el camino entre dos que ya
     teníamos. */
  --cielo-degrade:linear-gradient(to bottom,
    var(--p-dia) 0%, var(--p-dia) 47%,
    var(--p-cobalto-200) 48%, var(--p-arena-200) 48.8%,
    #D2A5A4 49.2%, #A5778E 50%, #774A79 50.8%,
    var(--p-violeta-900) 51.2%, var(--p-indigo-900) 52%,
    var(--p-noche) 53%, var(--p-noche) 100%);

  /* Puntos de quiebre — se consultan con container queries, no con el viewport */
  --bp-tableta:1080px; --bp-telefono:640px;

  /* Áreas táctiles mínimas (regla innegociable) */
  --tactil-min:44px; --tactil-comodo:46px; --tactil-pestana:52px;
}

/* ── CAPA 2 · SEMÁNTICAS ──────────────────────────────────────────────────
   El rol, no el pigmento. Es lo que consumen los componentes. */

[data-tema="nocturna"]{
  /* Le dice al navegador de qué color es el fondo, y con eso deja de dibujar sus
     propios controles en la variante equivocada: el desplegable, la barra de
     scroll, el selector de fecha y el autocompletado. Sin esto, un formulario
     sobre fondo oscuro aparece con cajas blancas que ningún CSS nuestro toca —
     son del navegador, no de la página. */
  color-scheme: dark;

  /* `--aurora` sigue siendo el fondo completo —manchas sobre piso— porque hay
     quien lo usa entero: el lienzo del gesto 8. El armazón, en cambio, arma las
     dos capas por separado para poder girarlas. */
  --aurora:var(--aurora-manchas-nocturna),var(--cielo-piso);
  --aurora-manchas:var(--aurora-manchas-nocturna);
  --cielo-piso:var(--p-noche);
  /* 180° = la mitad de noche del disco arriba. Es el tema por defecto. */
  --cielo-giro:180deg;

  --superficie:var(--p-vidrio-oscuro);
  --superficie-alta:var(--p-vidrio-oscuro-alto);
  --cromo:var(--p-cromo-oscuro);
  --superficie-hover:rgba(255,255,255,.07);
  --superficie-activa:rgba(255,255,255,.13);

  --borde:rgba(255,255,255,.12);
  --borde-vivo:rgba(111,227,210,.42);
  --separador:rgba(255,255,255,.06);

  --texto:var(--p-tinta-clara);
  --texto-2:rgba(243,241,250,.62);
  --texto-3:rgba(243,241,250,.40);

  --acento:var(--p-turquesa-400);
  --acento-tinta:var(--p-turquesa-tinta);
  --barrido:rgba(111,227,210,.13);
  --velo:rgba(6,4,18,.30);
  --sombra-panel:0 18px 44px -22px rgba(0,0,0,.75);
  /* Reposo y elevación de los controles: al pasar el mouse el botón sube y
     despliega su sombra; al presionar se hunde con `--sombra-control-presion`. */
  --sombra-control:0 1px 2px rgba(0,0,0,.34);
  --sombra-control-alta:0 10px 20px -6px rgba(0,0,0,.62),0 3px 7px -3px rgba(0,0,0,.5);
  /* Presionado (27/09/2026): más baja que el reposo. El control se hunde en la superficie en vez
     de volver a apoyarse — la misma sombra, pegada al borde. */
  --sombra-control-presion:0 0 1px rgba(0,0,0,.34);
  --sombra-hoja:0 40px 90px -30px rgba(0,0,0,.85);
  --sello:var(--p-bermellon-claro);

  --barra:rgba(255,255,255,.20);
  --barra-hover:rgba(255,255,255,.34);

  /* Semáforo de estados del acta: color + texto, nunca color solo */
  --estado-deuda:var(--p-ambar-400);   --estado-deuda-borde:rgba(255,180,138,.42); --estado-deuda-fondo:rgba(255,140,80,.14);
  --estado-sin:var(--p-verde-300);     --estado-sin-borde:rgba(121,233,180,.40);   --estado-sin-fondo:rgba(60,203,142,.13);
  --estado-cancelada:var(--p-gris-300);--estado-cancelada-borde:rgba(195,192,214,.34); --estado-cancelada-fondo:rgba(255,255,255,.07);
  --estado-plan:var(--p-azulado-300);  --estado-plan-borde:rgba(159,196,255,.40);  --estado-plan-fondo:rgba(110,160,255,.14);
  --estado-intimada:var(--p-rojo-300); --estado-intimada-borde:rgba(255,156,147,.42); --estado-intimada-fondo:rgba(255,110,100,.14);

  /* **T116**: Activo/Inactivo de una cuenta o de un legajo de inspector no es un estado del
     acta — es un concepto distinto (acceso, no ciclo de vida legal) y comparte vocabulario con
     `.estado--cancelada`/`.estado--intimada` sólo por casualidad de qué clase estaba a mano.
     Mismos valores que `--estado-sin` (verde) y `--estado-cancelada` (gris): no son colores
     nuevos, son nombres propios para no seguir prestando los del acta. Ver
     `diseno/pantallas/interno/16-usuarios-e-inspectores.md` §1. */
  --estado-activo:var(--p-verde-300);     --estado-activo-borde:rgba(121,233,180,.40);
  --estado-activo-fondo:rgba(60,203,142,.13);
  --estado-inactivo:var(--p-gris-300);    --estado-inactivo-borde:rgba(195,192,214,.34);
  --estado-inactivo-fondo:rgba(255,255,255,.07);

  /* El aviso — una advertencia, no un error.
     El semáforo de arriba no tenía amarillo, y el candidato natural —`--estado-deuda`— es
     `#FFB48A` sobre fondo naranja: **en tema nocturno se lee rojizo**. Un mes de la nómina que
     no cierra puede ser una licencia o una pasantía, y el rojo prejuzga exactamente lo que se
     le pide juzgar al inspector. Ver `diseno/pantallas/interno/06b-nomina-especificacion.md` §3. */
  --aviso:#F5DC8A;
  --aviso-fondo:rgba(245,214,110,.15);
  --aviso-borde:rgba(245,220,138,.42);
  --aviso-marca:#F5DC8A;

  --radio-panel:var(--radio-4);
  --radio-control:var(--radio-3);
}

[data-tema="diurno"]{
  color-scheme: light;

  --aurora:var(--aurora-manchas-diurno),var(--cielo-piso);
  --aurora-manchas:var(--aurora-manchas-diurno);
  --cielo-piso:var(--p-dia);
  --cielo-giro:0deg;

  --superficie:var(--p-vidrio-claro);
  --superficie-alta:var(--p-vidrio-claro-alto);
  --cromo:var(--p-cromo-claro);
  --superficie-hover:rgba(20,80,158,.09);
  --superficie-activa:rgba(20,80,158,.11);

  --borde:rgba(255,255,255,.74);
  --borde-vivo:rgba(20,80,158,.32);
  --separador:rgba(15,27,51,.09);

  --texto:var(--p-tinta-oscura);
  --texto-2:rgba(15,27,51,.66);
  --texto-3:rgba(15,27,51,.44);

  --acento:var(--p-azul-700);
  --acento-tinta:var(--p-azul-tinta);
  --barrido:rgba(20,80,158,.10);
  --velo:rgba(233,241,252,.44);
  --sombra-panel:0 16px 40px -22px rgba(15,45,110,.42);
  --sombra-control:0 1px 2px rgba(15,45,110,.18);
  --sombra-control-alta:0 10px 20px -6px rgba(15,45,110,.34),0 3px 7px -3px rgba(15,45,110,.24);
  --sombra-control-presion:0 0 1px rgba(15,45,110,.18);
  --sombra-hoja:0 40px 90px -30px rgba(15,45,110,.5);
  --sello:var(--p-bermellon);

  --barra:rgba(15,27,51,.22);
  --barra-hover:rgba(15,27,51,.38);

  --estado-deuda:var(--p-ambar-800);   --estado-deuda-borde:rgba(154,61,11,.30);  --estado-deuda-fondo:rgba(255,170,110,.24);
  --estado-sin:var(--p-verde-800);     --estado-sin-borde:rgba(15,107,69,.28);    --estado-sin-fondo:rgba(70,200,150,.20);
  --estado-cancelada:var(--p-gris-700);--estado-cancelada-borde:rgba(70,82,104,.26); --estado-cancelada-fondo:rgba(255,255,255,.55);
  --estado-plan:var(--p-indigo-700);   --estado-plan-borde:rgba(84,50,158,.28);   --estado-plan-fondo:rgba(150,120,240,.19);
  --estado-intimada:var(--p-rojo-800); --estado-intimada-borde:rgba(158,33,22,.28); --estado-intimada-fondo:rgba(255,120,110,.20);

  /* **T116** — ver la nota de la variante nocturna. */
  --estado-activo:var(--p-verde-800);     --estado-activo-borde:rgba(15,107,69,.28);
  --estado-activo-fondo:rgba(70,200,150,.20);
  --estado-inactivo:var(--p-gris-700);    --estado-inactivo-borde:rgba(70,82,104,.26);
  --estado-inactivo-fondo:rgba(255,255,255,.55);

  /* El aviso, en su versión diurna: **no es el mismo color aclarado**. La tinta va oscura sobre
     un fondo cálido claro para que el texto siga pasando contraste. */
  --aviso:#7A5600;
  --aviso-fondo:rgba(255,206,84,.38);
  --aviso-borde:rgba(122,86,0,.30);
  --aviso-marca:#C98A00;

  --radio-panel:var(--radio-5);
  --radio-control:var(--radio-3);
}

/* ── CAPA 3 · DE COMPONENTE ───────────────────────────────────────────────
   Sólo lo que un componente necesita y no se deduce de la capa semántica. */
:root{
  --elevacion:-2px;
  --boton-alto:var(--tactil-min);
  --boton-alto-movil:var(--tactil-comodo);
  --campo-alto:34px;
  /* El ancho mínimo de un campo antes de que la fila se apile sola. Es una **medida**, no un
     punto de quiebre: `.campos-en-fila` la usa con `auto-fit`, así que el mismo bloque se
     acomoda igual en un panel angosto que a pantalla completa. 200 px es lo que necesita un
     importe formateado en es-AR —`$ 1.234.567,89`— sin partirse. */
  --campo-minimo:200px;
  /* El ancho mínimo de un panel antes de que un par se apile solo. Misma idea que
     `--campo-minimo` una escala más arriba: es una medida, no un punto de quiebre. 340 px es lo
     que necesita un bloque de totales —rótulo y un importe formateado en el mismo renglón— sin
     que el número se parta. */
  --panel-minimo:340px;
  --fila-alto:var(--tactil-min);
  /* ── Zonas de pantalla (T155 §G, spec 25) ───────────────────────────────────
     Lo único que las zonas necesitan y no se deduce de la escala: el ancho del resumen lateral que
     viaja con la pantalla (cobro y armado del plan) y el alto de lo que queda fijo al pie —la barra
     del total en teléfono, el pie de una hoja—. Todo lo demás son `--esp-*` y `--fs-*`. */
  --ancho-resumen:320px;
  /* El tope de ancho del conmutador de versión («Acta · 1.º · 2.º · 3.º») y del de ficha («Acta · Ajuste»): ocupan
     el ancho de su contenedor, pero en escritorio no se estiran más que esto. */
  --ancho-conmutador:480px;
  --alto-pie:var(--tactil-pestana);
  --tarjeta-alto-movil:78px;
  --pestana-alto:var(--tactil-pestana);
  /* ── El aire final del teléfono (T119) ──────────────────────────────────
     Cuánto scroll de más queda **después** del último elemento de un contenedor que
     scrollea en teléfono — `.listado`, `.detalle`, `.hoja` y quien corresponda—, para
     que el final siempre pueda subir bien por encima de `.pestanas` y de la barra del
     navegador, con margen de sobra y no el justo.

     🔑 **No es la altura de nada — es puro colchón**, y por eso no se deriva de
     `--pestana-alto` ni de `env(safe-area-inset-bottom)`: esos dos siguen sumándose
     aparte donde corresponda (el contenedor que queda *detrás* de `.pestanas` los
     necesita; el que la cubre entera, no). Este token es la reserva que sobrevive
     aunque esos dos cálculos den mal — un teléfono real con la barra de direcciones
     dinámica, o una versión de motor que mida distinto —: 12 % de la altura visible o
     56 px, lo que sea mayor, para que en una pantalla baja el colchón no se achique
     hasta desaparecer. */
  --aire-final-telefono:max(var(--esp-12),12dvh);
  --nav-ancho:186px;
  --nav-ancho-tableta:66px;
  --detalle-ancho:268px;
  --hoja-ancho:424px;
  --accion-medida:56px;
  --sello-medida:205px;
  --sello-medida-movil:168px;

  /* ── Presión al tocar (T117, T117c) ────────────────────────────────────────
     El valor de escala del `:active`. 🔀 **Desde el 27/09/2026 se hunde todo lo
     pulsable**, no sólo lo que no tenía elevación por hover: el dueño de producto
     vio la galería y pidió que el botón que se presiona «se hunda un poco».
     `--escala-presion` va en lo ancho —la tarjeta de teléfono, el enlace de la
     barra lateral, la barra elegible—; `-chip` es un escalón más marcado para lo
     aislado y chico —el botón, la pestaña, la opción del conmutador, `.mini`—,
     que necesita notarse más a igual proporción (`movimiento.css § Presión al
     tocar`). El par duración/curva no es nuevo: `--dur-corta` + `--curva-salida`. */
  --escala-presion:.98;
  --escala-presion-chip:.97;

  /* ── La cascada (T117c, 27/09/2026; T164, 07/10/2026) ───────────────────────
     Cuando se carga un listado o una sección llega por el menú o por una pestaña del legajo, sus
     piezas entran en orden de lectura, una cada `--cascada-paso`, hasta el tope. Pasado el tope
     entran juntas, así que una tabla de cincuenta filas no tarda más que una de quince: la
     cascada entera dura el tope más `--cascada-dur`. `portal.js` lee el paso y el tope de acá.

     🔀 **Más marcada y algo más lenta** (T164, pedido del dueño de producto: «es muy rápido, casi
     imperceptible»). Era 7 px de subida en 340 ms, con un paso de 26 ms y tope en 300: la entrada
     entera terminaba a 640 ms y las filas se movían menos que su propio interlineado. Ahora cada
     pieza sube 12 px desde una escala de .985 en 520 ms, con una desaceleración más larga que la
     de `--curva-salida` (casi todo el recorrido en el primer tercio, el resto se asienta); el paso
     es 36 ms y el tope 560 ms, así que la ola llega hasta la fila trece antes de juntarse y la
     cascada entera termina a 1080 ms, debajo del techo de 1,2 s que fija **R5** para la carga.
     Sólo `transform` y `opacity`: nada de desenfoque (**R6**). */
  --cascada-paso:36ms;
  --cascada-tope:560ms;
  --cascada-dur:520ms;
  --cascada-subida:12px;
  --cascada-escala:.985;
  --curva-cascada:cubic-bezier(.22,1,.36,1);

  /* ── La aplicación instalada (T035) ───────────────────────────────────────
     Los dos colores que el sistema operativo pinta por su cuenta cuando la app
     está instalada: la barra de estado mientras se usa, y el fondo de la
     pantalla de arranque mientras el primer HTML viaja.

     Viven en la capa 3 y **fuera de los dos temas**, y no es un descuido. El
     manifiesto es JSON: no tiene cascada, y el navegador lo pide **sin las
     cookies de la sesión**, así que no puede saber qué tema eligió quien lo
     instala. Un token bajo `[data-tema=X]` sería irresoluble desde ahí. El
     valor es el del portal interno —`nocturna` es su identidad y su tema por
     defecto—, que es la aplicación que se instala.

     Los lee `comun/tokens.py`, que sigue el `var()` hasta la primitiva. Cambiar
     el fondo del portal acá cambia la pantalla de arranque del teléfono. */
  --instalada-tema:var(--p-noche);
  --instalada-fondo:var(--p-noche);
}