/* Tokens del diseño «Taller» (§3 del plan, elegido por el dueño el 28/10/2026).
   Malla de degradados al fondo, paneles de cristal con un hilo de luz en el canto y tres acentos:
   menta, azul y melocotón. Oscuro por defecto; el claro es el mismo lenguaje sobre fondo claro.

   El tema se elige con data-tema="auto|oscuro|claro" en <html>; «auto» sigue al sistema.
   OJO: el bloque de «auto en claro» repite el de [data-tema='claro'] porque CSS no deja compartirlo sin
   JS. `comprobar --a11y` lee este fichero, exige que los dos bloques sean idénticos y mide el contraste
   de cada pareja texto/fondo en los dos modos. Si cambias un color, pasa la comprobación. */

:root {
  /* --- Fondo y malla --- */
  --fondo: #080A10;
  --fondo-2: #0B0E16;
  --malla-opacidad: .45;
  --mancha-menta: rgba(46, 230, 168, .55);
  --mancha-azul: rgba(60, 107, 255, .5);
  --mancha-melocoton: rgba(255, 138, 91, .42);
  --mancha-profunda: rgba(16, 20, 33, .9);
  --grano: linear-gradient(180deg, rgba(8, 10, 16, .15) 0%, rgba(8, 10, 16, .55) 55%, #080A10 100%);

  /* --- Cristal: velo oscuro que apaga lo de detrás + brillo blanco encima --- */
  --cristal-velo: rgba(10, 13, 20, .42);
  --cristal-luz: rgba(255, 255, 255, .07);
  --cristal-luz-2: rgba(255, 255, 255, .025);
  --cristal: rgba(255, 255, 255, .045);
  --cristal-alto: rgba(18, 23, 33, .9);
  --hundido: rgba(4, 6, 11, .66);
  --borde: rgba(255, 255, 255, .09);
  --borde-fuerte: rgba(255, 255, 255, .18);
  --canto: rgba(255, 255, 255, .55);
  --relleno-hover: rgba(255, 255, 255, .07);

  /* --- Texto --- */
  --texto: #F1F5F9;
  --suave: #9BA7B4;
  --tenue: #808C9A;          /* el #6A7684 de la maqueta no llega a AA como texto (4,28:1) */
  --tenue-deco: #6A7684;     /* solo trazos, separadores e iconos de adorno */

  /* --- Acentos --- */
  --menta: #2EE6A8;
  --azul: #3C6BFF;
  --melocoton: #FF8A5B;
  --acento: #2EE6A8;         /* rellenos, foco, bordes activos */
  --acento-texto: #2EE6A8;   /* el acento cuando es texto sobre el fondo */
  --azul-texto: #7C9BFF;
  --melocoton-texto: #FF8A5B;
  --sobre-acento: #04140E;   /* texto encima del degradado de acción */
  --degradado-accion: linear-gradient(120deg, #2EE6A8, #4FD6E8 55%, #6F92FF);
  --degradado-marca: linear-gradient(145deg, #2EE6A8, #3C6BFF);
  --degradado-texto: linear-gradient(110deg, #2EE6A8, #7C9BFF 70%);
  --titular: linear-gradient(168deg, #FFFFFF 10%, #D5DEE8 48%, #8E9BAA 100%);

  /* --- Estados --- */
  --ok: #2EE6A8;
  --atencion: #FFB36B;
  --error: #FF6B7A;
  --info: #7C9BFF;

  /* --- Sombras, velos y teclas --- */
  --sombra: 0 22px 50px -26px rgba(0, 0, 0, .9);
  --sombra-flotante: 0 24px 60px -20px rgba(0, 0, 0, .75);
  --velo: rgba(6, 8, 14, .7);
  --tecla: rgba(255, 255, 255, .08);
  --tecla-borde: rgba(255, 255, 255, .14);
  --seleccion: rgba(46, 230, 168, .3);

  /* --- Geometría y movimiento --- */
  --radio: 20px;
  --radio-m: 16px;
  --radio-s: 13px;
  --radio-xs: 9px;
  --ancho-max: 1240px;
  --canalon: 18px;
  --cabecera-alto: 56px;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --muelle: cubic-bezier(.2, .9, .25, 1.15);
  --transicion: 150ms var(--curva);
}

/* --- Modo claro: el mismo cristal, sobre un fondo de niebla. Acentos oscurecidos para AA. --- */
[data-tema='claro'] {
  --fondo: #EEF2F7;
  --fondo-2: #E6EBF2;
  --malla-opacidad: .35;
  --mancha-menta: rgba(46, 230, 168, .45);
  --mancha-azul: rgba(60, 107, 255, .32);
  --mancha-melocoton: rgba(255, 138, 91, .36);
  --mancha-profunda: rgba(238, 242, 247, .9);
  --grano: linear-gradient(180deg, rgba(238, 242, 247, .1) 0%, rgba(238, 242, 247, .55) 55%, #EEF2F7 100%);
  --cristal-velo: rgba(255, 255, 255, .5);
  --cristal-luz: rgba(255, 255, 255, .5);
  --cristal-luz-2: rgba(255, 255, 255, .28);
  --cristal: rgba(255, 255, 255, .6);
  --cristal-alto: rgba(255, 255, 255, .94);
  --hundido: rgba(255, 255, 255, .78);
  --borde: rgba(15, 23, 42, .1);
  --borde-fuerte: rgba(15, 23, 42, .22);
  --canto: rgba(255, 255, 255, .95);
  --relleno-hover: rgba(15, 23, 42, .06);
  --texto: #0E1420;
  --suave: #3E4A5A;
  --tenue: #56616F;
  --tenue-deco: #8A94A3;
  --menta: #2EE6A8;
  --azul: #3C6BFF;
  --melocoton: #FF8A5B;
  --acento: #059669;
  --acento-texto: #047857;
  --azul-texto: #2450D8;
  --melocoton-texto: #B4471B;
  --sobre-acento: #04140E;
  --degradado-accion: linear-gradient(120deg, #2EE6A8, #4FD6E8 55%, #6F92FF);
  --degradado-marca: linear-gradient(145deg, #2EE6A8, #3C6BFF);
  --degradado-texto: linear-gradient(110deg, #047857, #2450D8 70%);
  --titular: linear-gradient(168deg, #0E1420 10%, #27313F 55%, #4A5566 100%);
  --ok: #047857;
  --atencion: #8A5200;
  --error: #B91C3C;
  --info: #2450D8;
  --sombra: 0 22px 50px -28px rgba(15, 23, 42, .3);
  --sombra-flotante: 0 24px 60px -24px rgba(15, 23, 42, .35);
  --velo: rgba(226, 232, 240, .62);
  --tecla: rgba(255, 255, 255, .85);
  --tecla-borde: rgba(15, 23, 42, .18);
  --seleccion: rgba(5, 150, 105, .22);
}

/* «auto» sigue al sistema: copia exacta del bloque claro (lo vigila comprobar --a11y). */
@media (prefers-color-scheme: light) {
  [data-tema='auto'] {
    --fondo: #EEF2F7;
    --fondo-2: #E6EBF2;
    --malla-opacidad: .35;
    --mancha-menta: rgba(46, 230, 168, .45);
    --mancha-azul: rgba(60, 107, 255, .32);
    --mancha-melocoton: rgba(255, 138, 91, .36);
    --mancha-profunda: rgba(238, 242, 247, .9);
    --grano: linear-gradient(180deg, rgba(238, 242, 247, .1) 0%, rgba(238, 242, 247, .55) 55%, #EEF2F7 100%);
    --cristal-velo: rgba(255, 255, 255, .5);
    --cristal-luz: rgba(255, 255, 255, .5);
    --cristal-luz-2: rgba(255, 255, 255, .28);
    --cristal: rgba(255, 255, 255, .6);
    --cristal-alto: rgba(255, 255, 255, .94);
    --hundido: rgba(255, 255, 255, .78);
    --borde: rgba(15, 23, 42, .1);
    --borde-fuerte: rgba(15, 23, 42, .22);
    --canto: rgba(255, 255, 255, .95);
    --relleno-hover: rgba(15, 23, 42, .06);
    --texto: #0E1420;
    --suave: #3E4A5A;
    --tenue: #56616F;
    --tenue-deco: #8A94A3;
    --menta: #2EE6A8;
    --azul: #3C6BFF;
    --melocoton: #FF8A5B;
    --acento: #059669;
    --acento-texto: #047857;
    --azul-texto: #2450D8;
    --melocoton-texto: #B4471B;
    --sobre-acento: #04140E;
    --degradado-accion: linear-gradient(120deg, #2EE6A8, #4FD6E8 55%, #6F92FF);
    --degradado-marca: linear-gradient(145deg, #2EE6A8, #3C6BFF);
    --degradado-texto: linear-gradient(110deg, #047857, #2450D8 70%);
    --titular: linear-gradient(168deg, #0E1420 10%, #27313F 55%, #4A5566 100%);
    --ok: #047857;
    --atencion: #8A5200;
    --error: #B91C3C;
    --info: #2450D8;
    --sombra: 0 22px 50px -28px rgba(15, 23, 42, .3);
    --sombra-flotante: 0 24px 60px -24px rgba(15, 23, 42, .35);
    --velo: rgba(226, 232, 240, .62);
    --tecla: rgba(255, 255, 255, .85);
    --tecla-borde: rgba(15, 23, 42, .18);
    --seleccion: rgba(5, 150, 105, .22);
  }
}

/* Densidad: la cambia /ajustes. «compacta» aprieta tablas y paneles. */
:root { --densidad: 1; }
[data-densidad='compacta'] { --densidad: 0.72; }
[data-densidad='amplia'] { --densidad: 1.3; }

/* Con prefers-reduced-motion no se mueve nada: ni muelles, ni malla, ni apariciones. */
@media (prefers-reduced-motion: reduce) {
  :root { --transicion: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}