/*
 * NEXUS OS — Theme Engine v2
 * Themes: dark | light | pro (Aurora)
 * html[data-theme] specificity (0,1,1) beats :root (0,1,0) — no !important needed on vars
 * Component overrides use !important only where inline CSS or module hardcoding require it
 */

/* ════════════════════════════════════════════════════════════��══
   DARK — Gorilla Neon (original, unchanged)
   ══════════════════════════════════════════��════════════════════ */
html[data-theme="dark"] {
  /* Core surfaces */
  --bg:        #050508;
  --bg2:       #0a0c12;
  --s1:        #0a0c12;
  --s2:        #0f1018;
  --s3:        #13151f;
  --surface:   #0a0c12;
  --surface2:  #0f1018;
  --surface3:  #13151f;

  /* Accents */
  --cyan:      #00d2ff;
  --green:     #00ff88;
  --amber:     #ffb800;
  --red:       #ff003c;
  --purple:    #a855f7;
  --blue:      #3b82f6;
  --gold:      #ffd700;

  /* Tinted accents */
  --cyan-dim:   rgba(0,210,255,.12);
  --green-dim:  rgba(0,255,136,.10);
  --amber-dim:  rgba(255,184,0,.10);
  --red-dim:    rgba(255,0,60,.12);
  --purple-dim: rgba(168,85,247,.12);
  --cyan-bg:    rgba(0,210,255,.08);
  --cyan-bg2:   rgba(0,210,255,.15);
  --green-bg:   rgba(0,255,136,.08);
  --green-bg2:  rgba(0,255,136,.15);
  --amber-bg:   rgba(255,184,0,.08);
  --amber-bg2:  rgba(255,184,0,.15);
  --red-bg:     rgba(255,0,60,.08);
  --red-bg2:    rgba(255,0,60,.15);
  --purple-bg:  rgba(168,85,247,.08);
  --purple-bg2: rgba(168,85,247,.15);

  /* Text */
  --text:       #e0e8f0;
  --text-dim:   #8090a8;
  --text-muted: #546070;
  --dim:        #8090a8;
  --muted:      #546070;

  /* Borders & glass */
  --border:      rgba(255,255,255,.07);
  --border2:     rgba(255,255,255,.04);
  --border-cyan: rgba(0,210,255,.22);
  --glass:       rgba(15,20,25,.65);

  /* Topbar */
  --topbar-bg:     rgba(5,5,8,.96);
  --topbar-border: rgba(255,255,255,.06);
  --topbar-hover:  rgba(255,255,255,.05);

  /* Inputs */
  --input-bg:     #0f1018;
  --input-border: rgba(255,255,255,.10);
  --input-focus:  rgba(0,210,255,.35);

  /* Scrollbar */
  --scroll-track: #0a0c12;
  --scroll-thumb: #1e2535;

  /* Misc */
  --shadow: 0 8px 32px rgba(0,0,0,.6);
  --overlay-bg: rgba(0,0,0,.7);
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT — Alabaster
   Fondo azul-pizarra suave · Tarjetas blancas · Sky-blue accent
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg:        #e8edf6;
  --bg2:       #dde3f0;
  --s1:        #ffffff;
  --s2:        #f4f6fb;
  --s3:        #eef1f8;
  --surface:   #ffffff;
  --surface2:  #f4f6fb;
  --surface3:  #eef1f8;

  /* Sky-blue accent (replaces neon cyan) */
  --cyan:      #0369a1;
  --green:     #15803d;
  --amber:     #b45309;
  --red:       #b91c1c;
  --purple:    #6d28d9;
  --blue:      #1d4ed8;
  --gold:      #a16207;

  /* Tinted accents */
  --cyan-dim:   rgba(3,105,161,.09);
  --green-dim:  rgba(21,128,61,.09);
  --amber-dim:  rgba(180,83,9,.09);
  --red-dim:    rgba(185,28,28,.07);
  --purple-dim: rgba(109,40,217,.09);
  --cyan-bg:    rgba(3,105,161,.07);
  --cyan-bg2:   rgba(3,105,161,.14);
  --green-bg:   rgba(21,128,61,.07);
  --green-bg2:  rgba(21,128,61,.14);
  --amber-bg:   rgba(180,83,9,.07);
  --amber-bg2:  rgba(180,83,9,.14);
  --red-bg:     rgba(185,28,28,.06);
  --red-bg2:    rgba(185,28,28,.13);
  --purple-bg:  rgba(109,40,217,.07);
  --purple-bg2: rgba(109,40,217,.14);

  /* Text */
  --text:       #0c1524;
  --text-dim:   #3d5068;
  --text-muted: #7f95b0;
  --dim:        #3d5068;
  --muted:      #7f95b0;

  /* Borders — subtle, depth via shadow */
  --border:      rgba(12,21,36,.08);
  --border2:     rgba(12,21,36,.05);
  --border-cyan: rgba(3,105,161,.22);
  --glass:       rgba(255,255,255,.92);

  /* Topbar — pure white strip */
  --topbar-bg:     #ffffff;
  --topbar-border: rgba(12,21,36,.08);
  --topbar-hover:  rgba(12,21,36,.045);

  /* Inputs */
  --input-bg:     #ffffff;
  --input-border: rgba(12,21,36,.14);
  --input-focus:  rgba(3,105,161,.30);

  /* Scrollbar */
  --scroll-track: #dde3f0;
  --scroll-thumb: #b0bdd4;

  /* Shadows — primary depth mechanism */
  --shadow:      0 1px 2px rgba(12,21,36,.05), 0 4px 16px rgba(12,21,36,.08);
  --shadow-sm:   0 1px 2px rgba(12,21,36,.06);
  --shadow-lg:   0 8px 32px rgba(12,21,36,.12);
  --overlay-bg:  rgba(12,21,36,.45);
}

