/*
  Smart-175 — design tokens
  Paleta compartida por todos los módulos.

  DOS familias de color, con propósitos distintos:

  1. Color de MARCA — `--accent` / `--accent-2`. Solo para el cromado de la
     interfaz (botones, navegación activa, foco, logotipo). NO aparece dentro
     de ninguna figura de datos.

  2. Colores de DATOS — el par divergente `--enriched` / `--depleted`, los
     estados `--good` / `--warning` / `--critical`, y la escala categórica
     `--cat-1..8` (cat-8 = "otros", siempre gris). Codifican significado en
     las figuras: NO se reasignan ni se cambian módulo a módulo. Si un color
     no está aquí, no se usa en la app.

  SISTEMA DE DISEÑO v2 (piloto, 28 sep 2026) — bloques `[data-ds="v2"]` al
  final de este archivo. Valores del sistema generado con UI UX Pro Max:
  design-system/smart-175/MASTER.md ("Analytics Dashboard" / "Data-Dense
  Dashboard", densidad 6), con los 6 ajustes aprobados en la revisión:
  texto casi negro neutro (no el azul marino del MASTER), azul #1E40AF solo
  para marca/acciones (oscurecido a #00107C / #93C5FD en oscuro para no
  confundirse con los colores de datos, ver el bloque v2), ámbar #D97706 solo como relleno o resalte (nunca
  texto sobre blanco: 3,2:1), Fira Sans en toda la interfaz y Fira Code
  solo para cifras, tema oscuro derivado a mano (el MASTER no lo trae) y
  los colores de DATOS de arriba sin tocar (validados para daltonismo).
  Desde el 28 sep 2026 (fase global) el atributo va en <body> (index.html y
  el HTML autocontenido del informe), así que cubre toda la app: módulos,
  barra lateral, cajón móvil, pie e informe. :root sigue con los valores
  de antes a propósito: es lo que ve cualquier cosa FUERA de <body> (el
  fondo de <html> en el rebote del scroll) y la base de los colores de
  DATOS, que v2 no redefine. Las figuras (<svg>) conservan IBM Plex: ver
  «figuras» al final de components.css.
*/

