/*
 * Sistema de diseño de Dashboard (T003): estilo «A · Calma» (decisión D001).
 * Neutro, con aire, bordes finos y acento índigo. TODO el estilo sale de aquí: el resto de hojas solo usa estas
 * variables (lo comprueba tests/InterfazTest.php). Tema: claro, oscuro o el del sistema (html[data-tema]).
 */

:root {
  color-scheme: light;

  /* ---------- color: superficies y texto ---------- */
  --fondo: #F7F7F8;
  --superficie: #FFFFFF;
  --superficie-2: #F2F2F4;          /* zonas hundidas: campos, etiquetas, iconos */
  --superficie-hover: #EDEDF0;
  --borde: #E7E7EB;
  --borde-fuerte: #D6D6DC;
  --texto: #18181B;
  --texto-2: #5D5D68;
  --texto-3: #9A9AA5;
  --velo: rgba(16, 16, 24, .32);     /* detrás de hojas y diálogos */

  /* ---------- color: acento (índigo) ---------- */
  --acento: #5E5CE6;
  --acento-hover: #4F4DD6;
  --acento-suave: #EEEEFD;
  --acento-texto: #4B49C8;
  --sobre-acento: #FFFFFF;
  --foco: 0 0 0 3px rgba(94, 92, 230, .35);

  /* ---------- color: estados ---------- */
  --exito: #16A34A;  --exito-suave: #E7F6EC;  --exito-texto: #15803D;
  --aviso: #F59E0B;  --aviso-suave: #FEF3DC;  --aviso-texto: #B45309;
  --peligro: #DC4A3D; --peligro-suave: #FCEBE9; --peligro-texto: #B42318;

  /* ---------- color: áreas (paleta cerrada; cada área elige uno) ---------- */
  --area-azul: #3B82F6;
  --area-indigo: #6366F1;
  --area-violeta: #8B5CF6;
  --area-rosa: #EC4899;
  --area-rojo: #EF4444;
  --area-naranja: #F97316;
  --area-ambar: #F59E0B;
  --area-verde: #10B981;
  --area-turquesa: #14B8A6;
  --area-cielo: #0EA5E9;
  --area-pizarra: #64748B;
  --area-marron: #A16207;

  /* ---------- sombras ---------- */
  --sombra-1: 0 1px 2px rgba(16, 16, 24, .04);
  --sombra-2: 0 2px 6px rgba(16, 16, 24, .06), 0 12px 32px -8px rgba(16, 16, 24, .14);  /* menús y hojas */

  /* ---------- tipografía: la del sistema (Segoe UI en Windows, SF en iPhone, Roboto en Android) ---------- */
  --fuente: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --fuente-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --texto-xs: 12px;
  --texto-s: 13px;
  --texto-m: 14px;     /* la letra normal de la interfaz */
  --texto-l: 16px;
  --texto-xl: 18px;
  --texto-2xl: 22px;
  --texto-3xl: 30px;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 650;
  --interlineado: 1.5;
  --interlineado-titulo: 1.2;

  /* ---------- espacio ---------- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;
  --e-10: 40px;

  /* ---------- formas ---------- */
  --r-s: 6px;
  --r-m: 9px;         /* botones, campos, elementos del menú */
  --r-l: 14px;        /* tarjetas */
  --r-xl: 20px;       /* hojas y diálogos */
  --r-pildora: 999px;
  --linea: 1px;

  /* ---------- tamaños ---------- */
  --alto-control: 36px;
  --alto-control-l: 40px;
  --tactil: 44px;
  --ancho-lateral: 236px;
  --ancho-contenido: 1180px;
  --alto-inferior: 68px;
  --icono: 18px;

  /* ---------- movimiento ---------- */
  --mov-rapido: 120ms;
  --mov: 180ms;
  --mov-lento: 260ms;
  --curva: cubic-bezier(.2, .7, .2, 1);

  /* ---------- capas ---------- */
  --z-barra: 10;
  --z-menu: 20;
  --z-hoja: 30;
  --z-aviso: 40;
}

/* ---------- tema oscuro: elegido, o el del sistema si no se ha elegido ---------- */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0E0E11;
  --superficie: #17171B;
  --superficie-2: #1E1E23;
  --superficie-hover: #25252B;
  --borde: #26262D;
  --borde-fuerte: #34343C;
  --texto: #EDEDF0;
  --texto-2: #A2A2AD;
  --texto-3: #6C6C77;
  --velo: rgba(0, 0, 0, .55);
  --acento: #7F7DFF;
  --acento-hover: #9391FF;
  --acento-suave: #23224A;
  --acento-texto: #B3B2FF;
  --sobre-acento: #FFFFFF;
  --foco: 0 0 0 3px rgba(127, 125, 255, .45);
  --exito: #22C55E;  --exito-suave: #12291B;  --exito-texto: #6EE7A0;
  --aviso: #FBBF24;  --aviso-suave: #2E2410;  --aviso-texto: #FCD37A;
  --peligro: #F06A5E; --peligro-suave: #33181A; --peligro-texto: #FF9F95;
  --sombra-1: none;
  --sombra-2: 0 2px 6px rgba(0, 0, 0, .4), 0 16px 40px -8px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fondo: #0E0E11;
    --superficie: #17171B;
    --superficie-2: #1E1E23;
    --superficie-hover: #25252B;
    --borde: #26262D;
    --borde-fuerte: #34343C;
    --texto: #EDEDF0;
    --texto-2: #A2A2AD;
    --texto-3: #6C6C77;
    --velo: rgba(0, 0, 0, .55);
    --acento: #7F7DFF;
    --acento-hover: #9391FF;
    --acento-suave: #23224A;
    --acento-texto: #B3B2FF;
    --sobre-acento: #FFFFFF;
    --foco: 0 0 0 3px rgba(127, 125, 255, .45);
    --exito: #22C55E;  --exito-suave: #12291B;  --exito-texto: #6EE7A0;
    --aviso: #FBBF24;  --aviso-suave: #2E2410;  --aviso-texto: #FCD37A;
    --peligro: #F06A5E; --peligro-suave: #33181A; --peligro-texto: #FF9F95;
    --sombra-1: none;
    --sombra-2: 0 2px 6px rgba(0, 0, 0, .4), 0 16px 40px -8px rgba(0, 0, 0, .6);
  }
}

/* ---------- menos movimiento si el sistema lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mov-rapido: 0ms;
    --mov: 0ms;
    --mov-lento: 0ms;
  }
}