/* ══════════════════════════════��═══════════════════════════════��
   PRO — Aurora (recommended)
   Deep indigo/slate — premium SaaS enterprise
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="pro"] {
  /* Core surfaces */
  --bg:        #0d0f17;
  --bg2:       #131620;
  --s1:        #131620;
  --s2:        #1a1e2e;
  --s3:        #21253a;
  --surface:   #131620;
  --surface2:  #1a1e2e;
  --surface3:  #21253a;

  /* Accents — indigo replaces cyan as primary */
  --cyan:      #6366f1;
  --green:     #10b981;
  --amber:     #f59e0b;
  --red:       #ef4444;
  --purple:    #a78bfa;
  --blue:      #60a5fa;
  --gold:      #fbbf24;

  /* Tinted accents */
  --cyan-dim:   rgba(99,102,241,.14);
  --green-dim:  rgba(16,185,129,.12);
  --amber-dim:  rgba(245,158,11,.12);
  --red-dim:    rgba(239,68,68,.12);
  --purple-dim: rgba(167,139,250,.12);
  --cyan-bg:    rgba(99,102,241,.10);
  --cyan-bg2:   rgba(99,102,241,.18);
  --green-bg:   rgba(16,185,129,.09);
  --green-bg2:  rgba(16,185,129,.18);
  --amber-bg:   rgba(245,158,11,.09);
  --amber-bg2:  rgba(245,158,11,.18);
  --red-bg:     rgba(239,68,68,.09);
  --red-bg2:    rgba(239,68,68,.18);
  --purple-bg:  rgba(167,139,250,.09);
  --purple-bg2: rgba(167,139,250,.18);

  /* Text */
  --text:       #e8eaf5;
  --text-dim:   #8892b0;
  --text-muted: #4a5370;
  --dim:        #8892b0;
  --muted:      #4a5370;

  /* Borders & glass */
  --border:      rgba(99,102,241,.13);
  --border2:     rgba(99,102,241,.08);
  --border-cyan: rgba(99,102,241,.28);
  --glass:       rgba(19,22,32,.72);

  /* Topbar */
  --topbar-bg:     rgba(13,15,23,.97);
  --topbar-border: rgba(99,102,241,.16);
  --topbar-hover:  rgba(99,102,241,.07);

  /* Inputs */
  --input-bg:     #1a1e2e;
  --input-border: rgba(99,102,241,.18);
  --input-focus:  rgba(99,102,241,.40);

  /* Scrollbar */
  --scroll-track: #131620;
  --scroll-thumb: #2a2f4a;

  /* Misc */
  --shadow: 0 8px 40px rgba(0,0,0,.7);
  --overlay-bg: rgba(0,0,0,.72);
}

