/* ═══════════════════════════════════════════════
   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:   8px;
  --r-lg:14px;
  --r-xl:20px;

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

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

  /* Topbar accent — usa el color principal del tema */
  --topbar-accent: var(--primary);

  /* 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,.28);
  --sh-sm: 0 1px 3px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.22);
  --sh-md: 0 2px 8px rgba(0,0,0,.32), 0 8px 24px rgba(0,0,0,.28);
  --sh-lg: 0 4px 16px rgba(0,0,0,.38), 0 16px 40px rgba(0,0,0,.36);

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

/* ═══════════════════════════════════════════════
   TEMAS DE COLOR (elegidos por el admin, para TODA
   la plataforma y TODOS los usuarios). Independientes
   del modo claro/oscuro, que cada usuario controla por
   su cuenta: solo redefinen la familia --primary/--accent.
   Se activan con html[data-theme="..."]. Sin atributo (o
   data-theme="azul") = paleta original de la plataforma.
   ═══════════════════════════════════════════════ */

/* ── Verde bosque ── */
html[data-theme="verde"] {
  --primary: #0E7C4A; --primary-light: #E3F7EC; --primary-mid: #4FAE84; --primary-dark: #075530;
  --primary-glow: rgba(14,124,74,.18);
}
html.dark[data-theme="verde"] {
  --primary: #22C55E; --primary-light: #0D2A1C; --primary-mid: #16A34A; --primary-dark: #6EE89F;
  --primary-glow: rgba(34,197,94,.22);
}

/* ── Morado ── */
html[data-theme="morado"] {
  --primary: #6D28D9; --primary-light: #F1EBFF; --primary-mid: #A78BFA; --primary-dark: #4C1D95;
  --primary-glow: rgba(109,40,217,.18);
}
html.dark[data-theme="morado"] {
  --primary: #A78BFA; --primary-light: #241B42; --primary-mid: #8B5CF6; --primary-dark: #C4B5FD;
  --primary-glow: rgba(167,139,250,.22);
}

/* ── Naranja ── */
html[data-theme="naranja"] {
  --primary: #C2410C; --primary-light: #FFF1E6; --primary-mid: #FB923C; --primary-dark: #7C2D12;
  --primary-glow: rgba(194,65,12,.18);
}
html.dark[data-theme="naranja"] {
  --primary: #FB923C; --primary-light: #3A2008; --primary-mid: #F97316; --primary-dark: #FDBA74;
  --primary-glow: rgba(251,146,60,.22);
}

/* ── Rosa ── */
html[data-theme="rosa"] {
  --primary: #BE185D; --primary-light: #FFE9F3; --primary-mid: #F472B6; --primary-dark: #831843;
  --primary-glow: rgba(190,24,93,.18);
}
html.dark[data-theme="rosa"] {
  --primary: #F472B6; --primary-light: #3A1428; --primary-mid: #EC4899; --primary-dark: #F9A8D4;
  --primary-glow: rgba(244,114,182,.22);
}

/* ── Grafito (neutral, profesional) ── */
html[data-theme="grafito"] {
  --primary: #334155; --primary-light: #EEF1F5; --primary-mid: #64748B; --primary-dark: #1E293B;
  --primary-glow: rgba(51,65,85,.18);
}
html.dark[data-theme="grafito"] {
  --primary: #94A3B8; --primary-light: #1E2937; --primary-mid: #64748B; --primary-dark: #CBD5E1;
  --primary-glow: rgba(148,163,184,.22);
}

/* ═══════════════════════════════════════════════
   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); }
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; }