/* ═══════════════════════════════════════════════
   DESIGN TOKENS — Sistema de diseño PlataformaED
   ═══════════════════════════════════════════════ */
:root {
  /* Paleta principal — azul MINERD profundo */
  --primary:       #1B4FD8;
  --primary-light: #EEF3FF;
  --primary-mid:   #6B97F0;
  --primary-dark:  #0F33A0;
  --primary-glow:  rgba(27,79,216,.18);

  /* Acento verde MINERD */
  --accent:        #0E9F6E;
  --accent-light:  #DEFFF4;
  --accent-dark:   #06704D;

  /* Semáforo */
  --ok:   #059669; --ok-bg:   #D1FAE5; --ok-txt:   #064E3B;
  --warn: #D97706; --warn-bg: #FEF3C7; --warn-txt: #78350F;
  --bad:  #DC2626; --bad-bg:  #FEE2E2; --bad-txt:  #7F1D1D;
  --info: #2563EB; --info-bg: #DBEAFE; --info-txt: #1E3A8A;

  /* Grises — MODO CLARO */
  --g0:  #FFFFFF;
  --g50: #F7F8FC;
  --g100:#EFF1F7;
  --g150:#E4E7F0;
  --g200:#CDD2E0;
  --g300:#B0B8CC;
  --g400:#8891A8;
  --g500:#636C82;
  --g600:#4A5268;
  --g700:#333A52;
  --g800:#1E2436;
  --g900:#10131F;

  /* Layout */
  --sidebar-w: 248px;
  --topbar-h:  58px;
  --r:   6px;
  --r-lg:12px;
  --r-xl:18px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(16,19,31,.06);
  --sh-sm: 0 1px 4px rgba(16,19,31,.08), 0 2px 8px rgba(16,19,31,.05);
  --sh-md: 0 4px 16px rgba(16,19,31,.10), 0 1px 4px rgba(16,19,31,.06);
  --sh-lg: 0 8px 32px rgba(16,19,31,.12), 0 2px 8px rgba(16,19,31,.06);

  /* Transitions */
  --t: .14s ease;

  /* Sidebar dark (siempre oscuro en modo claro) */
  --sb-bg:    #1E2436;
  --sb-brand: rgba(255,255,255,.07);
  --sb-txt:   #8891A8;
  --sb-hover: rgba(255,255,255,.06);
}

/* ═══════════════════════════════════════════════
   MODO OSCURO
   ═══════════════════════════════════════════════ */
html.dark {
  --primary:       #5B8EF0;
  --primary-light: #1A2B52;
  --primary-mid:   #4070CC;
  --primary-dark:  #7BA8F8;
  --primary-glow:  rgba(91,142,240,.22);

  --accent:        #34D399;
  --accent-light:  #0D3526;
  --accent-dark:   #6EE7B7;

  --ok:   #34D399; --ok-bg:   #0D3526; --ok-txt:   #6EE7B7;
  --warn: #FBBF24; --warn-bg: #3A2500; --warn-txt: #FDE68A;
  --bad:  #F87171; --bad-bg:  #3B0A0A; --bad-txt:  #FCA5A5;
  --info: #60A5FA; --info-bg: #1A2B52; --info-txt: #93C5FD;

  /* Grises invertidos — FONDO OSCURO */
  --g0:  #1A1F2E;
  --g50: #151926;
  --g100:#1F2638;
  --g150:#2A3148;
  --g200:#3A4460;
  --g300:#4E5B7A;
  --g400:#7A8AA8;
  --g500:#9DAAC0;
  --g600:#B8C4D8;
  --g700:#D0D9EA;
  --g800:#E8ECF4;
  --g900:#F4F6FB;

  --sh-xs: 0 1px 2px rgba(0,0,0,.3);
  --sh-sm: 0 1px 4px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  --sh-md: 0 4px 16px rgba(0,0,0,.4),  0 1px 4px rgba(0,0,0,.3);
  --sh-lg: 0 8px 32px rgba(0,0,0,.5),  0 2px 8px rgba(0,0,0,.35);

  --sb-bg:    #0F131F;
  --sb-brand: rgba(255,255,255,.06);
  --sb-txt:   #5B6A88;
  --sb-hover: rgba(255,255,255,.05);
}

/* ═══════════════════════════════════════════════
   TRANSICIÓN GLOBAL DE TEMA
   ═══════════════════════════════════════════════ */
*, *::before, *::after {
  transition: background-color .22s ease, border-color .22s ease, color .15s ease !important;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }
body {
  font-family: 'DM Sans', 'Inter', sans-serif;
  background: var(--g50);
  color: var(--g700);
  height: 100vh;
  overflow: hidden;
  display: flex;
  -webkit-font-smoothing: antialiased;
}

/* Modo oscuro: bol-legend y colores fijos que necesitan override */
html.dark .bol-legend { background: var(--g100); }
html.dark .bol-period-chip { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary-mid); }
html.dark .tab-btn.active { background: var(--primary-light); color: var(--primary-dark); }
html.dark .nota-input:focus { background: rgba(255,255,255,.08); }
html.dark .tbl thead th { background: var(--g100); }
html.dark .tbl tbody tr:hover td { background: var(--g100); }
html.dark .modal-overlay { background: rgba(0,0,0,.65); }
html.dark select.form-input option { background: var(--g100); color: var(--g700); }
html.dark .sidebar { background: var(--sb-bg); }
html.dark .chip-blue { background: var(--primary-light); color: var(--primary-dark); }
html.dark .chip-green { background: var(--accent-light); color: var(--accent-dark); }
html.dark .chip-gray { background: var(--g100); color: var(--g500); border-color: var(--g200); }
html.dark .kpi-icon.blue { background: var(--primary-light); }
html.dark .kpi-icon.green { background: var(--ok-bg); }
html.dark .kpi-icon.amber { background: var(--warn-bg); }
html.dark .kpi-icon.red { background: var(--bad-bg); }
html.dark .kpi-icon.teal { background: var(--accent-light); }
html.dark .btn-secondary { background: var(--g100); border-color: var(--g200); color: var(--g700); }
html.dark .btn-secondary:hover { background: var(--g150); }
html.dark .att-btn { background: var(--g100); border-color: var(--g200); color: var(--g500); }
html.dark .period-tab { background: var(--g100); border-color: var(--g200); color: var(--g500); }
html.dark .hbar-track { background: var(--g150); }
html.dark #toast { background: var(--g800); color: var(--g50); }
html.dark #autosave-bar { background: var(--g800); }
html.dark #autosave-bar.saved { background: var(--ok); }
html.dark #autosave-bar.error { background: var(--bad); }
html.dark .topbar-icon-btn { background: var(--g100); border-color: var(--g200); color: var(--g500); }
html.dark .topbar-icon-btn:hover { background: var(--g150); color: var(--g700); }
html.dark .sidebar::before { background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px); }

/* Inline styles con colores hardcoded — sobreescribir en dark */
html.dark [style*="background:#EEF3FF"] { background: var(--primary-light) !important; color: var(--primary-dark) !important; }
html.dark [style*="background:#f0f5ff"] { background: var(--g100) !important; }
html.dark [style*="color:var(--primary-dark)"] { color: var(--primary-dark) !important; }