/* CiberLex — Design tokens */
:root {
  /* Superficies */
  --bg-void: #060912;
  --bg-deep: #0a1020;
  --bg-base: #0f172e;
  --bg-card: #141d39;
  --bg-hover: #1b2548;
  --bg-selected: #243064;

  /* Bordes hairline */
  --line-1: #1a2342;
  --line-2: #243156;
  --line-3: #324374;

  /* ---------- SELECCIÓN EN LISTAS DE OPCIÓN ÚNICA ----------
     El aro y el relleno de la fila elegida en el selector de tema (profile.jsx). Van como
     tokens y no como un `rgba` escrito en el componente porque este producto tiene CUATRO
     paletas: un cian claro al 10 % se lee sobre el fondo casi negro y desaparece sobre el
     blanco del tema claro, y en alto contraste hace falta justo lo contrario -un aro pleno
     y un relleno que se note-, porque ahí el color no puede ser la única señal.
     El prefijo es `--tema-` y no `--acc-`/`--bg-` a propósito: la sección 7 de
     `tests/test_contraste_accesible.js` exige que todo `var(--acc|text|ia|bg|line|plan-*)`
     exista en los DOS temas base, y estos dos se redeclaran además en las dos capas de alto
     contraste, que esa prueba no modela. */
  --tema-sel-borde: #22d3ee;
  --tema-sel-fondo: rgba(34,211,238,.10);

  /* Texto */
  /* Tinta off-white para texto explicativo sobre la superficie oscura fija. Mantiene
     contraste en ambos temas sin el brillo visual del blanco puro. */
  --text-on-contrast: #cbd5e1;
  --surface-contrast: #060912;
  --text-hi: #f0f4ff;
  --text-mid: #c5cde6;
  /* Aclarado de #7e89ad: daba 3,61:1 sobre `--bg-selected`, que es la superficie mas
     clara del tema oscuro y por tanto la PEOR para tinta clara. Sobre las tarjetas si
     cumplia (4,80), y por eso no se habia visto: el fallo solo aparecia en las filas
     seleccionadas. Este token es texto en 107 sitios. Sigue a 1,66:1 de `--text-mid`,
     asi que los dos niveles de la escala se distinguen igual. */
  --text-mute: #969fbc;
  --text-dim: #4a557a;

  /* Color de cada PLAN, para el titular de las tarjetas de precios.
     Aparte de los acentos a propósito: los acentos son claros porque están pensados
     para iconos y enlaces pequeños sobre fondo oscuro, y en un titular de 34 px se
     leen pálidos. Estos son el tono profundo -más saturado y más oscuro- que se pidió.
     Contraste MEDIDO sobre el fondo de la tarjeta (#0b1020): 5,18 · 3,62 · 3,65. El
     mínimo de la norma para texto grande es 3,0, así que los tres pasan con margen.
     No se definen por tema: son igual de legibles sobre claro, que es de donde salen. */
  --plan-free: #0892b0;
  --plan-pro: #3565d9;
  --plan-avanzado: #7c4fe0;

  /* Acentos semánticos */
  --acc-blue: #5b8cff;
  --acc-cyan: #22d3ee;
  --acc-mint: #34d3a6;
  --acc-amber: #f5a524;
  --acc-orange: #ff7849;
  --acc-purple: #a78bfa;
  --acc-red: #f87171;
  /* Detalle cálido de la conexión Gmail; se usa siempre mediante token para conservar tema. */
  --acc-rose-gold: #e7a195;

  /* Degradado IA tipo Gemini */
  --ia-1: #38e0f5;
  --ia-2: #5b8cff;
  --ia-3: #b794ff;
  --ia-4: #f0a6ff;
  --grad-ia: linear-gradient(100deg, var(--ia-1), var(--ia-2) 38%, var(--ia-3) 72%, var(--ia-4));
  --grad-ia-soft: linear-gradient(100deg, rgba(56,224,245,.16), rgba(91,140,255,.16) 38%, rgba(183,148,255,.16) 72%, rgba(240,166,255,.16));

  /* Tinta sobre CTA degradado */
  --ink-cta: #04141f;
  --vignette: rgba(6,9,18,.55);

  /* ---------- ATMÓSFERA DEL ESCRITORIO ----------
     Los dos destellos del fondo del workspace: cian arriba-izquierda y rose gold
     abajo-derecha. Son TOKENS y no valores escritos en la regla por una razón concreta:
     este producto tiene tema claro, y un `rgba` fijo pensado para fondo casi negro se ve
     como una mancha sucia sobre un fondo claro. Con tokens, el tema claro los redefine.

     SUBEN DE .10/.07 A .14/.10 y no es un capricho: el alfa declarado NO es el que llega a
     la pantalla. Sobre `--bg-void` (#060912) un cian al 10 % da ~#091d28, una diferencia real
     pero finísima, y encima la barra lateral y el topbar son translúcidos, así que se comen
     otra parte allí donde solapan. Con .14 y .10 el destello se lee como volumen en el área
     de trabajo, que es donde ahora está centrado (ver `.cl-atmosfera` en base.css).

     Éste es el techo, no un punto de partida: por encima de .14 el destello deja de leerse
     como profundidad y empieza a competir con el texto de la jurisprudencia, que es lo que el
     abogado viene a leer. El contraste del texto no se toca en ningún caso. */
  --atm-cian: rgba(34,211,238,.14);
  --atm-rose: rgba(231,161,149,.10);

  /* ---------- Red neuronal del fondo (NeuralMesh) ----------
     VAN COMO TERNAS «r,g,b» SIN `rgb()`, y es a propósito: el lienzo compone la
     opacidad de cada nodo y de cada línea en cada fotograma -depende de la distancia
     entre nodos y de la del cursor-, así que necesita el color y el alfa por separado
     para armar `rgba(r,g,b,alfa)`. Un `--mesh-1: #22d3ee` obligaría a parsear el
     hexadecimal en JavaScript en cada cuadro.
     Son el cian y el morado de la marca (--acc-cyan y --acc-purple). Se declaran aquí
     y no en el componente para que se puedan retocar sin tocar JavaScript, y para que
     el tema claro los sobreescriba como hace con todo lo demás. */
  --mesh-1: 34,211,238;
  --mesh-2: 167,139,250;
  /* Cuánta tinta lleva la red. Se multiplica por `--glow` (el ajuste de intensidad del
     abogado), así que quien lo baje a la mitad también atenúa la red.
     Empezó en .28 y se subió a .42: a .28 la malla estaba por debajo del umbral en el que
     se lee sin fijarse -en pantallas con poco brillo o mucha luz ambiente casi no
     aparecía-. Es EL número para retocar la presencia de la red; el reparto entre líneas
     y nodos se hace en el componente. */
  --mesh-alpha: .42;
  /* Las DOS palancas de presencia, pensadas para pisarse por instancia.
     `--mesh-escala` multiplica el alfa (1 = tal cual lo diga el tema) y `--mesh-grosor`
     es el ancho del trazo en px CSS. El interior de la aplicación las baja en su propio
     `style` para que la malla sea una marca de agua que solo se nota si te fijas: allí
     el abogado está leyendo expedientes, no mirando el fondo.
     Lo que NO conviene bajar es la densidad de nodos: el número sale de una cuenta
     contra la distancia de enlace (ver el comentario de `cuantos` en shared.jsx), y
     reducirla devuelve el fondo a puntos sueltos en vez de a una red. */
  --mesh-escala: 1;
  --mesh-grosor: 1.25;

  /* Superficies OPACAS que estaban sin declarar. Se usaban como
     `var(--bg-panel, rgba(12,18,32,.9))` y `var(--bg-elev, #12151d)`, o sea que caian
     siempre al valor de reserva, que es OSCURO Y FIJO: en tema claro esas superficies se
     quedaban oscuras y el texto encima -`--text-mid`, que en claro es casi negro- se
     volvia ilegible. El caso peor era el desplegable de audiencias (`.aud-dd-pop`):
     texto #353f63 sobre #12151d, 1,5:1. Invisible, y sin dar ningun error.
     Van OPACAS a proposito: una cabecera de tabla pegada (`position: sticky`) y un menu
     flotante tienen que tapar lo que pasa por debajo, no dejarlo transparentar. */
  --bg-panel: #0c1220;
  --bg-elev: #12151d;

  /* Superficies derivadas (tematizables) */
  --field-bg: rgba(10,16,32,.65);
  --chip-bg: rgba(27,37,72,.55);
  --panel-bg: rgba(10,16,32,.6);
  --topbar-bg: rgba(6,9,18,.55);
  --well-bg: rgba(10,16,32,.5);
  --glass-a: rgba(20,29,57,.72);
  --glass-b: rgba(10,16,32,.82);
  --glass-sheen: rgba(240,244,255,.09);

  /* ---------- DESTELLO DEL BARRIDO ESPECULAR ----------
     La banda de luz que cruza el cristal al pasar el ratón (`crystal-flow`, en anim.css).
     Va como token y no como un `rgba` escrito en la regla por la misma razón que
     `--glass-sheen`: sobre el fondo casi negro lo que se lee como reflejo es BLANCO, y sobre
     el papel del tema claro ese mismo blanco es invisible -no hay nada más claro que el
     blanco-, así que allí el reflejo tiene que ser una tinta azul. En alto contraste se apaga:
     una banda que cruza por encima del texto es exactamente el ruido que ese modo quita. */
  --cl-destello: rgba(255,255,255,.26);

  /* ---------- EL EMBLEMA, POR TOKEN ----------
     `owl-emblem-blue.png` NO es un búho recortado: es un MEDALLÓN OSCURO opaco con viñeta y
     el búho dibujado encima en tinta CLARA (medido: el 67 % de sus píxeles opacos están por
     debajo de luma 70, y la tinta del ave por encima de 120). En el tema oscuro eso nunca se
     notó porque todo se compone con `mix-blend-mode: screen`, y `screen` contra una página
     casi negra hace desaparecer el medallón: el blend estaba haciendo de recorte.

     En el tema claro ese truco no existe -`screen` sobre blanco lo blanquea todo-, así que
     `base.css` forzaba `mix-blend-mode: normal` y el medallón se pintaba TAL CUAL: el cuadro
     oscuro detrás del búho que se reportó.

     Y no hay filtro que lo arregle. Se probaron `invert`+`hue-rotate`, con y sin `multiply`, y
     todos dejan un halo circular: la tinta del ave (luma ~129) y el centro del medallón
     (luma ~113) SE SOLAPAN, así que ningún umbral ni ninguna curva los separa.

     La solución es un asset propio para el tema claro, generado desde el original con la
     LUMINANCIA convertida en canal alfa: lo que era luz pasa a ser opacidad, el medallón se
     vuelve transparente y el ave se vuelve tinta de marca. Va por token para que el cambio de
     tema no necesite ni una línea de JavaScript. El original NO se toca: sigue siendo el que
     usa `ficha-export.jsx` para el PDF, donde el medallón oscuro es justo lo que se quiere. */
  --owl-emblema: url('../assets/owl-emblem-blue.png');

  /* Tipografía */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-editorial: 'Cormorant Garamond', serif;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* Glow / sombras */
  --glow-blue: 0 0 24px rgba(91,140,255,.35);
  --glow-cyan: 0 0 20px rgba(34,211,238,.30);
  --glow-ia: 0 8px 40px -8px rgba(91,140,255,.45), 0 0 28px -4px rgba(183,148,255,.35);
  --shadow-lift: 0 18px 50px -18px rgba(0,0,0,.75);

  /* Resplandor SUTIL para que un modulo se lea como interactivo sin invadir el fondo
     oscuro. Es deliberadamente mas flojo que --glow-blue: este se lleva EN REPOSO, y
     una luz que en reposo ya pesa satura la pantalla entera cuando hay ocho modulos.
     El radio negativo del tercer valor recoge la sombra hacia dentro: se ve un halo
     pegado al borde, no una mancha.
     Las dos multiplican por var(--glow): es el ajuste de intensidad del abogado (lo
     escribe main.jsx en el :root). Sin ese factor, quien baje el resplandor a cero
     seguiria viendo este, y el ajuste dejaria de significar lo que dice. */
  --glow-soft:
    0 0 0 1px rgba(91,140,255, calc(.16 * var(--glow, 1))),
    0 0 10px rgba(91,140,255, calc(.16 * var(--glow, 1)));
  --glow-soft-hi:
    0 0 0 1px rgba(91,140,255, calc(.42 * var(--glow, 1))),
    0 0 14px rgba(91,140,255, calc(.32 * var(--glow, 1)));

  /* Movimiento */
  --ease-fluid: cubic-bezier(.22,.8,.28,1);
  --motion: 1; /* multiplicador de tweaks */

  /* LOS CONTROLES NATIVOS TAMBIÉN TIENEN TEMA. `color-scheme` es lo que le dice al navegador
     de qué color pintar lo que NO se puede estilar con CSS: el calendario que despliega un
     `<input type="date">`, los controles de un `<audio>`, las barras de desplazamiento, el
     relleno de autocompletado. Sin esta línea el navegador asume claro, y por eso había diez
     sitios que escribían `colorScheme: 'dark'` a mano en su `style` inline: cada uno arreglaba
     su control y, de paso, lo dejaba OSCURO PARA SIEMPRE, también con el tema claro puesto.
     Declarándolo aquí -y en el bloque del tema claro- se hereda a todo el documento y esos
     parches inline dejan de hacer falta. */
  color-scheme: dark;
}

