/* ============================================================
   tokens.css — LA ÚNICA FUENTE DE VERDAD
   ============================================================
   REGLA ABSOLUTA: ningún componente usa colores hardcodeados.
   Todo referencia variables de este archivo.
   Cambiar la marca = cambiar --brand-h, --brand-s, --brand-l
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {

  /* ── Color de marca ── */
  --brand-h: 221;
  --brand-s: 87%;
  --brand-l: 57%;

  --brand:       hsl(var(--brand-h), var(--brand-s), var(--brand-l));
  --brand-dark:  hsl(var(--brand-h), calc(var(--brand-s) + 5%), calc(var(--brand-l) - 20%));
  --brand-light: hsl(var(--brand-h), calc(var(--brand-s) - 20%), calc(var(--brand-l) + 40%));
  --brand-mid:   hsl(var(--brand-h), calc(var(--brand-s) - 20%), calc(var(--brand-l) + 18%));

  /* ── Franjas de nivel del organigrama (Estructura) — degradado sobre
     --brand vía hsl()+calc(), mismo patrón que --brand-dark/light/mid de
     arriba (nunca hex fijo), para que la escala se actualice sola con
     cambiar --brand-h/s/l. NO usar color-mix() acá:
     html2canvas (exportación a PDF del organigrama) no lo soporta y
     rompe la exportación — probado.
     nivel-1..5 = Gerencia, Departamento, Área, División, Sector.
     Directorio y Gerencia General no llevan franja. ── */
  --nivel-1: hsl(var(--brand-h), calc(var(--brand-s) - 20%), calc(var(--brand-l) + 40%));
  --nivel-2: hsl(var(--brand-h), calc(var(--brand-s) - 20%), calc(var(--brand-l) + 35%));
  --nivel-3: hsl(var(--brand-h), calc(var(--brand-s) - 20%), calc(var(--brand-l) + 29%));
  --nivel-4: hsl(var(--brand-h), calc(var(--brand-s) - 20%), calc(var(--brand-l) + 24%));
  --nivel-5: hsl(var(--brand-h), calc(var(--brand-s) - 20%), calc(var(--brand-l) + 18%));

  /* ── Sidebar (modo oscuro por defecto) ── */
  --sidebar-bg:     hsl(0, 0%, 20%);
  --sidebar-text:   hsl(0, 0%, 85%);
  --sidebar-active: var(--brand);

  /* ── Superficies ── */
  --surface-0: #ededeb;   /* fondo app */
  --surface-1: #ffffff;   /* cards */
  --surface-2: #e5e5e2;   /* inputs, secundario */

  /* ── Texto ── */
  --text-primary:   #1a1a1a;
  --text-secondary: #6b6b6b;
  --text-muted:     #a0a0a0;

  /* ── Semánticos ── */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger:  #ef4444;
  --color-info:    var(--brand);

  /* ── Layout ── */
  --radius-card: 12px;
  --radius-btn:  8px;
  --radius-sm:   6px;

  /* ── Tipografía ── */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ── Sombras ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);

  /* ── Transiciones ── */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* ── Sidebar layout ── */
  --sidebar-width: 240px;
  --topbar-height: 56px;
}

/* ── Reset base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-sans);
  background: var(--surface-0);
  color: var(--text-primary);
  line-height: 1.5;
}

/* ── Utilidades base ── */
.text-muted    { color: var(--text-muted); }
.text-secondary{ color: var(--text-secondary); }
.text-brand    { color: var(--brand); }
.text-success  { color: var(--color-success); }
.text-warning  { color: var(--color-warning); }
.text-danger   { color: var(--color-danger); }

.bg-surface-0  { background: var(--surface-0); }
.bg-surface-1  { background: var(--surface-1); }
.bg-surface-2  { background: var(--surface-2); }
.bg-brand      { background: var(--brand); }