/* Paleta unica de la app, tomada de la landing (index.css, lineas 1-63).

   Esta hoja define los tokens de la landing Y remapea a ellos los vocabularios que ya
   existian en la app (`--c1/--c2/--c3`, `--light/--lighter`, `--grad-soft`, los extras de
   area_tecnica, `--sm-*`, `--at-*`), para que las hojas viejas cambien sin editar sus reglas.
   Los alias se declaran una sola vez: viven en `html`, y su `var()` se resuelve ahi, asi que en
   oscuro toman solos el valor oscuro del token al que apuntan.

   PRECEDENCIA. Se resuelve por especificidad y no borrando duplicados: `html:root` (0,1,1) y
   `html[data-theme="dark"]:root` (0,2,1) le ganan a cualquier `:root` (0,1,0) y al
   `html[data-theme="dark"]` (0,1,1) de metro_ui.js, que se inyecta al final del <head> y por
   orden le ganaria a un `:root` a secas. Borrar los bloques duplicados de metro_ui.js obligaria
   a re-basar las cinco fotos de pixel de tests/migracionRuntimeCompartido (sgc, solicitud_compras,
   activos, monitoreo, planificacion), que existen justo para proteger esas hojas: es un cambio
   del tamano de este y va aparte. Los bloques de temas.css ganan por especificidad (0,2,2) y
   conservan los mismos valores; paletaAppTokens.test.js los ata token por token. */

