/*
  Design tokens de CAE Manager (ver Project-Hydra-Negocio/tecnico/docs/archive/design/DESIGN_SYSTEM.md — identidad ProjectHydra).
  Fuente de verdad única: ningún componente hardcodea un color, tamaño de
  fuente o espaciado — todo se referencia a través de estas variables.
  Los nombres de variable se mantienen estables entre rediseños (más de 50
  archivos los consumen); lo que cambia entre versiones del sistema es su
  valor, no su nombre.
*/

:root {
  /* Color — primario, identidad propia CAE Manager: azul acero, no azul SaaS
     genérico (ver Project-Hydra-Negocio/tecnico/docs/archive/design/DESIGN_SYSTEM.md § Historial — realineación 2026-07). */
  --color-primary-50: #eef5ff;
  --color-primary-100: #dcebff;
  --color-primary-200: #bdd9ff;
  --color-primary-300: #5ca2f4;
  --color-primary-400: #2f6fdd;
  --color-primary-500: #235bc2;
  --color-primary-600: #1e4a9e;
  --color-primary-700: #163a7d;

  /* Color — secundario: slate profundo, refuerza el acero sin competir con él */
  --color-secondary-50: #f1f4f7;
  --color-secondary-100: #e3e8ee;
  --color-secondary-300: #aeb9c7;
  --color-secondary-500: #475569;
  --color-secondary-600: #35404f;


  /* Color — neutro, más cálido que un gris de librería genérica */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fafbfc;
  --color-neutral-100: #f4f6f8;
  --color-neutral-200: #e8edf2;
  --color-neutral-300: #d5dce5;
  --color-neutral-400: #a9b4c2;
  --color-neutral-500: #738196;
  --color-neutral-600: #556274;
  --color-neutral-700: #404d60;
  --color-neutral-800: #2a3441;
  --color-neutral-900: #161e27;

  /* Color — semántico (semáforo de vigencia documental) */
  --color-success-50: #eefdf3;
  --color-success-500: #22c55e;
  --color-success-700: #15803d;
  --color-warning-50: #fff8eb;
  --color-warning-500: #f59e0b;
  --color-warning-700: #b45309;
  --color-danger-50: #fef2f2;
  --color-danger-500: #ef4444;
  --color-danger-700: #991b1b;
  /* «En tolerancia» (EstadoDocumento.EnTolerancia, decisión de Chris 2026-10-04):
     un tono propio entre el ámbar de Próximo / Sin confirmar y el rojo de Vencido,
     porque su gravedad está entre Urgente y Vencido. Mismo reparto que el resto
     de la familia: -50 es el fondo del chip y -700 la letra, que se espeja en
     oscuro. -500 es solo para rellenos sin letra (el punto de una opción del
     selector): un token no puede hacer de texto y de fondo a la vez, y no se
     espeja porque #e0500a se distingue de la superficie a >= 3:1 en los dos
     temas (3,95:1 sobre blanco, 4,07:1 sobre #18222e). No es un color decorativo. */
  --color-tolerancia-50: #ffe3d5;
  --color-tolerancia-500: #e0500a;
  --color-tolerancia-700: #b12c0c;
  --color-info-50: var(--color-secondary-50);
  /* Papel: color de TEXTO informativo sobre fondo claro (badge-info,
     badge-visita, pendiente-rol-icono, chips de Plataforma) y acento de borde.
     Se espeja por tema a través de --color-secondary-500. */
  --color-info-500: var(--color-secondary-500);
  /* Papel opuesto y por eso token aparte: FONDO sólido informativo con texto
     blanco fijo encima (.toast-info), el mismo patrón que --color-success-500
     y --color-danger-500 en los otros toasts. No se espeja —10,51:1 con
     --color-neutral-0 en los dos temas— porque un fondo que se aclarase en
     oscuro dejaría el texto blanco a 1,99:1. Separar los dos papeles es lo
     que impide que arreglar el texto rompa el fondo: hallazgo de la revisión
     de Codex sobre la primera versión de esta PR. */
  --color-info-600: var(--color-secondary-600);

  /* Color — Hydra Cyan: "el sistema actuando" (02 § 3.3, DDL-027). Se nombra
     por su ROL, no por su matiz, y es asimétrico por tema: el cian brilla en
     oscuro y se contiene en claro. Presupuesto estricto de uso — IA cuando
     actúa, automatización, sincronización, conectores, estado en tiempo real
     y procedencia del dato. Nunca rellena un botón sólido, nunca es color de
     acción, nunca sustituye a info, nunca es decoración (DDL-009).
     No existe un cian brillante válido en modo claro: #00F0FF da 1.41:1,
     #00C2E0 2.14:1 y #06B6D4 2.43:1 — los tres por debajo de su umbral. */
  /* #0B748E desde el 2026-10-08 (DDL-081): #0C7792 daba 4,42:1 sobre el lienzo
     nuevo (#E9EEF4) y el indicador de Inicio va directamente encima. */
  --color-system-text: #0b748e;      /* 5,38:1 sobre Surface, 4,61:1 sobre el lienzo ✓ (4.5:1) */
  --color-system-indicator: #0e96b4; /* 3.48:1 sobre Surface ✓ (3:1) */
  --color-system-tint: color-mix(in srgb, var(--color-system-indicator) 10%, transparent);

  /* Superficie / texto (tema claro por defecto) */
  /* Canvas — fondo de página (02 § 4.1). #E9EEF4 desde el 2026-10-08 (diseños
     aprobados de listados y fichas 360, DDL-081): el lienzo se separa de Surface a
     1,17:1, de modo que una tarjeta blanca se lee sin sombra. El nombre del
     token no se toca — 06 § 3 lo llama --color-canvas y aquí se llama
     --color-bg; esa divergencia de nombre se registra, no se resuelve
     renombrando ni añadiendo un alias (ODM-04).
     Texto DIRECTAMENTE sobre el lienzo: --color-text 14,41:1 y
     --color-text-muted 6,41:1 cumplen; --color-success-700 y
     --color-warning-700 (4,30:1) NO llegan al
     4,5:1 — van sobre Surface o sobre su fondo -50, nunca sueltos
     sobre el lienzo. */
  --color-bg: #e9eef4;
  --color-surface: var(--color-neutral-0);
  --color-surface-hover: var(--color-neutral-100);
  /* Cuarto nivel de profundidad (02 § 4.1, DDL-013/DDL-028):
     Canvas → Surface → Elevated → Overlay. La profundidad se expresa por
     fondo, borde y contraste; la sombra SOLO en Overlay, que es el único
     nivel con relación espacial real sobre el contenido.
     En claro Elevated y Overlay comparten fondo y se distinguen por borde
     reforzado frente a sombra: es lo que impide que la interfaz se convierta
     en una colección de tarjetas flotantes (DDL-014). */
  --color-surface-subtle: #f1f5f7; /* islas internas, agrupaciones */
  --color-elevated: #ffffff;       /* panel contextual, inspector */
  --color-overlay: #ffffff;        /* modal, drawer, popover */
  --color-text: var(--color-neutral-900);
  /* Texto secundario. NO es --color-neutral-500 (#738196): ese escalón da
     3.96:1 sobre blanco e incumple el 4.5:1 exigido al cuerpo de 14px que usa
     toda la aplicación (DDL-029). #46566C desde el 2026-10-08 (diseños
     aprobados de listados y fichas 360): 7,48:1 sobre Surface, 6,82:1 sobre
     Subtle, 6,41:1 sobre el lienzo y 6,35:1 sobre --color-fila-hover; el peor
     fondo de la paleta es --color-neutral-300 (5,41:1). El escalón #738196
     sigue vivo, pero solo como borde de control, donde su criterio es el 3:1
     (DDL-063). */
  --color-text-muted: #46566c;
  /* Borde estructural (02 § 4.1). #CFD8E3 desde el 2026-10-08: 1,44:1 sobre
     Surface y 1,23:1 sobre el lienzo. No es --color-neutral-200 (#E8EDF2): ese
     escalón sigue siendo paleta y lo consume el barrido de EstadoCargando. */
  --color-border: #cfd8e3;
  /* Borde estructural reforzado: distingue el nivel Elevated del Surface en
     claro, donde ambos comparten fondo (02 § 4.1). Agrupa contenido, no
     identifica un control: NO está sujeto al 3:1 (DDL-062).
     #BCC7D4 desde el 2026-10-08 (DDL-081): con --color-border en #CFD8E3 el
     valor anterior (#CBD5E1) quedaba a 1,03:1 del borde normal; este conserva
     el escalón (1,19:1 sobre el borde normal, 1,71:1 sobre Surface, 1,47:1
     sobre el lienzo). */
  --color-border-strong: #bcc7d4;
  /* Borde que identifica un control interactivo. Sujeto al 3:1 de 02 § 8
     (DDL-062); --color-border no lo alcanza (1,44:1) y es solo estructural.
     Claro: 3,39:1 sobre el lienzo, que desde el 2026-10-08 es el fondo más
     restrictivo (3,61:1 sobre Subtle) (DDL-063). El oscuro lo redeclara desde
     la paleta G (2026-10-09): ver el bloque oscuro. */
  --color-border-control: var(--color-neutral-500);

  /* Filas de listado y de ficha 360 (diseños aprobados el 2026-10-08). Tokens
     con nombre propio y variante en los dos temas: la paleta neutra no cambia
     de tema, así que --color-neutral-200 o -400 usados directamente pintarían
     claro sobre oscuro.
     · --color-fila-hover: fondo de la fila bajo el puntero. Claro, el valor de
       --color-neutral-200 (#E8EDF2): más marcado que --color-surface-hover
       porque la fila ocupa todo el ancho; el texto secundario da 6,35:1.
     · --color-fila-divisor: línea entre filas. Claro, el valor de
       --color-neutral-400 (#A9B4C2, decisión de Chris): 2,10:1 sobre Surface.
       Es estructural, no identifica un control: no está sujeto al 3:1.
     · --color-resaltado-busqueda: fondo de la fila o del fragmento que casa
       con la búsqueda (#FFF3C4): --color-text 15,11:1, --color-text-muted
       6,72:1.
     · --color-anillo-pista: pista de AnilloCumplimiento. Claro, el valor de
       --color-neutral-300, el que ya pintaba. */
  --color-fila-hover: var(--color-neutral-200);
  --color-fila-divisor: var(--color-neutral-400);
  --color-resaltado-busqueda: #fff3c4;
  --color-anillo-pista: var(--color-neutral-300);

  /* Avatar de iniciales (AvatarTenant): fondo y letras como PAR, porque el par
     tiene que cambiar de tema junto. Antes el avatar pintaba --color-primary-100
     de fondo y --color-primary-700 de letra: en oscuro el 700 se remapea a
     #dcebff pero el 100 no se redefine, así que fondo y letra salían del mismo
     color (1,00:1, medido 2026-10-02 en staging: cuadrado liso sin iniciales).
     Claro: 8,97:1. Oscuro: 12,39:1 (ver el bloque oscuro). El contrato lo fija
     ContrasteDeAvataresPorTemaTests: >= 4,5:1 en los dos temas. */
  --color-avatar-fondo: var(--color-primary-100);
  --color-avatar-texto: var(--color-primary-700);
  /* Tono neutro del catálogo de avatares de usuario (AvatarUsuario): solo fondo,
     detrás de un emoji. Con variante por tema porque los neutros claros no se
     espejan en oscuro. */
  --color-avatar-fondo-neutro: var(--color-neutral-200);

  /* Selección de texto (::selection, base.css): fondo y letra como PAR. Antes
     solo se fijaba el fondo (--color-primary-100, #dcebff, sin variante
     oscura) y la letra la heredaba el elemento: en oscuro eso es #e7eaee sobre
     #dcebff, 1,00:1 (calculado 2026-10-02, seguimiento de #1037). Claro: igual que
     antes en el fondo (#dcebff); la letra pasa a ser --color-text (13,9:1)
     en vez de la que tuviera cada elemento. Oscuro: ver el bloque oscuro.
     Contrato: ContrasteDeSeleccionHoverYLogoPorTemaTests, >= 4,5:1 en ambos. */
  --color-seleccion-fondo: var(--color-primary-100);
  --color-seleccion-texto: var(--color-text);

  /* Fondo del elemento activo del menú lateral bajo el puntero
     (.nav-item.active:hover). Antes era --color-primary-100 con la letra en
     --color-primary-500: en oscuro #dcebff con #5ca2f4, 2,19:1. Claro: sin
     cambios (#dcebff, 5,19:1). Oscuro: ver el bloque oscuro. */
  --color-nav-activo-hover-fondo: var(--color-primary-100);

  /* Fondo detrás del logotipo subido de un Tenant (AvatarTenant,
     Configuración → Organización). Blanco fijo en los dos temas: el mockup lo
     pinta #fff y un logo de tinta oscura sobre transparencia se perdería sobre
     --color-surface en oscuro. Es un valor de marca, no de superficie, por eso
     NO se redeclara en los bloques de tema. Sin texto encima: el logo no
     lleva letras. */
  --color-logo-fondo: #ffffff;

  /* Botón primario y sus copias (Boton, Account, Reconnect, Asistente IA,
     chips activos, día de hoy del calendario, saltar al contenido...): fondo,
     fondo bajo el puntero y letra como TERNA, porque tienen que cambiar de
     tema juntos. Antes el fondo era --color-primary-500 (remapeado a #5ca2f4
     en oscuro) con letra blanca fija: 2,65:1; y el hover --color-primary-600
     (remapeado a #bdd9ff) con la misma letra: 1,44:1 (medido 2026-10-02,
     seguimiento de #1037 y #1040). Claro: sin cambios (#235bc2 6,27:1; hover
     #1e4a9e 8,31:1). Oscuro: ver el bloque oscuro. Contrato:
     ContrasteDeComponentesPorTemaTests, >= 4,5:1 en reposo y en hover. */
  --color-primario-fondo: var(--color-primary-500);
  --color-primario-fondo-hover: var(--color-primary-600);
  --color-primario-texto: var(--color-neutral-0);

  /* Letra sobre un relleno sólido de --color-success-700 (círculo del paso
     completado de la revisión de sugerencia). El relleno se aclara en oscuro
     (#4ade80) y la letra era #fff fija: 1,74:1. Claro: sin cambios (#fff sobre
     #15803d, 5,02:1). Oscuro: ver el bloque oscuro (10,96:1). */
  --color-exito-solido-texto: var(--color-neutral-0);

  /* Cajas del editor de plantillas (ConfigurarPlantilla) sobre la página del
     PDF. La página es papel: #fff fijo en los dos temas (.editor-plantilla-pagina),
     así que lo que se pinta encima tiene que leerse sobre blanco también en
     oscuro. Antes la caja usaba --color-surface al 55 % y --color-text-muted:
     en oscuro, #8592a3 sobre un gris medio (~1,1:1). Valores de papel, no de
     superficie, por eso NO se redeclaran en los bloques de tema (mismo
     criterio que --color-logo-fondo). Son valores propios del papel: el texto
     de la caja se queda en #5F6E84 (5,19:1 sobre blanco) y NO sigue a
     --color-text-muted, que cambió el 2026-10-08 para la interfaz. */
  --color-papel-caja-fondo: color-mix(in srgb, #ffffff 55%, transparent);
  --color-papel-caja-texto: #5f6e84;
  --color-papel-caja-borde: #738196;
  --color-papel-caja-firma-fondo: color-mix(in srgb, #f1f5f7 70%, transparent);
  --color-papel-caja-realce: #235bc2;
  --color-papel-caja-seleccionada-fondo: color-mix(in srgb, #eef5ff 70%, transparent);
  --color-papel-caja-seleccionada-texto: #163a7d;
  --color-papel-caja-obligatorio: #991b1b;

  /* Tipografía */
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading-xl: 700 2.25rem/2.75rem var(--font-family);   /* H1 36/44 */
  --font-heading-lg: 700 1.75rem/2.25rem var(--font-family);   /* H2 28/36 */
  --font-heading-md: 600 1.375rem/1.875rem var(--font-family); /* H3 22/30 */
  --font-heading-sm: 600 1.125rem/1.625rem var(--font-family); /* H4 18/26 */
  --font-body-lg: 400 1rem/1.5rem var(--font-family);          /* Body 16/24 */
  --font-body-md: 400 0.875rem/1.25rem var(--font-family);     /* Small 14/20 */
  --font-body-sm: 500 0.75rem/1rem var(--font-family);         /* Caption 12/16 */
  --font-label-md: 600 0.8125rem/1rem var(--font-family);

  /* Alias con los nombres exactos del brief de marca — mismo valor que su
     equivalente de arriba, para código nuevo que quiera referenciar la
     escala H1–H4/Body/Small/Caption directamente. */
  --font-h1: var(--font-heading-xl);
  --font-h2: var(--font-heading-lg);
  --font-h3: var(--font-heading-md);
  --font-h4: var(--font-heading-sm);
  --font-body: var(--font-body-lg);
  --font-small: var(--font-body-md);
  --font-caption: var(--font-body-sm);
  --font-label: var(--font-label-md); /* 06 § 7 — etiquetas de formulario y badges */

  /* Espaciado (escala de 8px con medios pasos donde hacen falta) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */

  /* Radius / borde / elevación — más contenido que el look "burbuja" anterior;
     nunca esquinas totalmente planas en elementos interactivos, pero la
     identidad de ingeniería/documentación pide menos redondeo, no más. */
  --radius-sm: 6px;       /* chips, elementos pequeños */
  --radius-md: 10px;      /* botones, inputs */
  --radius-card-sm: 12px; /* tarjetas pequeñas / KPI */
  --radius-lg: 14px;      /* tarjetas principales, diálogos, drawers */
  --radius-full: 9999px;  /* badges, pills, avatares */

  --border-default: 1px solid var(--color-border);
  --border-control: 1px solid var(--color-border-control);
  --border-focus: 2px solid var(--color-primary-500);

  /* Unica sombra del sistema. La elevacion se expresa por fondo, borde y
     contraste; la sombra queda reservada al nivel Overlay, donde existe una
     relacion espacial real sobre el contenido (DDL-013). --shadow-card se
     retiro: aplicar sombra a una tarjeta convierte la interfaz en una
     coleccion de rectangulos flotantes, que es lo que DDL-014 prohibe. */
  --shadow-overlay: 0 20px 50px rgba(22, 30, 39, 0.16);
  /* Sombra de la cabecera fija de .tabla-datos mientras la tabla se desplaza
     (ficha 14 del acabado). Es la única sombra fuera del nivel Overlay y existe
     porque la cabecera fija SÍ tiene una relación espacial real sobre las filas. */
  --shadow-cabecera-tabla: 0 6px 8px -6px rgba(22, 30, 39, 0.35);

  /* Velo detras de Modal/Drawer/AsistenteIa/BuscadorGlobal (ODM-08): valor
     unico, no varia por tema — un velo oscuro funciona igual sobre claro
     y oscuro, a diferencia de --shadow-overlay. */
  --color-scrim: rgba(15, 23, 42, 0.45);

  /* Desenfoque ligero de lo que queda tras el velo de Modal y Drawer (ficha 16).
     Es el filtro entero, no un radio: para APAGARLO en todo el producto basta
     --scrim-filtro: none (con radio 0 el navegador seguiría componiendo la capa).
     Se anula solo con prefers-reduced-transparency / reduced-motion. Coste sin
     medir en equipos modestos: ver la PR. */
  --scrim-filtro: blur(4px);

  /* Motion — contrato cerrado con 07 § 8: NO se declara ningún token que no
     aparezca en esa tabla; si hace falta uno nuevo, se decide primero en 07.
     Cada token declara su FUNCIÓN: un token de duración sin función asignada
     es una invitación a usarlo en cualquier sitio, que es como se acumula el
     motion. Los tres escalones de Tier A sustituyen a --transition-*. */
  --motion-fast: 120ms;       /* Tier A — cambio de color y de estado de control */
  --motion-base: 180ms;       /* Tier A — feedback causal, resalte de fila, ventana de contexto */
  --motion-slow: 250ms;       /* Tier A — toasts y avisos */
  --motion-transition: 360ms; /* Tier B — entrada/salida de overlay, expansión, revelado */
  --ease-standard: ease;      /* Tier A — aceleración simple */
  --ease-fluid: cubic-bezier(0.16, 1, 0.3, 1); /* Tier B — entrada rápida, asentamiento largo */
  --motion-live-cycle: 2.2s;  /* Tier C — pulso de estado vivo, nunca de estado crítico */

  /* DEPRECADO, ultimo superviviente. Le queda un unico consumidor:
     Dashboard.razor.css, la barra comparativa que se rellena. Ni 07 § 6 ni
     07 § 8 asignan funcion a "un valor que se anima hasta su medida", asi que
     no se puede elegir su token de destino sin decidirlo antes (ODM-07). */
  --transition-slow: var(--motion-slow) var(--ease-standard);

  /* Layout */
  --sidebar-width: 260px;
  --sidebar-width-compacto: 64px; /* menú lateral en modo compacto, solo iconos */
  --navbar-height: 64px;
}

/*
  El auto-seguimiento de prefers-color-scheme queda desactivado a propósito
  (decisión del usuario, 2026-08-08): el modo oscuro todavía no está
  rediseñado para los workspaces nuevos (Comunicaciones incluido) y un
  usuario con el sistema operativo en oscuro no debe aterrizar ahí sin
  elegirlo. Mientras tanto se gestiona solo en modo claro por defecto; el
  oscuro sigue disponible como elección EXPLÍCITA desde SelectorTema (ver el
  bloque :root[data-theme='oscuro'] más abajo) — no se ha borrado la
  identidad oscura, solo su activación automática por preferencia del sistema.
*/

/*
  Interruptor de tema (ver SelectorTema.razor): oscuro se aplica cuando el
  usuario lo enciende; apagado es la ausencia de preferencia ("sistema" en
  la cuenta), que —desde que se desactivó el @media (prefers-color-scheme:
  dark) de arriba— siempre resuelve en claro (los valores de :root de la
  cabecera del archivo). El bloque de Oscuro lleva desde el 2026-10-09 la
  paleta G (ya no los valores del @media desactivado), lista para cuando se
  retome el auto-seguimiento del sistema operativo.
*/
:root[data-theme='oscuro'] {
  /* Paleta G «Azul noche nítido» (decisión de Chris, 2026-10-09). Criterio:
     en oscuro no se apagan los colores de estado ni se aclara el texto
     secundario, porque resta nitidez; lo que cambia es la separación entre
     lienzo, tarjeta y línea. Los contrastes de este bloque están calculados
     con la fórmula WCAG, no medidos en pantalla.
     · --color-text (#f0f3f7): 14,44:1 sobre Surface, 17,16:1 sobre el lienzo.
     · --color-text-muted (#8c9aac): 5,61:1 sobre Surface, 6,67:1 sobre el
       lienzo, 6,18:1 sobre Subtle; el peor fondo es Elevated/Overlay
       (#202b36), 5,02:1.
     · --color-border (#2e3c4d): 1,43:1 sobre Surface; estructural.
     --color-elevated, --color-overlay y --color-border-strong conservan el
     valor anterior a la paleta G, que no los nombra: Elevated y Overlay siguen
     un escalón por encima de Surface (1,12:1) y Strong queda entre Border y el
     divisor de fila, como en claro. */
  --color-bg: #0a1017;
  --color-surface: #18222e;
  --color-surface-hover: #1e2936;
  --color-surface-subtle: #111922;
  --color-elevated: #202b36;
  --color-overlay: #202b36;
  --color-text: #f0f3f7;
  --color-text-muted: #8c9aac;
  --color-border: #2e3c4d;
  --color-border-strong: #3a4a5c;
  /* Borde de control (DDL-062, 3:1): #7c8a9e, un punto más claro que el
     --color-neutral-500 de claro. 4,58:1 sobre Surface y 4,10:1 sobre
     Elevated/Overlay (#202b36), el fondo más restrictivo. */
  --color-border-control: #7c8a9e;
  /* Filas (ver el grupo en :root).
     · divisor: #41526a, 2,02:1 sobre Surface (2,10:1 en claro) y 1,85:1 sobre
       la fila bajo el puntero. Estructural, no sujeto al 3:1.
     · pista del anillo: #33414f, 1,54:1 sobre Surface. Antes de 2026-10-08
       pintaba --color-neutral-300 (#d5dce5), casi blanca sobre oscuro.
     · hover: --color-surface-hover (#1e2936); el texto secundario (#8c9aac)
       da 5,14:1 encima.
     · resaltado de búsqueda: #33280a, 5,06:1 con el texto secundario y
       13,02:1 con --color-text. */
  --color-fila-hover: var(--color-surface-hover);
  --color-fila-divisor: #41526a;
  --color-resaltado-busqueda: #33280a;
  --color-anillo-pista: #33414f;

  /* Hydra Cyan — asimétrico por tema (DDL-027): el sistema brilla en oscuro
     y se contiene en claro. Aquí texto e indicador convergen en el mismo
     valor porque sobre fondo oscuro el brillante ya cumple 4.5:1 (>8:1). */
  --color-system-text: #2bd4f0;
  --color-system-indicator: #2bd4f0;

  /* Tintes de estado de la paleta G, con su -700 encima: éxito 8,84:1,
     aviso 8,84:1, peligro 6,03:1, tolerancia 7,16:1. El texto secundario
     (#8c9aac) cumple 4,5:1 sobre los cuatro (el peor, aviso: 5,15:1).
     --color-secondary-50 es la punta de --color-info-50 (#1c2633 en la
     paleta G). */
  --color-success-50: #0c2a1b;
  --color-warning-50: #33260c;
  --color-danger-50: #341418;
  --color-tolerancia-50: #341a0c;
  --color-secondary-50: #1c2633;
  /* Avatar de iniciales: fondo propio de la paleta G (#12264a) y la letra el
     -700 remapeado (#dcebff): 12,39:1 — ver el par en :root. */
  --color-avatar-fondo: #12264a;
  --color-avatar-texto: var(--color-primary-700);
  --color-avatar-fondo-neutro: #2a3441;
  /* Selección: fondo del azul brillante de la paleta (-300, #5ca2f4) y letra
     --color-bg (#0a1017): 7,21:1 y visible sobre Surface (#18222e). */
  --color-seleccion-fondo: var(--color-primary-300);
  --color-seleccion-texto: var(--color-bg);
  /* Hover del activo del menú: --color-surface-hover (#1e2936) con la letra
     --color-primary-500 de oscuro (#60a5fa): 5,79:1. El borde sigue siendo el
     del activo (--color-primary-100), así que sigue leyéndose como activo. */
  --color-nav-activo-hover-fondo: var(--color-surface-hover);
  /* Botón primario: fondo --color-primary-400 (#2f6fdd), el escalón de la paleta
     que sigue cumpliendo AA con letra blanca: 4,73:1. El hover baja a
     #1e4a9e (el --color-primary-600 de :root, que aquí está remapeado a
     claro y por eso no se puede referenciar): 8,31:1. */
  --color-primario-fondo: var(--color-primary-400);
  --color-primario-fondo-hover: #1e4a9e;
  /* Relleno success-700 en oscuro = #4ade80: letra del fondo de página
     (#0a1017), 10,96:1. */
  --color-exito-solido-texto: var(--color-bg);
  /* El -50 primario necesita variante oscura: sin ella pintaba #eef5ff (fondo
     casi blanco) mientras el texto que va encima sí se remapea a claro
     (--color-primary-700 → --color-primary-100 más abajo), el defecto de
     Configuración → Acceso e identidad → Roles (medido 2026-09-18). Paleta G:
     #0f2040, 14,50:1 con --color-text (#f0f3f7), 13,35:1 con el -700
     (#dcebff) y 6,35:1 con --color-primary-500 de oscuro (#60a5fa). */
  --color-primary-50: #0f2040;

  /* Enlace y acento en oscuro: #60a5fa (paleta G), 6,32:1 sobre Surface. Es
     un valor propio y no --color-primary-300 (#5ca2f4), que sigue siendo el
     fondo de la selección de texto. */
  --color-primary-500: #60a5fa;
  --color-primary-600: var(--color-primary-200);
  --color-primary-700: var(--color-primary-100);

  /* Escalones neutros usados como COLOR DE TEXTO, espejados alrededor del
     -500 (800↔200, 700↔300, 600↔400). Hasta ahora ninguno tenía variante:
     el texto se quedaba fijo mientras el fondo sí cambiaba de tema, y el
     contraste se hundía en oscuro — .titulo-aviso-normativo 1,29:1,
     .badge-neutro 2,02:1, .descripcion-avisos-normativos 2,62:1 (medido
     2026-09-18, continuación de #690 y #693). Con el espejo y la paleta G
     (los dos extremos sobre Surface, el del medio sobre Subtle):
     13,64:1, 12,81:1 y 7,65:1.

     El eje es el -500 porque es el único escalón neutro que funciona en los
     dos temas.

     Los tres se usan HOY exclusivamente como `color:` — medido por regla, no
     por línea. Si alguno pasara a usarse como fondo o borde, este espejo le
     daría un valor claro en tema oscuro, que es justo lo que se quiere de una
     escala invertida, pero conviene volver a medirlo antes. */
  --color-neutral-600: var(--color-neutral-400);
  --color-neutral-700: var(--color-neutral-300);
  --color-neutral-800: var(--color-neutral-200);

  /* --color-info-500 es alias de este, y sus 7 usos como texto (.badge-info,
     .badge-visita, .pendiente-rol-icono y cuatro reglas de Plataforma) daban
     1,99:1 y 2,15:1 en oscuro: el alias no cambiaba de tema porque su punta
     era literal y no tenía variante. Espejado a -300, quedan en 7,69:1 y
     8,08:1. Se redeclara el -500 y no el alias porque --color-secondary-500
     no tiene ningún otro consumidor (medido): arreglarlo en la punta evita
     dos declaraciones que puedan divergir. */
  --color-secondary-500: var(--color-secondary-300);

  --color-success-700: #4ade80;
  --color-warning-700: #fbbf24;
  --color-danger-700: #f87171;
  --color-tolerancia-700: #ff8f50;

  --shadow-overlay: 0 20px 50px rgba(0, 0, 0, 0.5);
  --shadow-cabecera-tabla: 0 6px 8px -6px rgba(0, 0, 0, 0.7);
}

:root[data-theme='claro'] {
  --color-bg: #e9eef4;
  --color-surface: var(--color-neutral-0);
  --color-surface-hover: var(--color-neutral-100);
  --color-surface-subtle: #f1f5f7;
  --color-elevated: #ffffff;
  --color-overlay: #ffffff;
  --color-text: var(--color-neutral-900);
  --color-text-muted: #46566c; /* DDL-029 — ver comentario en :root */
  --color-border: #cfd8e3;
  --color-border-strong: #bcc7d4;
  --color-fila-hover: var(--color-neutral-200);
  --color-fila-divisor: var(--color-neutral-400);
  --color-resaltado-busqueda: #fff3c4;
  --color-anillo-pista: var(--color-neutral-300);

  --color-system-text: #0b748e;
  --color-system-indicator: #0e96b4;

  --color-success-50: #eefdf3;
  --color-warning-50: #fff8eb;
  --color-danger-50: #fef2f2;
  --color-tolerancia-50: #ffe3d5;
  --color-secondary-50: #f1f4f7;
  --color-primary-50: #eef5ff;
  --color-avatar-fondo: var(--color-primary-100);
  --color-avatar-texto: var(--color-primary-700);
  --color-avatar-fondo-neutro: var(--color-neutral-200);
  --color-seleccion-fondo: var(--color-primary-100);
  --color-seleccion-texto: var(--color-text);
  --color-nav-activo-hover-fondo: var(--color-primary-100);
  --color-primario-fondo: var(--color-primary-500);
  --color-primario-fondo-hover: var(--color-primary-600);
  --color-exito-solido-texto: var(--color-neutral-0);

  --color-primary-500: #235bc2;
  --color-primary-600: #1e4a9e;
  --color-primary-700: #163a7d;

  --shadow-overlay: 0 20px 50px rgba(22, 30, 39, 0.16);
  --shadow-cabecera-tabla: 0 6px 8px -6px rgba(22, 30, 39, 0.35);
}