/* =============================================================================================================
   TOKENS DE DISEÑO · estilo "Liquid Glass"
   Único lugar donde se definen colores, radios, sombras, espaciados, tipografía y tiempos.
   Los componentes (componentes.css) solo usan estas variables. Para cambiar la paleta, editar acá.

   Temas: claro por defecto; oscuro con prefers-color-scheme o con <html data-theme="dark">. El selector manual
   (claro / oscuro / automático) fija data-theme="light" o "dark"; sin atributo, manda el sistema.
   ATENCIÓN: el bloque oscuro está dos veces (media query y atributo) porque CSS no permite compartirlo.
   tests/test_diseno.py verifica que sean idénticos y que los pares de colores cumplan contraste AA (4,5:1),
   también en el peor caso sobre las manchas del fondo.
   ============================================================================================================= */

:root {
  /* --- Tipografía: pila del sistema, sin fuentes externas --- */
  --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --tam-xs: 0.75rem;
  --tam-s: 0.8125rem;
  --tam-base: 0.9375rem;
  --tam-m: 1.0625rem;
  --tam-l: 1.375rem;
  --tam-xl: 1.75rem;
  --tam-xxl: 2.25rem;
  --peso-normal: 400;
  --peso-medio: 560;
  --peso-fuerte: 650;
  --interlineado: 1.5;

  /* --- Radios --- */
  --radio-s: 10px;
  --radio-m: 14px;
  --radio-l: 20px;
  --radio-xl: 26px;
  --radio-pildora: 999px;

  /* --- Espaciado (escala de 4 px) --- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;

  /* --- Vidrio --- */
  --desenfoque: 22px;
  --saturacion: 170%;

  /* --- Movimiento (150 a 250 ms) --- */
  --mov-rapido: 150ms;
  --mov: 200ms;
  --mov-lento: 250ms;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* --- Capas --- */
  --z-contenido: 1;
  --z-tabla-encabezado: 5;
  --z-nav: 100;
  --z-menu: 120;
  --z-dialogo: 200;
  --z-aviso: 250;
  --z-ayuda: 300;

  /* --- Medidas de maquetación --- */
  --ancho-contenido: 1480px;
  --alto-nav: 3.5rem;
  --hueco-nav: 0.75rem;
  --margen-pagina: clamp(0.75rem, 2.2vw, 1.75rem);
}

/* ---------------------------------------------- CLARO ---------------------------------------------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Fondo: color base y manchas difusas */
  --fondo-base: #e9eff7;
  --mancha-1: rgba(110, 160, 255, 0.55);
  --mancha-2: rgba(140, 225, 205, 0.5);
  --mancha-3: rgba(190, 170, 255, 0.45);

  /* Superficies (vidrio = translúcido; sólido = fallback y celdas de tabla) */
  --vidrio: rgba(255, 255, 255, 0.78);
  --vidrio-fuerte: rgba(255, 255, 255, 0.88);
  --vidrio-borde: rgba(255, 255, 255, 0.85);
  --vidrio-brillo: rgba(255, 255, 255, 0.95);
  --solido: #f7f9fc;
  --solido-2: #eef2f8;
  --solido-3: #e3e9f2;
  --linea: rgba(20, 32, 46, 0.12);
  --linea-fuerte: rgba(20, 32, 46, 0.24);
  --sombra-s: 0 1px 2px rgba(20, 40, 80, 0.08), 0 4px 12px -4px rgba(20, 40, 80, 0.1);
  --sombra-m: 0 2px 4px rgba(20, 40, 80, 0.06), 0 12px 28px -10px rgba(20, 40, 80, 0.18);
  --sombra-l: 0 4px 8px rgba(20, 40, 80, 0.06), 0 28px 56px -18px rgba(20, 40, 80, 0.28);

  /* Texto */
  --texto: #14202e;
  --texto-suave: #3e4e61;
  --texto-tenue: #526273;
  --texto-sobre-acento: #ffffff;

  /* Acento principal */
  --acento: #0a56c9;
  --acento-hover: #0847a8;
  --acento-suave: rgba(10, 86, 201, 0.12);
  --acento-texto: #0a56c9; /* acento como texto sobre el tinte --acento-suave */
  --foco: #0a56c9;

  /* Estados */
  --ok: #0b6b3f;
  --ok-fondo: rgba(31, 170, 99, 0.14);
  --aviso: #7a4f00;
  --aviso-fondo: rgba(240, 168, 0, 0.18);
  --prov: #5b34b3;
  --prov-fondo: rgba(124, 77, 255, 0.14);
  --error: #b4232a;
  --error-fondo: rgba(229, 72, 77, 0.13);
  --neutro-fondo: rgba(20, 32, 46, 0.07);
}

