/* ============================================================
   Flow — Design Tokens
   Sistema de tesorería · tema oscuro + alto contraste
   Multi-tenant: un tenant sobrescribe SOLO el bloque "MARCA".
   Todo lo demás deriva de estos custom properties.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---------- ESCALA DE TEXTO (preferencia por usuario, §8.5) ----------
     Toda la tipografía deriva de esta variable. Ningún tamaño se fija en px
     absolutos: cambiar el nivel reescala la interfaz completa.
     Se aplica en html{font-size} (ver base.css), así los rem escalan solos. */
  --escala-texto: 1;      /* normal */

  /* ---------- MARCA (tenant-overridable) ----------
     Para re-marcar Flow, un tenant redefine estas variables
     (por PHP inyectando un <style> o un tenant.css). No se toca
     ninguna otra hoja de estilo. */
  /* EL AZUL LO FIJA LA MARCA, NO AL REVÉS (§8.5). `#3b82f6` es el del isotipo:
     el archivo lleva su color dentro y el token es lo que se puede mover, así
     que se mueve el token. Un solo azul en los dos temas — antes el claro usaba
     otro— para que el logo y el botón no diverjan nunca.

     LA TINTA SÍ CAMBIÓ, y por una medición: `#3b82f6` con la tinta anterior da
     4,44:1 y AA pide 4,5. Con blanco da 3,68:1, peor. `#001a33` lo lleva a
     4,78:1 en los dos temas. Y el hover no puede simplemente aclararse: sobre
     fondo blanco un azul más claro pierde el 3:1 de superficie. `#4c88f5` es el
     que cumple las dos cosas —5,14:1 con la tinta y 3,42:1 contra el blanco—.
     Las doce parejas quedan comprobadas en AA. */
  --brand:          #3b82f6;   /* color de marca / acento — el del isotipo */
  /* ─── EL AZUL DE ENLACE, QUE NO ES EL DE MARCA ──────────────────────────────
   *
   * Medido el 13 de agosto de 2026 sobre las filas teñidas de Gastos fijos: el
   * enlace daba **3,97:1** sobre el tinte ámbar y 4,15 sobre el rojo, por debajo
   * del 4,5 de AA. Y el reparto es exacto: **solo falla en OSCURO NORMAL** —5 de
   * 13 enlaces—; claro normal da 4,66 y las dos de alto contraste 4,62 y 5,17.
   *
   * Un tinte se pinta con alfa, así que el fondo real es el tinte COMPUESTO
   * sobre la tarjeta. Medirlo como opaco daba 1,33 y 2,00 —dos instrumentos
   * distintos cayeron en lo mismo el mismo día— y esos números no eran el
   * defecto: eran el medidor.
   *
   * Se separa el azul del ENLACE del azul de MARCA en vez de mover la marca:
   * `--brand` viste botones, halos de foco y el isotipo, y aclararlo por un
   * enlace cambiaría la identidad para arreglar un texto. Por omisión son el
   * mismo color, así que nada cambia salvo donde se declare lo contrario. */
  --brand-enlace:   var(--brand);
  --brand-strong:   #4c88f5;   /* hover / énfasis */
  --brand-soft:     rgba(59, 130, 246, 0.14);  /* fondos sutiles de marca */
  --on-brand:       #001a33;   /* texto sobre rellenos de marca */
  /* ─── EL RELLENO DEL BOTON SE SEPARA DE LA MARCA ────────────────────────
   * `--brand` es el color del isotipo y el de los halos de foco. Subir el
   * contraste del boton aclarandolo los moveria a los tres, y eso ya se evito
   * una vez a proposito. Ademas no bastaria: con `--brand` a #3b82f6, el techo
   * con texto negro puro es 5,64:1, y AAA pide 7. Con texto blanco baja a 3,7.
   * **No se puede llegar a 7 sin cambiar el fondo del boton.**
   * Asi que el boton tiene su propio token. En modo normal vale la marca —nada
   * cambia—; en alto contraste se separa y sube. */
  --brand-boton:    var(--brand);
  --brand-ring:     rgba(59, 130, 246, 0.45);  /* halo de foco */

  /* ---------- TIPOGRAFÍA ----------
     Stack de sistema: cero dependencias, sin webfonts, sin build.
     Un tenant puede apuntar --font-display a una fuente propia. */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Escala tipográfica modular (~1.25). Base 15px. */
  --fs-caption: 1rem;       /* 17px  — piso duro §8.5; se distingue por color, no por tamaño */
  --fs-label:   1rem;       /* 17px  — piso duro §8.5; se distingue por tracking y color */
  --fs-body:    1.0625rem;  /* ~18px — texto base */
  --fs-md:      1.1875rem;  /* ~20px — subtítulos */
  --fs-lg:      1.4375rem;  /* ~24px — títulos de sección */
  --fs-xl:      1.75rem;    /* ~30px — títulos de página */
  --fs-display: clamp(2.5rem, 6vw, 3.75rem); /* el NÚMERO GRANDE */

  /* ─── LA CIFRA PRINCIPAL DE UN WIDGET · UNA SOLA, EN TODO FLOW ────────────
   *
   * Kike, y no era la primera vez: *«no puede ser que cada widget en cada
   * módulo tenga tamaños diferentes para los montos principales, eso le resta
   * unidad y uniformidad»*.
   *
   * Medido antes de escribirla: **46 widgets y 9 tamaños distintos**, con seis
   * fórmulas para lo mismo —`--fs-display`, `min(--fs-display, 13vw)`,
   * `3.4rem`, un `clamp` con unidades de contenedor, y dos definiciones de
   * `.pie-totales__cifra`—. *Dos copias de la misma regla acaban discrepando*,
   * y aquí eran seis.
   *
   * El valor es **el de Tributos**, que Kike eligió. Y vive aquí y solo aquí:
   * si mañana cambia, cambian todos sin tocar ninguna vista. */
  --fs-cifra-widget: var(--fs-display);

  /* ─── Y LA CIFRA DE UNA TARJETA DE SALDO · Kike, 27/08/2026 ─────────────────
   *
   * *«Los saldos, tres puntos más grandes.»* No es la cifra grande de un widget
   * —esa es una por tarjeta y ocupa media caja—: es la de una tarjeta de saldo,
   * que va en rejilla con otras siete.
   *
   * Ayer se intentó subirla con `--fs-md` y **dos guardianes lo cazaron con
   * razón**: ninguna cifra declara un cuerpo suelto. Así que se declara **su
   * token**, y vale para **todas las tarjetas de saldo de Flow**.
   *
   * Tres puntos ≈ 0,25rem sobre el cuerpo del texto, y **en `rem`**: así crece
   * con las cuatro escalas como todo lo demás. */
  /* 28/08/2026: **un punto más**, a petición de Kike. Tres puntos era 0,25rem;
     cuatro son 0,333. Sigue en `rem`, así que crece con las cuatro escalas. */
  --fs-cifra-saldo: calc(var(--fs-body) + 0.333rem);

  /* ─── EL FONDO DE UNA TARJETA DE SALDO · 28/08/2026 ────────────────────────
   * Kike: *«oscurecer el fondo de las tarjetas para mejorar el contraste»*.
   * Iba con `--surface-hover`, que es el tono de «el ratón está encima» y en
   * oscuro **aclara**: la tarjeta se acercaba al texto en vez de separarse.
   * Con su propio token se separa, y **se mide** en las cuatro combinaciones. */
  --fondo-tarjeta-saldo: #0e141a;

  /* ─── Y EL ANCHO MÍNIMO QUE ESA CIFRA EXIGE ───────────────────────────────
   *
   * Si la cifra es una sola en todo Flow, **la caja que la aguanta también**.
   * Doce caracteres a `--fs-cifra-widget` piden unos 400 px más el relleno de
   * la tarjeta; en `rem` sube con la escala igual que el número.
   *
   * *Una cifra nunca se encoge para que quepa: primero crece la caja* — y ésta
   * es la caja. Medido antes de ponerlo: con 18rem, cuatro cifras de Tributos
   * se salían de su tarjeta a escala normal. */
  --ancho-minimo-widget: 26rem;
  /* ─── CUÁNTOS CARACTERES TIENE ESA CIFRA ─────────────────────────────────
     No es un token de diseño: es un DATO que la vista escribe por elemento
     —`factura/costos.php`— para que el CSS pueda dividir el ancho de la caja
     entre lo que el número ocupa. Se declara aquí para que el valor de respaldo
     sea explícito y no viva escondido dentro de un `var()`, que es como se
     colaron en su día `--control-alto` y `--fs-h3`.
     11 es «S/ 4.399,91»: el largo corriente de un importe de esta base. */
  --cifra-caracteres: 11;
  /* ─── LO MISMO, PARA LAS TARJETAS DE LA CARGA FISCAL ─────────────────────
     `--largo` es el hermano de `--cifra-caracteres` en `.cifra-carga`: la vista
     lo escribe por elemento y el CSS reparte el ancho de la tarjeta entre los
     caracteres que hay. Tampoco es un token de diseño; se declara aquí **por la
     misma razón**, que es que su valor de respaldo no viva escondido dentro de
     un `var()` donde nadie lo encuentra — y porque `auditar_estilos` lo estaba
     señalando como huérfano con razón.
     9 es «S/ 466,74», que es para lo que se calibró el reparto. */
  --largo: 9;
  /* ─── Y HASTA DÓNDE PUEDE ENCOGER ESA CIFRA ──────────────────────────────
     `0px` = sin suelo, que es como se comportaba todo hasta el 12 de agosto de
     2026. Solo el widget que lo necesita lo sube —hoy el del neto, a 1.75rem—,
     así que ningún otro cambia de tamaño por existir este token.
     Se declara aquí por lo mismo que el de arriba: un valor de respaldo
     escondido dentro de un `var()` es uno que nadie encuentra. */
  --cifra-suelo: 0px;
  /* ─── CUÁNTO MIDE LA CIFRA DE ARRIBA · para la segunda al 60 % ───────────
     Kike pidió el 16 de agosto de 2026 que la segunda cifra de un widget vaya
     «al menos al 60 % del monto principal». Como cada cifra se dimensiona con
     SUS caracteres, una segunda más corta saldría MÁS grande que su principal
     si se calculara sola: la vista le pasa cuántos mide la de encima.
     Se declara aquí por lo mismo que sus dos hermanos —un valor de respaldo
     escondido dentro de un `var()` es uno que nadie encuentra—, y con el mismo
     11 que `--cifra-caracteres`, que es lo que hace que sin declararlo la
     segunda salga exactamente al 60 % de una principal corriente. */
  --cifra-principal: 11;
  /* ─── HASTA DÓNDE SE ESTRECHA UNA CAPA DE VENTANA ───────────────────────
     Kike decidió el 16/08/2026 que cada capa va al 90 % de la anterior, **y
     con suelo**: *reducir es el último recurso y con suelo*, también el ancho
     de una ventana.
     580 px **está medido, no elegido**: es el último ancho en que el
     formulario más exigente de Flow —Compras, siete controles— cabe sin
     desbordes, sin cajas colapsadas y sin rótulos palabra por palabra.
     Y la premisa era falsa: *se esperaba que la escala máxima fuera la peor* y
     medida **aguanta hasta 360**, porque su rejilla ya colapsó a una columna;
     la que rompe antes es la NORMAL, con dos columnas estrujándose. `D-143`. */
  --capa-suelo: 580px;
  /* ─── EL VELO DE DETRÁS DE UNA VENTANA ──────────────────────────────────
     Kike vio las cifras del tablero leyéndose perfectamente detrás de la
     ventana: *«cuesta saber qué está activo»*. En una pantalla llena de
     números eso pesa más que en otra.
     Se declara como token porque **cambia con el tema**: en claro un negro
     fuerte apagaría la pantalla entera, y en alto contraste tiene que subir,
     no bajar. Su cifra de contraste está medida en `D-147`. */
  --velo-dialogo: rgba(0, 0, 0, 0.62);
  /* El del campo de captura es más contenido que el de un indicador: tiene que
     caber 999,999.99 dentro de un campo, no solo mostrarse. Sigue siendo ~2,5
     veces el cuerpo, que es lo que lo hace dominar la pantalla. */
  /* SIN TÉRMINO `vw`, y no es cosmética: `clamp(1.75rem, 3.4vw, 2.6rem)` hacía
     que el importe dependiera del ANCHO DE LA PANTALLA en vez de la
     preferencia de texto. Medido a 1440 px: en escala normal mandaba el techo
     —44 px— y en la máxima mandaba el suelo —52—, cuando 2.6rem a 1,75× son
     77. El `vw`, que está entre los dos, ENCOGÍA la cifra justo cuando el
     usuario había pedido letra más grande.
     Es el patrón del eje de §8.5 dentro de la propia escala tipográfica: una
     medida de texto atada a un recurso que no crece con la preferencia. */
  --fs-monto:       2.6rem;
  --fs-monto-movil: 2rem;

  /* `--k-neto` SE RETIRÓ el 6 de agosto de 2026 junto con `neto-ancho.js`.
     Era el multiplicador que encogía la cifra del neto hasta el ancho de su
     desglose, y el efecto era que la misma magnitud salía a 57,80 px en
     Facturas y a 32,89 en Movimientos —la primera no tiene desglose y la
     segunda sí—. El tamaño de un dato no puede depender del ancho de lo que
     tenga debajo. Ver `.neto-cifra` en `app.css`. */

  --lh-tight: 1.15;
  --lh-normal: 1.55;
  --tracking-label: 0.06em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- ESPACIADO (base 4px) ---------- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */

  /* ---------- MICRO-ESPACIADO ----------
     Valores por debajo de --space-1 (4px). Existen porque aparecían escritos
     a mano dentro de los componentes, que es justo lo que §8.5 prohíbe. */
  --space-micro: 2px;
  /* ─── ESTE SÍ ES TEXTO, ASÍ QUE ESCALA ────────────────────────────────
     Valía 6px fijos, y eran los mismos con letra de 17 px que con letra de
     29,75: a escala máxima el rótulo y su campo quedaban pegados en
     proporción. Medido en `/admin/proveedores/nuevo`, donde el rótulo se
     apila sobre el control desde «muy grande»: 6 px contra un rótulo de
     39,5 y de 46,1 px de alto.
     `0.35rem` da 5,95 px a escala normal —lo mismo que había, así que nada
     se mueve donde ya estaba bien— y crece hasta 10,4 en máxima.
     Barrido antes de tocarlo: siete usos, todos separaciones entre cosas
     que llevan texto —el hueco de `.field`, el de `.badge`, el relleno del
     `.marcador`, los atajos, las barras comparativas y el relleno de la
     navegación móvil—. Ninguno depende de que sea fijo. */
  --space-mini:  0.35rem;

  /* ---------- OBJETIVOS TÁCTILES ----------
     44px es un mínimo de accesibilidad (§8.5), no una preferencia estética,
     pero igual se declara aquí: si algún día cambia, cambia en un solo sitio. */
  --tactil-minimo: 44px;
  --casilla: 20px;

  /* ---------- RADIOS ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---------- FOCO (accesibilidad) ---------- */
  --focus-color: var(--brand-strong);
  --focus-width: 2px;

  /* ============================================================
     TEMA OSCURO (default — mandato VIS)
     Neutros con sesgo frío (slate), no gris puro: leen "elegidos".
     ============================================================ */
  /* ─── EL FONDO BAJA PARA QUE LA TARJETA SE DESPEGUE ─────────────────────
     Decisión de Kike, 13 de agosto de 2026, con las tres opciones medidas
     delante. Lo que costaba ver en oscuro **no eran las letras** —el texto da
     16,6:1 sobre el fondo y 15,2 sobre la tarjeta— sino **dónde empieza y
     acaba cada tarjeta**: `#161d24` contra `#0e1419` daba **1,09:1**.

     De las tres, ésta es la única que separa **sin tocar el contraste de nada
     de lo que va encima**: la tarjeta no se mueve, así que sus 15,22 se quedan
     clavados. Subir la tarjeta separaba un pelo más —1,21— y bajaba el texto a
     13,72, que es pagar por donde más duele.

         antes  #0e1419 → tarjeta 1,09:1
         ahora  #080b0e → tarjeta 1,16:1

     Y no llega al negro puro a propósito: el sesgo frío del gris es lo que
     hace que los neutros lean «elegidos» y no «apagados». */
  --bg:            #080b0e;  /* fondo raíz */
  --bg-sunken:     #0a0f13;  /* huecos, pistas de barras */
  --surface:       #161d24;  /* tarjetas */
  --surface-2:     #1d2630;  /* tarjetas anidadas / filas alt */
  --surface-hover: #232d38;

  /* ─── LA SUPERFICIE DE LAS VENTANAS · Kike decidió subirla · D-148 ───────
     Estaba a **1,21** del fondo velado: el mismo gris. Y **el velo no podía
     arreglarlo** —1,08 a 1,11 en todo el barrido— porque la ventana ya estaba
     en el suelo de luminancia y oscurecer el fondo la persigue hacia abajo.

     Token propio y no `--surface-2` a secas, porque **`.combo-boton` ya usa
     `--surface-2` dentro de la ventana**: igualarlos le borraría el relleno.
     *No se da por bueno subir una cosa rompiendo otra.*

     Hasta dónde sube lo decide **lo que va dentro**, no lo que se querría:

         superficie      ventana   texto  secund  apagado   borde-fuerte
         #161d24 (hoy)     1,21    15,22   8,19    5,50        3,74
         #1d2630           1,34    13,70   7,37    4,95        3,37   ← aquí
         #232d38           1,47    12,50   6,72    4,52        3,07   justo
         #2a3641           1,66    11,04   5,94    3,99        2,71   ROMPE

     `--text-muted` cae por debajo de AA (4,5) y `--border-strong` —59 usos
     dentro de una ventana— por debajo de 3. **#1d2630 es lo que cabe sin
     romper nada**, con margen y no justo en el mínimo. */
  --superficie-ventana: #1d2630;
  --border:        #546a80;  /* hairlines */   /* oscuro normal · 1,36 → 3,04 · `D-501` */
  /* SUBIDO DE #3a4653, que daba 1,77:1 sobre la tarjeta contra un mínimo de 3.
     Un borde que no se distingue del fondo es una caja que no se ve, y aquí se
     usa en 19 sitios —el separador de cabecera, los diálogos, la marca de
     incompleto—. Ahora 3,74:1 sobre tarjeta y 4,08 sobre el fondo: un 25 % por
     encima del suelo, no justo en él, porque 3:1 es el mínimo de la norma y no
     un objetivo. Sigue leyéndose como BORDE y no como texto, que va a 15:1. */
  --border-strong: #66788a;

  --text:           #eef3f7; /* tinta principal ~15:1 */
  --text-secondary: #a7b6c2; /* ~8:1 */
  --text-muted:     #8495a1; /* ~5:1 — solo no-esencial */

  /* Colores SEMÁNTICOS de estado (separados de la marca).
     Uso obligatorio con signo/flecha/posición, nunca color solo. */
  --income:     #48d09a;  --income-ink: #7ee3bb;  --income-bg: rgba(72, 208, 154, 0.13);
  /* EL MONTO DEL FORMULARIO: BLANCO APENAS TEÑIDO, no color saturado.
     Es el número que más se lee de la pantalla; saturarlo lo vuelve más difícil
     de leer justo donde importa. El tinte refuerza lo que el selector de tipo ya
     dice, no informa por sí solo (§8.4).
     Una TRANSFERENCIA no lleva tinte: es neutra —no se gana ni se pierde— y la
     ausencia de color dice exactamente eso. Un tercer color para «ninguno de los
     dos» se leería peor que su ausencia. */
  --monto-ingreso: #e9f7f1;
  --monto-gasto:   #fbeeed;
  --expense:    #f4756d;  --expense-ink:#ff9a94;  --expense-bg: rgba(244, 117, 109, 0.13);
  --warning:    #e9b84a;  --warning-ink:#f4cd74;  --warning-bg: rgba(233, 184, 74, 0.13);
  /* ─── EL NARANJA DE AVISO, CON NOMBRE PROPIO · Kike aprobó `D-153` ────────
     El tramo «5 a 2 días» usaba `--paleta-7`, que es **un tono de gráfico**:
     recalibrar las barras habría cambiado el color de «faltan 4 días» sin que
     nadie lo pretendiera. *Un tono de gráfico no puede llevar significado.*
     Parte del valor que ya tenía `--paleta-7` en cada combinación, así que en
     pantalla no cambia nada hoy — cambia de quién depende mañana. */
  --alerta-ink: #e8934a;
  --info:       var(--brand);

  /* Gris de datos para grillas/ejes recesivos */
  --grid: rgba(167, 182, 194, 0.14);
  --axis: rgba(167, 182, 194, 0.30);

  /* Superficie de gráficos (validada con el validator de dataviz) */
  --chart-surface: #141b22;

  /* Sombras (sutiles en oscuro; profundidad por borde + capa) */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45);

  /* Dos anchos, no uno. Un listado de datos y un formulario no quieren lo
     mismo: la tabla necesita todo el ancho disponible, el texto se lee peor
     cuanto más largo es el renglón. 1200px para todo era ancho de blog. */

  /* ============================================================
     PALETA CURADA DE IDENTIDAD (§8.5)
     Catorce colores para reconocer una cuenta o una categoría de un vistazo.
     Sustituyen al selector nativo del navegador, que permitía elegir cualquier
     valor y con eso romper el contraste o la coherencia.

     Se guarda la CLAVE («paleta-3»), no el hexadecimal: así el color se adapta
     al tema y a la marca del tenant. Guardar el hex lo congelaría en el valor
     de un tema.

     Verificados con el validador de dataviz: los catorce superan 3:1 de
     contraste contra la superficie, en tema claro y oscuro.
     `paleta-13` es deliberadamente neutro —la opción «sin color llamativo»— y
     `paleta-14` es cálido apagado: ambos quedan por debajo del piso de croma que
     ese validador exige para gráficos, y aquí no aplica porque estos colores no
     codifican datos, acompañan a un nombre que siempre está presente.
     ============================================================ */
  --paleta-1:  #5b9cf5;   /* azul     */
  --paleta-2:  #45b8d4;   /* cian     */
  --paleta-3:  #3fc0a8;   /* turquesa */
  --paleta-4:  #63c46b;   /* verde    */
  --paleta-5:  #a3c44a;   /* lima     */
  --paleta-6:  #e0b143;   /* ámbar    */
  --paleta-7:  #e8934a;   /* naranja  */
  --paleta-8:  #ef7a6d;   /* coral    */
  --paleta-9:  #ee7ba6;   /* rosa     */
  --paleta-10: #d982d8;   /* magenta  */
  --paleta-11: #a98cf0;   /* violeta  */
  --paleta-12: #7b8ff0;   /* índigo   */
  --paleta-13: #8fa3b5;   /* pizarra  */
  --paleta-14: #d18b52;   /* tierra   */

  --maxw-app:   1760px;   /* pantallas de datos: listados, tablas, paneles */
  --maxw-texto:  980px;   /* formularios y lectura */
}

