/* ============================================================
   PULSO · tokens.css · sistema de diseño (26 de agosto de 2026, rehecho)
   Construido DESDE las 36 referencias que aprobó el CEO en el moodboard
   de Dribbble. Los rasgos que mandan, medidos sobre ellas:
     · 20 de 36 son oscuras (mediana de luminancia 0,19; el producto arranca
       en oscuro, decisión de Tomás): fondo casi negro, frío, con resplandor
       violeta y magenta en los bordes (kpi_031, charts_026, reports_033).
     · Tarjetas de cristal: superficie apenas más clara que el fondo, borde
       de 1 px al 7 % de blanco, brillo arriba, radio 16 a 20 (layout_003,
       reports_031, charts_024).
     · VIOLETA como color de acción y de resplandor: botones y tarjetas
       rellenas con texto blanco, elemento activo del menú, líneas de gráfica
       con degradado a magenta, halos (layout_003 #5D55F0, kpi_031 #463CBF y
       #BB40CD y su «Export data», status_011 «Add Projects»). Decisión del CEO
       en la reunión del 26 de agosto: el lima «está puteadísimo, demasiadas
       empresas con el verde así; volamos al violeta».
     · LIMA solo como señal pequeña: el punto de la marca, el dato de hoy en
       una gráfica, el anillo del paso actual (charts_024, alerts_006).
     · Cifras grandes tabulares con mini gráfica dentro de la tarjeta
       (layout_003, alerts_007, charts_026, data-viz_15c5).
   Tres capas: primitivos, semánticos (el contrato, no se renombra) y el
   tema claro como segundo tema (kpi_030, components_8fc4, typography).
   El catálogo ABRE EN OSCURO porque el moodboard aprobado es oscuro.
   ============================================================ */

/* ---- Tipografía, servida en local (sin CDN) ----
   Space Grotesk (SIL OFL): titulares y cifras. Es la que ya usa Pulso.
   Geist y Geist Mono (Vercel, SIL OFL): texto de trabajo y rótulos mono
   (data-viz_7b45 y typography_6427 rotulan en mono). */
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
/* Manrope (SIL OFL): titulares y cifras desde el 4 de septiembre. Lo pidió
   Tomás en su segunda nota de voz («la fuente de las letras más delicada, más
   suave, más elegante; tono tecnológico pero suave»); Space Grotesk queda de
   respaldo. Elección del agente PENDIENTE DE RECONFIRMAR con Jeff a la luz
   del día (regla del Espejo). */