html:root {
  /* ── Landing (claro) ── */
  --bg: #f3f4f9;
  --bg-alt: #eceef6;
  --card: #fbfbfe;
  --surface: #e8eaf3;
  --border: #dcdeea;
  --text: #1e1333;
  --muted: #59566f;
  --accent: #4b3bc4;
  --accent-2: #2f4fb3;
  --accent-soft: #e7e5f7;
  --accent-line: #cfcaee;
  --grad: linear-gradient(135deg, #3a2a9c 0%, #4b3bc4 50%, #2f4fb3 100%);
  --grad-text: linear-gradient(120deg, #3a2a9c 0%, #4b3bc4 45%, #2f4fb3 100%);
  --hero-bg: linear-gradient(180deg, rgba(247, 247, 252, 0.7) 0%, rgba(238, 237, 247, 0.72) 70%, rgba(243, 244, 249, 0.35) 100%);
  --grid-line: rgba(30, 19, 51, 0.055);
  --cta-bg: linear-gradient(135deg, #e9e7f8 0%, #e2e6f6 100%);
  --nav-bg: rgba(243, 244, 249, 0.86);
  --tile-a: #1e1333;
  --tile-b: #3a2a9c;
  --tile-c: #2f4fb3;
  --tile-d: #7a83a8;
  --tile-opacity: 0.07;
  --ok: #157a52;
  --warn: #a3520a;
  --danger: #c0392b;
  --shadow: 0 1px 2px rgba(18, 12, 38, 0.05), 0 10px 28px rgba(18, 12, 38, 0.08);
  --shadow-lg: 0 2px 6px rgba(18, 12, 38, 0.08), 0 24px 56px rgba(18, 12, 38, 0.14);
  --on-grad: #ffffff;

  /* ── Vocabulario metro_ui.js (shell) ── */
  --c1: var(--accent);
  --c2: var(--accent);
  --c3: var(--accent-2);
  --light: var(--surface);
  --lighter: var(--border);
  --grad-soft: var(--cta-bg);

  /* ── Vocabulario area_tecnica_styles.css ──
     Los cuatro tokens de superficie/texto (`--surface-color`, `--background-color`,
     `--text-primary`, `--text-secondary`) NO se repiten aqui: los declaran las propias hojas que
     los usan y, en oscuro, el bloque de area_tecnica de temas.css, que ya lleva estos valores.
     Repetirlos creaba dos familias para el mismo token en el modelo de
     tests/_helpers/runtimeCompartido y su `var()` dejaba de resolver.
     Los `--at-*` si vienen aqui: son los grises propios de esa hoja y nadie los pisa. */
  --at-borde: var(--border);
  --at-borde-fuerte: var(--border);
  --at-superficie: var(--card);
  --at-superficie-hover: var(--surface);
  --at-superficie-tenue: var(--card);
  --at-primario: var(--accent);
  --at-primario-fuerte: var(--tile-b);
  --at-primario-borde: var(--accent-line);
  --at-realce-fondo: var(--accent-soft);
  --at-foco: var(--accent);
  --at-sobre-primario: var(--on-grad);
  --at-texto-fuerte: var(--text);
  --at-texto-suave: var(--muted);

  /* ── Vocabulario sidebar_module.css ── */
  --sm-bg: var(--card);
  --sm-text-main: var(--text);
  --sm-text-muted: var(--muted);
  --sm-hover-bg: var(--surface);
  --sm-accent-bg: var(--accent-soft);
  --sm-accent-text: var(--accent);
  --sm-border: var(--border);
}

html[data-theme="dark"]:root {
  /* ── Landing (oscuro) ── */
  --bg: #0e0b1b;
  --bg-alt: #120f24;
  --card: #17132f;
  --surface: #1d1838;
  --border: #2b2548;
  --text: #ece9f6;
  --muted: #a9a2c4;
  --accent: #9b8bf4;
  --accent-2: #7c98ff;
  --accent-soft: #241e45;
  --accent-line: #3a3266;
  --grad: linear-gradient(135deg, #5b45d8 0%, #4b3bc4 50%, #3656c8 100%);
  --grad-text: linear-gradient(120deg, #b6a8ff 0%, #9b8bf4 45%, #8fa6ff 100%);
  --hero-bg: linear-gradient(160deg, rgba(30, 19, 51, 0.82) 0%, rgba(26, 22, 54, 0.8) 55%, rgba(20, 32, 60, 0.72) 100%);
  --grid-line: rgba(236, 233, 246, 0.05);
  --cta-bg: linear-gradient(160deg, #1e1333 0%, #241b45 55%, #1b2a4a 100%);
  --nav-bg: rgba(14, 11, 27, 0.88);
  --tile-a: #6d5ce0;
  --tile-b: #4b3bc4;
  --tile-c: #3d63d6;
  --tile-d: #8a7fd0;
  --tile-opacity: 0.1;
  --ok: #4ade9a;
  --warn: #f5b454;
  --danger: #ff7a6b;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 24px 56px rgba(0, 0, 0, 0.5);
}

/* ── Tailwind: purple/violet/fuchsia → paleta ──

   Las paginas cargan el CDN de Tailwind, que compila en el navegador y escribe estas utilidades
   en un `<style>` propio. Ese `<style>` no se puede editar: entra DESPUES de este `<link>`, asi
   que el empate de especificidad lo gana el CDN. De ahi el `html:root` (0,2,1) delante de cada
   selector: le gana al `.bg-purple-600` (0,1,0) del CDN, y su `var()` sigue el tema solo.

   `indigo-*` NO se remapea: `indigo-600` (#4f46e5) ya es el acento de la landing y el azul de la
   marca. Las utilidades que quedan sin violeta en el markup no se listan: esta tabla es la de las
   que las paginas y su JS USAN de verdad, y `paletaBarridoVioleta.test.js` la deriva de ahi. */

html:root .bg-purple-50,
html:root .bg-violet-50,
html:root .bg-fuchsia-50{background-color:var(--accent-soft)}
html:root .bg-purple-100,
html:root .bg-violet-100,
html:root .bg-fuchsia-100{background-color:color-mix(in srgb, var(--accent) 16%, var(--card))}
html:root .bg-purple-500,
html:root .bg-purple-600,
html:root .bg-purple-700,
html:root .bg-violet-500,
html:root .bg-violet-600,
html:root .bg-fuchsia-500,
html:root .bg-fuchsia-600{background-color:var(--accent)}
html:root .hover\:bg-purple-50:hover,
html:root .hover\:bg-violet-50:hover{background-color:var(--accent-soft)}
html:root .hover\:bg-purple-100:hover,
html:root .hover\:bg-violet-100:hover{background-color:color-mix(in srgb, var(--accent) 16%, var(--card))}
html:root .hover\:bg-purple-700:hover,
html:root .hover\:bg-purple-600:hover,
html:root .hover\:bg-violet-600:hover{background-color:color-mix(in srgb, var(--accent) 82%, var(--text))}
html:root .hover\:bg-purple-800:hover{background-color:color-mix(in srgb, var(--accent) 70%, var(--text))}

html:root .text-purple-100,
html:root .text-violet-100,
html:root .text-fuchsia-100{color:var(--on-grad)}
html:root .text-purple-400,
html:root .text-purple-500,
html:root .text-purple-600,
html:root .text-purple-700,
html:root .text-purple-800,
html:root .text-purple-900,
html:root .text-violet-400,
html:root .text-violet-500,
html:root .text-violet-600,
html:root .text-violet-700,
html:root .text-fuchsia-500,
html:root .text-fuchsia-600{color:var(--accent)}

html:root .border-purple-100,
html:root .border-purple-200,
html:root .border-purple-300,
html:root .border-violet-100,
html:root .border-violet-200,
html:root .border-fuchsia-200{border-color:var(--accent-line)}
html:root .hover\:border-purple-500:hover,
html:root .hover\:border-violet-500:hover{border-color:var(--accent)}

html:root .focus\:ring-purple-400:focus,
html:root .focus\:ring-purple-500:focus,
html:root .focus\:ring-violet-400:focus,
html:root .focus\:ring-fuchsia-400:focus{--tw-ring-color:var(--accent)}

/* Los stops del degradado se escriben como los escribe Tailwind, para que `bg-gradient-to-r`
   siga funcionando con `--tw-gradient-stops`. */
html:root .from-purple-600,
html:root .from-violet-600,
html:root .from-fuchsia-600{
  --tw-gradient-from:var(--accent) var(--tw-gradient-from-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, color-mix(in srgb, var(--accent) 0%, transparent));
}
html:root .to-purple-600,
html:root .to-violet-600,
html:root .to-fuchsia-600{--tw-gradient-to:var(--accent) var(--tw-gradient-to-position)}
html:root .to-purple-900,
html:root .to-violet-900{--tw-gradient-to:var(--accent-2) var(--tw-gradient-to-position)}

/* `file:` pinta el pseudo-elemento del input de archivo, no el input. */
html:root .file\:bg-purple-50::file-selector-button{background-color:var(--accent-soft)}
html:root .file\:text-purple-700::file-selector-button{color:var(--accent)}
html:root .hover\:file\:bg-purple-100:hover::file-selector-button{
  background-color:color-mix(in srgb, var(--accent) 16%, var(--card));
}