/* Niveles de escala: se aplican sobre :root, se apilan con tema y contraste. */
/* Tipografía como preferencia de usuario. Ninguna descarga: los tres stacks
   están en cualquier sistema, así que no hay parpadeo ni peso extra.
   Verdana tiene letras más abiertas que la del sistema y ayuda a quien
   tiene dificultad para enfocar. */
:root[data-fuente="abierta"] { --font-body: Verdana, Geneva, sans-serif; }
:root[data-fuente="serif"]   { --font-body: Georgia, "Times New Roman", serif; }

/* Interlineado. En textos largos suele mejorar la legibilidad más que
   cambiar de tipografía. */
:root[data-interlineado="amplio"] { --lh-normal: 1.8; }

:root[data-escala="grande"]     { --escala-texto: 1.25; }
:root[data-escala="muy_grande"] { --escala-texto: 1.50; }
:root[data-escala="maximo"]     { --escala-texto: 1.75; }

/* ============================================================
   TEMA CLARO (opt-in por tenant/usuario: data-theme="light")
   Dark es el default mandatado; light es alternativa comercial.
   ============================================================ */
/* ─── SOLO EN OSCURO NORMAL, QUE ES DONDE FALLA ────────────────────────────
   `:not([data-contrast="high"])` no es un adorno: en alto contraste el enlace
   ya da 4,62 y **Kike usa alto contraste**, así que ese es el suyo y no se
   toca. La regla alcanza exactamente la combinación medida como floja —el
   tema oscuro sin alto contraste— y ninguna otra.

   `#5593f7` y no el mínimo. El mínimo era `#4b8df7`, que da **4,50** clavado
   sobre el tinte ámbar — y al medirlo en pantalla salió **4,49**, un centésimo
   corto por redondeo. Un valor que empata con el límite no cumple el límite:
   cualquier tinte nuevo, cualquier cambio de superficie, lo baja. `#5593f7` da
   **4,82** sobre el tinte, 5,59 sobre la tarjeta lisa, y son cinco puntos de
   luminosidad sobre `--brand`, del mismo tono: no se ve como otro color, se ve
   como el mismo que ahora se lee. */
