/* ══════════════════════════════════════════════════════ AIMANDJOY — MODO CLARO LILA Se activa agregando la clase "light-mode" al . No modifica styles.css — solo sobrescribe por encima. ══════════════════════════════════════════════════════ */ /* ── Base: fondo y texto ── */ body.light-mode.aj-bg-zinc { background: linear-gradient(160deg, #f6f3fc 0%, #efe9fb 55%, #eae2f9 100%) !important; color: #16101f !important; font-size: 1.08em; } body.light-mode { color-scheme: light; } /* ── Título principal (tiene estilos inline en el HTML, necesita !important) ── */ body.light-mode #welcome-text h1 { font-size: clamp(1.9rem, 4.6vw, 3.3rem) !important; } body.light-mode #welcome-text h1 span:first-child { color: #16101f !important; } body.light-mode #welcome-text h1 span:last-child { color: #1a7a08 !important; } body.light-mode #welcome-text p { color: #4a4358 !important; font-size: clamp(0.98rem, 1.9vw, 1.18rem) !important; line-height: 1.75 !important; } body.light-mode #welcome-text p strong { color: #2a2438 !important; } /* ── Palabras cosechables ── */ body.light-mode .word { color: #2e2838; font-size: 1.05em; } body.light-mode .word:hover { background: rgba(130,80,255,0.16); color: #5a1fc4; text-shadow: none; } body.light-mode .word.harvested { color: rgba(130,80,255,0.45); background: rgba(130,80,255,0.08); } /* ── Área de cosecha de palabras (tiene fondo inline en el HTML, necesita !important) ── */ body.light-mode #selectable-content { background: rgba(130,80,255,0.05) !important; border-color: rgba(130,80,255,0.18) !important; } /* ── Navbar ── */ body.light-mode #main-nav { background: rgba(255,255,255,0.92) !important; border-bottom: 1px solid rgba(130,80,255,0.18); box-shadow: 0 2px 20px rgba(130,80,255,0.08); } body.light-mode .flask-subtitle { color: #4a4358 !important; font-size: 13px !important; } body.light-mode .nav-and { color: #2a2438 !important; } body.light-mode .nav-title { font-size: 1.5rem !important; } /* ── Menús desplegables del header (idioma / páginas) ── */ body.light-mode .nav-lang-btn, body.light-mode .nav-menu-btn { background: rgba(130,80,255,0.06) !important; border-color: rgba(130,80,255,0.25) !important; } body.light-mode .nav-menu-btn { color: #5a1fc4 !important; } body.light-mode .nav-lang-code { color: #4a4358 !important; } body.light-mode .nav-lang-menu, body.light-mode .nav-menu-dropdown { background: #ffffff !important; border-color: rgba(130,80,255,0.2) !important; } body.light-mode .nav-lang-item, body.light-mode .nav-menu-item { color: #2a2438 !important; } body.light-mode .nav-menu-item svg { color: #8a7fa8 !important; } body.light-mode .nav-lang-item:hover, body.light-mode .nav-menu-item:hover { background: rgba(130,80,255,0.08) !important; } body.light-mode .nav-lang-item.active { background: rgba(130,80,255,0.1) !important; color: #5a1fc4 !important; } body.light-mode .nav-menu-sep { background: rgba(0,0,0,0.08) !important; } body.light-mode .nav-phone { background: rgba(255,160,0,0.1) !important; } /* ── Pestañas laterales (mag-tab) ── */ body.light-mode .mag-tab { background: rgba(255,255,255,0.92) !important; } body.light-mode .mag-tab .tab-label { color: #4a4358; } /* ── Panel del Matraz ── */ body.light-mode .flask-shell { background: linear-gradient(to bottom, rgba(130,80,255,0.10), rgba(130,80,255,0.03)) !important; border-color: rgba(130,80,255,0.35) !important; box-shadow: 0 0 50px rgba(130,80,255,0.15) !important; } /* ── Drawers (Audio / Tools / Wellness) ── */ body.light-mode .drawer-shell, body.light-mode .drawer-header { background: #ffffff !important; } body.light-mode .drawer-header { border-bottom-color: rgba(130,80,255,0.15) !important; } body.light-mode .drawer-close { border-color: rgba(130,80,255,0.2); color: #4a4358; } body.light-mode .dtab { border-color: rgba(130,80,255,0.18); color: #4a4358; } body.light-mode .dsection-label { color: #5a5268 !important; } /* ── Tarjetas / chips genéricos (mismo patrón repetido en varios componentes) ── */ body.light-mode .row-toggle, body.light-mode .tool-btn, body.light-mode .amb-btn, body.light-mode .audio-status, body.light-mode .tools-status, body.light-mode .pill-card, body.light-mode .audio-master-row, body.light-mode .config-input, body.light-mode .wellness-input, body.light-mode .lang-select, body.light-mode #input-bar { background: rgba(130,80,255,0.05) !important; border-color: rgba(130,80,255,0.18) !important; color: #2a2438; } body.light-mode .row-toggle-info p, body.light-mode .tool-btn .tb-info p, body.light-mode .pill-info p, body.light-mode #paste-area, body.light-mode .config-input, body.light-mode .wellness-input { color: #2a2438 !important; } body.light-mode .row-toggle-info span, body.light-mode .tool-btn .tb-info span, body.light-mode .pill-info span, body.light-mode .amb-btn, body.light-mode .audio-status, body.light-mode .tools-status, body.light-mode .vol-label, body.light-mode .timer-sub, body.light-mode #speech2-feedback { color: #4a4358 !important; } body.light-mode #paste-area::placeholder, body.light-mode .config-input::placeholder, body.light-mode .wellness-input::placeholder { color: #8a7fa8 !important; } /* ── Panel Gemini Central ── */ body.light-mode #gemini-central { background: rgba(255,255,255,0.96) !important; border-color: rgba(130,80,255,0.25) !important; } body.light-mode .gemini-central-title { color: #5a5268 !important; } body.light-mode #gemini-central-output { color: #2a2438 !important; } /* ── Popup de bienestar ── */ body.light-mode .wellness-card { background: rgba(255,255,255,0.98) !important; } body.light-mode .wellness-msg { color: #4a4358 !important; } /* ── Timer ── */ body.light-mode .timer-minutes { color: #2a2438 !important; } body.light-mode .ring-bg { stroke: rgba(130,80,255,0.12) !important; } /* ── Acentos de texto sobre fondo claro (los neón puros pierden contraste en blanco) ── */ body.light-mode .nav-form-badge { color: #0891a8; } body.light-mode .gca-btn { color: #1a7a08; border-color: rgba(26,122,8,0.35); background: rgba(26,122,8,0.06); } body.light-mode .gca-btn:hover { background: rgba(26,122,8,0.15); } body.light-mode .gca-btn.tts { color: #6b2fd6; border-color: rgba(107,47,214,0.4); background: rgba(107,47,214,0.08); } /* ── Toggle de modo claro/oscuro (botón nuevo) ── */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(182,240,0,0.35); background: rgba(182,240,0,0.06); color: #b6f000; font-size: 15px; cursor: none; transition: all 0.2s; } .theme-toggle-btn:hover { background: rgba(182,240,0,0.15); border-color: #b6f000; } body.light-mode .theme-toggle-btn { border-color: rgba(130,80,255,0.4); background: rgba(130,80,255,0.08); color: #6b2fd6; } body.light-mode .theme-toggle-btn:hover { background: rgba(130,80,255,0.18); border-color: #8250ff; } /* ── Header limpio en modo claro ── */ body.light-mode .lang-btn { color: #5a5268; } body.light-mode .lang-btn:hover { color: #2a2438; background: rgba(130,80,255,0.08); } body.light-mode .lang-btn.active { background: rgba(130,80,255,0.12); color: #5a1fc4; border: 1px solid rgba(130,80,255,0.35); } body.light-mode .tremor-label { color: #4a4358; } body.light-mode .nav-form-badge { color: #0891a8; border-color: rgba(8,145,168,0.3); background: rgba(8,145,168,0.06); } /* Tipografía aún más legible en light */ body.light-mode { font-size: 1.1em; } body.light-mode #selectable-content { font-size: 1.1rem !important; line-height: 2.4 !important; } body.light-mode .word { font-size: 1.08em; color: #2a2438; }