/* ════════════════════════════════��══════════════════════════��═══
   GLOBAL — Scrollbar, base resets (all themes)
   ═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar              { width:6px; height:6px; }
::-webkit-scrollbar-track        { background:var(--scroll-track, var(--s1)); }
::-webkit-scrollbar-thumb        { background:var(--scroll-thumb, var(--s2)); border-radius:3px; }
::-webkit-scrollbar-thumb:hover  { background:var(--dim); }

/* ═══════════════════════════════════════════════════════════════
   TOPBAR — shared component (topbar.php)
   ═══════════════════════════════════════════════════════════════ */
.topbar {
  background: var(--topbar-bg) !important;
  border-bottom-color: var(--topbar-border) !important;
}
.tb-hub-link:hover  { background: var(--topbar-hover) !important; }
.tb-sep             { background: var(--border) !important; }
.tb-brand           { color: var(--cyan) !important; }
.tb-logo-icon       { background: var(--cyan-bg) !important; border-color: var(--cyan-bg2) !important; color: var(--cyan) !important; }
.tb-clock           { color: var(--muted) !important; }
.tb-uname           { color: var(--dim) !important; }
.tb-bell            { background: var(--topbar-hover) !important; border-color: var(--border) !important; color: var(--dim) !important; }
.tb-bell:hover      { color: var(--text) !important; }
.tb-bell-badge      { border-color: var(--bg) !important; }
.tb-notif-panel     { background: var(--s1) !important; border-color: var(--border) !important; box-shadow: var(--shadow) !important; }
.tb-notif-head      { border-bottom-color: var(--border) !important; }
.tb-notif-title     { color: var(--dim) !important; }
.tb-mark-all        { color: var(--cyan) !important; }
.tb-notif-item      { border-bottom-color: var(--border) !important; }
.tb-notif-item:hover { background: var(--topbar-hover) !important; }
.tb-notif-msg       { color: var(--text) !important; }
.tb-notif-time      { color: var(--muted) !important; }
.tb-notif-empty     { color: var(--muted) !important; }
.tb-logout          { background: var(--red-bg) !important; border-color: rgba(220,38,38,.18) !important; }


/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — Component overrides
   Covers hardcoded dark values across all 17 modules
   ═══════════════════════════════════════════════════════════════ */

/* ══ PAGE ═══════════════════════════════════════════════════════ */
html[data-theme="light"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
}
/* Replace neon grid with ultra-subtle dots */
html[data-theme="light"] body::before {
  background-image:
    radial-gradient(circle, rgba(3,105,161,.12) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  opacity: .5 !important;
}
html[data-theme="light"] body::after {
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%, rgba(3,105,161,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 100%, rgba(109,40,217,.04) 0%, transparent 60%) !important;
}

/* ══ TOPBARS — all module variants ═════════════════════════════ */
html[data-theme="light"] .topbar {
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--topbar-border) !important;
  box-shadow: 0 1px 0 rgba(12,21,36,.06) !important;
}
/* Module-local topbar element names */
html[data-theme="light"] .topbar-logo,
html[data-theme="light"] .topbar-module,
html[data-theme="light"] .topbar-center { color: var(--dim) !important; }
html[data-theme="light"] .topbar-clock  { color: var(--muted) !important; }
html[data-theme="light"] .topbar-user   { color: var(--text) !important; }
html[data-theme="light"] .back-btn {
  background: var(--s2) !important;
  border-color: var(--border) !important;
  color: var(--dim) !important;
}
html[data-theme="light"] .back-btn:hover {
  border-color: var(--border-cyan) !important;
  color: var(--cyan) !important;
}
html[data-theme="light"] .logo-icon {
  background: var(--cyan-bg) !important;
  border-color: var(--border-cyan) !important;
  color: var(--cyan) !important;
}