:root {
  color-scheme: light;

  /* superficies */
  --surface: #fcfcfb;
  --page: #f7f7f5;
  --border: rgba(11, 11, 11, 0.10);
  --border-strong: rgba(11, 11, 11, 0.16);
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 10px 30px -8px rgba(11, 11, 11, 0.08);
  --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.05);
  /* sombra de color del botón primario al pasar el ratón (sale de --accent,
     así que sigue sola al tema claro/oscuro) */
  --shadow-btn-primary: 0 5px 16px -5px color-mix(in srgb, var(--accent) 60%, transparent);

  /* tinta */
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --ink-muted: #6f6e69; /* WCAG AA: 4.98:1 sobre --surface, 4.76:1 sobre --page (antes #898781 = 3.4:1, texto normal) */
  /* líneas de figura: gridline = rejilla suave, baseline = ejes con más peso */
  --gridline: #e4e3dc;
  --baseline: #a9a79b;

  /* MARCA (no es un color de datos). Teal profundo: WCAG AAA sobre --surface
     y --page, y a ΔE(OKLab) >= 15 de las 8 categorías de datos, para que un
     botón nunca se confunda con una serie. */
  --accent: #12615f;
  --accent-2: #17756f;
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --ring: color-mix(in srgb, var(--accent) 55%, transparent);

  /* DATOS · par divergente: enriquecido / reducido */
  --enriched: #e34948;
  --depleted: #2a78d6;
  --neutral: #a6a49c;

  /* DATOS · signo de correlación (+/−). Alias del par divergente ya validado
     (CVD-safe): azul = correlación positiva, rojo = negativa, como en un
     correlograma RdBu clásico. Aliased, no re-hex, para que el color de la
     correlación sea semánticamente independiente de enriquecido/reducido
     pero visualmente coherente. */
  --corr-pos: var(--depleted);
  --corr-neg: var(--enriched);
  --corr-zero: color-mix(in srgb, var(--baseline) 42%, var(--surface)); /* r ≈ 0: gris neutro visible en claro y oscuro */
  --corr-diag: color-mix(in srgb, var(--baseline) 55%, var(--surface)); /* diagonal de la matriz (r=1 fijo, fuera de la escala de datos): un gris algo más marcado que --corr-zero para distinguir "no aplica" de "sin correlación" */

  /* DATOS · estado */
  --good: #0ca30c;
  --warning: #fab219;
  --critical: #d03b3b;

  /* DATOS · paleta categórica (orden fijo, no ciclar) — barplots taxonómicos */
  --cat-1: #2a78d6; /* azul */
  --cat-2: #eb6834; /* naranja */
  --cat-3: #1baf7a; /* aguamarina */
  --cat-4: #eda100; /* amarillo */
  --cat-5: #e87ba4; /* magenta */
  --cat-6: #008300; /* verde */
  --cat-7: #4a3aa7; /* violeta */
  --cat-8: #a6a49c; /* "otros" — siempre gris, nunca un 9º tono */

  /* tipografía */
  --font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --dur: .14s;
  --ease: cubic-bezier(.2, .6, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #1a1a19;
    --page: #0d0d0d;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.45);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);

    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --ink-muted: #898781;
    --gridline: #2c2c2b;
    --baseline: #4c4c46;

    --accent: #57c9be;
    --accent-2: #74d6cb;
    --accent-ink: #04211f;
    --accent-soft: color-mix(in srgb, var(--accent) 15%, var(--surface));
    --ring: color-mix(in srgb, var(--accent) 60%, transparent);

    --enriched: #e66767;
    --depleted: #3987e5;
    --neutral: #6f6d67;
    --corr-pos: var(--depleted);
    --corr-neg: var(--enriched);
    --corr-zero: color-mix(in srgb, var(--baseline) 42%, var(--surface));
    --corr-diag: color-mix(in srgb, var(--baseline) 55%, var(--surface));

    --good: #0ca30c;
    --warning: #fab219;
    --critical: #e66767;

    --cat-1: #3987e5;
    --cat-2: #d95926;
    --cat-3: #199e70;
    --cat-4: #c98500;
    --cat-5: #d55181;
    --cat-6: #008300; /* = referencia dataviz (verde invariante); antes #2fbf2f caía fuera de banda en oscuro */
    --cat-7: #9085e9;
    --cat-8: #6f6d67;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #1a1a19;
  --page: #0d0d0d;
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);

  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --ink-muted: #898781;
  --gridline: #2c2c2b;
  --baseline: #4c4c46;

  --accent: #57c9be;
  --accent-2: #74d6cb;
  --accent-ink: #04211f;
  --accent-soft: color-mix(in srgb, var(--accent) 15%, var(--surface));
  --ring: color-mix(in srgb, var(--accent) 60%, transparent);

  --enriched: #e66767;
  --depleted: #3987e5;
  --neutral: #6f6d67;

  --good: #0ca30c;
  --warning: #fab219;
  --critical: #e66767;

  --cat-1: #3987e5;
  --cat-2: #d95926;
  --cat-3: #199e70;
  --cat-4: #c98500;
  --cat-5: #d55181;
  --cat-6: #008300; /* = referencia dataviz (verde invariante); antes #2fbf2f caía fuera de banda en oscuro */
  --cat-7: #9085e9;
  --cat-8: #6f6d67;
}

/* ============================================================
   SISTEMA DE DISEÑO v2 — piloto (ver cabecera). Solo marca, superficies,
   tinta, tipografía, radios, sombras y espaciado: los colores de DATOS no
   se redefinen. Los tokens derivados (--accent-soft, --ring,
   --shadow-btn-primary) se repiten aquí porque un var() se resuelve donde
   se declara: heredados de :root seguirían saliendo del teal.
   Contraste (WCAG, texto normal ≥ 4,5:1), claro / oscuro:
     ink 17,1 / 17,4 · ink-2 9,9 / 12,8 · ink-muted 7,2 / 7,4 (sobre --page)
     accent sobre surface 14,7 / 9,6 · accent-ink sobre accent 14,7 / 10,4
   Marca frente a DATOS (tarea 5, mismo criterio que el teal en 40a9be5:
   ΔE OKLab ×100 ≥ 15 contra --cat-1..8, --enriched/--depleted y los estados;
   lo comprueba tests/design-v2.mjs). El azul del MASTER no pasaba:
     claro  #1E40AF → ΔE 5,7 de cat-7 · 15,5 de cat-1/depleted
     oscuro #60A5FA → ΔE 9,1 de cat-7 · 9,3 de cat-1/depleted
   Se ajusta la MARCA (los datos no se tocan, están validados para CVD):
     claro  #00107C → mín. ΔE 16,4 (cat-7) · 29,6 de cat-1 · 15,2 de --ink
     oscuro #93C5FD → mín. ΔE 16,4 (cat-7) · 19,8 de cat-1/depleted
   La rampa SECUENCIAL (palettes.js, un solo matiz azul de claro a oscuro)
   no entra en el suelo: cubre todo el eje de luminosidad del azul, ningún
   azul de marca puede quedar a 15 de todas sus paradas, y se lee como
   escala continua con su barra de color, no como una serie (mín. 12,6 en
   claro, 3,7 en oscuro; el teal aprobado también quedaba a 4,3).
     negro sobre --highlight 6,6 / 9,8 · --good-ink sobre su insignia ≥ 4,5 (tests/design-v2.mjs)
   ============================================================ */
