/* ui-kit: tokens de los temas. GENERADO por tools/build.py desde themes.toml:
   no editar a mano.

   <html data-look="…"> elige el tema (sin atributo: el de defecto, sobrio);
   <html data-theme="light|dark"> fija el modo (sin atributo: el del sistema).
   Cada tema define las mismas claves en claro y en oscuro, así que ninguno
   hereda valores de otro. */

/* ── sobrio: Líneas finas, sombras suaves, sin estridencias. ── */
:root {
  --bw: 1px;
  --bw-sm: 1px;
  --bw-strong: 1px;
  --radius: 12px;
  --radius-sm: 8px;
  --btn-radius: 8px;
  --chip-radius: 999px;
  --tag-radius: 999px;
  --lift: translateY(-1px);
  --press: translateY(0);
  --pad: 20px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head: var(--sans);
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --num: var(--sans);
  --head-weight: 700;
  --head-spacing: -0.02em;
  --head-transform: none;
  --label-transform: uppercase;
  --label-spacing: 0.06em;
  --ink: #1d2127;
  --paper: #ffffff;
  --canvas: #f4f5f7;
  --muted: #5d6470;
  --line: #d9dce1;
  --line-soft: #eceef1;
  --line-hover: #b4bac3;
  --hover-bg: #e4e7ec;
  --yellow: #fdf0c4;
  --blue: #dbeafb;
  --green: #dcf1e2;
  --pink: #fae3ee;
  --lilac: #ebe5fb;
  --red: #fbdcd6;
  --orange: #fde5cd;
  --on-color: #1d2127;
  --on-color-muted: rgba(29, 33, 39, 0.76);
  --chip-line: rgba(29, 33, 39, 0.14);
  --btn-bg: #ffffff;
  --btn-fg: #1d2127;
  --btn-line: #c9ced6;
  --primary-bg: #2f5bd3;
  --primary-fg: #ffffff;
  --nav-active-bg: #e3e9fa;
  --nav-active-fg: #1d3f9e;
  --bar-bg: #ffffff;
  --bar-fg: #1d2127;
  --focus: #2f5bd3;
  --ok: #1a7f4b;
  --warn: #a86a12;
  --bad: #c23b2e;
  --info: #2f5bd3;
  --chart-1: #2f5bd3;
  --chart-2: #d0612a;
  --chart-3: #16867a;
  --chart-4: #8b5cf6;
  --chart-5: #6b7280;
  --chart-6: #b8860b;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 2px 4px rgba(16, 24, 40, 0.06), 0 6px 16px rgba(16, 24, 40, 0.08);
  --shadow-hover: 0 4px 8px rgba(16, 24, 40, 0.08), 0 10px 24px rgba(16, 24, 40, 0.10);
  --shadow-sm-hover: 0 2px 6px rgba(16, 24, 40, 0.14);
  --shadow-press: 0 1px 1px rgba(16, 24, 40, 0.10);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e6e8eb;
    --paper: #1b1e23;
    --canvas: #121418;
    --muted: #9aa1ac;
    --line: #2e333b;
    --line-soft: #252a31;
    --line-hover: #4a515c;
    --hover-bg: #23272e;
    --yellow: #473c16;
    --blue: #1d3350;
    --green: #1b3a28;
    --pink: #45213a;
    --lilac: #30284f;
    --red: #4a2320;
    --orange: #4a3018;
    --on-color: #eef0f3;
    --on-color-muted: rgba(238, 240, 243, 0.76);
    --chip-line: rgba(255, 255, 255, 0.12);
    --btn-bg: #23272e;
    --btn-fg: #e6e8eb;
    --btn-line: #3a4049;
    --primary-bg: #6189f2;
    --primary-fg: #0d1016;
    --nav-active-bg: #26324d;
    --nav-active-fg: #dfe7ff;
    --bar-bg: #16191d;
    --bar-fg: #e6e8eb;
    --focus: #6189f2;
    --ok: #3fbf7f;
    --warn: #e0a43a;
    --bad: #f06a5b;
    --info: #6f95f5;
    --chart-1: #6f95f5;
    --chart-2: #f0915a;
    --chart-3: #3cc4ad;
    --chart-4: #a78bfa;
    --chart-5: #9aa1ac;
    --chart-6: #e3b341;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.5);
    --shadow-sm-hover: 0 3px 8px rgba(0, 0, 0, 0.5);
    --shadow-press: 0 1px 1px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #e6e8eb;
  --paper: #1b1e23;
  --canvas: #121418;
  --muted: #9aa1ac;
  --line: #2e333b;
  --line-soft: #252a31;
  --line-hover: #4a515c;
  --hover-bg: #23272e;
  --yellow: #473c16;
  --blue: #1d3350;
  --green: #1b3a28;
  --pink: #45213a;
  --lilac: #30284f;
  --red: #4a2320;
  --orange: #4a3018;
  --on-color: #eef0f3;
  --on-color-muted: rgba(238, 240, 243, 0.76);
  --chip-line: rgba(255, 255, 255, 0.12);
  --btn-bg: #23272e;
  --btn-fg: #e6e8eb;
  --btn-line: #3a4049;
  --primary-bg: #6189f2;
  --primary-fg: #0d1016;
  --nav-active-bg: #26324d;
  --nav-active-fg: #dfe7ff;
  --bar-bg: #16191d;
  --bar-fg: #e6e8eb;
  --focus: #6189f2;
  --ok: #3fbf7f;
  --warn: #e0a43a;
  --bad: #f06a5b;
  --info: #6f95f5;
  --chart-1: #6f95f5;
  --chart-2: #f0915a;
  --chart-3: #3cc4ad;
  --chart-4: #a78bfa;
  --chart-5: #9aa1ac;
  --chart-6: #e3b341;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.5);
  --shadow-sm-hover: 0 3px 8px rgba(0, 0, 0, 0.5);
  --shadow-press: 0 1px 1px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

/* ── neo: Bordes gruesos, sombras duras, pasteles. ── */
:root[data-look="neo"] {
  --bw: 2.5px;
  --bw-sm: 2px;
  --bw-strong: 3px;
  --radius: 10px;
  --radius-sm: 8px;
  --btn-radius: 999px;
  --chip-radius: 13px;
  --tag-radius: 999px;
  --lift: translate(-2px, -2px);
  --press: translate(3px, 3px);
  --pad: 20px;
  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head: var(--mono);
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --num: var(--mono);
  --head-weight: 800;
  --head-spacing: -0.01em;
  --head-transform: none;
  --label-transform: uppercase;
  --label-spacing: 0.08em;
  --ink: #111111;
  --paper: #fffdf6;
  --canvas: #f6efdf;
  --muted: #55524a;
  --line: var(--ink);
  --line-soft: #e3d9c3;
  --line-hover: var(--ink);
  --hover-bg: var(--paper);
  --yellow: #ffd84d;
  --blue: #a7d8ff;
  --green: #a8e6b8;
  --pink: #ffc2e2;
  --lilac: #d4c4ff;
  --red: #ff9b8a;
  --orange: #ffc285;
  --on-color: #111111;
  --on-color-muted: rgba(17, 17, 17, 0.76);
  --chip-line: #111111;
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-line: var(--line);
  --primary-bg: var(--yellow);
  --primary-fg: #111111;
  --nav-active-bg: var(--ink);
  --nav-active-fg: var(--paper);
  --bar-bg: #b9e4c9;
  --bar-fg: #111111;
  --focus: #2563eb;
  --ok: #1a7f45;
  --warn: #b36b00;
  --bad: #c42b1c;
  --info: #1f5fbf;
  --chart-1: #111111;
  --chart-2: #e04e24;
  --chart-3: #2a6fd6;
  --chart-4: #1a8a4a;
  --chart-5: #8a4fd8;
  --chart-6: #a87600;
  --shadow: 5px 5px 0 var(--line);
  --shadow-sm: 3px 3px 0 var(--line);
  --shadow-lg: 7px 7px 0 var(--line);
  --shadow-hover: 7px 7px 0 var(--line);
  --shadow-sm-hover: 5px 5px 0 var(--line);
  --shadow-press: 0 0 0 var(--line);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="neo"]:not([data-theme="light"]) {
    --ink: #f2ecdd;
    --paper: #1f1e1b;
    --canvas: #151513;
    --muted: #b3ad9f;
    --line: var(--ink);
    --line-soft: #37342d;
    --line-hover: var(--ink);
    --hover-bg: var(--paper);
    --yellow: #ffd84d;
    --blue: #a7d8ff;
    --green: #a8e6b8;
    --pink: #ffc2e2;
    --lilac: #d4c4ff;
    --red: #ff9b8a;
    --orange: #ffc285;
    --on-color: #111111;
    --on-color-muted: rgba(17, 17, 17, 0.76);
    --chip-line: #111111;
    --btn-bg: var(--ink);
    --btn-fg: var(--paper);
    --btn-line: var(--line);
    --primary-bg: var(--yellow);
    --primary-fg: #111111;
    --nav-active-bg: var(--ink);
    --nav-active-fg: #151513;
    --bar-bg: #1c2b22;
    --bar-fg: #f2ecdd;
    --focus: #60a5fa;
    --ok: #4ade80;
    --warn: #fbbf24;
    --bad: #f87171;
    --info: #7cb8ff;
    --chart-1: #f2ecdd;
    --chart-2: #ff9b8a;
    --chart-3: #7cb8ff;
    --chart-4: #6ee7a0;
    --chart-5: #c4a8ff;
    --chart-6: #ffd84d;
    --shadow: 5px 5px 0 var(--line);
    --shadow-sm: 3px 3px 0 var(--line);
    --shadow-lg: 7px 7px 0 var(--line);
    --shadow-hover: 7px 7px 0 var(--line);
    --shadow-sm-hover: 5px 5px 0 var(--line);
    --shadow-press: 0 0 0 var(--line);
    color-scheme: dark;
  }
}
:root[data-look="neo"][data-theme="dark"] {
  --ink: #f2ecdd;
  --paper: #1f1e1b;
  --canvas: #151513;
  --muted: #b3ad9f;
  --line: var(--ink);
  --line-soft: #37342d;
  --line-hover: var(--ink);
  --hover-bg: var(--paper);
  --yellow: #ffd84d;
  --blue: #a7d8ff;
  --green: #a8e6b8;
  --pink: #ffc2e2;
  --lilac: #d4c4ff;
  --red: #ff9b8a;
  --orange: #ffc285;
  --on-color: #111111;
  --on-color-muted: rgba(17, 17, 17, 0.76);
  --chip-line: #111111;
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-line: var(--line);
  --primary-bg: var(--yellow);
  --primary-fg: #111111;
  --nav-active-bg: var(--ink);
  --nav-active-fg: #151513;
  --bar-bg: #1c2b22;
  --bar-fg: #f2ecdd;
  --focus: #60a5fa;
  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --info: #7cb8ff;
  --chart-1: #f2ecdd;
  --chart-2: #ff9b8a;
  --chart-3: #7cb8ff;
  --chart-4: #6ee7a0;
  --chart-5: #c4a8ff;
  --chart-6: #ffd84d;
  --shadow: 5px 5px 0 var(--line);
  --shadow-sm: 3px 3px 0 var(--line);
  --shadow-lg: 7px 7px 0 var(--line);
  --shadow-hover: 7px 7px 0 var(--line);
  --shadow-sm-hover: 5px 5px 0 var(--line);
  --shadow-press: 0 0 0 var(--line);
  color-scheme: dark;
}