/* ---------- Tema claro ----------

   POR QUÉ SE REAJUSTÓ ESTE BLOQUE. Se reportó que el tema claro «se ve lavado» y que «los
   modales se pierden contra el fondo». Al medirlo, la queja tenía un número detrás: TODAS las
   superficies vivían entre `#e9edf8` y `#ffffff`, un recorrido tan estrecho que se leían como
   un solo plano.

     panel lateral vs página .... 1,06:1        campo vs cristal ..... 1,08:1
     topbar vs página ........... 1,02:1        pozo vs cristal ...... 1,02:1
     cristal vs página .......... 1,07:1        --line-1 vs página ... 1,14:1
     modal vs su velo ........... 1,56:1

   LO QUE NO ERA EL PROBLEMA: la razón cristal-contra-página del TEMA OSCURO es 1,06:1, o sea
   la misma, y el tema oscuro se ve bien. Así que subir la luminancia no era la respuesta. Lo
   que hace el trabajo en el tema oscuro son el brillo del cristal y una sombra de
   `rgba(0,0,0,.75)`; en claro el `--glass-sheen` es blanco SOBRE blanco -literalmente
   invisible- y la sombra iba a `.28`. Un tema claro separa planos con CANTOS y SOMBRAS, no
   con luminancia.

   QUÉ SE HIZO, en este orden de importancia:
     1. Los CANTOS bajan de verdad (`--line-*`). Es lo que dice dónde acaba un panel y es
        gratis: un borde no es texto, así que no tiene umbral de contraste que romper.
     2. La SOMBRA pasa a dos capas (uno de contacto y uno de elevación), que es lo que separa
        una tarjeta del papel sin oscurecer la página entera.
     3. Se abre el recorrido escritorio -> papel: la página baja a `#dfe5f4` y las superficies
        elevadas se vuelven blanco casi opaco.
     4. El VELO del modal se oscurece (en base.css), que es la queja explícita.

   EL LÍMITE DE LO QUE SE PUEDE OSCURECER LA PÁGINA, y es un número exacto: los siete acentos
   se usan como TEXTO y estaban a 4,74:1 contra `--bg-void`, o sea con 0,24 de margen sobre el
   4,5 de la norma. `--acc-blue` es el que menos margen tenía y por tanto el que manda: por
   debajo de `#e4e9f6` de fondo, los siete caen por debajo de AA. Como la página baja más que
   eso, los acentos bajan con ella -mismo tono y saturación, un paso más profundo-, y así el
   contraste no empeora en ningún sitio: MEJORA. Lo recalcula
   `tests/test_contraste_accesible.js` desde este archivo. */