[data-ds="v2"] {
  --surface: #ffffff;
  --page: #f8fafc;
  --border: #dbe4f0;
  --border-strong: #c3d0e3;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 10px -2px rgba(15, 23, 42, 0.08);

  --ink: #0f172a;
  --ink-2: #334155;
  --ink-muted: #475569;

  /* azul de marca: el #1E40AF del MASTER quedaba a ΔE 5,7 de --cat-7 y 15,5
     de --cat-1/--depleted (tarea 5, 28 sep 2026) → ultramar más oscuro, a
     ΔE ≥ 15 de TODOS los colores de datos y también de --ink (ver arriba) */
  --accent: #00107c;
  --accent-2: #000a5a;
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 8%, var(--surface));
  --ring: color-mix(in srgb, var(--accent) 50%, transparent);
  --shadow-btn-primary: 0 5px 16px -5px color-mix(in srgb, var(--accent) 55%, transparent);

  /* resalte ámbar del MASTER: SOLO relleno/marcas, con --highlight-ink encima */
  --highlight: #d97706;
  --highlight-ink: #000000;
  /* texto de estado "hay datos": --good (#0ca30c) como texto da 3,2:1 sobre
     blanco; en v2 el verde de datos queda como indicador y el texto va en
     este tono, ≥ 4,5:1 también sobre su fondo teñido */
  --good-ink: #166534;
  /* igual para --warning (#fab219): como texto da 1,8:1 sobre blanco */
  --warning-ink: #8a5a00;
  /* --critical como texto pasa sobre la superficie (≥ 4,6:1) pero no sobre
     su propia insignia tintada (3,8:1): tono para texto sobre ese fondo */
  --critical-ink: #b21722;
  /* alias de tokens que algunos módulos usaban sin estar definidos (con un
     fallback CLARO fijo que en oscuro dejaba texto claro sobre gris claro):
     se resuelven aquí, en el mismo elemento, así que siguen al tema */
  --surface-2: var(--page);
  --panel: var(--surface);
  --ink-1: var(--ink);
  --ink-3: var(--ink-muted);

  --font-display: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Fira Code", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* escala de espaciado del MASTER (densidad 6/10) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  --dur: .18s;

  color: var(--ink);
  font-family: var(--font-body);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-ds="v2"] {
    --surface: #141b28;
    --page: #0c1018;
    --border: rgba(148, 163, 184, 0.16);
    --border-strong: rgba(148, 163, 184, 0.30);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -8px rgba(0, 0, 0, 0.55);
    --ink: #f1f5f9;
    --ink-2: #cbd5e1;
    --ink-muted: #94a3b8;
    --accent: #93c5fd;
    --accent-2: #bfdbfe;
    --accent-ink: #0b1220;
    --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
    --ring: color-mix(in srgb, var(--accent) 60%, transparent);
    --shadow-btn-primary: 0 5px 16px -5px color-mix(in srgb, var(--accent) 50%, transparent);
    --highlight: #f59e0b;
    --good-ink: #4ade80;
    --warning-ink: #fbbf24;
    --critical-ink: #f39190;
  }
}

:root[data-theme="dark"] [data-ds="v2"] {
  --surface: #141b28;
  --page: #0c1018;
  --border: rgba(148, 163, 184, 0.16);
  --border-strong: rgba(148, 163, 184, 0.30);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --ink: #f1f5f9;
  --ink-2: #cbd5e1;
  --ink-muted: #94a3b8;
  --accent: #93c5fd;
  --accent-2: #bfdbfe;
  --accent-ink: #0b1220;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --ring: color-mix(in srgb, var(--accent) 60%, transparent);
  --shadow-btn-primary: 0 5px 16px -5px color-mix(in srgb, var(--accent) 50%, transparent);
  --highlight: #f59e0b;
  --good-ink: #4ade80;
  --warning-ink: #fbbf24;
  --critical-ink: #f39190;
}