@font-face { font-family: "Manrope"; src: url("fonts/manrope-variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---- Capa 1 · Primitivos (medidos) ---- */
:root {
  --db-side-w: 236px;
  --db-gutter: clamp(16px, 3vw, 32px);
  --db-topbar-h: 56px;
  --db-scrim: rgba(4, 5, 8, .62);
  /* Neutros CÁLIDOS desde el 7 de septiembre (tercera nota de Tomás: «quiero
     que los colores sean más cálidos, más finos, más elegantes»). Misma
     luminosidad que la escala fría anterior, con el matiz llevado del azul al
     ámbar apagado: el fondo sigue casi negro (la batería de fidelidad lo mide),
     pero la piel deja de sentirse de máquina. */
  --ink-950: #0A0908;
  --ink-900: #0E0D0B;
  --ink-850: #131210;
  --ink-800: #181613;
  --ink-750: #1D1B17;
  --ink-700: #24211C;
  --ink-600: #2C2924;
  --ink-500: #3A362F;
  --ink-400: #7D786D;
  --ink-300: #ABA69A;
  --ink-200: #CFCABF;
  --ink-100: #E5E1D8;
  --ink-50:  #F4F1EA;
  --white:   #FFFFFF;
  --paper:   #F6F4EF;
  --paper-2: #F0EDE6;
  --paper-line: #E6E2D8;
  --paper-line-strong: #D2CCBE;

  /* Lima neón: el color de ACCIÓN de las referencias (charts_024 #C3ED50,
     alerts_006 #EAFF85, status_008 #C4E472 y #E0FE7E, kpi_014 #D2ED45). */
  --lime-300: #E4FF7A;
  --lime-400: #D4FF4A;
  --lime-500: #BFF02E;
  --lime-600: #9CC81A;
  --lime-700: #6F9210;

  /* Violeta: acento activo y resplandor (layout_003 #5D55F0, kpi_031 #463CBF,
     status_008 #8F7CE6, layout_2941 #7371E0). */
  --violet-300: #B3A6FF;
  --violet-400: #8F7EFF;
  --violet-500: #6E5BFF;
  --violet-600: #5B49E6;
  --violet-700: #4A3BC4;
  --violet-900: #221B5E;

  /* Magenta: pareja del violeta en degradados y halos (kpi_031 #BB40CD,
     charts_026 #D83EC9). Cian para series (layout_003 #64AFEA). */
  --magenta-400: #E36BF0;
  --magenta-500: #C84BDC;
  --cyan-400: #4FD1F5;

  /* Los ocho estados de Pulso: la forma lleva el color base; el texto del chip
     lleva un tinte que pasa AA sobre la superficie de cada tema (como las
     píldoras de components_be977 y status_008: fondo tenue, texto del color). */
  --estado-optimo:         #10B981;
  --estado-operativo:      #3B82F6;
  --estado-atencion:       #F59E0B;
  --estado-degradado:      #F97316;
  --estado-critico:        #EF4444;
  --estado-noverificable:  #6B7280;
  --estado-desactualizado: #8A8F98;
  --estado-fueradealcance: #4B5058;

  /* Paleta de series (colors_cec680, data-viz_7b45, charts_016): violeta,
     lima, cian, magenta, naranja, verde azulado. Nunca un color de estado. */
  /* Series SUAVIZADAS el 4 de septiembre (segunda nota de Tomás: «no me gusta
     que se vea brillante; más sutil, más fino, más profesional»): mismos
     matices, menos saturación y menos luz. */
  --serie-1: #9187E0;
  --serie-2: #B9CF74;
  --serie-3: #6FB3CC;
  --serie-4: #C287CC;
  --serie-5: #D4A366;
  --serie-6: #57A98F;

  /* ---- Capa 2 · Semánticos · NO RENOMBRAR ----
     Valores del TEMA CLARO (segundo tema; kpi_030, components_8fc4, las
     láminas de tipografía). El oscuro los redefine abajo. */
  --bg: var(--paper);
  --bg-glow-1: rgba(110, 91, 255, .10);
  --bg-glow-2: rgba(200, 75, 220, .07);
  --surface: var(--white);
  --surface-2: #FAFAFD;
  --panel: var(--paper-2);
  --glass: rgba(255, 255, 255, .78);
  --glass-line: rgba(24, 20, 14, .10);
  --shine: rgba(255, 255, 255, .6);
  /* Texto del tema claro, también cálido (7 de septiembre). */
  --text: #1A1712;
  --text-muted: #665F52;
  --text-soft: #857D6D;
  --line: var(--paper-line);
  --line-strong: var(--paper-line-strong);

  --brand: var(--violet-700);           /* texto y activo de marca */
  --brand-strong: var(--violet-900);
  --brand-fill: var(--violet-600);      /* botón primario: violeta con texto blanco (decisión del CEO, reunión del 26 de agosto) */
  --brand-fill-strong: var(--violet-700);
  --brand-contrast: #FFFFFF;
  --brand-wash: rgba(110, 91, 255, .10);
  --accent: var(--violet-600);          /* relleno violeta: activo del menú, cabeceras */
  --accent-strong: var(--violet-700);
  --accent-contrast: var(--white);
  --accent-2: var(--magenta-500);
  /* La señal en claro, también sin neón (4 de septiembre). */
  --signal: #7E9B3F;
  --signal-wash: rgba(126, 155, 63, .16);
  --focus-ring: var(--violet-600);
  --glow-accent: 0 0 0 rgba(0, 0, 0, 0);
  --glow-signal: 0 0 0 rgba(0, 0, 0, 0);
  --glow-fill: 0 0 0 rgba(0, 0, 0, 0);       /* el halo del relleno de acción */
  --grad-accent: linear-gradient(135deg, var(--violet-500), var(--magenta-500));
  --grad-line: linear-gradient(90deg, var(--violet-500), var(--magenta-400));

  --estado-optimo-texto:         #047857;
  --estado-operativo-texto:      #1D4ED8;
  --estado-atencion-texto:       #B45309;
  --estado-degradado-texto:      #C2410C;
  --estado-critico-texto:        #B91C1C;
  --estado-noverificable-texto:  #4B5563;
  --estado-desactualizado-texto: #5B6270;
  --estado-fueradealcance-texto: #6B7280;
  --mejora-texto: #047857;
  --empeora-texto: #B91C1C;

  --font-display: "Manrope", "Space Grotesk", "Geist", system-ui, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Radios medidos en las tarjetas aprobadas: 16 a 24 en tarjeta, píldora en
     chips, botones y barras (charts_024, kpi_014, components_8fc4). */
  --r-pill: 999px;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-hero: 24px;
  --r-frame: 28px;

  --sh-1: 0 1px 2px rgba(24, 20, 14, .06);
  --sh-2: 0 6px 18px rgba(24, 20, 14, .10), 0 1px 3px rgba(24, 20, 14, .05);
  --sh-3: 0 18px 44px rgba(24, 20, 14, .14), 0 4px 10px rgba(24, 20, 14, .06);

  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px;
  --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px;

  --t-display: clamp(2.6rem, 6vw, 4.6rem);
  --t-h1: clamp(1.9rem, 3.2vw, 2.6rem);
  --t-h2: 1.4rem;
  --t-h3: 1.05rem;
  --t-kpi: clamp(2rem, 3.4vw, 2.8rem);
  --t-body: 0.95rem;
  --t-small: 0.8rem;
  --t-micro: 0.72rem;

  color-scheme: light;
}

/* ---- Capa 3 · OSCURO: el tema por defecto del producto y del catálogo ----
   Mismo contrato, los valores de las referencias. */
:root[data-theme="dark"] {
  --bg: var(--ink-900);
  --bg-glow-1: rgba(110, 91, 255, .14);
  --bg-glow-2: rgba(200, 75, 220, .08);
  --surface: var(--ink-800);
  --surface-2: var(--ink-750);
  --panel: var(--ink-700);
  --glass: rgba(20, 22, 27, .66);
  --glass-line: rgba(255, 255, 255, .09);
  --shine: rgba(255, 255, 255, .05);
  --text: var(--ink-50);
  --text-muted: var(--ink-300);
  --text-soft: var(--ink-400);
  --line: var(--ink-600);
  --line-strong: var(--ink-500);

  --brand: var(--violet-300);
  --brand-strong: #D2CBFF;
  --brand-fill: var(--violet-500);
  --brand-fill-strong: var(--violet-600);   /* más oscuro, no más claro: el blanco encima sigue en AA */
  --brand-contrast: var(--white);
  --brand-wash: rgba(110, 91, 255, .16);
  --accent: var(--violet-500);
  --accent-strong: var(--violet-600);
  --accent-contrast: var(--white);
  --accent-2: var(--magenta-400);
  /* La señal, sin neón (4 de septiembre): el mismo lima, apagado. */
  --signal: #B9CF74;
  --signal-wash: rgba(185, 207, 116, .12);
  --focus-ring: var(--violet-300);
  /* Halos a un tercio (4 de septiembre): presencia, no brillo. */
  --glow-accent: 0 0 12px rgba(110, 91, 255, .18);
  --glow-signal: 0 0 8px rgba(185, 207, 116, .15);
  --glow-fill: 0 0 10px rgba(110, 91, 255, .2);

  --estado-optimo-texto:         #4ADE80;
  --estado-operativo-texto:      #7CB5FF;
  --estado-atencion-texto:       #FBBF24;
  --estado-degradado-texto:      #FB923C;
  --estado-critico-texto:        #F87171;
  --estado-noverificable-texto:  #A3ABB8;
  --estado-desactualizado-texto: #A7ADB8;
  --estado-fueradealcance-texto: #8B929E;
  --mejora-texto: #4ADE80;
  --empeora-texto: #F87171;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .45);
  --sh-2: 0 10px 28px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35);
  --sh-3: 0 28px 60px rgba(0, 0, 0, .6), 0 6px 14px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  background-color: var(--bg);
  /* El resplandor ambiente de las referencias: dos halos, violeta arriba a la
     izquierda y magenta abajo a la derecha, fijos al marco (kpi_031, charts_026). */
  background-image:
    radial-gradient(60vw 60vw at 8% -10%, var(--bg-glow-1), transparent 60%),
    radial-gradient(50vw 50vw at 100% 100%, var(--bg-glow-2), transparent 60%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; margin: 0; color: var(--text); }
p { margin: 0; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
img, svg { max-width: 100%; display: block; }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; }