/* ============================================================================
   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 — en `rem` sobre la base de 16 px (T171).

     🔑 **El texto escala con el ajuste de quien lo lee.** Estaba en `px`, y con el navegador al
     150 % o `html{font-size:24px}` el cuerpo, los datos y las etiquetas seguían en 13 / 11 /
     10,5 px (WCAG 1.4.4). Los valores **en pantalla por defecto son los mismos**: 16 px de base,
     así que 13 px = .8125rem, 9 px = .5625rem, etc. La escala no cambió, cambió la unidad.

     ⚠️ Esto presupone que ningún `html{font-size}` fija la base en `px`: lo guarda
     `interno/tests/test_t171_texto_en_rem.py`. Lo que queda en `px` a propósito es lo de la
     mano y no del texto —`--fila-alto`, los blancos táctiles, el espaciado— y el glifo × del
     cierre de la hoja (ver el test). */
  --fs-micro:.5625rem;   --fs-etiqueta:.65625rem; --fs-menor:.6875rem;  --fs-dato:.75rem;
  --fs-base:.8125rem;    --fs-medio:.9375rem;     --fs-titulo:1.0625rem; --fs-cifra:1.3125rem;
  --fs-cifra-lg:1.4375rem;
  /* 🔑 **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 (2,375 rem) y el techo 52 px (3,25 rem), los dos en `rem` como el resto de la
     escala; el 6vw del medio sigue al ancho de la ventana. Por debajo del piso deja de mandar. */
  --fs-titular:clamp(2.375rem, 6vw, 3.25rem);
  --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;
  /* 🔀 **Por el gesto, no por un tope** (`T181`, R5). Una hoja que entra **desde un borde** recorre la
     pantalla entera: entra en `--dur-hoja` y sale en `--dur-hoja-sale` (con `--curva-hoja`, el 80 % llega
     a ~130 ms: lo que dura de más es asentamiento). Un pliegue que crece en su lugar abre en
     `--dur-alto-abre` y cierra en `--dur-alto-cierra`. El alto de un reemplazo (filtrar, paginar, el
     relevo, la tarjeta que se va) es frecuente: `--dur-reemplazo`, uno solo para crecer y achicarse. */
  --dur-hoja:500ms; --dur-hoja-sale:320ms;
  --dur-alto-abre:360ms; --dur-alto-cierra:280ms; --dur-reemplazo:260ms;
  /* El rodado de una cifra que cambia en su lugar (`portal.js`, gesto 2): 520 ms, lo que siempre
     duró. `--dur-rodado` (900) nunca lo consumió nadie; se deja la escala completa y se nombra
     lo que de verdad corre (T170). */
  --dur-rodado-corto:520ms;
  /* Los ritmos que no son un cambio de estado sino la espera o el aviso de un plazo (T170, R3): el
     isotipo (`--dur-espera`), la barra del barrido (misma), el brillo del esqueleto y su desfase
     entre filas, el hilo que corre sobre lo que carga, el latido de la intimación (gesto 7) y el
     escalón con que sube el menú «Más». Todos se repiten o escalonan; ninguno retiene una cifra. */
  --dur-espera:1600ms;
  --dur-hilo:1050ms;
  --dur-brillo:1800ms;
  --paso-del-brillo:120ms;
  --dur-latido:2400ms;
  --paso-del-mas:30ms;
  /* 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;
  /* Cuánto se atenúa lo que está esperando (gesto 11) y de dónde parte el fundido de la lista que
     llega (T170): lo nuevo sale de donde quedó lo viejo, sin pasar por la nada. */
  --opacidad-atenuada:.52;
  /* 🔀 **Curvas que arrancan sin golpe y frenan sin cola** (`T181`, aprobadas por el dueño en video el
     12/10/2026). Una curva se juzga por su primer décimo (**G16**): `(.2,.8,.2,1)` hacía el 40 % del
     recorrido en el 10 % del tiempo y `(.19,1,.22,1)` bajaba la hoja del teléfono 120 px en el primer
     cuadro. Éstas hacen 27 / 59 / 87 % (`--curva-salida`) y 28 / 77 / 95 % (`--curva-hoja`, la de
     cajón) al 10 / 25 / 50 % del tiempo. */
  --curva-salida:cubic-bezier(.22,.61,.36,1);
  --curva-hoja:cubic-bezier(.32,.72,0,1);
  /* Lo que cambia de alto en su lugar y empuja lo de abajo (el pliegue de un `<details>`, el alto de un
     reemplazo, el chevrón): entra y sale suave, 3 / 25 / 78 / 96 % al 10 / 25 / 50 / 75 %. El contenido
     que funde con `--curva-salida` responde en el primer cuadro (`T181`). */
  --curva-alto:cubic-bezier(.4,0,.2,1);
  /* Todo el cambio de tema con una sola curva, el disco incluido (`T181`): ~18 % al cuarto, sin el
     arranque quieto de `--curva-cielo`, que sigue en la casilla y en el borde trasero del squeeze. */
  --curva-tema:cubic-bezier(.45,0,.25,1);
  --curva-rebote:cubic-bezier(.2,1.4,.35,1);
  --curva-cielo:cubic-bezier(.62,.01,.32,1);
  /* `ease-in-out` del navegador escrito como curva: el latido de la intimación sube y baja igual. */
  --curva-latido:cubic-bezier(.42,0,.58,1);
  /* El arrastre para cerrar una hoja (T173, `portal.js` → `sofArrastre`). Se decide al soltar:
     por **velocidad** si el dedo iba más rápido que `--arrastre-velocidad` (px/ms, medida sobre los
     últimos `--arrastre-ventana`) —el signo manda: hacia abajo cierra, hacia arriba vuelve—, y si no, por
     **posición**: pasó de `--arrastre-fraccion` del alto de la hoja. `--arrastre-umbral` es lo que
     el dedo se mueve antes de que sea un arrastre y no un toque; `--arrastre-corto`, cuánto es
     «poco» para volver con `--dur-instante` en vez de `--dur-larga`. Elegidos por criterio (no hay
     dedo real en la CI): ver la pregunta abierta de T173. */
  --arrastre-fraccion:.4;
  --arrastre-velocidad:.5;
  --arrastre-ventana:100ms;
  --arrastre-umbral:6px;
  --arrastre-corto:44px;

  /* ── 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);
  /* El borde de lo que se toca (campo, desplegable, calendario, `.mini`) y el pulgar de la barra de
     desplazamiento. WCAG 1.4.11 pide 3:1 del borde contra el fondo que lo rodea; `--borde` (.12)
     daba 1,77:1. Se midió en el navegador sobre el píxel del borde y el de afuera (T166). */
  --borde-fuerte:rgba(255,255,255,.34);
  /* El borde de una zona y del resumen fijo (`T181`). Es `--borde` de noche y `--borde-vivo` de día
     (en diurno el `--borde` es casi blanco sobre vidrio claro y la zona no se separaría del fondo).
     Antes lo elegía una regla con `[data-tema="diurno"]` en `componentes.css`, y cambiar de variable
     no se interpola: el borde saltaba en el primer cuadro del cambio de tema. Con un token propio,
     registrado como los demás, viaja con todo lo demás. */
  --borde-zona:var(--borde);
  --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);
  /* Diurno: el `--borde` es blanco al 74 % sobre un cielo claro (1,01:1), invisible. El borde de lo
     que se toca va en la tinta del tema, no en el acento, para que `:hover` y `:focus` (acento)
     se distingan de él. Medido en el navegador (T166). */
  --borde-fuerte:rgba(15,27,51,.48);
  --borde-zona:var(--borde-vivo);
  --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);
}