html[data-theme="light"] {
  /* Los controles nativos siguen al tema (ver el comentario del `:root`). */
  color-scheme: light;

  --bg-void: #dfe5f4;
  --vignette: rgba(148,164,206,.45);

  /* LA ATMÓSFERA, MUCHO MÁS FLOJA EN CLARO. Sobre un fondo casi blanco un destello de
     color al 14% no da profundidad: da la impresión de una pantalla sucia o de un halo mal
     recortado. Aquí basta un tinte apenas perceptible para hacer el mismo trabajo -sugerir
     que la luz entra por una esquina- sin ensuciar el lienzo.

     El incremento es PROPORCIONAL al del tema oscuro, no el mismo salto: se mantiene la
     razón que ya tenían (el cian al 45 % de su valor en oscuro, el rose al 50 %), así que
     .14 -> .06 y .10 -> .05. Subir estos dos al mismo .14/.10 del tema oscuro sería
     exactamente la mancha que este bloque existe para evitar. */
  --atm-cian: rgba(34,211,238,.06);
  --atm-rose: rgba(231,161,149,.05);

  /* La red, sobre casi blanco, con TINTA OSCURA y menos alfa. El cian y el morado
     claros del tema oscuro son acentos pensados para brillar sobre un fondo negro:
     sobre `#e9edf8` desaparecen -y lo poco que se ve queda lechoso-. Aquí van el azul
     y el violeta profundos de la paleta, y el alfa baja porque sobre fondo claro una
     malla de líneas se lee mucho antes y satura enseguida. */
  --mesh-1: 53,101,217;
  --mesh-2: 109,74,206;
  /* Sube de .16 a .24, MENOS que en el tema oscuro (que va de .28 a .42). Sobre casi
     blanco una línea de tinta oscura se lee muchísimo antes que una clara sobre negro:
     igualar el .42 aquí no daría «más presencia», daría una reja. */
  --mesh-alpha: .24;
  /* La escala de elevación: `--bg-void` es el escritorio y `--bg-card` el papel. Entre los
     dos hay ahora 1,26:1 (antes 1,17:1), y los intermedios se reparten el recorrido en vez
     de apelotonarse contra el blanco. */
  --bg-deep: #e7ebf7;
  --bg-base: #f2f5fc;
  --bg-card: #ffffff;
  --bg-hover: #e6ebf8;
  --bg-selected: #d5ddf3;

  /* LOS CANTOS, que es lo que de verdad separa planos en un tema claro. `--line-1` daba 1,33:1
     sobre blanco: a 1 px de grosor eso no es un borde, es una insinuación.
     `--line-1` es el que carga con el producto -unos 145 sitios, entre ellos el canto del panel
     lateral y el del topbar- así que es el que más importa que se vea; `--line-2` es el de los
     campos de texto y las tarjetas de cristal (`.field`, `.glass`); `--line-3` es el canto
     fuerte, para lo que tiene que delimitarse sin ayuda de una sombra.
     OJO al medirlos: el número que cuenta NO es el contraste sobre blanco sino sobre la
     superficie que delimitan. El canto del panel lateral se ve contra la PÁGINA, y ahí
     `--line-1` se queda en 1,18:1 por mucho que sobre papel dé 1,48:1; por eso el panel y el
     topbar pasaron a `--line-2` en main.jsx en vez de seguir oscureciendo este token, que
     habría ensuciado los 145 sitios para arreglar dos. */
  --line-1: #c7d0e6;
  --line-2: #aab7d6;
  --line-3: #8b9bc4;

  /* El cian claro del tema oscuro sobre blanco es casi invisible: aquí va el cian profundo
     -el mismo tono, un paso más abajo- y el relleno sube de .10 a .12 porque un tinte sobre
     blanco necesita algo más de tinta para leerse como «esta fila está elegida».
     Acompaña al nuevo `--acc-cyan`, que bajó con el resto de los acentos. */
  --tema-sel-borde: #05677c;
  --tema-sel-fondo: rgba(5,103,124,.12);

  /* Los tres niveles altos bajan un punto: sobre un papel blanco puro una tinta al 20 % de
     gris se lee «desgastada» aunque cumpla la norma, y la queja incluía justamente eso. */
  --text-hi: #111831;
  --text-mid: #313b5e;

  /* `--text-dim` SIGUE SIENDO LA DEUDA DECLARADA del proyecto -no llega a AA para texto
     pequeño en ningún tema- pero pasa de 2,19:1 a 2,89:1, que es un 32 % más de contraste sin
     fundirse con `--text-mute`: la separación entre los dos niveles queda en 1,76:1, o sea
     siguen distinguiéndose como dos escalones distintos. Llegar a 4,5:1 exigiría #69769f, que
     está a 1,42:1 de `--text-mute` -prácticamente el mismo color- y eso es rediseñar la
     escala tipográfica de los dos temas, que es la decisión de producto que el comentario de
     `tests/test_contraste_accesible.js` describe. La prueba comprueba que la deuda no
     EMPEORE; aquí mejora. */
  --text-dim: #7985ac;

  /* Los dos opacos del tema claro (ver el comentario en :root). */
  --bg-panel: #f7f9fd;
  --bg-elev: #ffffff;

  /* SUPERFICIES CASI OPACAS. Estaban al 70-85 % y por debajo pasaba la malla, la atmósfera y
     el degradado de la página: un panel translúcido sobre un fondo casi del mismo color no se
     lee como un panel. Al 92-97 % el cristal vuelve a ser papel y el `backdrop-filter` de
     `.glass` queda como un matiz, no como la estructura.
     `--field-bg` se queda LEVEMENTE hundido en vez de blanco puro: un campo de texto blanco
     sobre una tarjeta blanca solo se distingue por su borde, y aunque el borde nuevo ya lo
     sostiene (1,73:1), un hueco apenas rehundido es lo que hace que se lea como editable. */
  --field-bg: rgba(237,241,250,.92);
  --chip-bg: rgba(213,221,243,.72);
  --panel-bg: rgba(247,249,253,.92);
  --topbar-bg: rgba(243,246,252,.86);
  --well-bg: rgba(223,229,244,.72);
  --glass-a: rgba(255,255,255,.97);
  --glass-b: rgba(246,249,254,.97);
  --glass-sheen: rgba(255,255,255,.7);

  /* Sobre papel blanco un reflejo blanco no existe: aquí la banda es el azul de la marca a
     baja opacidad, que es lo que se lee como un brillo cruzando un cristal claro. */
  --cl-destello: rgba(35,84,198,.15);

  /* El emblema en tinta, sin medallón (ver el comentario del `:root`). Los dos ojos siguen
     llevando `mix-blend-mode: screen` y siguen funcionando: caen sobre la cabeza del ave, que
     en esta versión es tinta oscura, así que el cian los ilumina igual que en el tema oscuro. */
  --owl-emblema: url('../assets/owl-emblem-tinta.png');

  --glow-blue: 0 0 18px rgba(91,140,255,.22);
  --glow-cyan: 0 0 14px rgba(34,211,238,.2);
  --glow-ia: 0 8px 30px -10px rgba(91,140,255,.35), 0 0 20px -6px rgba(183,148,255,.25);
  /* SOMBRA DE DOS CAPAS, y es la mitad del arreglo. Una sola sombra difusa y lejana
     (`50px -18px` al 28 %) da un halo suave que sobre fondo claro se lee como suciedad, no
     como elevación. Lo que separa una tarjeta del papel es el CONTACTO: una segunda capa
     corta y cercana que dibuja el canto inferior. Es como funciona cualquier escala de
     elevación de un tema claro, y es lo que el tema oscuro conseguía gratis porque allí la
     sombra cae sobre casi negro y se ve a la primera. */
  --shadow-lift: 0 18px 44px -16px rgba(23,35,80,.30), 0 2px 8px -2px rgba(23,35,80,.14);

  /* Mas flojo todavia en el tema claro: sobre un fondo casi blanco un halo azul se ve
     como una mancha sucia mucho antes que sobre el fondo oscuro. */
  --glow-soft:
    0 0 0 1px rgba(91,140,255, calc(.13 * var(--glow, 1))),
    0 0 9px rgba(91,140,255, calc(.10 * var(--glow, 1)));
  --glow-soft-hi:
    0 0 0 1px rgba(91,140,255, calc(.34 * var(--glow, 1))),
    0 0 12px rgba(91,140,255, calc(.22 * var(--glow, 1)));

  /* ============================================================================
     ACENTOS DEL TEMA CLARO, medidos contra la norma (WCAG 2.1, nivel AA)

     Estos siete colores se usan como COLOR DE TEXTO en unos 400 sitios (98 solo
     `--acc-cyan`), y ninguno llegaba al 4,5:1 que la norma pide para texto normal.
     Medido antes: cyan 3,12 · mint 2,89 · red 4,12 · amber 4,29 · orange 4,42 ·
     blue 4,47 · purple 4,43. El tema oscuro sí cumplía; el claro, no.

     CÓMO SE ELIGIERON. Se conserva el TONO y la SATURACIÓN de cada acento y se baja
     solo la luminosidad hasta cruzar el umbral con margen (4,75:1), así que la
     identidad de color no cambia: es el mismo cyan, un paso más profundo.

     CONTRA QUÉ SE MIDEN. Contra las TRES superficies de página del tema claro
     -`--bg-card` #ffffff, `--bg-base` #f6f8fd y `--bg-void` #e9edf8-, y se toma la
     peor. Sobre `--bg-selected`, que es más oscura, un acento da 4,18:1: ahí no
     aparece como texto sino como ICONO pequeño (el check de admin-config.jsx), y para
     no-texto la norma pide 3,0. Queda por encima.

     Lo vigila `tests/test_contraste_accesible.js`, que RECALCULA el contraste desde
     este archivo. Si alguien aclara un acento por gusto estético, el CI lo dice con el
     número exacto en vez de dejarlo pasar. */
  /* BAJAN UN PASO porque la página bajó. Con el fondo anterior (#e9edf8) estaban a 4,74:1, o
     sea a 0,24 del mínimo; sobre el fondo nuevo (#dfe5f4) los mismos valores caerían a 4,40:1
     y los siete incumplirían. Se conserva el TONO y la SATURACIÓN de cada uno -es el mismo
     cyan, el mismo mint- y se baja solo la luminosidad, igual que se hizo al crearlos. El
     resultado no es «mantener» el contraste: sube de 4,74 a 4,96-5,61:1, así que estos siete
     colores, que son texto en unos 400 sitios, se leen MEJOR que antes del cambio. */
  --acc-blue: #2354c6;
  --acc-cyan: #05677c;
  --acc-mint: #066b4a;
  --acc-amber: #9a4707;
  --acc-orange: #a9380a;
  --acc-purple: #6d3fd2;
  --acc-red: #bd1d1d;
  --acc-rose-gold: #8a424e;

  /* `--text-mute` se usa como texto en 107 sitios y daba 3,58:1 sobre la superficie más
     oscura del tema (`--bg-selected`, donde SÍ hay texto de cuerpo: ver anim.css:144 y
     chat.jsx:2936). Los dos niveles de encima ya cumplían con holgura: --text-hi 12,89
     y --text-mid 7,72. */
  --text-mute: #515978;

  /* ============================================================================
     DEGRADADO DE MARCA + tinta blanca en CTA

     `--ink-cta` es blanco en este tema y se apoya sobre `--grad-ia` en ~22 sitios (el
     botón primario `.cta`, la burbuja de soporte, los conmutadores activos, la burbuja
     del mensaje propio...). Dos de las cuatro paradas no llegaban al 4,5:1: la 1
     (cyan) daba 3,02 y la 4 (magenta) 4,17.

     POR QUÉ SE OSCURECE EL DEGRADADO Y NO SE OSCURECE LA TINTA. Se probó lo contrario
     -tinta oscura como en el tema oscuro- y NO funciona: sobre la parada 2 (#3565d9)
     una tinta oscura da 3,41:1, peor que el problema que arregla. Con fondo de marca
     saturado, la tinta clara es la única que puede cumplir en las cuatro paradas.

     SE MIDE EL DEGRADADO ENTERO, no sus cuatro paradas: el texto se apoya en cualquier
     punto del botón y el peor contraste podría caer ENTRE dos paradas. El peor punto
     con estos valores cae en t=0% y da 4,75:1.

     OJO ANTES DE «UNIFICAR» ESTO CON LOS ACENTOS. `--ia-2` (#3565d9) y `--acc-blue`
     (#2e60d8) casi coinciden, igual que `--ia-3` y `--acc-purple`, y da la impresión de
     que son el mismo color duplicado. No lo son, y sus requisitos van en direcciones
     OPUESTAS: los `--ia-*` son FONDO con tinta blanca encima -si se aclaran, pierden
     contraste- y los `--acc-*` son TEXTO sobre fondo claro -si se oscurecen, lo ganan-.
     Igualarlos rompe uno de los dos lados. Son roles distintos que se parecen. */
  --ia-1: #087e95;
  --ia-2: #3565d9;
  --ia-3: #7c4fe0;
  --ia-4: #bd35bd;
  --ink-cta: #ffffff;
}

