/* base.css · Variables globales, reset y estilos base */

/* ============================================= */
/*          VARIABLES CSS                        */
/* ============================================= */
:root{
  --font:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --bg:#F2F2F2;
  --panel:#FFFFFF;
  --surface:#FFFFFF;
  --border:#E5E7EB;
  --text:#1F2937;
  --muted:#6B7280;
  --muted-light:#9CA3AF;
  --primary:#1A2E50;
  --primary-hover:#2F4E82;
  --primary-soft:#DDE4F7;
  --accent:#E1262A;
  --accent-soft:#F8D8DA;
  --success:#28a745;
  --success-soft:#D1FAE5;
  --danger:#E1262A;
  --danger-soft:#FEE2E2;
  --success-button:#d5fad5;
  --danger-button:#fddedf;
  --warning:#ffc107;
  --info:#4670B8;
  --blue:var(--primary);
  --indigo:#2F4E82;
  --teal:#4670B8;
  --green:var(--success);
  --cyan:#6B7280;
  --violet:#2F4E82;
  --orange:var(--warning);
  --red:var(--accent);
  --input-bg:#FFFFFF;
  --input-border:var(--border);
  --radius:6px; 
  --radius-lg:16px;
  --h:44px;
  --space-1:8px; 
  --space-2:12px; 
  --space-3:16px;
  --chart-h:260px;
  --surface-muted:#F9FAFB;
  --neutral:#898989;
  --chart-grid:rgba(148,163,184,0.35);
  --chart-blue:#3B82F6;
  --chart-green:#10B981;
  --chart-purple:#8B5CF6;
  --chart-amber:#F59E0B;
  --chart-red:#EF4444;
}

/* Tema oscuro inspirado en Google AI Studio */
body.theme-dark{
  --bg:#131314;
  --panel:#1e1f20;
  --surface:#252525;
  --surface-muted:#191919;
  --border:#2f3236;
  --text:#E3E3E3;
  --muted:#9CA0A2;
  --muted-light:#888989;
  --primary:#5aa8ff;
  --primary-hover:#7bb7ff;
  --primary-soft:rgba(90,168,255,0.14);
  --accent:#ff6b6f;
  --accent-soft:rgba(255,107,111,0.18);
  --success:#10b981;
  --success-soft:rgba(16,185,129,0.16);
  --danger:#ff6b6f;
  --danger-soft:rgba(255,107,111,0.14);
  --warning:#f5c04a;
  --info:#5aa8ff;
  --blue:var(--primary);
  --indigo:#7d8cff;
  --teal:#5aa8ff;
  --green:var(--success);
  --cyan:#6B7280;
  --violet:#a78bfa;
  --orange:var(--warning);
  --red:var(--accent);
  --input-bg:#2d2e31;
  --input-border:#444746;
  --chart-grid:rgba(68,71,70,0.42);
  --chart-blue:#4da0ff;
  --chart-green:#19cba2;
  --chart-purple:#a78bfa;
  --chart-amber:#f5c04a;
  --chart-red:#ff737c;
}

/* ============================================= */
/*          RESET Y GLOBALES                     */
/* ============================================= */
*{box-sizing:border-box}

html,body{
  height:100%;
  overflow-x:hidden;
  margin:0;
  padding:0;
}

body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  font-synthesis-weight:none;
  overflow-x: hidden;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

a{
  color:var(--primary);
  text-decoration:none;
  transition:color 0.2s;
}

a:hover{
  color:var(--primary-hover);
}

/* ============================================= */
/*          UTILIDADES                           */
/* ============================================= */
.hidden{
  display:none !important;
}

.text-muted{
  color:var(--muted);
}

.text-small{
  font-size:12px;
}

.text-bold{
  font-weight:700;
}

.mt-1{margin-top:var(--space-1);}
.mt-2{margin-top:var(--space-2);}
.mt-3{margin-top:var(--space-3);}
.mb-1{margin-bottom:var(--space-1);}
.mb-2{margin-bottom:var(--space-2);}
.mb-3{margin-bottom:var(--space-3);}

/* ============================================= */
/*          AJUSTES TEMA OSCURO                  */
/* ============================================= */
body.theme-dark .card,
body.theme-dark .chart-card,
body.theme-dark .analytics-chart-card,
body.theme-dark .analytics-chart-full,
body.theme-dark .pagination-controls,
body.theme-dark .analytics-control-bar,
body.theme-dark .login-card{
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:none;
}

body.theme-dark .card-header,
body.theme-dark .chart-head{
  border-bottom:1px solid var(--border);
}

body.theme-dark .table th{
  background:#252525;
  border-bottom:1px solid #444746;
}

body.theme-dark .table td{
  border-bottom:1px solid var(--border);
}

body.theme-dark .table tbody tr:hover{
  background:#1f2022;
}

body.theme-dark .toggle-btn.active{
  background:var(--panel);
  color:var(--primary);
  box-shadow:none;
  border:1px solid var(--border);
}

body.theme-dark .legend-item:hover{
  background:rgba(255,255,255,0.06);
}

body.theme-dark .login-card,
body.theme-dark .calendar-modal-content,
body.theme-dark .calendar-modal-header,
body.theme-dark .range-calendar-enhanced{
  background:var(--panel);
  color:var(--text);
  border-color:var(--border);
}

body.theme-dark .btn-close-modal,
body.theme-dark .btn-nav-month{
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}