/* ═══════════════════════════════════════════════
   SKEWLY THEME SYSTEM — Dark / Light
   Cargá este archivo en todas las páginas
   ═══════════════════════════════════════════════ */

/* ── DARK MODE (default) ── */
:root {
  --bg:       #080b12;
  --bg1:      #0d1119;
  --bg2:      #121722;
  --bg3:      #181e2c;
  --border:   rgba(255,255,255,0.06);
  --border2:  rgba(255,255,255,0.12);
  --text:     #dde3f0;
  --muted:    #8b95af;
  --muted2:   #5a6580;
  --purple:   #7c6ff7;
  --purple2:  #a89ef8;
  --purple-d: rgba(124,111,247,0.1);
  --green:    #2dd4a0;
  --red:      #f26969;
  --amber:    #f5c542;
  --blue:     #4da6ff;
  --cyan:     #06b6d4;
  --mono:     'Space Mono', monospace;
  --sans:     'DM Sans', sans-serif;
  --radius:   8px;
}

/* ── LIGHT MODE ── */
html.light {
  --bg:       #f0f2f7;
  --bg1:      #ffffff;
  --bg2:      #f8f9fc;
  --bg3:      #eef0f6;
  --border:   rgba(0,0,0,0.08);
  --border2:  rgba(0,0,0,0.14);
  --text:     #1a1f2e;
  --muted:    #64748b;
  --muted2:   #94a3b8;
  --purple:   #6c5ff7;
  --purple2:  #7c6ff7;
  --purple-d: rgba(108,95,247,0.08);
  --green:    #059669;
  --red:      #dc2626;
  --amber:    #d97706;
  --blue:     #2563eb;
  --cyan:     #0891b2;
}

/* ── LIGHT MODE — overrides globales ── */
html.light body {
  background: var(--bg);
  color: var(--text);
}

html.light .topbar {
  background: var(--bg1);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}

html.light .sidebar,
html.light .snav {
  background: var(--bg1) !important;
  border-right: 1px solid var(--border) !important;
}

html.light .snav-link,
html.light .snav-item {
  color: var(--muted) !important;
}

html.light .snav-link.active,
html.light .snav-item.active {
  background: rgba(108,95,247,.08) !important;
  color: var(--purple) !important;
}

html.light .panel,
html.light .card {
  background: #fff;
  border-color: rgba(0,0,0,.07);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

html.light .topbar input,
html.light input[type="text"],
html.light input[type="number"],
html.light input[type="email"],
html.light select,
html.light textarea {
  background: #f8f9fc;
  border-color: rgba(0,0,0,.12);
  color: var(--text);
}

html.light .search-input {
  background: #f8f9fc;
  border-color: rgba(0,0,0,.1);
  color: var(--text);
}

html.light .search-dropdown {
  background: #fff;
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
}

html.light .snav-tooltip {
  background: #fff !important;
  color: var(--text) !important;
  border-color: rgba(0,0,0,.1) !important;
}

html.light .time-display { color: var(--muted); }
html.light .live-pill { background: rgba(45,212,160,.1); color: var(--green); }

html.light table th {
  background: var(--bg3);
  color: var(--muted);
  border-bottom-color: var(--border2);
}

html.light table td {
  border-bottom-color: var(--border);
}

html.light .btn,
html.light button:not(.theme-toggle) {
  border-color: var(--border2);
}

html.light .snav-user {
  border-top-color: var(--border) !important;
}

html.light .snav-email { color: var(--purple) !important; }
html.light .snav-plan  { color: var(--muted) !important; }

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  transition: all .2s;
  white-space: nowrap;
}

.theme-toggle:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.theme-toggle-icon {
  font-size: 14px;
  transition: transform .3s;
  line-height: 1;
}

html.light .theme-toggle-icon {
  transform: rotate(180deg);
}