/* ============================================================================
   LA SALA DE AUDIENCIAS ES UNA ESCENA OSCURA, SIEMPRE

   El simulador no es una pantalla más de la aplicación: es una sala en penumbra, con una
   fotografía de fondo y paneles oscuros encima, y se pinta igual con el tema claro puesto.
   Pero tomaba los tokens del TEMA ACTIVO, así que con el tema claro los acentos -que en
   claro son oscuros a propósito, para leerse sobre blanco- caían sobre pastillas oscuras:

     «SU TURNO — HABLE» (--acc-cyan) sobre la pastilla de estado ...... 2,22:1
     «GUIADO / PROFESIONAL» (--acc-mint / --acc-amber) ................ 2,22:1
     «La sala delibera…» (--acc-purple) ............................... 2,22:1

   Es el indicador más importante del simulador -a quién le toca hablar- y era ilegible
   para cualquiera con el tema claro. Con los valores oscuros pasa a 4,5-6,8:1.

   Se redeclaran SOLO los tokens que la pantalla usa de verdad (los buscados uno por uno en
   audiencia.jsx y en las reglas .aud-*); los que no llevan color -radios, fuentes,
   `--motion`- no se tocan porque no dependen del tema.

   OJO: estos valores son una COPIA de los del `:root` de arriba, y una copia se desvía. La
   sección 8 de `tests/test_contraste_accesible.js` los compara uno a uno con el original y
   falla si alguien cambia uno de los dos lados y no el otro. No los edites a mano sin
   mirar esa prueba. */