/* ── editorial: Títulos con serifa, papel cálido, sin sombras. ── */
:root[data-look="editorial"] {
  --bw: 1px;
  --bw-sm: 1px;
  --bw-strong: 1px;
  --radius: 4px;
  --radius-sm: 3px;
  --btn-radius: 4px;
  --chip-radius: 3px;
  --tag-radius: 3px;
  --lift: none;
  --press: none;
  --pad: 20px;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --num: var(--sans);
  --head-weight: 700;
  --head-spacing: 0;
  --head-transform: none;
  --label-transform: uppercase;
  --label-spacing: 0.08em;
  --ink: #1f1a14;
  --paper: #fffcf5;
  --canvas: #f3ede1;
  --muted: #6b6155;
  --line: #d3c8b4;
  --line-soft: #e9e1d2;
  --line-hover: #8f8270;
  --hover-bg: #e4dac6;
  --yellow: #f3e2b3;
  --blue: #d6e2ea;
  --green: #dbe6d3;
  --pink: #efd9d6;
  --lilac: #e2dbea;
  --red: #efcfc6;
  --orange: #f1dcc2;
  --on-color: #1f1a14;
  --on-color-muted: rgba(31, 26, 20, 0.76);
  --chip-line: rgba(31, 26, 20, 0.2);
  --btn-bg: #fffcf5;
  --btn-fg: #1f1a14;
  --btn-line: #8f8270;
  --primary-bg: #7a2e1f;
  --primary-fg: #fffaf2;
  --nav-active-bg: #1f1a14;
  --nav-active-fg: #fffcf5;
  --bar-bg: #ebe3d3;
  --bar-fg: #1f1a14;
  --focus: #7a2e1f;
  --ok: #3d7a3a;
  --warn: #9a5d08;
  --bad: #a3301c;
  --info: #2f5f7f;
  --chart-1: #7a2e1f;
  --chart-2: #2f5f7f;
  --chart-3: #557a34;
  --chart-4: #a4761f;
  --chart-5: #6b4e7a;
  --chart-6: #8a7c69;
  --shadow: none;
  --shadow-sm: none;
  --shadow-lg: none;
  --shadow-hover: none;
  --shadow-sm-hover: none;
  --shadow-press: none;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="editorial"]:not([data-theme="light"]) {
    --ink: #ece4d6;
    --paper: #1e1b17;
    --canvas: #151310;
    --muted: #a89d8c;
    --line: #3d362d;
    --line-soft: #2c2721;
    --line-hover: #6d6254;
    --hover-bg: #28241f;
    --yellow: #4a3d1c;
    --blue: #23323b;
    --green: #26352a;
    --pink: #3e2826;
    --lilac: #312b3b;
    --red: #4a2620;
    --orange: #45321f;
    --on-color: #f2ebdf;
    --on-color-muted: rgba(242, 235, 223, 0.76);
    --chip-line: rgba(242, 235, 223, 0.2);
    --btn-bg: #1e1b17;
    --btn-fg: #ece4d6;
    --btn-line: #6d6254;
    --primary-bg: #c0674f;
    --primary-fg: #151310;
    --nav-active-bg: #ece4d6;
    --nav-active-fg: #151310;
    --bar-bg: #1a1714;
    --bar-fg: #ece4d6;
    --focus: #c0674f;
    --ok: #7fb77a;
    --warn: #d9a24a;
    --bad: #e0785f;
    --info: #8fb3cc;
    --chart-1: #d9826b;
    --chart-2: #8fb3cc;
    --chart-3: #9cc27a;
    --chart-4: #d9b25a;
    --chart-5: #b59ac7;
    --chart-6: #a89d8c;
    --shadow: none;
    --shadow-sm: none;
    --shadow-lg: none;
    --shadow-hover: none;
    --shadow-sm-hover: none;
    --shadow-press: none;
    color-scheme: dark;
  }
}
:root[data-look="editorial"][data-theme="dark"] {
  --ink: #ece4d6;
  --paper: #1e1b17;
  --canvas: #151310;
  --muted: #a89d8c;
  --line: #3d362d;
  --line-soft: #2c2721;
  --line-hover: #6d6254;
  --hover-bg: #28241f;
  --yellow: #4a3d1c;
  --blue: #23323b;
  --green: #26352a;
  --pink: #3e2826;
  --lilac: #312b3b;
  --red: #4a2620;
  --orange: #45321f;
  --on-color: #f2ebdf;
  --on-color-muted: rgba(242, 235, 223, 0.76);
  --chip-line: rgba(242, 235, 223, 0.2);
  --btn-bg: #1e1b17;
  --btn-fg: #ece4d6;
  --btn-line: #6d6254;
  --primary-bg: #c0674f;
  --primary-fg: #151310;
  --nav-active-bg: #ece4d6;
  --nav-active-fg: #151310;
  --bar-bg: #1a1714;
  --bar-fg: #ece4d6;
  --focus: #c0674f;
  --ok: #7fb77a;
  --warn: #d9a24a;
  --bad: #e0785f;
  --info: #8fb3cc;
  --chart-1: #d9826b;
  --chart-2: #8fb3cc;
  --chart-3: #9cc27a;
  --chart-4: #d9b25a;
  --chart-5: #b59ac7;
  --chart-6: #a89d8c;
  --shadow: none;
  --shadow-sm: none;
  --shadow-lg: none;
  --shadow-hover: none;
  --shadow-sm-hover: none;
  --shadow-press: none;
  color-scheme: dark;
}

