/* SuperComp — Bloque liviano · generado desde el sistema de diseño (no editar a mano) */
:root {
  --amarillo-100: #FFF4CC;
  --amarillo-400: #FFD43B;
  --amarillo-500: #F7C30F;
  --amarillo-600: #E0B000;
  --amarillo-800: #7A5D00;
  --grafito-950: #0E1013;
  --grafito-900: #15181C;
  --grafito-800: #1C2025;
  --grafito-700: #212529;
  --grafito-600: #2C3137;
  --grafito-500: #3D434A;
  --grafito-400: #6B737C;
  --grafito-300: #9AA2AB;
  --grafito-200: #D5DADF;
  --grafito-100: #ECEFF2;
  --grafito-50: #F7F7F5;
  --blanco: #FFFFFF;
  --menta-200: #C2E1D7;
  --menta-400: #7FC8B1;
  --menta-700: #0F7A5F;
  --naranjo-400: #FF8A4C;
  --naranjo-700: #B54708;
  --rojo-400: #FF6B6B;
  --rojo-700: #C0262D;
  --azul-400: #7CB4FF;
  --azul-700: #1F5FBF;
  --fondo: var(--blanco);
  --superficie: var(--grafito-50);
  --superficie-elevada: var(--blanco);
  --superficie-hundida: var(--grafito-100);
  --superficie-inversa: var(--grafito-900);
  --borde: var(--grafito-200);
  --borde-control: #7A828B;
  --texto: var(--grafito-900);
  --texto-suave: #5A626B;
  --marca: var(--amarillo-500);
  --marca-hover: var(--amarillo-600);
  --sobre-marca: var(--grafito-900);
  --marca-texto: var(--amarillo-800);
  --accion: var(--grafito-900);
  --accion-hover: #2C3137;
  --sobre-accion: var(--amarillo-500);
  --foco: var(--grafito-900);
  --exito: var(--menta-700);
  --alerta: var(--naranjo-700);
  --error: var(--rojo-700);
  --info: var(--azul-700);
  --logo-comp: var(--grafito-900);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 4px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(21,24,28,0.08);
  --shadow-2: 0 12px 32px rgba(21,24,28,0.12);
  --diagonal: 36.5deg;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}
/* Tema oscuro: solo para el ITSM u otras vistas de trabajo; el sitio público usa el tema claro. */
[data-theme="oscuro"] {
  --fondo: var(--grafito-900);
  --superficie: var(--grafito-800);
  --superficie-elevada: #252A30;
  --superficie-hundida: var(--grafito-950);
  --superficie-inversa: var(--grafito-950);
  --borde: var(--grafito-600);
  --borde-control: var(--grafito-400);
  --texto: var(--grafito-50);
  --texto-suave: var(--grafito-300);
  --marca: var(--amarillo-500);
  --marca-hover: var(--amarillo-400);
  --sobre-marca: var(--grafito-900);
  --marca-texto: var(--amarillo-500);
  --accion: var(--amarillo-500);
  --accion-hover: var(--amarillo-400);
  --sobre-accion: var(--grafito-900);
  --foco: var(--amarillo-500);
  --exito: var(--menta-400);
  --alerta: var(--naranjo-400);
  --error: var(--rojo-400);
  --info: var(--azul-400);
  --logo-comp: var(--amarillo-500);
}
/* Escala tipográfica */
.t-display { font-family: var(--font-display); font-size: 64px; line-height: 60px; font-weight: 900; letter-spacing: 0em; font-stretch: 125%; text-transform: uppercase; }
.t-h1 { font-family: var(--font-display); font-size: 44px; line-height: 44px; font-weight: 900; letter-spacing: 0em; font-stretch: 125%; text-transform: uppercase; }
.t-h2 { font-family: var(--font-display); font-size: 30px; line-height: 34px; font-weight: 900; letter-spacing: 0em; font-stretch: 125%; text-transform: uppercase; }
.t-h3 { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.01em; }
.t-lead { font-family: var(--font-sans); font-size: 19px; line-height: 30px; font-weight: 400; }
.t-body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.t-small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.t-label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.12em; }
.t-mono { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; }