.aud-escena-oscura {
  --acc-blue: #5b8cff;
  --acc-cyan: #22d3ee;
  --acc-mint: #34d3a6;
  --acc-amber: #f5a524;
  --acc-orange: #ff7849;
  --acc-purple: #a78bfa;
  --acc-red: #f87171;
  /* Se suma para que este bloque y su compañero de alto contraste declaren el MISMO juego de
     claves: que coincidan clave por clave es lo que permite auditar los dos de un vistazo, y
     el compañero ya lo traía. Hoy `audiencia.jsx` no usa el rose gold, así que no cambia nada
     en pantalla; el día que lo use, ya está cubierto en vez de heredar el del tema activo. */
  --acc-rose-gold: #e7a195;
  --text-hi: #f0f4ff;
  --text-mid: #c5cde6;
  --text-mute: #969fbc;
  --text-dim: #4a557a;
  --line-1: #1a2342;
  --line-2: #243156;
  --line-3: #324374;
  --bg-hover: #1b2548;
  --bg-elev: #12151d;

  /* LAS SUPERFICIES TAMBIÉN, y esto arregla un defecto medido de 1,10:1.
     El bloque redeclaraba los COLORES de la escena (acentos, texto, cantos) pero no sus
     SUPERFICIES, así que esas se heredaban del tema activo. Con el tema claro puesto,
     `--glass-a`/`--glass-b` son blanco al 97 % y ocho paneles de `audiencia.jsx` llevan
     `className="glass"` SIN fondo propio: quedaban BLANCOS con el texto de la escena fijado en
     `#f0f4ff`. Blanco sobre blanco, 1,10:1, en la pantalla donde se lee a quién le toca
     hablar. El mismo motivo por el que existe el resto del bloque -la sala se pinta en
     penumbra también con el tema claro- vale para el cristal: si la escena es oscura, su
     cristal es oscuro.
     Son COPIA EXACTA del `:root`, como el resto: la sección 8 de
     `tests/test_contraste_accesible.js` los compara uno a uno y falla si se desvían. */
  --bg-card: #141d39;
  --bg-base: #0f172e;
  --bg-panel: #0c1220;
  --field-bg: rgba(10,16,32,.65);
  --chip-bg: rgba(27,37,72,.55);
  --panel-bg: rgba(10,16,32,.6);
  --well-bg: rgba(10,16,32,.5);
  --glass-a: rgba(20,29,57,.72);
  --glass-b: rgba(10,16,32,.82);
  --glass-sheen: rgba(240,244,255,.09);
}