:root:not([data-theme="light"]):not([data-contrast="high"]) {
  --brand-enlace: #5593f7;
  /* `D-465` · el gris de lo que falta, sobre fondo oscuro: más claro que la
     tarjeta, no más oscuro — si no, se funde con ella. */
  --barra-pendiente:       #6b7b8a;
  --barra-pendiente-borde: #a8b6c2;
  --barra-en-curso:        #ffcf5a;
  --barra-separador:       #eef3f7;
  /* El del mes en curso se elige contra el NARANJA, que en oscuro es clarísimo:
     con el mismo separador claro del azul daba 1,31:1 y desaparecía. */
  --barra-separador-actual: #080b0e;
}

:root[data-theme="light"] {
  /* ─── 0,55 SALE DE MEDIR, Y DE CORREGIR CONTRA QUÉ SE MIDE ───────────────
     Primero se buscó el velo que dejara **superficie y borde** por encima de
     3:1 *contra el fondo velado*, y salía 0,55 en un equilibrio muy justo.
     **El vecino estaba mal elegido**: un borde no se ve contra lo que hay al
     otro lado de la ventana, se ve contra **su propia superficie**. Medido
     así, el borde da 4,98 en claro y 5,95 en claro alto contraste, **y no
     depende del velo**. El velo ya no tiene que protegerlo.
     Queda en 0,55 por lo que sí depende de él: la superficie separa 3,97 y
     el contenido de detrás pierde 76,9 % de su luminancia. */
  --velo-dialogo: rgba(20, 32, 42, 0.55);
  color-scheme: light;
  /* EL AZUL ES EL MISMO TONO, UN PASO MÁS OSCURO. No es una excepción: es para
     esto que existen los tokens por tema. `#3b82f6` sobre blanco solo llega a
     3,68:1 con texto encima y §8.5 pide 4,5 — y ya fallaba antes de tocar
     nada: el cambio no lo rompió, lo destapó.

     EL ISOTIPO NO CAMBIA. Su azul lleva BARRAS BLANCAS encima, no texto, y el
     umbral de un componente gráfico es 3,0 — lo cumple con 3,68:1. Es el mismo
     color con dos usos y dos requisitos: el del botón es texto, el del logo es
     forma. Igualarlos habría oscurecido la marca sin ninguna razón. */
  --brand:          #2563eb;
  --brand-strong:   #1d4ed8;
  --on-brand:       #ffffff;   /* 5,17:1 sobre el botón */
  --brand-soft:     rgba(37, 99, 235, 0.10);
  --brand-ring:     rgba(37, 99, 235, 0.35);

  --bg:            #f5f7f9;
  --bg-sunken:     #e9edf1;
  --surface:       #ffffff;
  --surface-2:     #f1f4f7;
  --surface-hover: #eaeef2;
  /* En claro, «oscurecer» para ganar contraste con el texto es **bajar** el
     fondo un paso más que el de las tarjetas anidadas. */
  --fondo-tarjeta-saldo: #e2e8ee;
  /* En claro la ventana ya separa 3,97 del fondo velado: no hay nada que
     subir, y subirla apagaría el blanco sobre el que está todo calibrado. */
  --superficie-ventana: #ffffff;
  --border:        #8a8e93;   /* claro normal · 1,36 → 3,30 · y 3,07 contra el fondo · `D-501` */
  /* SUBIDO DE #b9c5ce, que daba 1,76:1 sobre la tarjeta. El tema claro tenía
     EXACTAMENTE el mismo defecto que el oscuro, y no se había visto porque el
     auditor solo miraba `:root`. Ahora 3,94:1 sobre tarjeta y 3,64 sobre el
     fondo — por encima del suelo con margen, no rozándolo. */
  /* ─── Y SUBIDO OTRA VEZ, PORQUE EL CLARO SEPARABA PEOR QUE EL OSCURO ─────
   *
   * Medido el 13 de agosto de 2026, después de bajar el fondo oscuro: la
   * tarjeta se despegaba **1,07 en claro contra 1,16 en oscuro**. El problema
   * que se vino a arreglar en oscuro estaba MÁS marcado en el otro tema.
   *
   * Y lo que separa una tarjeta **no es su relleno, es su borde**: 1,07 contra
   * 3,67. Con eso delante se midieron tres caminos:
   *
   *     opción                          relleno   borde   texto
   *     hoy                              1,07     3,67    15,68
   *     A · bajar el fondo a #eef1f5     1,13     3,48    15,68
   *     B · oscurecer el borde           1,07     4,64    15,68
   *
   * **La opción A —la que funcionó en oscuro— aquí EMPEORA lo que importa.**
   * Sube el relleno y baja el borde de 3,67 a 3,48, porque acerca el fondo al
   * tono del borde. La misma palanca, en el otro tema, tira al revés.
   *
   * Se elige B: `#647180` da **4,64**, por encima de los 4,34 del oscuro, y
   * **no cobra nada** — el relleno no se mueve, el texto de la tarjeta no se
   * mueve (15,68 clavados) y `--border-strong` no es fondo de ningún texto:
   * sus dos usos como `background` son hilos separadores de 1 y 2 px.
   *
   * El alto contraste no se toca: tiene su propio `#566670` más abajo, y ese
   * bloque va después. */
  --border-strong: #647180;

  --text:           #14202a;
  /* En claro el monto es tinta oscura, así que el tinte va sobre ella: apenas
     desplazada hacia el verde o el rojo, sin perder contraste contra el blanco. */
  --monto-ingreso:  #133026;
  --monto-gasto:    #33161a;
  --text-secondary: #46596a;
  /* Medido: #63788a daba 4.27:1 sobre `--bg`, por debajo del 4.5 exigido.
     El tono oscuro no valía para fondo claro tal cual. */
  --text-muted:     #56697a;

  /* Las tintas se oscurecieron tras medir el badge sobre su propio fondo teñido:
     con las anteriores el texto quedaba en 4.39 y 4.44:1, corto de 4.5. Un tono
     que funciona sobre el fondo oscuro no sobrevive sobre blanco. */
  --income:  #0f9d63; --income-ink:  #076b42; --income-bg:  rgba(15,157,99,0.12);
  --expense: #d84a43; --expense-ink: #a32d27; --expense-bg: rgba(216,74,67,0.12);
  --warning: #b87d1a; --warning-ink: #77500f; --warning-bg: rgba(184,125,26,0.12);
  --alerta-ink: #a85f14;   /* claro normal · 4,87 sobre blanco, el más justo de los cuatro */

  --grid: rgba(20, 32, 42, 0.10);
  --axis: rgba(20, 32, 42, 0.28);
  --chart-surface: #ffffff;

  --shadow-1: 0 1px 2px rgba(20, 32, 42, 0.08);
  --shadow-2: 0 8px 24px rgba(20, 32, 42, 0.12);

  /* La paleta se re-escala para fondo claro: los mismos catorce tonos, más
     oscuros. Un color pensado para fondo oscuro se pierde sobre blanco. */
  --paleta-1:  #1f6fd0;  --paleta-2:  #0e7f96;  --paleta-3:  #0a8a72;
  --paleta-4:  #2b8c3c;  --paleta-5:  #5f8317;  --paleta-6:  #96700f;
  --paleta-7:  #a85f14;  --paleta-8:  #c2453a;  --paleta-9:  #c14577;
  --paleta-10: #a63fa5;  --paleta-11: #7a52d1;  --paleta-12: #4a5fd1;
  --paleta-13: #4a6478;  --paleta-14: #9a5a2e;

  /* ─── LOOP · EL GRIS DE LO QUE FALTA POR RENOVAR · `D-465` ────────────────
   *
   * Kike: *«mis ojos no notaron el gris»*. No es `--surface-2`: eso es un fondo
   * y se pierde contra la tarjeta, que es exactamente lo que él no veía. Es un
   * tono propio, elegido para separarse de la tarjeta **y** de lo renovado, y
   * medido en las cuatro combinaciones. Cada modo lo redefine abajo, y **en
   * alto contraste sube**: es el que Kike usa. */
  --barra-pendiente:       #7d8b98;
  --barra-pendiente-borde: #4a5a67;
  --barra-en-curso:        #b87d1a;
  --barra-separador-actual: #ffffff;
  /* La línea que marca dónde acaba lo renovado. Se elige **contra el relleno
     de este modo**, no contra el texto: con el texto, en oscuro+alto contraste
     salía blanca sobre un azul clarísimo y desaparecía (1,80:1). */
  --barra-separador:       #ffffff;
}

