/* ============================================================
   Sistema Meridiano v3.1 - Variables CSS
   Lenguaje de Diseno Unificado Multimedio - Andres Garcia
   Paleta OKLCH con respaldo hex, escala fluida, densidades,
   paleta categorica de datos, superficies oscuras elevadas
   y tokens de movimiento.
   ============================================================ */

:root {
  /* ---------- PRIMITIVO: color (respaldo hex) ---------- */
  --azul-600: #2456E5;  --azul-700: #1B43BD;  --azul-100: #EAEFFD;
  --tinta: #1A1D21;     --grafito: #5B6470;   --pizarra: #8A929E;
  --niebla: #E4E7EC;    --acero: #DBE0E6;     --bruma: #F6F7F9;     --lienzo: #FFFFFF;
  --carbon: #15171A;    --superficie-oscura: #1F2227;
  --superficie-oscura-2: #262B31;  --superficie-oscura-3: #2D333B; /* elevacion por luminosidad (v3.1) */
  --verde-600: #1B8E5A; --verde-700: #15784B; --verde-100: #E7F4EE;
  --ambar-600: #B5730A; --ambar-700: #96600B; --ambar-100: #FBF1E0;
  --rojo-600: #C62F37;  --rojo-100: #FBEAEB;
  --cian-600: #0E7490;  --cian-100: #E3F2F5;

  /* Paleta categorica de datos (solo graficos, nunca UI) */
  --dato-1: #2456E5;  --dato-2: #1E9AB0;  --dato-3: #D96845;
  --dato-4: #8D5AC8;  --dato-5: #B98A0C;  --dato-6: #4E5A6B;

  /* ---------- SEMANTICO: color ---------- */
  --color-texto-principal: var(--tinta);
  --color-texto-secundario: var(--grafito);
  --color-texto-terciario: var(--pizarra);
  --color-texto-invertido: var(--lienzo);
  --color-borde: var(--acero); /* v3.1: cumple APCA no-texto (Lc 16) en controles; niebla queda para separadores sutiles */
  --color-separador: var(--niebla);
  --color-fondo-base: var(--lienzo);
  --color-fondo-elevado: var(--bruma);
  --color-overlay: rgba(21, 23, 26, .45);
  --color-accion-primaria: var(--azul-600);
  --color-accion-primaria-activa: var(--azul-700);
  --color-accion-primaria-suave: var(--azul-100);
  --color-foco: var(--azul-600);
  --color-exito: var(--verde-600);       --color-exito-fondo: var(--verde-100);
  --color-exito-texto: var(--verde-700);             /* v3.1.1: texto pequeno AA sobre claro */
  --color-advertencia: var(--ambar-600); --color-advertencia-fondo: var(--ambar-100);
  --color-advertencia-texto: var(--ambar-700);       /* v3.1.1: texto pequeno AA sobre claro */
  --color-error: var(--rojo-600);        --color-error-fondo: var(--rojo-100);
  --color-info: var(--cian-600);         --color-info-fondo: var(--cian-100);

  /* ---------- Tipografia ---------- */
  --fuente-sans: "Inter", "Aptos", "Segoe UI", system-ui, sans-serif;
  --fuente-serif: "Source Serif 4", Georgia, serif;
  --fuente-mono: "JetBrains Mono", Consolas, monospace;

  --peso-regular: 400;  --peso-media: 500;  --peso-semibold: 600;  --peso-bold: 700;

  /* Escala fluida (razon 1.25) */
  --fs-display:  clamp(2rem, 1.4rem + 3vw, 2.5rem);
  --fs-titulo-1: clamp(1.75rem, 1.3rem + 2.25vw, 2rem);
  --fs-titulo-2: clamp(1.375rem, 1.1rem + 1.4vw, 1.5625rem);
  --fs-titulo-3: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  --fs-subtitulo: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --fs-cuerpo: 1rem;
  --fs-pequeno: 0.875rem;
  --fs-etiqueta: 0.8125rem;

  --lh-display: 1.1;  --lh-titulo: 1.2;  --lh-cuerpo: 1.5;

  /* ---------- Espaciado (base 8) ---------- */
  --espacio-3xs: 2px;  --espacio-2xs: 4px;  --espacio-xs: 8px;
  --espacio-sm: 12px;  --espacio-md: 16px;  --espacio-lg: 24px;
  --espacio-xl: 32px;  --espacio-2xl: 48px; --espacio-3xl: 64px;  --espacio-4xl: 96px;
  --espacio-seccion: clamp(2rem, 5vw, 6rem);

  /* ---------- Radios ---------- */
  --radio-none: 0;   --radio-sm: 4px;   --radio-md: 8px;
  --radio-lg: 12px;  --radio-full: 9999px;

  /* ---------- Dimensiones de layout y controles ---------- */
  --control: 40px;            /* densidad comoda (defecto) */
  --objetivo-tactil: 44px;
  --icono-sm: 16px;  --icono-md: 20px;  --icono-lg: 24px;
  --sidebar: 264px;  --sidebar-colapsada: 64px;  --topbar: 60px;
  --contenido-max: 1200px;
  --lectura-max: 72ch;

  /* ---------- Elevacion ---------- */
  --elev-0: none;
  --elev-1: 0 1px 3px rgba(16, 24, 40, .10);
  --elev-2: 0 4px 8px rgba(16, 24, 40, .08);
  --elev-3: 0 12px 24px rgba(16, 24, 40, .12);
  --material-blur: 20px;

  /* ---------- Anillo de foco ---------- */
  --foco-anillo: 2px solid var(--color-foco);
  --foco-offset: 2px;

  /* ---------- Movimiento ---------- */
  --dur-micro: 120ms;  --dur-estandar: 200ms;  --dur-entrada: 280ms;
  --ease-estandar: cubic-bezier(.2, 0, 0, 1);
  --ease-entrada: cubic-bezier(0, 0, 0, 1);
  --ease-salida: cubic-bezier(.4, 0, 1, 1);
  --resorte-suave: linear(0, 0.5 18%, 0.84 35%, 1.0 62%, 1);
  --resorte-estandar: linear(0, 0.44 13%, 0.9 30%, 1.06 47%, 1.0 70%, 1);
  --resorte-expresivo: linear(0, 0.35 10%, 1.0 28%, 1.14 42%, 0.98 64%, 1.02 82%, 1);
  --expresividad: 0;
}