/* ── institucional: Azul marino, títulos con serifa sobria, barra de color, sin sombras. ── */
:root[data-look="institucional"] {
  --bw: 1px;
  --bw-sm: 1px;
  --bw-strong: 1px;
  --radius: 3px;
  --radius-sm: 2px;
  --btn-radius: 3px;
  --chip-radius: 2px;
  --tag-radius: 2px;
  --lift: none;
  --press: none;
  --pad: 20px;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head: "IBM Plex Serif", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --num: var(--sans);
  --head-weight: 600;
  --head-spacing: 0;
  --head-transform: none;
  --label-transform: uppercase;
  --label-spacing: 0.06em;
  --ink: #14213d;
  --paper: #ffffff;
  --canvas: #eef1f5;
  --muted: #56627a;
  --line: #cfd6e0;
  --line-soft: #e6eaf0;
  --line-hover: #9aa6b8;
  --hover-bg: #e6ebf2;
  --yellow: #f6ecc9;
  --blue: #dce6f3;
  --green: #dcebe2;
  --pink: #f1e0e6;
  --lilac: #e6e3f1;
  --red: #f4dcd8;
  --orange: #f5e4d0;
  --on-color: #14213d;
  --on-color-muted: rgba(20, 33, 61, 0.76);
  --chip-line: rgba(20, 33, 61, 0.16);
  --btn-bg: #ffffff;
  --btn-fg: #1b365d;
  --btn-line: #9aa6b8;
  --primary-bg: #1b365d;
  --primary-fg: #ffffff;
  --nav-active-bg: #ffffff;
  --nav-active-fg: #1b365d;
  --bar-bg: #1b365d;
  --bar-fg: #ffffff;
  --focus: #2f6fb8;
  --ok: #1e7a4f;
  --warn: #9a6200;
  --bad: #b3261e;
  --info: #2f6fb8;
  --chart-1: #1b365d;
  --chart-2: #a8842f;
  --chart-3: #4a7fc0;
  --chart-4: #5e8a66;
  --chart-5: #8a5a83;
  --chart-6: #6f7d95;
  --shadow: none;
  --shadow-sm: none;
  --shadow-lg: 0 4px 14px rgba(20, 33, 61, 0.12);
  --shadow-hover: none;
  --shadow-sm-hover: none;
  --shadow-press: none;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="institucional"]:not([data-theme="light"]) {
    --ink: #e3e8f0;
    --paper: #16202e;
    --canvas: #0e1621;
    --muted: #93a0b5;
    --line: #2a3850;
    --line-soft: #1f2a3b;
    --line-hover: #4a5b78;
    --hover-bg: #1f2b3d;
    --yellow: #3d3419;
    --blue: #1c2f4a;
    --green: #1b3629;
    --pink: #3a2230;
    --lilac: #2b2843;
    --red: #45221f;
    --orange: #40301c;
    --on-color: #eef2f8;
    --on-color-muted: rgba(238, 242, 248, 0.76);
    --chip-line: rgba(255, 255, 255, 0.14);
    --btn-bg: #16202e;
    --btn-fg: #e3e8f0;
    --btn-line: #4a5b78;
    --primary-bg: #8fb0de;
    --primary-fg: #0e1621;
    --nav-active-bg: #e3e8f0;
    --nav-active-fg: #0a1f3a;
    --bar-bg: #0a1f3a;
    --bar-fg: #e3e8f0;
    --focus: #8fb0de;
    --ok: #4fbf88;
    --warn: #e0a53f;
    --bad: #ef6b5f;
    --info: #8fb0de;
    --chart-1: #8fb0de;
    --chart-2: #d4b46a;
    --chart-3: #4fc1b0;
    --chart-4: #8fc49a;
    --chart-5: #c79ac0;
    --chart-6: #b9b2a3;
    --shadow: none;
    --shadow-sm: none;
    --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-hover: none;
    --shadow-sm-hover: none;
    --shadow-press: none;
    color-scheme: dark;
  }
}
:root[data-look="institucional"][data-theme="dark"] {
  --ink: #e3e8f0;
  --paper: #16202e;
  --canvas: #0e1621;
  --muted: #93a0b5;
  --line: #2a3850;
  --line-soft: #1f2a3b;
  --line-hover: #4a5b78;
  --hover-bg: #1f2b3d;
  --yellow: #3d3419;
  --blue: #1c2f4a;
  --green: #1b3629;
  --pink: #3a2230;
  --lilac: #2b2843;
  --red: #45221f;
  --orange: #40301c;
  --on-color: #eef2f8;
  --on-color-muted: rgba(238, 242, 248, 0.76);
  --chip-line: rgba(255, 255, 255, 0.14);
  --btn-bg: #16202e;
  --btn-fg: #e3e8f0;
  --btn-line: #4a5b78;
  --primary-bg: #8fb0de;
  --primary-fg: #0e1621;
  --nav-active-bg: #e3e8f0;
  --nav-active-fg: #0a1f3a;
  --bar-bg: #0a1f3a;
  --bar-fg: #e3e8f0;
  --focus: #8fb0de;
  --ok: #4fbf88;
  --warn: #e0a53f;
  --bad: #ef6b5f;
  --info: #8fb0de;
  --chart-1: #8fb0de;
  --chart-2: #d4b46a;
  --chart-3: #4fc1b0;
  --chart-4: #8fc49a;
  --chart-5: #c79ac0;
  --chart-6: #b9b2a3;
  --shadow: none;
  --shadow-sm: none;
  --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-hover: none;
  --shadow-sm-hover: none;
  --shadow-press: none;
  color-scheme: dark;
}