/* ── Los colores del tema, registrados (T181) ─────────────────────────────
   El cambio de tema es un solo gesto (gesto 10): el piso, el texto, cada panel, borde, enlace y botón
   llegan juntos al otro tema. Para eso **lo que transiciona son estos tokens**, una vez, en `:root`
   (`movimiento.css`, gesto 10), y no el `background-color` o el `color` de cada elemento: todo lo que
   los usa —el texto heredado también— recibe el mismo valor en el mismo cuadro. Un token sin registrar
   no se interpola (cambia de golpe), así que cada color de la capa 2 se registra como `<color>`. Los
   que no son un color —las auroras, el giro, las sombras, los radios— no se registran: cambian por su
   propio gesto o no cambian. El valor inicial no se usa nunca (`data-tema` está siempre en `<html>`);
   `transparent` es el lado seguro. `test_t181_movimiento_estatico.py` verifica que cada color de los
   dos temas esté acá y en la transición de `:root`. */
@property --cielo-piso{syntax:'<color>';inherits:true;initial-value:transparent}
@property --superficie{syntax:'<color>';inherits:true;initial-value:transparent}
@property --superficie-alta{syntax:'<color>';inherits:true;initial-value:transparent}
@property --cromo{syntax:'<color>';inherits:true;initial-value:transparent}
@property --superficie-hover{syntax:'<color>';inherits:true;initial-value:transparent}
@property --superficie-activa{syntax:'<color>';inherits:true;initial-value:transparent}
@property --borde{syntax:'<color>';inherits:true;initial-value:transparent}
@property --borde-vivo{syntax:'<color>';inherits:true;initial-value:transparent}
@property --borde-fuerte{syntax:'<color>';inherits:true;initial-value:transparent}
@property --borde-zona{syntax:'<color>';inherits:true;initial-value:transparent}
@property --separador{syntax:'<color>';inherits:true;initial-value:transparent}
@property --texto{syntax:'<color>';inherits:true;initial-value:transparent}
@property --texto-2{syntax:'<color>';inherits:true;initial-value:transparent}
@property --texto-3{syntax:'<color>';inherits:true;initial-value:transparent}
@property --acento{syntax:'<color>';inherits:true;initial-value:transparent}
@property --acento-tinta{syntax:'<color>';inherits:true;initial-value:transparent}
@property --barrido{syntax:'<color>';inherits:true;initial-value:transparent}
@property --velo{syntax:'<color>';inherits:true;initial-value:transparent}
@property --sello{syntax:'<color>';inherits:true;initial-value:transparent}
@property --barra{syntax:'<color>';inherits:true;initial-value:transparent}
@property --barra-hover{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-deuda{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-deuda-borde{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-deuda-fondo{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-sin{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-sin-borde{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-sin-fondo{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-cancelada{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-cancelada-borde{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-cancelada-fondo{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-plan{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-plan-borde{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-plan-fondo{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-intimada{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-intimada-borde{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-intimada-fondo{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-activo{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-activo-borde{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-activo-fondo{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-inactivo{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-inactivo-borde{syntax:'<color>';inherits:true;initial-value:transparent}
@property --estado-inactivo-fondo{syntax:'<color>';inherits:true;initial-value:transparent}
@property --aviso{syntax:'<color>';inherits:true;initial-value:transparent}
@property --aviso-fondo{syntax:'<color>';inherits:true;initial-value:transparent}
@property --aviso-borde{syntax:'<color>';inherits:true;initial-value:transparent}
@property --aviso-marca{syntax:'<color>';inherits:true;initial-value:transparent}

/* ── 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 (previa del recibo 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;
  /* El carril con pista (T150, spec 13 § El carril de filtros): el ancho del desvanecido que avisa «hay más» y del
     `scroll-padding-inline` que deja un control enfocado fuera de él. Es una medida de máscara, sin color. */
  --carril-pista:28px;
  /* El lado del marcador de las pastillas que se distinguen por **forma** (rombo, triángulo, cuadrado, tilde):
     el punto de 5 px de `.estado i` no alcanza para que una forma se lea (T150, spec 17 y legales/03). */
  --marca-forma:9px;
  --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. */
  /* 🔒 T197: el 12 % sale del alto **medido**, no de `12dvh`: con el motor que infla `dvh` la hoja de tarea
     medía 6,7 px más que en la emulación. */
  --aire-final-telefono:max(var(--esp-12),calc(var(--alto-de-pantalla) * .12));
  /* ── El alto REAL de la barra inferior (T189) ───────────────────────────
     `--pestana-alto` (52) es la altura del **ítem**, no la de la barra: `.pestanas` suma su relleno
     (`--esp-3` arriba y abajo), el filete de 1 px y la zona segura del aparato. Medida en el navegador:
     59 px sin zona segura. Reservar con 52 dejaba la isla a 5 px de la barra en vez de a `--esp-6`.
     La zona segura entra **una sola vez**, acá: `.pestanas` la absorbe con su relleno, así que quien
     reserve con este token no la vuelve a sumar. */
  --barra-inferior-alto:var(--barra-inferior-medida,
    calc(var(--pestana-alto) + var(--esp-3) * 2 + 1px + env(safe-area-inset-bottom,0px)));
  /* `--barra-inferior-medida` la publica `portal.js` con el alto que la barra tiene de verdad. */
  /* ── La reserva de la barra inferior (T183) ─────────────────────────────
     Lo que ocupa **por debajo del contenido** la barra de pestañas del teléfono, más un respiro de
     `--esp-6` y la zona segura del aparato. Es el piso que tiene que respetar todo lo que se queda
     fijo o llega a un borde dentro de un contenedor que scrollea *detrás* de `.pestanas`. Va como
     `scroll-padding-bottom` de ese contenedor: así una isla `sticky` con `bottom:0` se pega sobre
     la barra y no detrás, y un campo que toma el foco o un `scrollIntoView` no lleva el control
     al borde, bajo la barra. */
  --reserva-inferior-telefono:calc(var(--barra-inferior-alto) + var(--esp-6));
  /* ── El alto de la pantalla, medido (T197) ──────────────────────────────
     Lo que se ve de verdad: `--alto-visible` lo publica `portal.js` (`window.innerHeight`, en los
     eventos de **D9**). Una unidad de viewport es una promesa del motor (**D10**): en la app instalada
     del dueño `100dvh` = `100vh` = `100lvh` valían 986 con 930 visibles. Todo tope de alto o distancia
     al borde de algo que flota en el teléfono sale de acá, nunca de `dvh`/`vh`/`lvh` sueltos.
     El respaldo (sin JavaScript) va **adentro** del `var()`: `100vh` acá y `100dvh` donde el motor la
     conoce (`formatos.css`, al principio: esta hoja no lleva bloques anidados, la lee `comun/tokens.py`);
     una unidad que el motor no conoce dejaría el token inválido al computar. */
  --alto-de-pantalla:var(--alto-visible,100vh);
  /* Lo que queda libre **sobre** la barra inferior del teléfono: la pantalla menos la barra real. */
  --alto-sobre-la-barra:calc(var(--alto-de-pantalla) - var(--barra-inferior-alto));
  --nav-ancho:11.625rem; /* 186 px a 16 px de base: la barra lleva texto, así que crece con él (T171) */
  --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);
}