/* ---------- OKLCH como fuente de verdad (sobrescribe el respaldo) ---------- */
@supports (color: oklch(0% 0 0)) {
  :root {
    --azul-600: oklch(51.6% 0.223 264.6);  --azul-700: oklch(44.2% 0.196 264.9);  --azul-100: oklch(95.2% 0.02 270.2);
    --tinta: oklch(22.9% 0.009 255.6);     --grafito: oklch(50% 0.022 255.6);     --pizarra: oklch(65.7% 0.02 258.4);
    --niebla: oklch(92.7% 0.007 260.7);    --bruma: oklch(97.6% 0.003 264.5);     --lienzo: oklch(100% 0 0);
    --carbon: oklch(20.4% 0.007 258.4);    --superficie-oscura: oklch(25.1% 0.01 260.7);
    --verde-600: oklch(57.3% 0.127 157.6); --verde-100: oklch(95.6% 0.016 166.7);
    --ambar-600: oklch(61.2% 0.13 69.4);   --ambar-100: oklch(96.1% 0.025 81.1);
    --rojo-600: oklch(54.6% 0.187 23.5);   --rojo-100: oklch(95.1% 0.019 13.4);
    --cian-600: oklch(52% 0.094 223.1);    --cian-100: oklch(95.1% 0.016 211);
    --dato-1: oklch(51.6% 0.223 264.6);    --dato-2: oklch(62% 0.14 200);
    --dato-3: oklch(60% 0.16 35);          --dato-4: oklch(55% 0.16 305);
    --dato-5: oklch(67% 0.13 90);          --dato-6: oklch(48% 0.05 255.6);
  }
}

/* ---------- Densidades (atributo de contenedor, nunca por control) ---------- */
[data-densidad="compacta"]  { --control: 32px; }
[data-densidad="comoda"]    { --control: 40px; }
[data-densidad="espaciosa"] { --control: 48px; }

