/* ══════════════════════════════════════════════════════════════ TEMA CLARO — Override de variables CSS Se activa con data-theme="light" en ══════════════════════════════════════════════════════════════ */ html[data-theme="light"] { color-scheme: light; } html[data-theme="light"] body { background: #f4f5f8; } html[data-theme="light"]:root, html[data-theme="light"] { /* Fondos */ --bg-primary: #ffffff; --bg-secondary: #f7f8fa; --bg-tertiary: #eef0f4; --bg-sidebar: #f0f2f6; --bg-input: #ffffff; --bg-hover: rgba(0,0,0,0.04); --bg-active: rgba(0,0,0,0.06); /* Texto */ --text-primary: #1a1a2e; --text-secondary: #4a4a68; --text-muted: #8a8aa0; --text-accent: #0277bd; /* Acento (más oscuro que en dark para mejor contraste sobre blanco) */ --accent: #0288d1; --accent-hover: #0277bd; --accent-dim: rgba(2,136,209,0.10); /* Estados */ --success: #43a047; --warning: #f57c00; --danger: #e53935; /* Bordes */ --border: rgba(0,0,0,0.10); --border-hover: rgba(0,0,0,0.18); } /* Login background (gradient) en claro */ html[data-theme="light"] #login-view { background: linear-gradient(135deg, #ffffff 0%, #eef0f4 50%, #e0e7f0 100%) !important; } /* Scrollbars en claro */ html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); } /* Bloques de código siempre en oscuro (son más legibles así) */ html[data-theme="light"] .message-body pre { background: #1e1e2e !important; border-color: #2d2d44 !important; color: #e8e8f0 !important; } html[data-theme="light"] .message-body pre code { background: transparent !important; color: #e8e8f0 !important; } html[data-theme="light"] .code-copy-btn { background: rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.7) !important; } html[data-theme="light"] .code-copy-btn:hover { background: rgba(255,255,255,0.2) !important; color: #fff !important; } /* Inline code en claro */ html[data-theme="light"] .message-body code { background: rgba(2,136,209,0.08) !important; color: #0277bd !important; } /* Thinking block en claro */ html[data-theme="light"] .thinking-block { border-color: rgba(245,124,0,0.25); } html[data-theme="light"] .thinking-content { background: #fff8e1 !important; color: #5a5a70 !important; } /* Blockquote */ html[data-theme="light"] .message-body blockquote { background: rgba(2,136,209,0.06); color: #4a4a68; } /* Avatar del usuario y asistente en claro */ html[data-theme="light"] .message.user .message-avatar { background: rgba(2,136,209,0.12); color: #0277bd; } html[data-theme="light"] .message.assistant .message-avatar { background: rgba(67,160,71,0.12); color: #2e7d32; } /* Shadows en claro (más visibles) */ html[data-theme="light"] .modal-card, html[data-theme="light"] .tags-manager-card, html[data-theme="light"] .chat-tagger-card, html[data-theme="light"] .templates-picker-card, html[data-theme="light"] .login-card { box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important; } html[data-theme="light"] #sidebar { box-shadow: 1px 0 0 rgba(0,0,0,0.04); } /* Tag dots un pelín más oscuros en claro */ html[data-theme="light"] .tag-dot { box-shadow: 0 0 0 1px rgba(0,0,0,0.08); } /* Input del botón enviar en claro */ html[data-theme="light"] #btn-send { color: #ffffff; } html[data-theme="light"] #btn-send:disabled { opacity: 0.35; } /* Botones ghost en claro */ html[data-theme="light"] .s-btn-ghost, html[data-theme="light"] .btn-ghost { background: transparent; border-color: rgba(0,0,0,0.15); } /* Mensaje verified badge mejor contraste */ html[data-theme="light"] .verified-badge { background: rgba(67,160,71,0.12); color: #2e7d32; border-color: rgba(67,160,71,0.3); } /* Usage badge en claro */ html[data-theme="light"] .usage-badge { background: rgba(0,0,0,0.04); } /* ══════════════════════════════════════════════════════════════ THEME SWITCHER (botón en sidebar y en ajustes) ══════════════════════════════════════════════════════════════ */ .theme-switcher { display: flex; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; gap: 2px; } .theme-option { flex: 1; padding: 8px 12px; font-size: 12px; color: var(--text-muted); background: transparent; border: none; border-radius: 6px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; } .theme-option:hover { color: var(--text-secondary); background: var(--bg-hover); } .theme-option.active { background: var(--accent); color: #ffffff; } html[data-theme="light"] .theme-option.active { color: #ffffff; } /* Botón rápido de tema en sidebar footer */ .sidebar-theme-btn { padding: 8px; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-xs); cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; } .sidebar-theme-btn:hover { color: var(--accent); border-color: var(--accent); }