/* ============================================================
   ALTO CONTRASTE (mandato VIS) — data-contrast="high"
   Se apila sobre oscuro o claro. Sube tinta a máximos, engrosa
   bordes y foco, e intensifica los semánticos.
   ============================================================ */
:root[data-contrast="high"] {
  /* ─── ALTO CONTRASTE · EL VELO SUBE, Y AHORA SE SABE POR QUÉ ─────────────
     Es el modo que usa Kike. Se bajó a 0,55 para salvar el borde contra el
     fondo — **medida equivocada**, ver arriba: el borde se mide contra su
     propia superficie y ahí da 5,14 en oscuro y 5,95 en claro, **pase lo que
     pase con el velo**. Liberado ese falso techo, el velo sube a 0,72: el
     contenido de detrás pierde ~72 % en oscuro y ~87 % en claro, que es lo
     que Kike pidió — *que no se distinga qué está activo*. */
  --velo-dialogo: rgba(0, 0, 0, 0.72);
  /* Azul claro con el texto azul muy oscuro: 9,7:1. Kike usa este modo. */
  --brand-boton:    #93c5fd;
  --text: #ffffff;
  --text-secondary: #dbe6ee;
  --text-muted: #b7c4cf;
  --border: #586b79;   /* oscuro alto contraste · 2,94 → 3,07 · `D-501` */
  --border-strong: #7d909e;
  /* En alto contraste la tinta ya está en máximos, así que la superficie tiene
     margen para subir más: con #26313d el texto apagado sigue en 7,43 y el
     borde fuerte en 4,00, muy por encima de sus mínimos. Es el modo de Kike. */
  --superficie-ventana: #26313d;
  --focus-width: 3px;
  --income:  #57efb0; --expense: #ff8f88; --warning: #ffcf5a;
  --alerta-ink: #ffb26a;   /* oscuro alto contraste */
  /* EN ALTO CONTRASTE EL TINTE DESAPARECE. Ahí manda leer sobre señalar, y el
     tipo ya se sabe por el selector. Se iguala a la tinta de máxima legibilidad. */
  --monto-ingreso: var(--text);
  --monto-gasto:   var(--text);
  --grid: rgba(219, 230, 238, 0.22);
  --axis: rgba(219, 230, 238, 0.55);

  /* En alto contraste la paleta sube luminosidad y saturación: el color deja de
     ser un matiz y pasa a ser una marca inequívoca. */
  --paleta-1:  #8dc0ff;  --paleta-2:  #66d8f0;  --paleta-3:  #5fe0c4;
  --paleta-4:  #86e88f;  --paleta-5:  #c4e864;  --paleta-6:  #ffd25e;
  --paleta-7:  #ffb26a;  --paleta-8:  #ff9a90;  --paleta-9:  #ff9dc2;
  --paleta-10: #f0a2ef;  --paleta-11: #c9adff;  --paleta-12: #a3b2ff;
  --paleta-13: #bccbd8;  --paleta-14: #f0ac72;
  /* En alto contraste el gris SUBE, no baja: es el modo que Kike usa y es
     donde el dato tiene que verse mejor, no peor. */
  --barra-pendiente:       #8fa0ae;
  --barra-pendiente-borde: #dbe6ee;
  --barra-en-curso:        #ffd25e;
  /* Aquí el relleno es azul clarísimo, así que el separador va OSCURO. */
  --barra-separador:       #080b0e;
  --barra-separador-actual: #080b0e;
}
:root[data-theme="light"][data-contrast="high"] {
  /* Aqui el texto del boton es blanco, asi que el relleno baja: 10,4:1. */
  --brand-boton:    #1e3a8a;
  --text: #000000;
  --text-secondary: #26333d;
  --text-muted: #3a4b57;
  --border: #83909a;   /* claro alto contraste · 2,92 → 3,27 · y 3,05 contra el fondo · `D-501` */
  --border-strong: #566670;
  --income: #0a7a4c; --expense: #b52c26; --warning: #8a5b10;
  --alerta-ink: #925311;   /* claro alto contraste */
  /* El bloque de alto contraste subía los semánticos base pero no las tintas de
     texto, así que el badge verde se quedaba en 4.39:1 incluso aquí. */
  --income-ink: #055936; --expense-ink: #8f231e; --warning-ink: #63420b;

  /* ─── Y HAY QUE REDECLARARLA AQUÍ, COMO LA PALETA ────────────────────────
     `[data-contrast="high"]` es común a los dos temas, así que el #26313d que
     sube la ventana en oscuro **se colaba en el tema claro**: ventana oscura
     con el texto en negro. Medido antes de arreglarlo: **42 elementos por
     debajo de AA**, la equis a 1,02. Es exactamente lo que ya pasó con los
     catorce tonos de la paleta, y por eso el aviso estaba escrito ahí arriba. */
  --superficie-ventana: #ffffff;

  /* LA PALETA HAY QUE REDEFINIRLA AQUÍ, y este era el peor defecto del tema
     claro. El bloque `[data-contrast="high"]` sube la luminosidad de los catorce
     tonos, que es lo correcto sobre fondo oscuro; sobre blanco hace lo contrario.
     Medido: las catorce muestras daban entre 1.39:1 y 2.04:1 contra la tarjeta
     blanca, cuando el mínimo para un gráfico que porta información es 3:1.
     Encender el alto contraste EMPEORABA la legibilidad — exactamente al revés
     de lo que pide quien lo enciende.

     Estos tonos parten de la paleta clara y se oscurecen hasta pasar de 6:1, el
     doble del mínimo. `paleta-14` no es el resultado mecánico: oscurecer todo a
     la misma luminancia comprimía la diferencia de tono con `paleta-7` hasta
     ΔE 10.7, y ese par ya era el más parecido. Se buscó un tono de tierra que
     mantuviera 6:1 y recuperara la distancia. Peor par resultante: ΔE 14.4,
     prácticamente el de la paleta clara (15.4). */
  --paleta-1:  #1b62b7;  --paleta-2:  #0c6c7f;  --paleta-3:  #08705c;
  --paleta-4:  #237131;  --paleta-5:  #4e6b13;  --paleta-6:  #7e5e0d;
  --paleta-7:  #925311;  --paleta-8:  #ad3d34;  --paleta-9:  #a63b66;
  --paleta-10: #9a3b99;  --paleta-11: #704bc0;  --paleta-12: #4659c4;
  --paleta-13: #4a6478;  --paleta-14: #754c44;
  --barra-pendiente:       #6b7a87;
  --barra-pendiente-borde: #000000;
  --barra-en-curso:        #8a5b10;
  --barra-separador:       #ffffff;
  --barra-separador-actual: #ffffff;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOS TONOS DE LOS DOS PIES · el amarillo y el azul de Flow
   ─────────────────────────────────────────────────────────────────────────
   Kike, 26 de agosto de 2026: «que use para los pies variantes del amarillo y
   del azul de Flow, el tono del logo, asi se vera todo unificado y no con
   colores raros como ahora, que tiene un violeta rosado que no va con la
   linea grafica».

   DE DONDE SALEN LOS DOS TONOS, que no se inventan:
     · el AZUL es #3b82f6 — el rectangulo del isotipo en
       `assets/icons/flow-icono.svg`, y el mismo valor que `--brand` (linea 32).
     · el AMARILLO **no esta en el logo**. Medido: el isotipo solo tiene
       #3b82f6 y #ffffff, y el PNG de 512 px tampoco trae otro tono. Se usa el
       ambar que Flow ya tenia, `--paleta-6` (#e0b143), y **queda a la espera
       de que Kike fije el suyo**: cambiando el tono base aqui se regenera todo.

   POR QUE TOKENS PROPIOS Y NO `--paleta-N`:
   la paleta de catorce la usan otras pantallas. Redefinirla para arreglar dos
   pies habria cambiado graficos que nadie ha pedido tocar.

   EL SUELO, Y QUE SE MIDIO:
   entre **dos porciones cualesquiera** del mismo pie hacen falta dE 15, no
   solo entre vecinas, porque se lee del circulo a la lista y de la lista al
   circulo. Tres grises a dE 5,0 eran una sola linea gorda (`D-669`).
   Medido en las cuatro combinaciones, el peor par de los ocho:
       oscuro 23,9 · claro 18,8 · oscuro+alto 22,2 · claro+alto 17,8
   y cada porcion contra su fondo, 3,28 como minimo. La tabla entera de los
   28 pares esta en el informe del 26/08/2026.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --pie-1: #f9b539;
  --pie-2: #037de2;
  --pie-3: #a97004;
  --pie-4: #9da0fe;
  --pie-5: #c7b052;
  --pie-6: #a1c2ff;
  --pie-7: #ffeaaa;
  --pie-8: #7677b1;
  --pie-sec-1: #fddc00;
  --pie-sec-2: #4a70fe;
  --pie-sec-3: #8b7b41;
}
:root[data-theme="light"] {
  --pie-1: #8c7903;
  --pie-2: #17368d;
  --pie-3: #825500;
  --pie-4: #016cbe;
  --pie-5: #b7843a;
  --pie-6: #8888c8;
  --pie-7: #866c36;
  --pie-8: #033f71;
  --pie-sec-1: #bd8300;
  --pie-sec-2: #236de4;
  --pie-sec-3: #483d03;
}
:root[data-contrast="high"] {
  --pie-1: #f9b539;
  --pie-2: #1389eb;
  --pie-3: #a18b04;
  --pie-4: #9b9df8;
  --pie-5: #e2ac64;
  --pie-6: #6986c0;
  --pie-7: #ffeaaa;
  --pie-8: #a1c2ff;
  --pie-sec-1: #fddc00;
  --pie-sec-2: #537eff;
  --pie-sec-3: #96864a;
}
:root[data-theme="light"][data-contrast="high"] {
  --pie-1: #948018;
  --pie-2: #09348d;
  --pie-3: #ae7d37;
  --pie-4: #1761af;
  --pie-5: #6f4802;
  --pie-6: #6c8fc9;
  --pie-7: #9e8d52;
  --pie-8: #033061;
  --pie-sec-1: #bd8300;
  --pie-sec-2: #236de4;
  --pie-sec-3: #463b00;
}

/* ══════════════════════════════════════════════════════════════════════════
 LAS DOS PARTES DE LA BARRA DE «COMO ESTAMOS»
 ──────────────────────────────────────────────────────────────────────────
 SE LLAMAN `--situacion-*` Y NO `--barra-*` POR UNA RAZON MEDIDA: `--barra-pagado`
 y `--barra-pendiente` **ya existian** en Flow, con cuatro definiciones cada uno,
 para las barras de otra pantalla. Al reutilizar el nombre pasaron dos cosas: en
 tema oscuro ganaba el suyo —mas especifico— y esta barra salia con 1,03 de
 contraste entre sus dos partes; y en tema claro ganaba el mio, **cambiando la
 barra de la otra pantalla**, que nadie habia pedido tocar.

 *Un nombre repetido no falla: se lleva el segundo* — la misma leccion que `D-114`
 con los identificadores, ahora con los tokens
 ──────────────────────────────────────────────────────────────────────────
 Una barra partida tiene DOS elementos graficos que se tocan, asi que no basta
 con que cada uno se vea contra el fondo: **tienen que verse entre si**, y el
 suelo es el mismo 3:1 (`D-708`).

 Medido: ninguno de los once tonos de los pies cumple las dos cosas a la vez en
 las cuatro combinaciones — el mejor par se queda en **2,65**. Asi que la barra
 lleva su propio par, buscado dentro de las mismas dos familias de marca —el
 amarillo y el azul de Flow— con los tres suelos a la vez:

     oscuro   entre si 3,78 · contra el fondo 3,78 y 14,26
     claro    entre si 3,75 · contra el fondo 14,04 y 3,75

 Y ademas la parte pendiente va **rayada** y la pagada llena: *el color nunca es
 la unica senal*, y la forma sobrevive a cualquier daltonismo.
 ══════════════════════════════════════════════════════════════════════════ */
:root {
  --situacion-pagado: #6a70bd;
  --situacion-pendiente: #feeab1;
}
:root[data-theme="light"] {
  --situacion-pagado: #162959;
  --situacion-pendiente: #94834a;
}
:root[data-contrast="high"] {
  --situacion-pagado: #6a70bd;
  --situacion-pendiente: #feeab1;
}
:root[data-theme="light"][data-contrast="high"] {
  --situacion-pagado: #162959;
  --situacion-pendiente: #94834a;
}

/* ══════════════════════════════════════════════════════════════════════════
 UN COLOR POR FILA EN «COMO ESTAMOS» · DESACTIVADOS el 26/08/2026
 ──────────────────────────────────────────────────────────────────────────
 **Ya no los usa nadie.** Kike cambió el criterio: el color de la barra pasa a
 decir EN QUE ESTADO esta la fila —cubierto, pagado, pendiente— en vez de DE QUE
 FILA es, porque el nombre de la fila ya la identifica y el color queda libre
 para lo que importa. Eso retira de golpe la necesidad de cinco colores
 distinguibles entre si.
 **Se dejan escritos y no se borran**: comprobado con `grep` que ninguna hoja ni
 ninguna vista los usa fuera de este bloque. Si vuelven a hacer falta, estan
 medidos —dE 23,4 entre dos cualesquiera— y no hay que rehacer el calculo.

 ── lo que fueron ─────────────────────────────────────────────────────────
 UN COLOR POR FILA · el amarillo y el azul de Flow
 ──────────────────────────────────────────────────────────────────────────
 Kike, 26/08/2026: las cinco barras eran del mismo morado, que no es ninguno de
 los dos colores de marca. Ahora cada fila tiene el suyo, y son variantes del
 azul del isotipo y del ambar.

 TRES SUELOS A LA VEZ, no uno: cada color se toca con dos cosas distintas.
   · dE 15 entre dos filas CUALESQUIERA — se lee de una fila a otra
   · 3:1 contra el fondo de la tarjeta
   · 3:1 contra el rayado del pendiente, que es comun y toca a los cinco
 Medido: peor par dE 23,4 (oscuro) y 25,0 (claro); contra el fondo 3,16; contra
 el rayado 3,17; y el rayado contra el fondo 13,85 y 11,54.

 `--situacion-raya` sustituye a `--situacion-pendiente`: al dar color propio a
 cada fila, la parte pagada ya no es un solo tono, asi que el rayado tiene que
 verse contra los CINCO y no contra uno.
 ══════════════════════════════════════════════════════════════════════════ */
:root {
  --fila-1: #236de4;
  --fila-2: #a37b00;
  --fila-3: #6582b4;
  --fila-4: #786a38;
  --fila-5: #5d63b3;
  --situacion-raya: #fde6af;
  /* Valor de respaldo: cada fila lo sobrescribe con el suyo. Sin declararlo, una
     fila que se pintara sin su color se quedaría sin fondo y en silencio. */
  --fila-color: var(--fila-1);
}
:root[data-theme="light"] {
  --fila-1: #697bf6;
  --fila-2: #b68a01;
  --fila-3: #728fc2;
  --fila-4: #ae8a5e;
  --fila-5: #3d93f1;
  --situacion-raya: #4e340b;
}
:root[data-contrast="high"] {
  --fila-1: #236de4;
  --fila-2: #a37b00;
  --fila-3: #6582b4;
  --fila-4: #786a38;
  --fila-5: #5d63b3;
  --situacion-raya: #fde6af;
}
:root[data-theme="light"][data-contrast="high"] {
  --fila-1: #697bf6;
  --fila-2: #b68a01;
  --fila-3: #728fc2;
  --fila-4: #ae8a5e;
  --fila-5: #3d93f1;
  --situacion-raya: #4e340b;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOS TRES ESTADOS DE UNA SALIDA · cubierto · pagado · pendiente
   ──────────────────────────────────────────────────────────────────────────
   Kike, 26/08/2026: el color de la barra deja de decir DE QUE FILA es y pasa a
   decir EN QUE ESTADO esta. El nombre de la fila ya la identifica.

   EL CUBIERTO Y EL PENDIENTE NO SE TOCAN NUNCA: una barra cubierta es verde
   entera. Los que SI se tocan son el pagado y el rayado, y por eso son los que
   se miden entre si (`D-708`, `D-731`).

   EL AMBAR DE LA BARRA NO ES `--warning`, y esta medido por que: el `--warning`
   de tema oscuro esta a **9,24** del fondo, asi que para 3:1 con el rayado ese
   rayado tendria que quedarse por debajo de 3,08 contra el fondo — y necesita 3.
   La ventana era de siete centesimas. Este par deja **4,07 entre si** y 4,07 y
   16,57 contra el fondo.

   `--warning` y `--income` siguen usandose donde NO se tocan con nada: el
   porcentaje y las cifras, que van sobre el fondo de la tarjeta.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --salida-cubierto: var(--income);
  --salida-pagado:   #a87103;
  --salida-rayado:   #fcfcfc;
  --salida-canal:    var(--surface-2);
}
:root[data-contrast="high"] {
  --salida-pagado: #a87103;
  --salida-rayado: #fcfcfc;
}
:root[data-theme="light"] {
  --salida-pagado: #9f6a00;
  --salida-rayado: #000000;
}
:root[data-theme="light"][data-contrast="high"] {
  --salida-pagado: #9f6a00;
  --salida-rayado: #000000;
}

/* ══════════════════════════════════════════════════════════════════════════
 EL AMARILLO DE LAS SALIDAS ES EL DE LA LINEA DEL ANO ACTUAL
 ──────────────────────────────────────────────────────────────────────────
 Kike, 26/08/2026: el ambar de antes se veia anaranjado y tenia que ser el
 mismo amarillo que la linea del ano en curso del comparador de facturacion.

 **De que token sale, leido de la pantalla y no del codigo:** esa linea es la
 de 5 px con `grafico-linea--a`, y su `stroke` resuelto es `var(--paleta-6)`.
 Es ese, no uno parecido.

 ── Y EL 3:1 CONTRA EL RAYADO NO SE ALCANZA EN TEMA OSCURO ────────────────
 Medido: `--paleta-6` esta a **8,53** del fondo en tema oscuro, asi que para
 3:1 con el rayado ese rayado tendria que quedarse **por debajo de 2,84**
 contra el fondo — y necesita 3 para verse. **La ventana es negativa: no hay
 ningun gris que cumpla**, y no es la paleta, es aritmetica.

     oscuro        amarillo 8,53 · rayado 3,05 · entre si **2,80**  ← no llega
     oscuro+alto   amarillo 11,84 · rayado 3,05 · entre si 3,88
     claro         amarillo 4,54 · rayado 21,00 · entre si 4,62
     claro+alto    amarillo 6,01 · rayado 21,00 · entre si 3,49

 **No se aflojo el suelo ni se cambio el amarillo.** Se hace lo que Flow ya
 hace cuando dos regiones que se tocan no llegan (`D-727`, `D-731`): **un surco
 del color del fondo entre las dos**, mas la forma —solido contra rayado— y las
 dos cifras escritas al lado. Cada parte se ve contra el surco, y el surco se ve
 contra las dos.
 ══════════════════════════════════════════════════════════════════════════ */
:root {
  --salida-pagado: var(--paleta-6);
  --salida-rayado: #686868;
}
:root[data-theme="light"] {
  --salida-pagado: var(--paleta-6);
  --salida-rayado: #000000;
}
:root[data-contrast="high"] {
  --salida-pagado: var(--paleta-6);
  --salida-rayado: #686868;
}
:root[data-theme="light"][data-contrast="high"] {
  --salida-pagado: var(--paleta-6);
  --salida-rayado: #000000;
}

/* ═══ LOS CUATRO AÑOS DE LA CURVA ACUMULADA · 27/08/2026 ══════════════════════
 *
 * Cuatro tonos, uno por año, y **el color no es la única señal**: cada serie
 * lleva además su trazo —continuo, rayado largo, rayado corto, punteado—. Es la
 * lección de `D-669`: tres grises a ΔE 5,0 se leían como una sola línea gorda.
 *
 * El del año en curso (`--serie-1`) es el ámbar de Billing porque es el que se
 * mira; los otros tres son azules que se separan por luminosidad, así que se
 * distinguen también en escala de grises.
 *
 * Todos por encima de 3:1 contra el fondo de tarjeta —son elementos gráficos— y
 * **separados entre sí**, que es lo que pedía `D-708`: dos cosas que se tocan se
 * miden entre ellas y no solo contra el fondo.
 */
/* ─── MEDIDOS, NO ELEGIDOS A OJO ────────────────────────────────────────────
 * La primera tanda de tonos se midió en la pantalla y **`--serie-4` daba 2,09:1
 * contra el fondo de tarjeta**, por debajo del 3:1 que pide un elemento
 * gráfico, y `--serie-3` pasaba raspando con 3,27. Se suben todos un escalón.
 * *Se prueba el medidor antes de creerle*, y aquí el medidor dijo que no. */
:root {
  --serie-1: #e9b84a;   /* año en curso · el ámbar de Billing */
  --serie-2: #a9c8ff;   /* el anterior */
  --serie-3: #6f9ae0;
  --serie-4: #4a6da8;
}
:root[data-theme="light"] {
  --serie-1: #a1701a;
  --serie-2: #2d5fae;
  --serie-3: #17427f;
  --serie-4: #0d2a55;
}
/* En alto contraste no basta con subir la saturación: los cuatro se separan más
   en luminosidad, que es lo que se distingue sin color. */
:root[data-contrast="high"] {
  --serie-1: #ffd457;
  --serie-2: #d6e6ff;
  --serie-3: #92b6ec;
  --serie-4: #6f9ae0;
}
:root[data-theme="light"][data-contrast="high"] {
  --serie-1: #6b4a00;
  --serie-2: #1f4f9c;
  --serie-3: #12356b;
  --serie-4: #071e40;
}

/* ─── CUÁNTAS TARJETAS DE CUENTA POR FILA · 27/08/2026 ───────────────────────
 *
 * Los declara la vista, que es la única que sabe cuántas tarjetas hay: con `n`
 * tarjetas y un tope de `C` columnas, la última fila lleva `n mod C`, y **si eso
 * vale 1 se baja una columna** para que ninguna fila quede con una sola.
 *
 * Aquí están sus valores por omisión, que es lo que se ve si la vista no dijera
 * nada. `auditar_estilos` los pedía, y con razón: *una variable que solo existe
 * en el sitio que la usa no se puede leer desde ninguna parte.*
 */
:root { --c2: 2; --c3: 3; --c4: 4; }

/* ─── EL COLOR DEL MÓDULO · SUS CUATRO TONOS · 27/08/2026 ────────────────────
 *
 * Los emite la vista como cuatro variables en línea, sacados de `PaletaModulos`
 * a partir del **único** color que se elige por módulo: *el que funciona en
 * oscuro no funciona en claro*, así que se genera uno por combinación.
 *
 * Aquí están sus valores por omisión —el azul de marca—, que es lo que se ve si
 * un módulo no tuviera color. `auditar_estilos` los pidió, y con razón: *una
 * variable que solo existe donde se usa no se puede leer desde ninguna parte.*
 *
 * **Cuántos tonos caben, medido antes de asignar** el 27/08/2026 sobre el fondo
 * de tarjeta, con 3:1 contra el fondo y ΔE ≥ 15 entre dos cualesquiera: **57 en
 * oscuro y 60 en claro**. Los nueve módulos van a 40° de tono — más del triple
 * de la separación que hace falta.
 */
:root {
  --mod-dark:       var(--brand);
  --mod-dark-alto:  var(--brand);
  --mod-light:      var(--brand);
  --mod-light-alto: var(--brand);
}