/* ==========================================================================
   LH Enterprise OS — Design tokens
   Paleta base fija (identidad ECLEE) + tokens semánticos con tema claro/oscuro.
   ========================================================================== */

:root {
  /* --- Marca (fijos, no cambian entre temas) --- */
  --navy: #1A2B4A;
  --orange: #FF5722;
  --green: #27AE60;
  --gray: #F0F4F8;
  --white: #FFFFFF;

  /* --- Escala derivada coherente --- */
  --navy-deep: #12203A;
  --navy-mid: #24375C;
  --navy-700: #1F3050;
  --orange-strong: #E64A19;
  --orange-soft: #FFF0EA;
  --green-soft: #E4F6EC;
  --red: #E5484D;
  --red-soft: #FCECEC;
  --yellow: #E39A17;
  --yellow-soft: #FCF3E1;
  --blue: #2F6FED;
  --blue-soft: #E8F0FE;

  /* --- Tokens semánticos (tema CLARO por defecto) --- */
  --bg: #EEF2F7;
  --bg-gradient: linear-gradient(135deg, #f4f7fb 0%, #e9eff6 100%);
  --surface: #FFFFFF;
  --surface-2: #F7FAFD;
  --surface-3: #EEF3F9;
  --sidebar-bg: linear-gradient(180deg, #12203A 0%, #1C3158 100%);
  --sidebar-text: #E7ECF5;
  --sidebar-muted: rgba(231, 236, 245, 0.62);
  --header-bg: rgba(255, 255, 255, 0.92);
  --text: #1B2A41;
  --text-muted: #5B6B82;
  --text-soft: #7A879A;
  --border: #E2E8F1;
  --border-strong: #D2DCE8;
  --shadow-sm: 0 1px 2px rgba(26, 43, 74, 0.06), 0 1px 3px rgba(26, 43, 74, 0.05);
  --shadow: 0 12px 30px rgba(26, 43, 74, 0.08);
  --shadow-lg: 0 24px 60px rgba(18, 32, 58, 0.18);
  --ring: 0 0 0 3px rgba(255, 87, 34, 0.35);

  /* --- Métricas de layout --- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 76px;
  --header-h: 68px;
  --space: 20px;

  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* ==========================================================================
   Tema OSCURO
   ========================================================================== */
:root[data-theme="dark"] {
  --bg: #0E1626;
  --bg-gradient: linear-gradient(135deg, #0d1524 0%, #101c30 100%);
  --surface: #16233B;
  --surface-2: #1B2C48;
  --surface-3: #213655;
  --sidebar-bg: linear-gradient(180deg, #0B1526 0%, #14243F 100%);
  --sidebar-text: #E7ECF5;
  --sidebar-muted: rgba(231, 236, 245, 0.55);
  --header-bg: rgba(18, 29, 48, 0.92);
  --text: #EAF0F8;
  --text-muted: #A7B4C7;
  --text-soft: #8394AB;
  --border: #26374F;
  --border-strong: #33475F;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  --orange-soft: rgba(255, 87, 34, 0.16);
  --green-soft: rgba(39, 174, 96, 0.18);
  --red-soft: rgba(229, 72, 77, 0.18);
  --yellow-soft: rgba(227, 154, 23, 0.18);
  --blue-soft: rgba(47, 111, 237, 0.18);
}

/* ==========================================================================
   Reset base
   ========================================================================== */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 800; color: var(--text); }
p { margin: 0; }
button { font-family: inherit; }

/* Foco de teclado visible (accesibilidad) */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

::selection { background: rgba(255, 87, 34, 0.22); }

/* Scrollbars discretas */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }