:root {
  --accent:    #2563eb;
  --accent2:   #0ea5e9;
  --red:       #dc2626;
  --text:      #1e293b;
  --text-sub:  #64748b;
  --bg-dark:   #f1f5f9;
  --bg-mid:    #e2e8f0;
  --bg-card:   #ffffff;
  --border:    rgba(37,99,235,0.2);
  --overlay:   rgba(241,245,249,0.97);
  --topbar-bg: rgba(226,232,240,0.97);
  --bottom-bg: rgba(226,232,240,0.97);
  --sidebar-bg:#e2e8f0;
}

/* overrides específicos del tema claro */
body { background: #f1f5f9 !important; }
.ctrl svg { fill: #1e293b !important; }
.ctrl.lg svg { fill: var(--accent) !important; }
.ctrl.list svg { fill: var(--text-sub) !important; }
.sb-btn svg { fill: #64748b !important; }
.prog-wrap { background: rgba(0,0,0,0.12); }
.vol-row input[type=range] { background: rgba(0,0,0,0.12); }
.pl-item:hover { background: rgba(37,99,235,0.1); }
.pl-item.active { background: rgba(37,99,235,0.15); }
.icon-card .card-icon { background: #fff; border-color: rgba(37,99,235,0.2); }