/* ── grafito: Monocromo con un solo acento, números en monoespaciada, denso. ── */
:root[data-look="grafito"] {
  --bw: 1px;
  --bw-sm: 1px;
  --bw-strong: 1px;
  --radius: 6px;
  --radius-sm: 4px;
  --btn-radius: 6px;
  --chip-radius: 4px;
  --tag-radius: 4px;
  --lift: none;
  --press: none;
  --pad: 16px;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head: var(--sans);
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --num: var(--mono);
  --head-weight: 600;
  --head-spacing: -0.02em;
  --head-transform: none;
  --label-transform: uppercase;
  --label-spacing: 0.05em;
  --ink: #18181b;
  --paper: #ffffff;
  --canvas: #f7f7f8;
  --muted: #5f5f68;
  --line: #e4e4e7;
  --line-soft: #efeff1;
  --line-hover: #c4c4cb;
  --hover-bg: #f0f0f2;
  --yellow: #fbf3d5;
  --blue: #e3edf9;
  --green: #e1f2e8;
  --pink: #f8e4ec;
  --lilac: #ece8f8;
  --red: #f9e0dd;
  --orange: #fbe9d8;
  --on-color: #18181b;
  --on-color-muted: rgba(24, 24, 27, 0.76);
  --chip-line: rgba(24, 24, 27, 0.12);
  --btn-bg: #ffffff;
  --btn-fg: #18181b;
  --btn-line: #d4d4d8;
  --primary-bg: #18181b;
  --primary-fg: #ffffff;
  --nav-active-bg: #18181b;
  --nav-active-fg: #ffffff;
  --bar-bg: #ffffff;
  --bar-fg: #18181b;
  --focus: #0f766e;
  --ok: #15803d;
  --warn: #b45309;
  --bad: #b91c1c;
  --info: #1d4ed8;
  --chart-1: #18181b;
  --chart-2: #0f766e;
  --chart-3: #2563eb;
  --chart-4: #c2410c;
  --chart-5: #7c3aed;
  --chart-6: #71717a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: none;
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm-hover: none;
  --shadow-press: none;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="grafito"]:not([data-theme="light"]) {
    --ink: #ededef;
    --paper: #18181b;
    --canvas: #0f0f11;
    --muted: #a1a1aa;
    --line: #2c2c31;
    --line-soft: #232327;
    --line-hover: #45454d;
    --hover-bg: #232327;
    --yellow: #3a3317;
    --blue: #1a2b44;
    --green: #173324;
    --pink: #3b1f2c;
    --lilac: #2a2440;
    --red: #401d1b;
    --orange: #3d2a17;
    --on-color: #f4f4f5;
    --on-color-muted: rgba(244, 244, 245, 0.76);
    --chip-line: rgba(255, 255, 255, 0.12);
    --btn-bg: #18181b;
    --btn-fg: #ededef;
    --btn-line: #3f3f46;
    --primary-bg: #ededef;
    --primary-fg: #0f0f11;
    --nav-active-bg: #ededef;
    --nav-active-fg: #0f0f11;
    --bar-bg: #0f0f11;
    --bar-fg: #ededef;
    --focus: #2dd4bf;
    --ok: #4ade80;
    --warn: #fbbf24;
    --bad: #f87171;
    --info: #60a5fa;
    --chart-1: #ededef;
    --chart-2: #2dd4bf;
    --chart-3: #60a5fa;
    --chart-4: #fb923c;
    --chart-5: #a78bfa;
    --chart-6: #a1a1aa;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: none;
    --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.6);
    --shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm-hover: none;
    --shadow-press: none;
    color-scheme: dark;
  }
}
:root[data-look="grafito"][data-theme="dark"] {
  --ink: #ededef;
  --paper: #18181b;
  --canvas: #0f0f11;
  --muted: #a1a1aa;
  --line: #2c2c31;
  --line-soft: #232327;
  --line-hover: #45454d;
  --hover-bg: #232327;
  --yellow: #3a3317;
  --blue: #1a2b44;
  --green: #173324;
  --pink: #3b1f2c;
  --lilac: #2a2440;
  --red: #401d1b;
  --orange: #3d2a17;
  --on-color: #f4f4f5;
  --on-color-muted: rgba(244, 244, 245, 0.76);
  --chip-line: rgba(255, 255, 255, 0.12);
  --btn-bg: #18181b;
  --btn-fg: #ededef;
  --btn-line: #3f3f46;
  --primary-bg: #ededef;
  --primary-fg: #0f0f11;
  --nav-active-bg: #ededef;
  --nav-active-fg: #0f0f11;
  --bar-bg: #0f0f11;
  --bar-fg: #ededef;
  --focus: #2dd4bf;
  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --info: #60a5fa;
  --chart-1: #ededef;
  --chart-2: #2dd4bf;
  --chart-3: #60a5fa;
  --chart-4: #fb923c;
  --chart-5: #a78bfa;
  --chart-6: #a1a1aa;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: none;
  --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.6);
  --shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm-hover: none;
  --shadow-press: none;
  color-scheme: dark;
}