/* ══ NAVIGATION TABS ════════════════════════════════════════════ */
html[data-theme="light"] .main-tabs,
html[data-theme="light"] .sub-tab-bar,
html[data-theme="light"] [class*="tab-bar"],
html[data-theme="light"] .chat-input-bar,
html[data-theme="light"] [class*="input-bar"] {
  background: var(--topbar-bg) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
html[data-theme="light"] [class*="tab-btn"],
html[data-theme="light"] [class*="main-tab"],
html[data-theme="light"] [class*="sub-tab"] {
  color: var(--dim) !important;
  border-color: transparent !important;
}
html[data-theme="light"] [class*="tab-btn"].active,
html[data-theme="light"] [class*="main-tab"].active,
html[data-theme="light"] [class*="sub-tab"].active {
  color: var(--cyan) !important;
  border-color: var(--cyan) !important;
}

/* ══ SIDEBAR / LEFT RAIL ════════════════════════════════════════ */
html[data-theme="light"] .sidebar,
html[data-theme="light"] [class*="sidebar"],
html[data-theme="light"] .left-panel,
html[data-theme="light"] [class*="left-panel"] {
  background: var(--s2) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .sb-label,
html[data-theme="light"] [class*="sb-label"] { color: var(--muted) !important; }
html[data-theme="light"] .sb-divider,
html[data-theme="light"] [class*="sb-divider"] { background: var(--border) !important; }
html[data-theme="light"] .sb-input,
html[data-theme="light"] .margin-pct,
html[data-theme="light"] .toggle-row,
html[data-theme="light"] .webhook-url {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .sb-input::placeholder { color: var(--muted) !important; }

/* ══ CARDS / SURFACES ════════════════════════════════════════════ */
html[data-theme="light"] .stat-card,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .side-card,
html[data-theme="light"] .card,
html[data-theme="light"] [class*="-card"]:not(.ops-card):not(.mod-card):not(.p-card):not(.fin-card),
html[data-theme="light"] [class*="card-"]:not([class*="card-title"]) {
  background: var(--s1) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}
html[data-theme="light"] .tx-table {
  background: var(--s1) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}
/* Hub: ops cards */
html[data-theme="light"] .ops-ventas {
  background: rgba(3,105,161,.04) !important;
  border-color: rgba(3,105,161,.18) !important;
}
html[data-theme="light"] .ops-ventas:hover  { border-color: rgba(3,105,161,.4) !important; box-shadow: 0 12px 40px rgba(3,105,161,.12) !important; }
html[data-theme="light"] .ops-taller        { background: rgba(180,83,9,.04) !important; border-color: rgba(180,83,9,.18) !important; }
html[data-theme="light"] .ops-taller:hover  { border-color: rgba(180,83,9,.4) !important; box-shadow: 0 12px 40px rgba(180,83,9,.12) !important; }
html[data-theme="light"] .ops-title         { color: var(--text) !important; }
html[data-theme="light"] .ops-ventas:hover .ops-title { text-shadow: 0 0 30px rgba(3,105,161,.3) !important; }
html[data-theme="light"] .ops-taller:hover .ops-title { text-shadow: 0 0 30px rgba(180,83,9,.3) !important; }
/* Hub: module grid cards */
html[data-theme="light"] .mod-card {
  background: var(--s1) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
html[data-theme="light"] .mod-card:hover   { border-color: var(--border-cyan) !important; box-shadow: var(--shadow) !important; }
html[data-theme="light"] .mod-icon         { background: var(--cyan-bg) !important; }
html[data-theme="light"] .mod-name         { color: var(--text) !important; }
/* Role greeting banner */
html[data-theme="light"] .rg-banner { background: var(--s1) !important; border-color: var(--border) !important; box-shadow: var(--shadow-sm) !important; }
html[data-theme="light"] .rg-name   { color: var(--text) !important; }
html[data-theme="light"] .rg-role   { color: var(--dim) !important; }

/* ══ SECTION LABELS ═════════════════════════════════════════════ */
html[data-theme="light"] .section-label            { color: var(--muted) !important; }
html[data-theme="light"] .section-label::after     { background: var(--border) !important; }

/* ══ FORMS / INPUTS ═════════════════════════════════════════════ */
html[data-theme="light"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .filter-select,
html[data-theme="light"] .filter-input {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: var(--muted) !important; }
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(3,105,161,.12) !important;
  outline: none !important;
}
html[data-theme="light"] label,
html[data-theme="light"] .form-group label { color: var(--dim) !important; }
html[data-theme="light"] select option     { background: var(--s1) !important; color: var(--text) !important; }

/* ══ TABLES ══════════════════════════════════════════════════════ */
html[data-theme="light"] table             { background: var(--s1) !important; }
html[data-theme="light"] thead tr,
html[data-theme="light"] .tx-table-head,
html[data-theme="light"] [class*="table-head"],
html[data-theme="light"] .table-header    { background: var(--s3) !important; border-bottom-color: var(--border) !important; }
html[data-theme="light"] th,
html[data-theme="light"] .tx-th,
html[data-theme="light"] [class*="-th"]   { color: var(--dim) !important; font-weight: 600 !important; }
html[data-theme="light"] tr               { border-bottom-color: var(--border) !important; }
html[data-theme="light"] td               { color: var(--text) !important; }
html[data-theme="light"] tr:hover td,
html[data-theme="light"] .tx-row:hover    { background: rgba(3,105,161,.04) !important; }
html[data-theme="light"] .tx-fecha,
html[data-theme="light"] .tx-cat,
html[data-theme="light"] [class*="-dim"],
html[data-theme="light"] [class*="muted"] { color: var(--muted) !important; }

/* ══ BUTTONS ════════════════════════════════════════════════════ */
html[data-theme="light"] .btn-green  { background: var(--green-bg) !important; border-color: rgba(21,128,61,.2) !important; color: var(--green) !important; }
html[data-theme="light"] .btn-green:hover { background: var(--green-bg2) !important; }
html[data-theme="light"] .btn-cyan,
html[data-theme="light"] .btn-blue   { background: var(--cyan-bg) !important; border-color: rgba(3,105,161,.2) !important; color: var(--cyan) !important; }
html[data-theme="light"] .btn-cyan:hover,
html[data-theme="light"] .btn-blue:hover { background: var(--cyan-bg2) !important; }
html[data-theme="light"] .btn-red    { background: var(--red-bg) !important; border-color: rgba(185,28,28,.18) !important; color: var(--red) !important; }
html[data-theme="light"] .btn-red:hover { background: var(--red-bg2) !important; }
html[data-theme="light"] .btn-amber,
html[data-theme="light"] .btn-yellow { background: var(--amber-bg) !important; border-color: rgba(180,83,9,.18) !important; color: var(--amber) !important; }
html[data-theme="light"] .btn-del    { color: var(--muted) !important; background: transparent !important; }
html[data-theme="light"] .btn-del:hover  { background: var(--red-bg) !important; color: var(--red) !important; }
html[data-theme="light"] .btn-reset  { background: var(--s2) !important; border-color: var(--border) !important; color: var(--dim) !important; }
html[data-theme="light"] .btn-mode   { background: var(--s2) !important; border-color: var(--border) !important; color: var(--dim) !important; }
html[data-theme="light"] .btn-mode.active-gamer   { background: var(--cyan-bg2) !important; color: var(--cyan) !important; border-color: var(--border-cyan) !important; }
html[data-theme="light"] .btn-mode.active-empresa { background: var(--s3) !important; color: var(--text) !important; border-color: var(--border) !important; }
html[data-theme="light"] .util-btn   { background: var(--s1) !important; border-color: var(--border) !important; color: var(--dim) !important; box-shadow: var(--shadow-sm) !important; }
html[data-theme="light"] .util-btn:hover             { background: var(--s2) !important; color: var(--text) !important; }
html[data-theme="light"] .util-btn.danger:hover      { color: var(--red) !important; background: var(--red-bg) !important; border-color: rgba(185,28,28,.25) !important; }

/* ══ SLIDE PANELS / MODALS / DRAWERS ════════════════════════════ */
html[data-theme="light"] .slide-panel,
html[data-theme="light"] [class*="slide-panel"],
html[data-theme="light"] [class*="drawer"],
html[data-theme="light"] [class*="side-panel"] {
  background: var(--s1) !important;
  border-color: var(--border) !important;
  box-shadow: -4px 0 32px rgba(12,21,36,.12) !important;
}
html[data-theme="light"] [class*="panel-header"] { background: var(--s2) !important; border-bottom-color: var(--border) !important; }
html[data-theme="light"] [class*="panel-title"]  { color: var(--text) !important; }
html[data-theme="light"] [class*="panel-close"]  { background: var(--s3) !important; border-color: var(--border) !important; color: var(--dim) !important; }
html[data-theme="light"] [class*="panel-close"]:hover { background: var(--red-bg) !important; color: var(--red) !important; }
html[data-theme="light"] .panel-overlay,
html[data-theme="light"] [class*="modal-overlay"],
html[data-theme="light"] #panel-overlay,
html[data-theme="light"] [id*="overlay"]:not([id*="chart"]) { background: rgba(12,21,36,.45) !important; }
html[data-theme="light"] .modal-box,
html[data-theme="light"] [class*="modal-box"],
html[data-theme="light"] [class*="modal-inner"],
html[data-theme="light"] [class*="modal-content"],
html[data-theme="light"] [class*="modal-body"] { background: var(--s1) !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-theme="light"] [class*="modal-header"] { background: var(--s2) !important; border-bottom-color: var(--border) !important; }
html[data-theme="light"] [id*="modal"] { background: var(--s1) !important; }

/* ══ STATS / KPI ════════════════════════════════════════════════ */
html[data-theme="light"] .stat-val          { color: var(--text) !important; }
html[data-theme="light"] .stat-lbl,
html[data-theme="light"] .stat-sub          { color: var(--dim) !important; }
html[data-theme="light"] .stat-card.ingreso .stat-val { color: var(--green) !important; }
html[data-theme="light"] .stat-card.egreso  .stat-val { color: var(--red) !important; }
html[data-theme="light"] .stat-card.balance .stat-val { color: var(--cyan) !important; }
html[data-theme="light"] [class*="kpi-"],
html[data-theme="light"] [class*="metric-"] { color: var(--text) !important; }

/* ══ CHARTS ══════════════════════════════════════════════════════ */
html[data-theme="light"] .chart-title,
html[data-theme="light"] .side-title,
html[data-theme="light"] .chart-col-lbl,
html[data-theme="light"] .bar-lbl { color: var(--dim) !important; }

/* ══ FINANZAS ════════════════════════════════════════════════════ */
html[data-theme="light"] .cat-row         { border-bottom-color: var(--border) !important; }
html[data-theme="light"] .cat-name        { color: var(--text) !important; }
html[data-theme="light"] .cat-amt         { color: var(--dim) !important; }
html[data-theme="light"] .toolbar         { border-bottom: 1px solid var(--border) !important; background: var(--s2) !important; }
html[data-theme="light"] .fin-row-box     { background: var(--s3) !important; border-color: var(--border) !important; }

/* ══ KANBAN / RETENTION ══════════════════════════════════════════ */
html[data-theme="light"] [class*="kanban"] { background: var(--s3) !important; border-color: var(--border) !important; }
html[data-theme="light"] [class*="col-"] > [class*="card"] { background: var(--s1) !important; }
html[data-theme="light"] #notif-panel { background: var(--s1) !important; border-color: var(--border) !important; box-shadow: var(--shadow-lg) !important; }

/* ══ CHAT BUBBLES ═══════════════════════════════════════════════ */
html[data-theme="light"] [class*="msg-self"],
html[data-theme="light"] [class*="bubble-self"]  { background: var(--cyan-bg2) !important; color: var(--text) !important; }
html[data-theme="light"] [class*="msg-other"],
html[data-theme="light"] [class*="bubble-other"] { background: var(--s3) !important; color: var(--text) !important; }

/* ══ TYPOGRAPHY ═════════════════════════════════════════════════ */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3  { color: var(--text) !important; }
html[data-theme="light"] [class*="page-title"],
html[data-theme="light"] [class*="section-title"],
html[data-theme="light"] [class*="mod-title"],
html[data-theme="light"] [class*="card-title"]   { color: var(--text) !important; }
html[data-theme="light"] [class*="-empty"],
html[data-theme="light"] [class*="empty-"]        { color: var(--muted) !important; }

/* ══ BADGES — fix PHP inline hardcoded dark colors ═════════════ */
html[data-theme="light"] [style*="background:#3a2e00"],
html[data-theme="light"] [style*="background: #3a2e00"] { background: rgba(180,83,9,.1) !important; color: var(--amber) !important; }
html[data-theme="light"] [style*="background:#2a1440"],
html[data-theme="light"] [style*="background: #2a1440"] { background: rgba(109,40,217,.1) !important; color: var(--purple) !important; }
html[data-theme="light"] [style*="background:#1a1f2e"],
html[data-theme="light"] [style*="background: #1a1f2e"],
html[data-theme="light"] [style*="background:#1f2937"],
html[data-theme="light"] [style*="background: #1f2937"],
html[data-theme="light"] [style*="background:#334155"],
html[data-theme="light"] [style*="background: #334155"] { background: var(--s3) !important; color: var(--dim) !important; }
html[data-theme="light"] [style*="background:#0a0c12"],
html[data-theme="light"] [style*="background: #0a0c12"],
html[data-theme="light"] [style*="background:#050508"],
html[data-theme="light"] [style*="background: #050508"],
html[data-theme="light"] [style*="background:rgba(5,5,8"],
html[data-theme="light"] [style*="background:rgba(8,10,18"],
html[data-theme="light"] [style*="background:rgba(10,12,20"] { background: var(--s1) !important; }
/* Invisible white borders → dark border */
html[data-theme="light"] [style*="rgba(255,255,255,.07)"],
html[data-theme="light"] [style*="rgba(255,255,255,0.07)"],
html[data-theme="light"] [style*="rgba(255,255,255,.06)"],
html[data-theme="light"] [style*="rgba(255,255,255,.05)"] { border-color: var(--border) !important; }

/* ══ COTIZADOR ═══════════════════════════════════════════════════ */
/* Render card stays dark — it's a branded preview */
html[data-theme="light"] .main-view { background: transparent !important; }
/* app-layout background shows through */
html[data-theme="light"] .app-layout { background: var(--bg) !important; }

/* ══ PAGE WRAPPERS ═══════════════════════════════════════════════ */
html[data-theme="light"] [class*="section-wrap"],
html[data-theme="light"] [class*="content-wrap"],
html[data-theme="light"] [class*="page-wrap"] { background: var(--bg) !important; }

/* ══ LIVECHAT — lc-* prefix ══════════════════════════════════════ */
html[data-theme="light"] .lc-topbar {
  background: var(--topbar-bg) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 0 rgba(12,21,36,.06) !important;
}
html[data-theme="light"] .lc-search,
html[data-theme="light"] .lc-select,
html[data-theme="light"] .lc-reply-textarea,
html[data-theme="light"] .lc-rr-new-titulo,
html[data-theme="light"] .lc-rr-new-texto {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .lc-pill { background: var(--s3) !important; border-color: var(--border) !important; color: var(--dim) !important; }
html[data-theme="light"] .lc-pill.active { background: var(--cyan-bg2) !important; border-color: var(--border-cyan) !important; color: var(--cyan) !important; }
html[data-theme="light"] .lc-modal-overlay { background: rgba(12,21,36,.45) !important; }
html[data-theme="light"] .lc-modal-footer  { background: var(--s2) !important; border-color: var(--border) !important; }

/* ══ WHATSAPP — wa-* prefix ══════════════════════════════════════ */
html[data-theme="light"] .wa-topbar {
  background: var(--topbar-bg) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 0 rgba(12,21,36,.06) !important;
}
html[data-theme="light"] .wa-main { background: var(--bg) !important; }
html[data-theme="light"] .wa-search,
html[data-theme="light"] .wa-select,
html[data-theme="light"] .wa-reply-textarea,
html[data-theme="light"] .wa-webhook-url {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .wa-pill { background: var(--s3) !important; border-color: var(--border) !important; color: var(--dim) !important; }
html[data-theme="light"] .wa-pill.active { background: var(--cyan-bg2) !important; border-color: var(--border-cyan) !important; color: var(--cyan) !important; }
html[data-theme="light"] .wa-modal { background: var(--s1) !important; border-color: var(--border) !important; }
html[data-theme="light"] .wa-modal-overlay { background: rgba(12,21,36,.45) !important; }
html[data-theme="light"] .wa-modal input,
html[data-theme="light"] .wa-modal textarea { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text) !important; }

/* ══ SOPORTE — .panel variant + orden-card ═════════════���═════════ */
html[data-theme="light"] .panel {
  background: var(--s1) !important;
  border-color: var(--border) !important;
  box-shadow: -4px 0 32px rgba(12,21,36,.12) !important;
}
html[data-theme="light"] .orden-card {
  background: var(--s1) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
html[data-theme="light"] .empty-state { color: var(--muted) !important; }

/* ══ AGENDA ══════════════════════════════════════════════════════ */
html[data-theme="light"] .cal-loading { background: rgba(12,21,36,.45) !important; }

/* ══ MISC FORM SELECTS ═══════════════════════════════════���═══════ */
html[data-theme="light"] .form-select option,
html[data-theme="light"] .f-select option { background: var(--s1) !important; color: var(--text) !important; }

/* ═════════════════════════════════════════════════════════════════
   PRO THEME — Component overrides
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="pro"] body::before {
  background-image:
    linear-gradient(rgba(99,102,241,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.02) 1px, transparent 1px) !important;
}
html[data-theme="pro"] body::after {
  background:
    radial-gradient(ellipse 60% 40% at 20% 10%, rgba(99,102,241,.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 80%, rgba(16,185,129,.04) 0%, transparent 70%) !important;
}
html[data-theme="pro"] .ops-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,.7) !important;
}