/* Claudbar · Modo claro (barra lateral y configuración). Se activa con <html data-theme="light">. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f6fb; --surface: #ffffff; --surface-2: #f0f0f7; --border: #e2e2ee; --text: #17182a; --muted: #5d6078;
  --accent-primary: #6d4ee8; --accent-secondary: #0e9fbf; --accent-warning: #b45309; --accent-danger: #dc2626; --ok: #059669;
  --text-inverse: #ffffff; --shadow-lg: 0 10px 30px rgba(20, 20, 50, .12);
  --sv-input: #f6f6fb; --line-soft: rgba(20, 20, 50, .08);
}
:root[data-theme="light"] body { background: var(--bg); color: var(--text); }

/* ---- Barra lateral ---- */
:root[data-theme="light"] .app { background: var(--bg); }
:root[data-theme="light"] .rail { background: #ffffff; border-left-color: var(--line-soft); }
:root[data-theme="light"] .rail-sep, :root[data-theme="light"] .opt-nav-sep { background: var(--line-soft); }
:root[data-theme="light"] .rail-btn:hover .ri, :root[data-theme="light"] .tool-icon:hover, :root[data-theme="light"] .foot-icon:hover, :root[data-theme="light"] .msg-actions .act:hover { background: rgba(20, 20, 50, .06); color: var(--text); }
:root[data-theme="light"] .feature-card, :root[data-theme="light"] .feature-agent { background: #ffffff; border-color: var(--border); box-shadow: 0 6px 18px -12px rgba(20, 20, 50, .25); }
:root[data-theme="light"] .feature-agent { background: radial-gradient(260px 160px at 100% 100%, rgba(34, 211, 238, .12), transparent 70%), radial-gradient(300px 180px at 0% 0%, rgba(124, 58, 237, .12), transparent 70%), #ffffff; }
:root[data-theme="light"] .fc-cta { background: var(--text); color: #fff; }
:root[data-theme="light"] .tiles .feature-row .fc-ico, :root[data-theme="light"] .tool-ico { background: rgba(20, 20, 50, .05); color: var(--muted); }
:root[data-theme="light"] .tool-icon.accent { background: rgba(20, 20, 50, .06); color: var(--text); }
:root[data-theme="light"] .composer-tools .model-btn { background: #ffffff; border-color: var(--border); }
:root[data-theme="light"] .app .composer { background: #ffffff; border-color: var(--border); box-shadow: 0 8px 24px -16px rgba(20, 20, 50, .3); }
:root[data-theme="light"] .ai-status.ok { color: #047857; }
:root[data-theme="light"] .library { background: var(--bg); }
:root[data-theme="light"] .drawer .lib-head { border-bottom-color: var(--line-soft); }
:root[data-theme="light"] .drawer .lib-head .btn-primary { background: rgba(20, 20, 50, .06); color: var(--text); }
:root[data-theme="light"] .drawer-switch { background: rgba(20, 20, 50, .05); }
:root[data-theme="light"] .drawer[data-view="tools"] .drawer-tab[data-view="tools"], :root[data-theme="light"] .drawer[data-view="library"] .drawer-tab[data-view="library"] { background: #ffffff; color: var(--text); box-shadow: 0 1px 3px rgba(20, 20, 50, .12); }
:root[data-theme="light"] .tool-grid { background: var(--line-soft); border-color: var(--border); }
:root[data-theme="light"] .tool-tile { background: #ffffff; }
:root[data-theme="light"] .tool-tile:hover { background: var(--surface-2); }
:root[data-theme="light"] .tool-chip button { background: rgba(20, 20, 50, .08); }
:root[data-theme="light"] .cloud-bubble { background: #ffffff; border-color: var(--border); box-shadow: 0 8px 22px -14px rgba(20, 20, 50, .35); }
:root[data-theme="light"] .cloud-bubble::before { background: #ffffff; border-color: var(--border); }
:root[data-theme="light"] .m-phone-body { fill: #e5e7eb; stroke: #6366f1; }
:root[data-theme="light"] .card, :root[data-theme="light"] .agent-step { background: #ffffff; border-color: var(--border); }
:root[data-theme="light"] .card-actions { border-top-color: var(--line-soft); }
:root[data-theme="light"] .btn-ghost:hover { background: var(--surface-2); }
:root[data-theme="light"] input[type="search"], :root[data-theme="light"] textarea, :root[data-theme="light"] select { background: #ffffff; color: var(--text); border-color: var(--border); }
:root[data-theme="light"] * { scrollbar-color: rgba(20, 20, 50, .2) transparent; }
:root[data-theme="light"] *::-webkit-scrollbar-thumb { background: rgba(20, 20, 50, .18); }

/* ---- Configuración (options.html) ---- */
:root[data-theme="light"] .opt-nav { background: #ffffff; border-right-color: var(--line-soft); }
:root[data-theme="light"] .opt-link { color: var(--muted); }
:root[data-theme="light"] .opt-link:hover { background: rgba(20, 20, 50, .05); color: var(--text); }
:root[data-theme="light"] .opt-link.active { background: rgba(109, 78, 232, .10); color: var(--accent-primary); }
:root[data-theme="light"] .opt-main { background: var(--bg); }
:root[data-theme="light"] .opt-group { background: #ffffff; border-color: var(--border); box-shadow: 0 6px 20px -16px rgba(20, 20, 50, .3); }
:root[data-theme="light"] .opt-row + .opt-row { border-top-color: var(--line-soft); }
:root[data-theme="light"] .opt-select, :root[data-theme="light"] .opt-input, :root[data-theme="light"] .kbd { background: var(--bg); border-color: var(--border); color: var(--text); }
:root[data-theme="light"] .switch { background: #d6d6e4; }
:root[data-theme="light"] .preview { background: var(--surface-2) !important; border-bottom-color: var(--line-soft); }
:root[data-theme="light"] .pv-card, :root[data-theme="light"] .preview [class*="pv-"] { background: #ffffff !important; border-color: var(--border) !important; box-shadow: 0 8px 24px rgba(20, 20, 50, .10) !important; color: var(--text); }
:root[data-theme="light"] .sugg-col, :root[data-theme="light"] .mh { background: var(--surface-2); border-color: var(--border); }
:root[data-theme="light"] .sugg-item { background: #ffffff; }
:root[data-theme="light"] .sugg-item button:hover { color: var(--text); background: rgba(20, 20, 50, .06); }
:root[data-theme="light"] .opt-say { background: rgba(20, 20, 50, .05); border-color: var(--border); }
:root[data-theme="light"] .acct-bar { background: rgba(20, 20, 50, .07); }
:root[data-theme="light"] .btn-google { border-color: var(--border); }
:root[data-theme="light"] .opt-main h1, :root[data-theme="light"] .opt-main h2, :root[data-theme="light"] .opt-main h3, :root[data-theme="light"] .opt-row b, :root[data-theme="light"] .opt-label { color: var(--text); }

/* Transición suave al cambiar de tema */
:root.theme-anim, :root.theme-anim * { transition: background-color .35s ease, border-color .35s ease, color .35s ease !important; }

/* La nube blanca necesita algo de contraste sobre fondo claro */
:root[data-theme="light"] .mascot svg { filter: drop-shadow(0 6px 12px rgba(80, 80, 160, .28)); }

/* ---- Letras en modo claro ---- */
:root[data-theme="light"] .lyr-wrap.bg-stars { background: radial-gradient(1px 1px at 12% 20%, #666 50%, transparent), radial-gradient(1px 1px at 78% 12%, #666 50%, transparent), radial-gradient(1.5px 1.5px at 40% 65%, #666 50%, transparent), radial-gradient(1px 1px at 88% 80%, #666 50%, transparent), radial-gradient(1px 1px at 25% 90%, #666 50%, transparent), radial-gradient(1px 1px at 60% 35%, #666 50%, transparent), radial-gradient(1px 1px at 5% 55%, #666 50%, transparent), linear-gradient(160deg, rgba(200,180,220,.4), rgba(240,240,245,.8)); }
:root[data-theme="light"] .lyr-wrap.bg-purple { background: linear-gradient(160deg, rgba(200,150,230,.3), rgba(250,245,255,.8)); }
:root[data-theme="light"] .lyr-wrap.bg-glass { background: rgba(100,100,150,.08); }
:root[data-theme="light"] .lyr-wrap.bg-dark { background: linear-gradient(160deg, rgba(200,180,220,.3), rgba(240,240,245,.8)); }
:root[data-theme="light"] .lyr-line { color: #5d4ba8; }
:root[data-theme="light"] .lyr-line.done { color: #8b6ba8; opacity: .65; }
:root[data-theme="light"] .lyr-line.now { color: #1a0b2e; opacity: 1; }
:root[data-theme="light"] .lyr-line.now .ch { color: #6d4ee8; }
:root[data-theme="light"] .lyr-line.now .ch.on { color: #4c2aa8; text-shadow: 0 0 8px rgba(109,78,232,.4); }
:root[data-theme="light"] .meteor { background: rgba(109,78,232,.2); box-shadow: 0 0 8px rgba(109,78,232,.3); }

/* ---- Bar Live en modo claro ---- */
:root[data-theme="light"] .live-overlay { background: #f6f6fb; color: #17182a; }
:root[data-theme="light"] .live-top { color: #5d6078; background: #ffffff; border-bottom: 1px solid #e2e2ee; }
:root[data-theme="light"] .live-tag { color: #17182a; }
:root[data-theme="light"] .live-dot { background: #059669; }
:root[data-theme="light"] .live-stage { background: linear-gradient(135deg, rgba(109,78,232,.08), rgba(14,159,191,.08)); }
:root[data-theme="light"] .live-state { color: #5d6078; }
:root[data-theme="light"] .live-caption { color: #17182a; }
:root[data-theme="light"] .live-bar { background: #ffffff; border-top: 1px solid #e2e2ee; }
:root[data-theme="light"] .live-btn { background: #f0f0f7; color: #17182a; }
:root[data-theme="light"] .live-btn:hover { background: #e2e2ee; }
:root[data-theme="light"] .live-btn.on { background: #6d4ee8; color: #ffffff; }
:root[data-theme="light"] .live-btn.end { background: #dc2626; color: #ffffff; }
:root[data-theme="light"] .live-lbl { color: #5d6078; }
:root[data-theme="light"] .live-halo { background: radial-gradient(closest-side, rgba(109,78,232,.4), transparent), radial-gradient(closest-side at 30% 60%, rgba(14,159,191,.3), transparent), radial-gradient(closest-side at 70% 40%, rgba(249,168,212,.2), transparent); }