/* ── mercado: Pensado para oscuro: números en monoespaciada, títulos angostos, acento cian. ── */
:root[data-look="mercado"] {
  --bw: 1px;
  --bw-sm: 1px;
  --bw-strong: 1px;
  --radius: 2px;
  --radius-sm: 2px;
  --btn-radius: 2px;
  --chip-radius: 2px;
  --tag-radius: 2px;
  --lift: none;
  --press: none;
  --pad: 16px;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head: "Archivo Narrow", "Archivo", system-ui, sans-serif;
  --mono: "Roboto Mono", ui-monospace, Menlo, monospace;
  --num: var(--mono);
  --head-weight: 700;
  --head-spacing: 0.02em;
  --head-transform: uppercase;
  --label-transform: uppercase;
  --label-spacing: 0.06em;
  --ink: #0f1419;
  --paper: #ffffff;
  --canvas: #eceff2;
  --muted: #56606b;
  --line: #cdd3da;
  --line-soft: #e3e7eb;
  --line-hover: #9aa4af;
  --hover-bg: #e3e7eb;
  --yellow: #fbf0cc;
  --blue: #dbeaf6;
  --green: #daf0e2;
  --pink: #f5e0e8;
  --lilac: #e7e4f5;
  --red: #f7dcda;
  --orange: #f8e6d2;
  --on-color: #0f1419;
  --on-color-muted: rgba(15, 20, 25, 0.76);
  --chip-line: rgba(15, 20, 25, 0.16);
  --btn-bg: #ffffff;
  --btn-fg: #0f1419;
  --btn-line: #9aa4af;
  --primary-bg: #0369a1;
  --primary-fg: #ffffff;
  --nav-active-bg: #0369a1;
  --nav-active-fg: #ffffff;
  --bar-bg: #0f1419;
  --bar-fg: #eceff2;
  --focus: #0369a1;
  --ok: #11803f;
  --warn: #9a5800;
  --bad: #c0262d;
  --info: #0369a1;
  --chart-1: #0369a1;
  --chart-2: #b45309;
  --chart-3: #0f766e;
  --chart-4: #7c3aed;
  --chart-5: #56606b;
  --chart-6: #be185d;
  --shadow: none;
  --shadow-sm: none;
  --shadow-lg: 0 4px 14px rgba(15, 20, 25, 0.14);
  --shadow-hover: none;
  --shadow-sm-hover: none;
  --shadow-press: none;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="mercado"]:not([data-theme="light"]) {
    --ink: #d8dee6;
    --paper: #11151a;
    --canvas: #080a0d;
    --muted: #8b96a3;
    --line: #232a33;
    --line-soft: #1a2027;
    --line-hover: #3a4552;
    --hover-bg: #1a2027;
    --yellow: #3b3110;
    --blue: #102a3d;
    --green: #0f3321;
    --pink: #3a1626;
    --lilac: #251f3d;
    --red: #3f1717;
    --orange: #3d2610;
    --on-color: #eef2f6;
    --on-color-muted: rgba(238, 242, 246, 0.76);
    --chip-line: rgba(255, 255, 255, 0.14);
    --btn-bg: #11151a;
    --btn-fg: #d8dee6;
    --btn-line: #3a4552;
    --primary-bg: #38bdf8;
    --primary-fg: #080a0d;
    --nav-active-bg: #38bdf8;
    --nav-active-fg: #080a0d;
    --bar-bg: #000000;
    --bar-fg: #d8dee6;
    --focus: #38bdf8;
    --ok: #22c55e;
    --warn: #f5a524;
    --bad: #f0524f;
    --info: #38bdf8;
    --chart-1: #38bdf8;
    --chart-2: #f5a524;
    --chart-3: #2dd4bf;
    --chart-4: #c084fc;
    --chart-5: #8b96a3;
    --chart-6: #f472b6;
    --shadow: none;
    --shadow-sm: none;
    --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.7);
    --shadow-hover: none;
    --shadow-sm-hover: none;
    --shadow-press: none;
    color-scheme: dark;
  }
}
:root[data-look="mercado"][data-theme="dark"] {
  --ink: #d8dee6;
  --paper: #11151a;
  --canvas: #080a0d;
  --muted: #8b96a3;
  --line: #232a33;
  --line-soft: #1a2027;
  --line-hover: #3a4552;
  --hover-bg: #1a2027;
  --yellow: #3b3110;
  --blue: #102a3d;
  --green: #0f3321;
  --pink: #3a1626;
  --lilac: #251f3d;
  --red: #3f1717;
  --orange: #3d2610;
  --on-color: #eef2f6;
  --on-color-muted: rgba(238, 242, 246, 0.76);
  --chip-line: rgba(255, 255, 255, 0.14);
  --btn-bg: #11151a;
  --btn-fg: #d8dee6;
  --btn-line: #3a4552;
  --primary-bg: #38bdf8;
  --primary-fg: #080a0d;
  --nav-active-bg: #38bdf8;
  --nav-active-fg: #080a0d;
  --bar-bg: #000000;
  --bar-fg: #d8dee6;
  --focus: #38bdf8;
  --ok: #22c55e;
  --warn: #f5a524;
  --bad: #f0524f;
  --info: #38bdf8;
  --chart-1: #38bdf8;
  --chart-2: #f5a524;
  --chart-3: #2dd4bf;
  --chart-4: #c084fc;
  --chart-5: #8b96a3;
  --chart-6: #f472b6;
  --shadow: none;
  --shadow-sm: none;
  --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.7);
  --shadow-hover: none;
  --shadow-sm-hover: none;
  --shadow-press: none;
  color-scheme: dark;
}

