/* Tokens de diseño — dirección «fintech moderno». Evolución de «Confianza».
   Fuente de verdad: docs/02-identidad-visual.md */
:root{
  /* Marca — teal moderno más vivo.
     `--accent` es el color gráfico (bordes, iconos, barras, puntos). Sobre él
     NO se pone texto blanco: blanco sobre #0D9488 da 3.74:1 y no pasa AA. Las
     superficies sólidas con texto blanco usan `--accent-strong` (5.1:1). */
  --accent:#0D9488; --accent-strong:#0B7B71; --accent-soft:#E3F5F1; --accent-ink:#FFFFFF;
  /* Superficie teñida de acento que SE VE en los dos temas: cuadro del icono
     de las tarjetas del portal, encabezado de tabla. `--accent-soft` en oscuro
     (#0E2A28) queda casi al nivel de `--surface` y todo se ve lavado. */
  --accent-tint:#DCF2EE; --accent-tint-line:#9FD9D1;
  /* Neutros fríos e intencionales (leve sesgo azul, no gris puro) */
  --bg:#F4F6FA; --surface:#FFFFFF; --ink:#0C1420; --muted:#5B6675; --line:#E7EBF1;
  /* Semánticos. Cada uno pasa AA (≥4.5:1) sobre su propio `*-bg`, sobre
     `--surface` y sobre `--bg`: son el color del TEXTO de chips y avisos. */
  --good:#0B7E57; --good-bg:#E4F6EE;
  --warn:#98610C; --warn-bg:#FBEFD5;
  --bad:#D11B43;  --bad-bg:#FDE7EC;
  /* Los controles nativos (barras de desplazamiento, selectores de fecha,
     autocompletado) siguen el tema; sin esto se ven claros sobre fondo oscuro. */
  color-scheme:light;

  /* ── Gráficos ───────────────────────────────────────────────────────────
     Paleta validada con el verificador de la guía de visualización (banda de
     luminosidad, croma, separación bajo daltonismo y contraste sobre la
     superficie). NO sustituir un tono a ojo: hay que volver a validar.
     `--c1..c3` = identidad (categorías). `--seq-1..4` = rampa de un solo tono
     para categorías ORDENADAS (edad de cartera). */
  --c1:#1BA394; --c2:#3B72D9; --c3:#D9611B;
  --seq-1:#4FC4B6; --seq-2:#1BA394; --seq-3:#0C7D71; --seq-4:#07524B;
  --chart-grid:#EDF1F6; --chart-axis:#DCE3EC; --chart-track:#F1F4F9;

  /* Forma */
  --radius:16px;
  --shadow:0 1px 2px rgba(12,20,32,.035), 0 10px 30px rgba(12,20,32,.05);
  --shadow-lg:0 2px 6px rgba(12,20,32,.05), 0 26px 56px rgba(12,20,32,.10);
  /* Tipografía: Inter para interfaz y datos, Inter Tight para títulos y cifras.
     Inter Tight es la misma letra con menos ancho: los titulares y las cifras
     grandes se compactan sin cambiar de voz. Ambas auto-alojadas en
     `fonts-inter.css` (solo subconjuntos latin y latin-ext). */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* Escala tipográfica — única fuente de tamaños de texto.
     Todo tamaño de fuente en plantillas/CSS sale de aquí; no escribir px sueltos. */
  --text-xs:12px;      /* metadatos, notas al pie */
  --text-sm:13px;      /* cuerpo mínimo legible (contraste AA) */
  --text-base:14px;    /* cuerpo de interfaz, tablas */
  --text-md:15px;      /* texto destacado dentro de una tarjeta */
  --text-lg:16px;      /* título de sección dentro de una tarjeta */
  --text-xl:18px;      /* título de sección de página (h2) */
  --text-2xl:22px;     /* cifra destacada */
  --text-3xl:28px;     /* cifra insignia */

  /* Escala de espaciado — múltiplos de 4; los márgenes salen de aquí. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  /* Superficie oscura FIJA: barras de marca, panel insignia, tooltips. No se
     invierte con el tema — es slate profundo con texto blanco en claro y en
     oscuro. Antes usaban `--ink`, que en tema oscuro es casi blanco y dejaba
     texto blanco sobre fondo blanco. */
  --panel:#0C1420; --panel-ink:#FFFFFF; --panel-muted:rgba(255,255,255,.78);

  /* Sidebar oscuro en ambos temas. El muted sube a .66: a .5 quedaba en 4.2:1 sobre el fondo oscuro. */
  --sidebar-bg:#0C1420; --sidebar-ink:#E9EDF4; --sidebar-muted:rgba(233,237,244,.66);
  --sidebar-hover:rgba(255,255,255,.06); --sidebar-active:rgba(13,148,136,.20);
  --sidebar-line:rgba(255,255,255,.08);
}

/* Modo oscuro derivado */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --accent:#2DD4BF; --accent-strong:#5EEAD4; --accent-soft:#0E2A28; --accent-ink:#04211E;
    --accent-tint:rgba(45,212,191,.16); --accent-tint-line:rgba(45,212,191,.34);
    --bg:#0A0E16; --surface:#141A24; --ink:#E8ECF3; --muted:#8B94A6; --line:#232B38;
    --good:#34D399; --good-bg:#0E2A22; --warn:#E0A93B; --warn-bg:#2E2413; --bad:#FB7185; --bad-bg:#331A22;
    --c1:#20A99A; --c2:#5B8FE8; --c3:#D9772E;
    --seq-1:#9DEFE3; --seq-2:#57DCC7; --seq-3:#2BB0A2; --seq-4:#1C7D74;
    --chart-grid:#1E2632; --chart-axis:#2A3341; --chart-track:#1A212C;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.45);
    --shadow-lg:0 2px 4px rgba(0,0,0,.35), 0 22px 48px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --accent:#2DD4BF; --accent-strong:#5EEAD4; --accent-soft:#0E2A28; --accent-ink:#04211E;
  --accent-tint:rgba(45,212,191,.16); --accent-tint-line:rgba(45,212,191,.34);
  --bg:#0A0E16; --surface:#141A24; --ink:#E8ECF3; --muted:#8B94A6; --line:#232B38;
  --good:#34D399; --good-bg:#0E2A22; --warn:#E0A93B; --warn-bg:#2E2413; --bad:#FB7185; --bad-bg:#331A22;
  --c1:#20A99A; --c2:#5B8FE8; --c3:#D9772E;
  --seq-1:#9DEFE3; --seq-2:#57DCC7; --seq-3:#2BB0A2; --seq-4:#1C7D74;
  --chart-grid:#1E2632; --chart-axis:#2A3341; --chart-track:#1A212C;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.45);
  --shadow-lg:0 2px 4px rgba(0,0,0,.35), 0 22px 48px rgba(0,0,0,.55);
}