/* ============================================================================
   ALTO CONTRASTE — UNA CAPA APARTE, NO DOS TEMAS MÁS

   Hay cinco opciones de tema en Ajustes (Sistema · Luz · Oscuro · Luz de alto contraste ·
   Alto contraste oscuro) pero NO hay cinco valores de `data-theme`, y la diferencia
   importa. El alto contraste se resuelve con DOS atributos independientes en <html>:

     data-theme="light" | "dark"   -> la paleta base
     data-contrast="alto"          -> ausente, o la capa de refuerzo de aquí abajo

   POR QUÉ NO `data-theme="hc-light"`. Porque `base.css` tiene ~40 reglas colgadas del
   selector `html[data-theme="light"]` que NO son tokens y por tanto no se pueden arreglar
   desde este archivo: el degradado blanco del modal (`.modal-overlay > .glass`), el
   emblema del búho, `.btn-ghost`, `::selection`, `.skeleton::after`… Un valor nuevo de
   `data-theme` se saltaría todas ellas, así que el «alto contraste claro» habría salido con
   la maquetación del tema oscuro y fondos blancos encima. Con dos atributos, el tema claro
   de alto contraste ES el tema claro -hereda sus 40 reglas- y esta capa solo le pisa el
   color. También es lo que mantiene intactos los literales `:root {` y
   `html[data-theme="light"] {` que parsean `tests/test_contraste_accesible.js` y
   `tests/test_el_microfono_es_el_protagonista.js`.

   QUÉ SE REFUERZA, ADEMÁS DE SUBIR EL CONTRASTE DEL TEXTO
     · Fondos ABSOLUTOS (#000000 / #FFFFFF) y superficies OPACAS. Los cristales
       translúcidos (`--glass-*`, `--field-bg`, `--topbar-bg`…) dejan pasar lo que hay
       debajo, y un texto sobre dos capas semitransparentes no tiene un contraste
       calculable: tiene el que le toque según lo que pase por detrás.
     · BORDES DEFINIDOS. En alto contraste el borde no es decoración: es lo que dice dónde
       acaba un control. `--line-3` pasa a ser el blanco/negro pleno.
     · SE APAGA LO DECORATIVO: la atmósfera del escritorio (`--atm-*`), la red neuronal
       (`--mesh-alpha: 0`) y los tres resplandores (`--glow-blue/cyan/ia: none`). Una malla
       de líneas y un halo de color por detrás del texto son exactamente el ruido que esta
       capa existe para quitar. `--shadow-lift` se convierte en un aro de 1px plano, que es
       lo que una sombra difusa no puede hacer: marcar el borde del panel.

   LOS DOS `--glow-soft` NO SE REDECLARAN AQUÍ, Y ES DELIBERADO. La sección 3 de
   `tests/test_ui_ajustes.js` exige que en todo el archivo haya EXACTAMENTE dos
   declaraciones de `--glow-soft` y dos de `--glow-soft-hi` (una por tema base), así que
   añadir un tercer par rompería esa prueba. No hace falta: son un anillo azul al 16 % que
   sobre negro o blanco puros queda por debajo del umbral de percepción, y lo que de verdad
   marca el borde de un control aquí es `--line-3`, que sí se pisa. Si algún día el alto
   contraste necesita su propio resplandor, hay que actualizar esa prueba para que recorra
   los bloques de tema en vez de contarlos.

   CONTRA QUÉ SE MIDIÓ. Todos los acentos y los cuatro niveles de texto quedan por encima
   de 7:1 (AA reforzado, nivel AAA para texto pequeño) sobre su fondo absoluto, y por encima
   de 4,5:1 sobre `--bg-hover` y `--bg-selected`, que son las dos superficies intermedias
   donde también hay texto de cuerpo. `--text-dim` deja de ser la deuda declarada que es en
   los temas base: aquí cumple, porque en alto contraste una escala de cuatro grises que se
   distinguen entre sí importa menos que que los cuatro se lean.
   ============================================================================ */

