/* ==========================================================================
   People Care · tokens del Acciona Design System v2
   Fuente única de valores (color, fuente, radio, espacio, sombra, movimiento).
   Base: C:\dev\procesos\src\styles\tokens.css (sitio Procesos Acciona).
   "DS" = valor oficial del design system · "extensión" = decisión de este proyecto.
   Contrastes: .claude/skills/acciona-design-system (SKILL.md § 3 y § 6, contrast.md).
   Sin @layer a propósito: el build de Tailwind 3 no usa capas y las ganaría.
   ========================================================================== */

@font-face { font-family: "Poppins"; font-weight: 300; font-display: swap; src: url("../fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/plexmono-500.woff2") format("woff2"); }

:root {
  /* ── Color de marca · DS ───────────────────────────────── */
  --color-rojo: #F90000;
  --color-azul: #292AD4;
  --color-amarillo: #FFCF1B;
  --color-verde: #01E99D;
  --color-marino: #0A3B63;
  --color-negro: #000000;
  --color-blanco: #FFFFFF;
  --color-tinta: #0F1B2D;
  --color-naranja: #F98A00;
  --gradient-stop-violeta: #8B1E9C;
  --color-estado-pendiente: #8A97A4;
  --color-estado-progreso: #292AD4;
  --color-estado-bloqueado: #F90000;
  --color-estado-completado: #01B37B;
  --color-deshabilitado-fondo: #EDEBE7;
  --color-deshabilitado-texto: #98A2AE;

  /* ── Variantes accesibles · DS v2 §02.4 ───────────────── */
  --color-marino-profundo: color-mix(in srgb, var(--color-marino) 78%, var(--color-negro));      /* #082E4D */
  --color-sobre-oscuro: var(--color-blanco);
  --color-sobre-oscuro-suave: color-mix(in srgb, var(--color-blanco) 78%, var(--color-marino)); /* 7.67:1 sobre marino */
  --color-rojo-sobre-oscuro: color-mix(in srgb, var(--color-rojo) 60%, var(--color-blanco));    /* 3.96:1 sobre marino */
  --color-azul-sobre-oscuro: color-mix(in srgb, var(--color-azul) 45%, var(--color-blanco));    /* 4.75:1 sobre marino */
  --color-violeta-sobre-oscuro: color-mix(in srgb, var(--gradient-stop-violeta) 50%, var(--color-blanco)); /* 4.51:1 */

  /* ── Gradientes · DS ──────────────────────────────────── */
  --gradient-azul-verde: linear-gradient(90deg, #292AD4, #01E99D);
  --gradient-amarillo-verde: linear-gradient(90deg, #FFCF1B, #01E99D);
  --gradient-azul-rojo: linear-gradient(90deg, #292AD4, #8B1E9C 52%, #F90000);
  --gradient-amarillo-rojo: linear-gradient(90deg, #FFCF1B, #F98A00 50%, #F90000);

  /* ── Roles semánticos · tema claro (DS v2 §02.5) ──────── */
  --color-fondo: var(--color-blanco);
  --color-tarjeta: var(--color-blanco);                         /* extensión: superficie de tarjetas */
  --color-superficie: #FAFAF8;                                  /* DS: inputs, cabecera de tabla */
  --color-papel: #F3F2EF;                                       /* DS v2: fondo de lámina alterno */
  --color-hover: color-mix(in srgb, var(--color-marino) 5%, var(--color-tarjeta)); /* extensión */
  --color-hover-fila: var(--color-hover);                      /* filas de tabla (link azul encima: 8.09:1) */
  --color-texto: var(--color-marino);                           /* 11.55:1 */
  --color-texto-suave: color-mix(in srgb, var(--color-marino) 72%, var(--color-blanco)); /* #4F728F 5.08:1 */
  --color-borde: color-mix(in srgb, var(--color-tinta) 14%, transparent);
  --color-borde-fuerte: color-mix(in srgb, var(--color-marino) 32%, transparent);
  --color-borde-control: color-mix(in srgb, var(--color-marino) 60%, var(--color-blanco)); /* extensión: inputs y checkboxes, 3.51:1 sobre superficie (WCAG 1.4.11) */
  --color-lavanda: #EDF0FD;
  --color-lavanda-borde: #D9DEFA;
  --color-texto-azul: #2325B8;                                  /* 9.11:1 sobre lavanda */
  --color-foco: var(--color-azul);
  --color-link: var(--color-azul);                              /* 8.84:1 */
  --color-acento-rojo: var(--color-rojo);                       /* marcadores, nunca texto chico */
  --color-acento-azul: var(--color-azul);
  --color-velo: color-mix(in srgb, var(--color-marino-profundo) 55%, transparent); /* fondo de modales y drawer */

  /* Estados de feedback · extensión (tintes de marca, texto siempre marino/tinta) */
  --color-error-fondo: color-mix(in srgb, var(--color-rojo) 12%, var(--color-tarjeta));
  --color-error-filete: var(--color-rojo);
  --color-ok-fondo: color-mix(in srgb, var(--color-verde) 22%, var(--color-tarjeta));
  --color-ok-filete: var(--color-estado-completado);
  --color-alerta-fondo: color-mix(in srgb, var(--color-amarillo) 30%, var(--color-tarjeta));
  --color-alerta-filete: var(--color-amarillo);

  /* Datos · extensión (paleta de gráficos, skill acciona-design-system § 6) */
  --color-ingreso: color-mix(in srgb, var(--color-verde) 55%, var(--color-marino));  /* #059B83 3.49:1 */
  --color-egreso: var(--color-rojo);                                                  /* 4.18:1 */
  /* Categórica: orden FIJO azul → naranja → violeta → verde → rojo (validada con dataviz/validate_palette.js:
     banda L, croma, CVD adyacente ΔE ≥ 13.6, visión normal ≥ 31.6, ≥ 3:1). Máx. 5 series; el resto → "Otros". */
  --chart-1: var(--color-azul);                                                      /* #292AD4 */
  --chart-2: color-mix(in srgb, var(--color-naranja) 80%, var(--color-tinta));        /* #CA7409 */
  --chart-3: var(--gradient-stop-violeta);                                           /* #8B1E9C */
  --chart-4: color-mix(in srgb, var(--color-verde) 55%, var(--color-marino));         /* #059B83 */
  --chart-5: var(--color-rojo);                                                      /* #F90000 */
  --chart-otros: var(--color-texto-suave);                                           /* "Otros": no es un slot categórico */
  --chart-grilla: var(--color-borde);
  --chart-eje: var(--color-texto-suave);
  --chart-tooltip: var(--color-marino);   /* texto blanco 11.55:1 */

  /* ── Sidebar · extensión (siempre oscuro, DS "escena oscura") ── */
  --sb-fondo: var(--color-marino);
  --sb-texto: var(--color-sobre-oscuro-suave);
  --sb-texto-fuerte: var(--color-blanco);
  --sb-hover: color-mix(in srgb, var(--color-blanco) 8%, transparent);
  --sb-borde: color-mix(in srgb, var(--color-blanco) 12%, transparent);
  --sb-activo: var(--color-azul);                               /* blanco sobre azul 8.84:1 */

  /* ── Tipografía · DS ──────────────────────────────────── */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-display: clamp(2.75rem, 1.55rem + 4.8vw, 4.5rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --fs-h2: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-body: 1rem;
  --fs-caption: 0.875rem;
  --fs-btn-primario: 1.1875rem;                                 /* 19px/700: blanco sobre rojo solo AA grande */
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.1; --lh-heading: 1.25; --lh-body: 1.6;

  /* ── Forma, espacio y elevación · DS v2 §05 ───────────── */
  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-input: 12px;
  --radius-sm: 6px;
  --border-input: 1.5px;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2.5rem; --space-7: 4rem; --space-8: 6.5rem;
  --shadow-tarjeta: 0 1px 2px color-mix(in srgb, var(--color-marino) 8%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--color-azul) 30%, transparent);
  --shadow-tarjeta-alta: 0 2px 4px color-mix(in srgb, var(--color-marino) 10%, transparent), 0 30px 60px -24px color-mix(in srgb, var(--color-azul) 45%, transparent);
  --shadow-elevado: 0 12px 32px color-mix(in srgb, var(--color-marino) 18%, transparent);

  /* ── Movimiento · DS v2 §09 ───────────────────────────── */
  --dur-instant: 120ms; --dur-quick: 240ms; --dur-base: 480ms;
  --ease-avance: cubic-bezier(.2, .8, .2, 1);
  --ease-impulso: cubic-bezier(.7, 0, .2, 1);

  color-scheme: light;
}

/* ── Tema oscuro · extensión del proyecto ─────────────────────────────────
   Derivado de la "escena oscura" del DS: fondo marino profundo, tarjetas marino,
   texto blanco / sobre oscuro suave, variantes "sobre oscuro", foco amarillo.
   Solo cambian roles semánticos; los colores de marca quedan igual. */
html.dark {
  --color-fondo: var(--color-marino-profundo);
  --color-tarjeta: var(--color-marino);
  --color-superficie: color-mix(in srgb, var(--color-blanco) 8%, var(--color-marino));   /* #1E4B6F, blanco 9.17:1 */
  --color-papel: color-mix(in srgb, var(--color-blanco) 4%, var(--color-marino-profundo));
  --color-hover: color-mix(in srgb, var(--color-blanco) 8%, var(--color-marino));
  /* Filas: en oscuro se OSCURECE (marino profundo): aclarar bajaba el link a 3.77:1; así queda en 5.73:1. */
  --color-hover-fila: var(--color-marino-profundo);
  --color-texto: var(--color-blanco);
  --color-texto-suave: var(--color-sobre-oscuro-suave);                                  /* 7.67 / 9.25:1 */
  --color-borde: color-mix(in srgb, var(--color-blanco) 14%, transparent);
  --color-borde-fuerte: color-mix(in srgb, var(--color-blanco) 34%, transparent);
  --color-borde-control: color-mix(in srgb, var(--color-blanco) 50%, var(--color-marino));    /* 3.25:1 sobre superficie oscura */
  --color-lavanda: color-mix(in srgb, var(--color-azul) 35%, var(--color-marino));        /* #15358B */
  --color-lavanda-borde: color-mix(in srgb, var(--color-azul) 55%, var(--color-marino));
  --color-texto-azul: var(--color-azul-sobre-oscuro);                                    /* 4.52:1 sobre lavanda oscura */
  --color-foco: var(--color-amarillo);
  --color-link: var(--color-azul-sobre-oscuro);                  /* 4.75 sobre tarjeta; NO usar links sobre --color-superficie (3.77) */
  --color-acento-rojo: var(--color-rojo-sobre-oscuro);
  --color-acento-azul: var(--color-azul-sobre-oscuro);
  --color-deshabilitado-fondo: color-mix(in srgb, var(--color-blanco) 4%, var(--color-marino));   /* sin el bloque claro que encandila */
  --color-deshabilitado-texto: color-mix(in srgb, var(--color-blanco) 45%, var(--color-marino));
  --color-velo: color-mix(in srgb, var(--color-negro) 60%, transparent);

  --color-error-fondo: color-mix(in srgb, var(--color-rojo) 22%, var(--color-marino));
  --color-error-filete: var(--color-rojo-sobre-oscuro);
  --color-ok-fondo: color-mix(in srgb, var(--color-verde) 18%, var(--color-marino));
  --color-ok-filete: var(--color-verde);
  --color-alerta-fondo: color-mix(in srgb, var(--color-amarillo) 18%, var(--color-marino));
  --color-alerta-filete: var(--color-amarillo);

  /* Pasos oscuros propios (no un flip): banda L 0.48–0.67, ≥ 3:1 sobre marino y marino profundo,
     CVD adyacente ΔE ≥ 8.4. Validados con dataviz/validate_palette.js --mode dark. */
  --chart-1: color-mix(in srgb, var(--color-azul) 64%, var(--color-blanco));          /* #7677E3 */
  --chart-2: color-mix(in srgb, var(--color-naranja) 73%, var(--color-marino));       /* #B8751B */
  --chart-3: color-mix(in srgb, var(--gradient-stop-violeta) 68%, var(--color-blanco)); /* #B066BC */
  --chart-4: color-mix(in srgb, var(--color-verde) 56%, var(--color-marino));         /* #059C83 */
  --chart-5: color-mix(in srgb, var(--color-rojo) 82%, var(--color-blanco));          /* #FA2E2E */
  --chart-tooltip: color-mix(in srgb, var(--color-blanco) 14%, var(--color-marino)); /* se separa de la tarjeta marino; blanco ≥ 7:1 */
  --chart-grilla: color-mix(in srgb, var(--color-blanco) 8%, transparent);   /* recesiva: el borde (14 %) pesaba demasiado */
  --color-ingreso: var(--chart-4);   /* 3.37:1 sobre marino */
  --color-egreso: var(--chart-5);    /* 3.02:1 */

  --sb-fondo: color-mix(in srgb, var(--color-negro) 18%, var(--color-marino-profundo));
  --shadow-tarjeta: 0 1px 2px color-mix(in srgb, var(--color-negro) 30%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--color-negro) 60%, transparent);
  --shadow-elevado: 0 12px 32px color-mix(in srgb, var(--color-negro) 45%, transparent);

  color-scheme: dark;
}

/* ── Acentos por área · DS v2 §02.9 ───────────────────── */
.accent-verde { --accent: var(--color-verde); --on-accent: var(--color-tinta); --accent-on-dark: var(--color-verde); --grad: var(--gradient-azul-verde); --cinta: url("/assets/brand/cinta-verde.webp"); /* absoluta: una url() relativa dentro de una custom property se resuelve contra el documento que la usa */ }
.accent-avance { --accent: var(--color-azul); --on-accent: var(--color-blanco); --accent-on-dark: var(--color-azul-sobre-oscuro); --grad: var(--gradient-azul-rojo); }

/* Superficies siempre oscuras (sidebar, hero del login): foco amarillo y texto blanco */
.on-dark { --color-foco: var(--color-amarillo); color: var(--color-sobre-oscuro); }