/* ---------- Modo oscuro (re-mapea solo la capa semantica) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-texto-principal: var(--niebla);
    --color-texto-secundario: #AEB6C0; /* v3.1: Lc -61 sobre Carbon (antes Pizarra, Lc -42) */
    --color-texto-terciario: #949DA9;  /* v3.1: Lc -48 sobre Carbon (antes Grafito, Lc -21) */
    --color-borde: var(--superficie-oscura-2);
    --color-separador: var(--superficie-oscura);
    --color-fondo-base: var(--carbon);
    --color-fondo-elevado: var(--superficie-oscura);
    --color-overlay: rgba(0, 0, 0, .6);
    /* Funcionales suben luminosidad; validados APCA >= 45 sobre su fondo (v3.1) */
    --color-exito: #2FB97E;  --color-advertencia: #D98E1F;
    --color-exito-texto: #2FB97E;  --color-advertencia-texto: #D98E1F;
    --color-error: #EA767F;  --color-info: #30AECF;
    --color-exito-fondo: #14291F;  --color-advertencia-fondo: #2E2414;
    --color-error-fondo: #2E181A;  --color-info-fondo: #112930;
    --color-accion-primaria-suave: #1A2342;
  }
}
/* Forzado manual con atributo (alternativa a prefers-color-scheme) */
[data-tema="oscuro"] {
  --color-texto-principal: var(--niebla);
  --color-texto-secundario: #AEB6C0;
  --color-texto-terciario: #949DA9;
  --color-borde: var(--superficie-oscura-2);
  --color-separador: var(--superficie-oscura);
  --color-fondo-base: var(--carbon);
  --color-fondo-elevado: var(--superficie-oscura);
  --color-overlay: rgba(0, 0, 0, .6);
  --color-exito: #2FB97E;  --color-advertencia: #D98E1F;
  --color-exito-texto: #2FB97E;  --color-advertencia-texto: #D98E1F;
  --color-error: #EA767F;  --color-info: #30AECF;
  --color-exito-fondo: #14291F;  --color-advertencia-fondo: #2E2414;
  --color-error-fondo: #2E181A;  --color-info-fondo: #112930;
  --color-accion-primaria-suave: #1A2342;
}

/* ---------- Base ---------- */
body {
  font-family: var(--fuente-sans);
  font-size: var(--fs-cuerpo);
  line-height: var(--lh-cuerpo);
  color: var(--color-texto-principal);
  background: var(--color-fondo-base);
}

/* Cifras tabulares para datos */
.cifras, table td.numero, .kpi-cifra { font-variant-numeric: tabular-nums; }

/* ---------- Capa componente (ejemplos canonicos) ---------- */
.boton-primario {
  background: var(--color-accion-primaria);
  color: var(--color-texto-invertido);
  border: none;
  border-radius: var(--radio-md);
  padding: 0 var(--espacio-lg);
  min-height: var(--control);
  font-weight: var(--peso-semibold);
  font-size: var(--fs-cuerpo);
  transition: background var(--dur-estandar) var(--resorte-estandar),
              transform var(--dur-micro) var(--resorte-suave);
}
.boton-primario:hover { background: var(--color-accion-primaria-activa); }
.boton-primario:active { transform: scale(.98); }
.boton-primario:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }

.boton-secundario {
  background: var(--color-fondo-base);
  color: var(--color-texto-principal);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: 0 var(--espacio-lg);
  min-height: var(--control);
  font-weight: var(--peso-semibold);
}
.boton-secundario:hover { background: var(--color-fondo-elevado); }

.boton-destructivo {
  background: var(--color-error);
  color: var(--color-texto-invertido);
  border: none;
  border-radius: var(--radio-md);
  padding: 0 var(--espacio-lg);
  min-height: var(--control);
  font-weight: var(--peso-semibold);
}

:is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--foco-anillo);
  outline-offset: var(--foco-offset);
}

.campo {
  display: block;
  width: 100%;
  min-height: var(--control);
  padding: 0 var(--espacio-sm);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background: var(--color-fondo-base);
  color: var(--color-texto-principal);
  font: inherit;
}
.campo::placeholder { color: var(--color-texto-terciario); }
.campo:focus-visible { border-color: var(--color-foco); }
.campo[aria-invalid="true"] { border-color: var(--color-error); }

.tarjeta {
  background: var(--color-fondo-base);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  box-shadow: var(--elev-1);
  padding: var(--espacio-lg);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2xs);
  padding: var(--espacio-3xs) var(--espacio-xs);
  border-radius: var(--radio-full);
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-media);
}
.badge--exito { background: var(--color-exito-fondo); color: var(--color-exito); }
.badge--advertencia { background: var(--color-advertencia-fondo); color: var(--color-advertencia); }
.badge--error { background: var(--color-error-fondo); color: var(--color-error); }
.badge--info { background: var(--color-info-fondo); color: var(--color-info); }

.skeleton {
  background: var(--color-borde);
  border-radius: var(--radio-sm);
  animation: pulso 1.4s ease-in-out infinite;
}
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- Respeta la preferencia de movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Preferencias de contraste y transparencia (v3.1) ---------- */
@media (prefers-reduced-transparency: reduce) {
  :root { --material-blur: 0px; } /* el material translucido degrada a solido */
}
@media (prefers-contrast: more) {
  :root { --color-borde: var(--pizarra); }
  :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline-width: 3px; }
}