/* ---------- Alto contraste OSCURO ---------- */
html[data-contrast="alto"] {
  /* Superficies: negro absoluto, y opacas. */
  --bg-void: #000000;
  --bg-deep: #000000;
  --bg-base: #000000;
  --bg-card: #000000;
  --bg-panel: #000000;
  --bg-elev: #000000;
  --bg-hover: #1a1a1a;
  --bg-selected: #1f3a5f;

  --field-bg: #000000;
  --chip-bg: #1a1a1a;
  --panel-bg: #000000;
  --topbar-bg: #000000;
  --well-bg: #000000;
  --glass-a: #000000;
  --glass-b: #000000;
  /* El velo de `.glass::before` se apaga: es una capa translucida encima de cada panel, o
     sea justo lo que este modo existe para quitar. Subirlo «para que el cristal se note»
     seria pintar MAS decoracion en el modo sin decoracion. */
  --glass-sheen: transparent;
  /* Y con el mismo criterio, el barrido especular: una banda de luz cruzando por encima del
     texto es ruido, y este modo existe para quitarlo. */
  --cl-destello: transparent;

  /* Bordes: el tercer nivel es blanco pleno, porque es el que dibuja los controles. */
  --line-1: #6e6e6e;
  --line-2: #9c9c9c;
  --line-3: #ffffff;

  /* Texto: los dos niveles altos son blanco puro; los dos bajos siguen siendo una escala,
     pero una que se lee (13,7:1 y 10,4:1 sobre negro). */
  --text-hi: #ffffff;
  --text-mid: #ffffff;
  --text-mute: #ebebeb;
  --text-dim: #c9c9c9;
  /* Esta pareja es tinta + SUPERFICIE OSCURA FIJA (ver el comentario del :root), y por eso
     vale igual en los dos modos de alto contraste: blanco sobre negro, 21:1. NO se invierte
     en el modo claro, y es importante: `secretaria-juridica.jsx` usa `--text-on-contrast`
     sobre un degradado oscuro ESCRITO A MANO (`rgba(7,16,31,.96)`) sin usar
     `--surface-contrast` como fondo, asi que una tinta negra ahi da 1,2:1 y el Centro de
     Mando se queda en blanco. Quien toque esto tiene que mirar los dos usos: el de
     `agenda-google.jsx`, que si usa la pareja completa, y el de la secretaria, que no. */
  --text-on-contrast: #ffffff;
  --surface-contrast: #000000;

  /* Acentos: los claros de la marca, subidos hasta pasar de 10:1 sobre negro. */
  --acc-blue: #93c5fd;
  --acc-cyan: #67e8f9;
  --acc-mint: #6ee7b7;
  --acc-amber: #fcd34d;
  --acc-orange: #fdba74;
  --acc-purple: #d8b4fe;
  --acc-red: #fca5a5;
  --acc-rose-gold: #f4b8ac;

  --plan-free: #67e8f9;
  --plan-pro: #93c5fd;
  --plan-avanzado: #d8b4fe;

  /* El degradado de marca se aclara y la tinta del CTA pasa a NEGRA: con paradas de
     luminosidad alta, la tinta oscura es la única que cumple en las cuatro. */
  --ia-1: #67e8f9;
  --ia-2: #93c5fd;
  --ia-3: #d8b4fe;
  --ia-4: #f9a8d4;
  --ink-cta: #000000;

  --tema-sel-borde: #67e8f9;
  --tema-sel-fondo: rgba(103,232,249,.20);

  /* Se apaga lo decorativo. */
  --vignette: rgba(0,0,0,.85);
  --atm-cian: transparent;
  --atm-rose: transparent;
  --mesh-alpha: 0;
  /* SE APAGAN CON UNA SOMBRA TRANSPARENTE, NO CON `none`, y la diferencia no es de estilo:
     `none` solo es valido como valor UNICO de `box-shadow`, no como elemento de una lista.
     Cuatro reglas los COMPONEN -`.lift:hover` y `.field:focus` en base.css,
     `.side-item.active` y `.toast` en anim.css- con la forma
     `box-shadow: <algo>, var(--glow-blue)`, y como el valor llega por `var()` el navegador
     no puede validarlo hasta el final: el resultado es «invalido en tiempo de valor
     calculado» y se cae la DECLARACION ENTERA, no solo la parte del glow. O sea que un
     `none` aqui borraba el aro de foco de TODOS los campos de texto y la barra del elemento
     activo del panel lateral, precisamente en el modo de accesibilidad. `0 0 #0000` es una
     sombra de verdad, transparente y sin radio: no se ve y no invalida nada. */
  --glow-blue: 0 0 #0000;
  --glow-cyan: 0 0 #0000;
  --glow-ia: 0 0 #0000;
  --shadow-lift: 0 0 0 1px #ffffff;
}

/* ---------- Alto contraste CLARO ----------
   Va DESPUÉS del bloque `html[data-theme="light"]` (del que hereda las ~40 reglas de
   maquetación de base.css) y DESPUÉS del bloque de alto contraste oscuro, al que tiene que
   pisar: los dos aciertan cuando el tema claro está activo y con contraste alto, y aquí
   gana el más específico, que además es el último. */