/* ── contraste: Tinta pura, bordes marcados, letra de alta legibilidad. ── */
:root[data-look="contraste"] {
  --bw: 2px;
  --bw-sm: 2px;
  --bw-strong: 3px;
  --radius: 4px;
  --radius-sm: 3px;
  --btn-radius: 4px;
  --chip-radius: 3px;
  --tag-radius: 3px;
  --lift: none;
  --press: none;
  --pad: 20px;
  --sans: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head: var(--sans);
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, Menlo, monospace;
  --num: var(--sans);
  --head-weight: 700;
  --head-spacing: 0;
  --head-transform: none;
  --label-transform: none;
  --label-spacing: 0.02em;
  --ink: #000000;
  --paper: #ffffff;
  --canvas: #ffffff;
  --muted: #333333;
  --line: #000000;
  --line-soft: #767676;
  --line-hover: #000000;
  --hover-bg: #e8e8e8;
  --yellow: #fff3a3;
  --blue: #cfe3ff;
  --green: #c9f2d4;
  --pink: #ffd6ea;
  --lilac: #e2d9ff;
  --red: #ffd2cc;
  --orange: #ffe0bf;
  --on-color: #000000;
  --on-color-muted: rgba(0, 0, 0, 0.86);
  --chip-line: #000000;
  --btn-bg: #ffffff;
  --btn-fg: #000000;
  --btn-line: #000000;
  --primary-bg: #0033cc;
  --primary-fg: #ffffff;
  --nav-active-bg: #ffffff;
  --nav-active-fg: #000000;
  --bar-bg: #000000;
  --bar-fg: #ffffff;
  --focus: #0033cc;
  --ok: #006b2e;
  --warn: #8a5a00;
  --bad: #b00020;
  --info: #0033cc;
  --chart-1: #0033cc;
  --chart-2: #000000;
  --chart-3: #b00020;
  --chart-4: #006b2e;
  --chart-5: #7a00cc;
  --chart-6: #8a5a00;
  --shadow: none;
  --shadow-sm: none;
  --shadow-lg: none;
  --shadow-hover: none;
  --shadow-sm-hover: none;
  --shadow-press: none;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="contraste"]:not([data-theme="light"]) {
    --ink: #ffffff;
    --paper: #000000;
    --canvas: #000000;
    --muted: #d0d0d0;
    --line: #ffffff;
    --line-soft: #8a8a8a;
    --line-hover: #ffffff;
    --hover-bg: #1f1f1f;
    --yellow: #4d4200;
    --blue: #002a66;
    --green: #00401a;
    --pink: #520032;
    --lilac: #2e1a66;
    --red: #5c0a00;
    --orange: #4d2600;
    --on-color: #ffffff;
    --on-color-muted: rgba(255, 255, 255, 0.88);
    --chip-line: #ffffff;
    --btn-bg: #000000;
    --btn-fg: #ffffff;
    --btn-line: #ffffff;
    --primary-bg: #7cc4ff;
    --primary-fg: #000000;
    --nav-active-bg: #000000;
    --nav-active-fg: #ffffff;
    --bar-bg: #ffffff;
    --bar-fg: #000000;
    --focus: #ffd400;
    --ok: #5cff8a;
    --warn: #ffd400;
    --bad: #ff6b6b;
    --info: #7cc4ff;
    --chart-1: #7cc4ff;
    --chart-2: #ffffff;
    --chart-3: #ff6b6b;
    --chart-4: #5cff8a;
    --chart-5: #d9a6ff;
    --chart-6: #ffd400;
    --shadow: none;
    --shadow-sm: none;
    --shadow-lg: none;
    --shadow-hover: none;
    --shadow-sm-hover: none;
    --shadow-press: none;
    color-scheme: dark;
  }
}
:root[data-look="contraste"][data-theme="dark"] {
  --ink: #ffffff;
  --paper: #000000;
  --canvas: #000000;
  --muted: #d0d0d0;
  --line: #ffffff;
  --line-soft: #8a8a8a;
  --line-hover: #ffffff;
  --hover-bg: #1f1f1f;
  --yellow: #4d4200;
  --blue: #002a66;
  --green: #00401a;
  --pink: #520032;
  --lilac: #2e1a66;
  --red: #5c0a00;
  --orange: #4d2600;
  --on-color: #ffffff;
  --on-color-muted: rgba(255, 255, 255, 0.88);
  --chip-line: #ffffff;
  --btn-bg: #000000;
  --btn-fg: #ffffff;
  --btn-line: #ffffff;
  --primary-bg: #7cc4ff;
  --primary-fg: #000000;
  --nav-active-bg: #000000;
  --nav-active-fg: #ffffff;
  --bar-bg: #ffffff;
  --bar-fg: #000000;
  --focus: #ffd400;
  --ok: #5cff8a;
  --warn: #ffd400;
  --bad: #ff6b6b;
  --info: #7cc4ff;
  --chart-1: #7cc4ff;
  --chart-2: #ffffff;
  --chart-3: #ff6b6b;
  --chart-4: #5cff8a;
  --chart-5: #d9a6ff;
  --chart-6: #ffd400;
  --shadow: none;
  --shadow-sm: none;
  --shadow-lg: none;
  --shadow-hover: none;
  --shadow-sm-hover: none;
  --shadow-press: none;
  color-scheme: dark;
}