/* ============================================================
   AOLAB · DESIGN TOKENS
   Estética de la calculadora ICA (prototipo de Alberto), aplicada a todo el sistema:
   fondo azul profundo, superficies de vidrio, el azul eléctrico de BactiQuant como color
   de marca (el de la primera versión del sistema), un color por
   plano de medición, Space Grotesk para leer y Space Mono para los números.

   Los nombres --ao-* se conservan a propósito: todo el CSS existente los usa, y cambiar
   su VALOR cambia la estética sin tocar cada regla. Ojo con el significado de --ao-ink:
   antes era el azul marino del chrome; ahora es el color del TEXTO principal, porque en
   tema oscuro el texto es lo claro. El fondo del chrome pasó a --ao-chrome.
   ============================================================ */

:root {
  /* ---- Superficies: la escala de azules, de lo más profundo a lo más elevado ----
     ESTE es el único lugar donde se define: el resto del CSS usa estas variables y la paleta de MudBlazor
     (Theme/AolabTheme.cs) las repite (EscalaDeAzulesTests falla si quedan distintas o si alguien vuelve a
     escribir uno de estos colores a mano). Entre paréntesis, la luminosidad L* (CIELAB): lo que separa un nivel
     del siguiente es ese número.

     12-10-2026, «un poquito más de contraste entre los sub azules»: el chrome y el fondo de página —el azul
     base— NO cambiaron. Cambió lo de encima: la tarjeta sube un paso sobre el fondo (se nota en todas las
     pantallas), el lienzo pasó a ser una zona hundida, el hover sube y las líneas se ven más. «Antes» (lo que
     había hasta el 11-10) va en cada línea, para ajustar.

     DOS TOPES, por contraste AA (4,5:1) del texto que va encima:
     · L* 14,2 donde puede haber texto ROJO (#E85D4A: errores, niveles críticos): tarjetas, campos, fichas, el
       encabezado de una tabla y sus filas al pasar. Todo eso cabe entre el fondo (7,2) y 14,2: lo que sube la
       tarjeta se lo quita a lo que va encima de ella. Por eso la tarjeta queda en 12,1 y no más arriba (con 12,7
       la fila al pasar y el encabezado de tabla ya no dan 4,5:1 con el rojo), y los campos se separan de ella
       también por color (más saturados) y por su borde.
     · L* 18,4 donde puede haber texto AZUL (#6E8CFF): el hover. */
  --ao-base:         #040B17;  /* (3,0)  fondo de página: el azul MÁS oscuro (14-10, «este debe ser el azul más oscuro, luego los demás») — antes #0A1628 (7,2) */
  --ao-chrome:       #0A1628;  /* (7,2)  appbar y menú lateral: un paso sobre el fondo — antes #07111F (4,9), más oscuro que el fondo */
  --ao-pozo:         #0B1A2E;  /* (9,1)  zona hundida dentro de una tarjeta: el lienzo — antes el lienzo iba del color de la tarjeta (11,2) */
  --ao-white:        #102037;  /* (12,1) tarjetas, paneles, diálogos — antes #0F1E35 (11,2). Tope: 12,1 (ver arriba). El nombre viene del tema claro */
  --ao-surface-2:    #0D2346;  /* (14,0) campos, fichas, filas destacadas — antes #0D2240 (13,2) */
  --ao-surface-2-hi: #112A4E;  /* (17,1) una ficha al pasar el mouse — antes #10284A (16,1), escrito a mano en seguimiento.css. Sube con el campo: el paso ficha → ficha al pasar era 2,9 y queda en 3,1. Sobre el tope del rojo, como antes: la tendencia en rojo de una ficha da 4,16:1 SOLO mientras se pasa por encima (antes 4,28:1) */
  --ao-surface-3:    #142C4E;  /* (17,9) hover y pistas sobre una superficie — antes #13294A (16,6) */
  --ao-tooltip:      #1A2E4D;  /* (18,8) lo que flota encima de todo — igual (antes escrito a mano) */
  /* Vidrio: blanco translúcido sobre el fondo de página (Seguimiento, ICA y bandas dentro de una tarjeta). Igual
     que antes: encima va texto rojo y de color de plano, y más claro lo dejaría bajo 4,5:1. */
  --ao-glass-lo:     rgba(255,255,255,.02);   /* banda tenue: encabezado de tabla, tarjeta hundida */
  --ao-glass:        rgba(255,255,255,.04);   /* tarjeta de vidrio (11,7 sobre el fondo) */
  --ao-glass-hi:     rgba(255,255,255,.07);   /* vidrio destacado (14,9) */
  /* Al pasar por una fila o un ítem: un tinte del azul de marca. */
  --ao-hover-fila:   rgba(var(--ao-blue-rgb), .06);   /* filas de tabla (14,1 sobre la tarjeta: +2,1) — antes .05 (13,0 sobre la tarjeta de antes: +1,8). Con más, el rojo baja de 4,5:1 */
  --ao-hover-item:   rgba(var(--ao-blue-rgb), .08);   /* ítems de lista y de menú — igual */

  /* ---- Líneas (de la más tenue a la más visible): todas subieron un paso ---- */
  --ao-divider:       #1B2E4B;  /* (18,8) divisores sutiles, líneas de tabla, borde del chrome — antes #172842 (16,0) */
  --ao-border:        #24395E;  /* (24,0) bordes de tarjetas, campos y diálogos — antes #1F3252 (20,8) */
  --ao-cloud:         #2A4169;  /* (27,6) barras de desplazamiento, separadores dentro de una caja — antes #24395C (23,9) */
  --ao-line-input:    #304972;  /* (30,9) línea de los campos sin caja, pista de los interruptores — antes #2A4166 (27,4) */
  --ao-border-hover:  #33517E;  /* (34,2) borde de un campo al pasar el mouse — antes #2F4A73 (31,2) */
  --ao-glass-line:    rgba(255,255,255,.11);  /* borde de una tarjeta de vidrio — antes .08 */
  --ao-glass-line-hi: rgba(255,255,255,.19);  /* borde de vidrio destacado — antes .16 */

  /* ---- Texto ---- */
  --ao-ink:        #F0F6FF;  /* texto principal */
  --ao-text:       var(--ao-ink);
  --ao-muted:      #7A9BB5;  /* texto secundario */
  --ao-text-muted: var(--ao-muted);
  --ao-mist:       #8FA9C2;  /* menú lateral, íconos */
  --ao-slate:      #2A3B6B;
  --ao-text-on-dark: #F0F6FF;

  /* ---- Marca: azul eléctrico de BactiQuant (el de la primera versión del sistema) ---- */
  --ao-blue:       #2D58FF;  /* interacción: botones, foco, selección, nav activo */
  --ao-blue-dark:  #1B45E0;  /* hover de los rellenos (misma rampa) */
  --ao-blue-lite:  #6E8CFF;  /* tintes y hover de enlaces */
  --ao-blue-rgb:   45,88,255;
  --ao-blue-text:  #6E8CFF;  /* el azul como TEXTO sobre fondo oscuro: el #2D58FF da 3,1:1 y no se
                                lee en letra chica; su versión clara da 5,4:1 */
  --ao-on-accent:  #FFFFFF;  /* texto sobre fondo azul (5,3:1) */
  --ao-ink-soft:   var(--ao-surface-2);
  --ao-orange:     #F5A623;
  --ao-gold:       #F5C043;
  --ao-gold-lite:  #F5C043;

  /* ---- Un color por plano (igual en todo el sistema) ---- */
  --ao-plano-fq:   #38B8E0;
  --ao-plano-prod: #F5A623;
  --ao-plano-bio:  #4FD18B;
  --ao-plano-op:   #E85D4A;

  /* ---- Estados ---- */
  --ao-success: #4FD18B;
  --ao-info:    #38B8E0;
  --ao-warning: #F5A623;
  --ao-danger:  #E85D4A;

  /* ---- Tipografía ---- */
  --ao-font-display: "Space Grotesk", system-ui, sans-serif;
  --ao-font-text:    "Space Grotesk", system-ui, sans-serif;
  --ao-font-mono:    "Space Mono", ui-monospace, monospace;

  /* ---- Radios ---- */
  --ao-radius-sm:   8px;
  --ao-radius-md:   12px;
  --ao-radius-lg:   16px;
  --ao-radius-pill: 999px;

  /* ---- Elevación: en oscuro se nota más el borde que la sombra ---- */
  --ao-shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --ao-shadow-md: 0 4px 14px rgba(0,0,0,.40);
  --ao-shadow-lg: 0 14px 40px rgba(0,0,0,.55);

  color-scheme: dark;
}