html[data-theme="light"][data-contrast="alto"] {
  --bg-void: #ffffff;
  --bg-deep: #ffffff;
  --bg-base: #ffffff;
  --bg-card: #ffffff;
  --bg-panel: #ffffff;
  --bg-elev: #ffffff;
  --bg-hover: #e8e8e8;
  --bg-selected: #cfe0ff;

  --field-bg: #ffffff;
  --chip-bg: #e8e8e8;
  --panel-bg: #ffffff;
  --topbar-bg: #ffffff;
  --well-bg: #ffffff;
  --glass-a: #ffffff;
  --glass-b: #ffffff;
  --glass-sheen: transparent;
  --cl-destello: transparent;

  --line-1: #6b6b6b;
  --line-2: #3d3d3d;
  --line-3: #000000;

  --text-hi: #000000;
  --text-mid: #000000;
  --text-mute: #1f1f1f;
  --text-dim: #3d3d3d;
  /* IGUALES que en el alto contraste oscuro, no invertidos: es una superficie oscura FIJA
     con su tinta, no un par que siga al tema. Ver el comentario en el bloque de arriba. */
  --text-on-contrast: #ffffff;
  --surface-contrast: #000000;

  /* Los acentos profundos del tema claro, un paso más abajo todavía: de ~4,8:1 a >7,8:1
     sobre blanco, conservando tono y saturación. */
  --acc-blue: #0b3fa8;
  --acc-cyan: #045463;
  --acc-mint: #045c3c;
  --acc-amber: #7a3803;
  --acc-orange: #8a2c06;
  --acc-purple: #5b21b6;
  --acc-red: #9b1010;
  --acc-rose-gold: #7a2f3a;

  --plan-free: #045463;
  --plan-pro: #0b3fa8;
  --plan-avanzado: #5b21b6;

  --ia-1: #045463;
  --ia-2: #0b3fa8;
  --ia-3: #5b21b6;
  --ia-4: #86198f;
  --ink-cta: #ffffff;

  --tema-sel-borde: #0b3fa8;
  --tema-sel-fondo: rgba(11,63,168,.14);

  --vignette: rgba(255,255,255,.9);
  --atm-cian: transparent;
  --atm-rose: transparent;
  --mesh-alpha: 0;
  /* Sombra transparente y no `none`, por lo mismo que en el bloque de arriba. */
  --glow-blue: 0 0 #0000;
  --glow-cyan: 0 0 #0000;
  --glow-ia: 0 0 #0000;
  --shadow-lift: 0 0 0 1px #000000;
}


/* ---------- La sala de audiencias, TAMBIÉN en alto contraste ----------
   `.aud-escena-oscura` (arriba) redeclara 16 tokens SOBRE EL PROPIO ELEMENTO de la escena, y
   una declaración en el elemento gana siempre a la que se hereda de <html>, sin importar la
   especificidad ni el orden del bloque de <html>. O sea que la capa de alto contraste NO
   entraba en el simulador… pero sí entraba a medias, y eso es peor que no entrar:

     · los tokens que la escena SÍ redeclara (acentos, los cuatro niveles de texto, los tres
       bordes) se quedaban con los valores del tema oscuro normal;
     · los que NO redeclara se heredaban de <html> y sí cambiaban. Entre ellos están
       `--glass-a` y `--glass-b`, y ocho paneles de `audiencia.jsx` llevan `className="glass"`
       SIN fondo propio. Con «Luz de alto contraste» esos paneles se volvían BLANCOS mientras
       el texto de la escena seguía siendo `#f0f4ff`: blanco sobre blanco, 1,07:1. La pantalla
       donde se lee a quién le toca hablar quedaba ilegible.

   Se resuelve con este bloque de acompañamiento, que es MÁS ESPECÍFICO que la clase sola
   (0,1,1 + 0,1,0 frente a 0,1,0) y por tanto sí la pisa. La escena sigue siendo una escena
   OSCURA -eso no cambia con el tema, es su diseño- pero pasa a la paleta de alto contraste
   oscuro, y se le fijan además las superficies de cristal para que no puedan volverse claras
   por herencia. Con «Alto contraste oscuro» el resultado es el mismo, que es lo correcto: la
   sala en penumbra no tiene una versión clara.

   OJO CON LA PRUEBA: `tests/test_contraste_accesible.js` sección 8 localiza el bloque con
   `css.indexOf('.aud-escena-oscura')` y compara sus tokens con los del `:root`. Coge la
   PRIMERA aparición, que es la del bloque original de arriba, así que este bloque tiene que
   ir DESPUÉS y no se mide contra el `:root` (no debe: sus valores son los de alto contraste,
   no los del tema oscuro normal). */
html[data-contrast="alto"] .aud-escena-oscura {
  --acc-blue: #93c5fd;
  --acc-cyan: #67e8f9;
  --acc-mint: #6ee7b7;
  --acc-amber: #fcd34d;
  --acc-orange: #fdba74;
  --acc-purple: #d8b4fe;
  --acc-red: #fca5a5;
  --acc-rose-gold: #f4b8ac;
  --text-hi: #ffffff;
  --text-mid: #ffffff;
  --text-mute: #ebebeb;
  --text-dim: #c9c9c9;
  --line-1: #6e6e6e;
  --line-2: #9c9c9c;
  --line-3: #ffffff;
  --bg-hover: #1a1a1a;
  --bg-elev: #000000;
  /* Las que la clase original no declara y por herencia podían aclararse: los paneles de
     cristal de la sala se quedan negros y opacos en los dos modos de alto contraste.
     Este juego de claves tiene que ser el MISMO que declara `.aud-escena-oscura`: que los dos
     bloques coincidan clave por clave es lo único que permite auditarlos de un vistazo. */
  --bg-card: #000000;
  --bg-base: #000000;
  --bg-panel: #000000;
  --field-bg: #000000;
  --chip-bg: #1a1a1a;
  --panel-bg: #000000;
  --well-bg: #000000;
  --glass-a: #000000;
  --glass-b: #000000;
  --glass-sheen: transparent;
}