/* ══════════════════════════════════════════════════════════════
   KANAN 24 — Design System & Variables
   Modern HSL-based palette · Glassmorphism · Professional Hierarchy
══════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}

/* Escala tipográfica fluida base — legible en 720p y superior */
html { font-size: clamp(15px, 1.15vw, 17px); }

:root {
  /* --- Typography: fuente redondeada, legible en pantallas de baja
     resolución. Nunito reemplaza tanto el stack principal como el que antes
     usaba una mono tipo "máquina de escribir" (JetBrains/Consolas) para
     badges, KPIs y timestamps — mismo look redondeado en todas partes. --- */
  --font-main: 'Nunito', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Nunito', 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Rajdhani', 'Nunito', sans-serif;
  --font-mono: 'Nunito', 'Segoe UI', Roboto, sans-serif;

  /* --- Spacing & Radii --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* --- Transitions --- */
  --tr-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --tr-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Layout --- */
  --sidebar-w: 64px;
  --sidebar-w-expanded: 240px;
  --events-w: 300px;
  --topbar-h: 60px;

  /* --- Default Theme Values (Dark) --- */
  /* Impeccable Design Law: Use OKLCH. Never use #000. 
     Tint neutrals towards a cool hue (250) to completely eliminate any brown/muddy perception. */
  --bg: #0d0f12;          /* Negro azulado neutro */
  --panel: #141720;       /* Surface oscura */
  --panel-2: #1c2028;     /* Elevado */
  --panel-3: #252b35;     /* Activo / más alto */
  
  --text: oklch(0.85 0.01 250);
  --text-hi: oklch(0.98 0.01 250);
  --text-muted: oklch(0.65 0.015 250);
  
  /* Primary gold/amber accent for contrast */
  --primary: oklch(0.75 0.16 75);
  --primary-glow: oklch(0.75 0.16 75 / 0.15);
  --accent: #d4a92a;
  --accent-glow: rgba(212, 169, 42, 0.15);

  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.1);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.4);

  /* --- Status Colors --- */
  --ok: #10B981;
  --ok-glow: rgba(16, 185, 129, 0.15);
  --warn: #E53E3E;
  --warn-glow: rgba(229, 62, 62, 0.15);
  /* Ámbar de ADVERTENCIA (distinto de --warn/--crit, que son rojizos).
     Estado intermedio: batería, modo bypass, avisos no críticos. */
  --warn-amber: #F59E0B;
  --warn-amber-glow: rgba(245, 158, 11, 0.15);
  /* Naranja de categoría (falta horaria) — distinto del ámbar --warn-amber */
  --warn-orange: #f97316;
  --warn-orange-glow: rgba(249, 115, 22, 0.15);
  --crit: #EF4444;
  --crit-glow: rgba(239, 68, 68, 0.15);
  --info: #3B82F6;
  --info-glow: rgba(59, 130, 246, 0.15);
  /* Acento secundario (filtro PPTX del historial). Alias de --info:
     azul palette-safe y theme-aware (dark #3B82F6 / light #0052cc).
     Antes caía a un morado pastel rgba(167,139,250) que viola la paleta. */
  --accent-violet: var(--info);

  /* --- Glassmorphism --- */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-blur: blur(12px);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* ═══ TOKENS DE COMPONENTE ═══
     Derivan de los base: el tema oscuro no necesita redefinirlos. light/blue
     remapean SOLO estos para sus superficies distintivas (p.ej. topbar navy
     con sidebar blanca) sin tocar un solo selector. */

  /* Topbar */
  --topbar-bg: var(--panel);
  --topbar-border: var(--border);
  --topbar-text: var(--text-hi);
  --topbar-muted: var(--text-muted);
  --topbar-chip-bg: var(--glass-bg);
  --topbar-chip-border: var(--border-strong);
  --topbar-chip-text: var(--text);
  --topbar-chip-hover-bg: var(--panel-2);
  --brand-accent: var(--accent);

  /* Reloj (vive en la topbar — sigue su esquema) */
  --clock-text: var(--accent);
  --clock-bg: var(--accent-glow);
  --clock-border: var(--accent);

  /* Sidebar / navegación */
  --sidebar-bg: var(--panel);
  --sidebar-border: var(--border);
  --nav-text: #e2e8f0;
  --nav-icon: var(--text-muted);
  --nav-hover-bg: rgba(255, 255, 255, 0.04);
  --nav-hover-text: #ffffff;
  --nav-active-bg: linear-gradient(90deg, var(--primary-glow), transparent);
  --nav-active-text: var(--primary);
  --nav-active-border: var(--primary);
  --nav-group-text: var(--text-hi);
  /* Fondo del contenedor de sub-ítems (banda que agrupa el nivel 2).
     Oscuro sobre panel oscuro; cada tema lo redefine. */
  --nav-group-items-bg: rgba(0,0,0,0.18);
  /* Track neutro de los anillos KPI del dashboard */
  --ring-track: rgba(255,255,255,0.09);
  /* Sub-items (level 2): dimmer than level 1 to keep hierarchy, but WCAG AA
     compliant. 0.30 alpha measured 2.69:1 on the items band (FAIL AA 4.5:1);
     0.55 alpha measures ~6.1:1 (PASS). See docs/frontend/NAVIGATION_AUDIT.md */
  --nav-sub-text: rgba(255,255,255,0.78);
  --nav-sub-hover-text: rgba(255,255,255,0.92);

  /* Scrollbar */
  --scroll-thumb: rgba(255, 255, 255, 0.15);
  --scroll-thumb-hover: rgba(255, 255, 255, 0.25);

  /* --- Backward Compatibility Aliases (módulos legacy) --- */
  --gold: #d4a92a;
  --gold-dim: rgba(212, 169, 42, 0.25);
  --gold2: #b8902a;
  --panel2: var(--panel-2);
  --panel3: var(--panel-3);
  --muted: var(--text-muted);
  --font: var(--font-main);
  --font-h: var(--font-heading);
}