/* ---------------------------------------------- OSCURO ---------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo-base: #0b1220;
    --mancha-1: rgba(60, 100, 220, 0.5);
    --mancha-2: rgba(25, 140, 150, 0.4);
    --mancha-3: rgba(110, 70, 210, 0.42);
    --vidrio: rgba(22, 33, 58, 0.76);
    --vidrio-fuerte: rgba(18, 28, 50, 0.88);
    --vidrio-borde: rgba(255, 255, 255, 0.14);
    --vidrio-brillo: rgba(255, 255, 255, 0.2);
    --solido: #111a2e;
    --solido-2: #17233d;
    --solido-3: #1f2d4b;
    --linea: rgba(255, 255, 255, 0.13);
    --linea-fuerte: rgba(255, 255, 255, 0.26);
    --sombra-s: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
    --sombra-m: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px -10px rgba(0, 0, 0, 0.6);
    --sombra-l: 0 4px 8px rgba(0, 0, 0, 0.3), 0 28px 56px -18px rgba(0, 0, 0, 0.7);
    --texto: #e8eef7;
    --texto-suave: #b9c5d6;
    --texto-tenue: #9eacc0;
    --texto-sobre-acento: #04152b;
    --acento: #5aa3ff;
    --acento-hover: #7db7ff;
    --acento-suave: rgba(125, 183, 255, 0.18);
  --acento-texto: #a6d0ff;
    --foco: #9ccaff;
    --ok: #4cd08a;
    --ok-fondo: rgba(76, 208, 138, 0.18);
    --aviso: #f2c14e;
    --aviso-fondo: rgba(242, 193, 78, 0.18);
    --prov: #c6b3ff;
    --prov-fondo: rgba(183, 155, 255, 0.2);
    --error: #ff8a8f;
    --error-fondo: rgba(255, 138, 143, 0.2);
    --neutro-fondo: rgba(255, 255, 255, 0.08);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo-base: #0b1220;
  --mancha-1: rgba(60, 100, 220, 0.5);
  --mancha-2: rgba(25, 140, 150, 0.4);
  --mancha-3: rgba(110, 70, 210, 0.42);
  --vidrio: rgba(22, 33, 58, 0.76);
  --vidrio-fuerte: rgba(18, 28, 50, 0.88);
  --vidrio-borde: rgba(255, 255, 255, 0.14);
  --vidrio-brillo: rgba(255, 255, 255, 0.2);
  --solido: #111a2e;
  --solido-2: #17233d;
  --solido-3: #1f2d4b;
  --linea: rgba(255, 255, 255, 0.13);
  --linea-fuerte: rgba(255, 255, 255, 0.26);
  --sombra-s: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
  --sombra-m: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px -10px rgba(0, 0, 0, 0.6);
  --sombra-l: 0 4px 8px rgba(0, 0, 0, 0.3), 0 28px 56px -18px rgba(0, 0, 0, 0.7);
  --texto: #e8eef7;
  --texto-suave: #b9c5d6;
  --texto-tenue: #9eacc0;
  --texto-sobre-acento: #04152b;
  --acento: #5aa3ff;
  --acento-hover: #7db7ff;
  --acento-suave: rgba(125, 183, 255, 0.18);
  --acento-texto: #a6d0ff;
  --foco: #9ccaff;
  --ok: #4cd08a;
  --ok-fondo: rgba(76, 208, 138, 0.18);
  --aviso: #f2c14e;
  --aviso-fondo: rgba(242, 193, 78, 0.18);
  --prov: #c6b3ff;
  --prov-fondo: rgba(183, 155, 255, 0.2);
  --error: #ff8a8f;
  --error-fondo: rgba(255, 138, 143, 0.2);
  --neutro-fondo: rgba(255, 255, 255, 0.08);
}