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

:root {
  /* ── Brand colors ── */
  --color-navy:   #001E2A;
  --color-slate:  #2E3E5E;
  --color-beige:  #F5F2EC;
  --color-silver: #D3D2D3;
  --color-blue:   #2D87BF;
  --color-cream:  #F3E7D1;
  --color-gold:   #E8BE40;

  /* ── Semantic aliases ── */
  --color-bg:             #F5F2EC;
  --color-surface:        var(--color-cream);
  --color-border:         var(--color-silver);
  --color-text-primary:   var(--color-navy);
  --color-text-secondary: var(--color-slate);
  --color-text-muted:     #8A9BAA;
  --color-accent:         var(--color-blue);
  --color-progress:       var(--color-gold);

  /* ── Typography ── */
  --font-family:   'Inter', sans-serif;
  --font-hero:     96px;
  --font-section:  48px;
  --font-card:     28px;
  --font-body:     16px;
  --font-label:    12px;
  --font-caption:  11px;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* ── Spacing (8px grid) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* ── Borders & radius ── */
  --border-default: 1px solid var(--color-border);
  --border-muted:   1px solid rgba(211, 210, 211, 0.5);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ── Charts ── */
  --chart-bar-color:  var(--color-blue);
  --chart-bar-radius: 3px;
  --chart-bar-width:  60%;

  /* ── Card hierarchy ── */
  --card-hero-bg:          #001E2A;
  --card-hero-text:        #ffffff;
  --card-secondary-bg:     #F5F2EC;
  --card-secondary-border: 1px solid #D3D2D3;
}

html, body {
  background-color: var(--color-bg);
  font-family: var(--font-family);
  color: var(--color-text-primary);
  font-size: var(--font-body);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT-THEME SAFETY NET
   All 9 templates now define light-theme values directly in their :root blocks
   and hardcoded hex values have been replaced. These !important overrides are
   kept as a defensive fallback in case any template is missed or reverts.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Remap dark-theme CSS variables to light tokens ── */
:root {
  --bg:             var(--color-bg) !important;
  --surface:        #ffffff !important;
  --surface2:       var(--color-surface) !important;
  --border:         var(--color-border) !important;
  --text-primary:   var(--color-text-primary) !important;
  --text-secondary: var(--color-text-secondary) !important;
  --text-muted:     var(--color-text-muted) !important;
  --text-dim:       var(--color-text-muted) !important;
  --aqua-dark:      rgba(45, 135, 191, 0.12) !important;
}

/* ── 2. Body & page canvas ── */
body {
  background-color: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
}

/* ── 3. Sidebar — navy background, light text ── */
.sidebar {
  background-color: var(--color-navy) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.sb-logo                       { color: #ffffff !important; }
.sb-lbl                        { color: rgba(255, 255, 255, 0.35) !important; }
.sb-item                       { color: rgba(255, 255, 255, 0.55) !important; }
.sb-item:hover                 { color: rgba(255, 255, 255, 0.85) !important; background-color: rgba(255, 255, 255, 0.05) !important; }
.sb-item.active                { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.09) !important; border-left-color: var(--color-accent) !important; }
.sb-name                       { color: rgba(255, 255, 255, 0.45) !important; }
.sb-footer                     { border-top-color: rgba(255, 255, 255, 0.08) !important; }
.sb-event                      { background-color: rgba(45, 135, 191, 0.15) !important; border-color: rgba(45, 135, 191, 0.4) !important; }
.sb-event-lbl                  { color: var(--color-accent) !important; }
.sb-event-days                 { color: #ffffff !important; }
.sb-event-name                 { color: rgba(255, 255, 255, 0.7) !important; }
.sb-event-other                { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
.sb-event-other-name           { color: rgba(255, 255, 255, 0.65) !important; }
.sb-event-other-days           { color: rgba(255, 255, 255, 0.4) !important; }

/* ── 4. Topbar ── */
.topbar {
  background-color: var(--color-bg) !important;
  border-bottom-color: var(--color-border) !important;
}

/* ── 5. Mode toggle (sits inside sidebar) ── */
.mt-btn        { border-color: rgba(255, 255, 255, 0.2) !important; color: rgba(255, 255, 255, 0.4) !important; }
.mt-btn.active { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; color: #ffffff !important; }

/* ── 6. Mobile tab bar ── */
.tab-bar            { background-color: var(--color-bg) !important; border-top-color: var(--color-border) !important; }
.tab-item           { color: var(--color-text-muted) !important; }
.tab-item.active    { color: var(--color-accent) !important; }

/* ── 7. Tooltips ── */
.tip-box            { background-color: #ffffff !important; border-color: var(--color-border) !important; color: var(--color-text-secondary) !important; }
.tip-hd             { color: var(--color-text-muted) !important; }
.tip-icon           { border-color: var(--color-text-muted) !important; color: var(--color-text-muted) !important; }

/* ── 8. FTP notification banners (hardcoded dark hex, bypasses variables) ── */
.ftp-notif.mejora      { background-color: #EEF7FF !important; border-color: var(--color-accent) !important; }
.ftp-notif.degradacion { background-color: #FFF0F0 !important; border-color: #E05252 !important; }
.ftp-notif.fatiga      { background-color: #FEFBE8 !important; border-color: var(--color-gold) !important; }
.ftp-notif.mejora      .ftp-notif-icon { color: var(--color-accent) !important; }
.ftp-notif.fatiga      .ftp-notif-icon { color: var(--color-gold) !important; }
.btn-ftp-aceptar { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; color: #ffffff !important; }
.btn-ftp-test    { border-color: var(--color-border) !important; color: var(--color-text-secondary) !important; }
.btn-ftp-ignorar { color: var(--color-text-muted) !important; }

/* ── 9. Interruption banner (hardcoded dark hex) ── */
.intr-banner        { background-color: #FEFBE8 !important; border-color: var(--color-gold) !important; }
.intr-banner .ti    { color: var(--color-gold) !important; }
.intr-banner-text   { color: var(--color-text-secondary) !important; }
.intr-banner-link   { color: var(--color-text-muted) !important; }

/* ── 10. Scrollbar ── */
::-webkit-scrollbar-track { background: var(--color-bg) !important; }
::-webkit-scrollbar-thumb { background: var(--color-border) !important; }

/* ── 11. Educational tooltips (info-icon + ctx-line) — shared across all pages ── */
.info-icon { cursor: pointer; color: #8A9BAA; font-size: 12px; position: relative; }
.info-icon:hover::after { content: attr(data-tooltip); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: #001E2A; color: #fff; font-size: 11px; padding: 8px 12px; border-radius: 6px; width: 280px; text-align: left; z-index: 100; line-height: 1.5; font-weight: 400; text-transform: none; letter-spacing: 0; white-space: normal; pointer-events: none; }
.ctx-line { font-size: 10px; color: #8A9BAA; margin-top: 5px; line-height: 1.3; }