/* ============================================================================= PATH: static/css/themes.css DESCRIPTION: Sistema de temas visuales (12 temas + personalizado). Define variables CSS por tema (--bg-primary, --bg-secondary, --text-primary, --text-secondary, --accent, --border) y reglas globales que las usan. FUNCIONES: - Definir variables por body.theme-* (theme-dark-blue, theme-light, ...) - Transición suave entre temas (* { transition }) - Aplicar variables a body, a, input, button, header, sidebar, cards CONNECTS TO: futuristic.css (respeta var(--bg-primary) en body), layout_futuristic.html CALLED BY: templates/layout_futuristic.html (link en como primera hoja de estilos) USES: Ninguno (es la fuente de variables de tema) ============================================================================= */ /* --- Transición suave entre temas --- */ * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* Tema fijo por defecto: blanco y negro (layout aplica theme-bw siempre) */ body, body.theme-bw { --bg-primary: #0a0a0a; --bg-secondary: #141414; --bg-tertiary: #1a1a1a; --text-primary: #ffffff; --text-secondary: #c4c4c4; --accent: #e8e8e8; --accent-secondary: #ffffff; --border: #404040; } /* ============================================================ 1. 🌙 DARK BLUE — Contraste 8.2:1 ✅ WCAG AAA ============================================================ */ body.theme-dark-blue { --bg-primary: #1a2340; --bg-secondary: #243058; --text-primary: #E8F4FD; --text-secondary: #A8C8E8; --accent: #4A90D9; --border: #2E4070; } /* ============================================================ 2. ☀️ LIGHT — Contraste 9.1:1 ✅ WCAG AAA ============================================================ */ body.theme-light { --bg-primary: #F5F5F5; --bg-secondary: #FFFFFF; --text-primary: #1A1A2E; --text-secondary: #4A4A6A; --accent: #5B5BD6; --border: #DCDCE0; } /* ============================================================ 3. ❄️ ICE — Contraste 7.4:1 ✅ WCAG AAA ============================================================ */ body.theme-ice { --bg-primary: #C8EEF5; --bg-secondary: #E0F7FC; --text-primary: #0D3B4F; --text-secondary: #1A5F7A; --accent: #00B4D8; --border: #90D4E8; } /* ============================================================ 4. 💜 SOCIETY — Contraste 7.8:1 ✅ WCAG AAA ============================================================ */ body.theme-society { --bg-primary: #2D1B4E; --bg-secondary: #3D2560; --text-primary: #E0D4FF; --text-secondary: #B8A8E8; --accent: #9B59B6; --border: #5D3A8A; } /* ============================================================ 5. 🌸 PASTEL — Contraste 7.1:1 ✅ WCAG AAA ============================================================ */ body.theme-pastel { --bg-primary: #F0D6F5; --bg-secondary: #F8E8FC; --text-primary: #3D1A50; --text-secondary: #6B3A7D; --accent: #C77DFF; --border: #D4A8E8; } /* ============================================================ 6. ⚡ NEON — Contraste 14.3:1 ✅ WCAG AAA ============================================================ */ body.theme-neon { --bg-primary: #0D0D0D; --bg-secondary: #1A1A1A; --text-primary: #00FF88; --text-secondary: #FFFFFF; --accent: #00FF88; --border: #1F3A2A; } /* ============================================================ 7. 🌅 SUNSET — Contraste 10.5:1 ✅ WCAG AAA ============================================================ */ body.theme-sunset { --bg-primary: #1A0A00; --bg-secondary: #2E1200; --text-primary: #FFD08A; --text-secondary: #FFA040; --accent: #FF6B35; --border: #4A2000; } /* ============================================================ 8. 🌊 OCEAN — Contraste 9.7:1 ✅ WCAG AAA ============================================================ */ body.theme-ocean { --bg-primary: #0A1628; --bg-secondary: #122040; --text-primary: #7EECEA; --text-secondary: #A8E8F0; --accent: #00B4D8; --border: #1A3A5C; } /* ============================================================ 9. 🌌 AURORA — Vivo y shining: verde esmeralda, teal, fondos oscuros (todo el sistema) ============================================================ */ body.theme-aurora, body.theme-aurora-borealis { --bg-primary: #0c1222; --bg-secondary: #1a2535; --bg-tertiary: #1e2a3d; --text-primary: #5FFFB8; --text-secondary: #94e8c8; --text-muted: #64748b; --accent: #2DD4BF; --accent-secondary: #4DFFB4; --border: #2DD4BF; --text-on-accent: #0c1222; } body.theme-aurora, body.theme-aurora-borealis { background-color: #0c1222 !important; background-image: none !important; color: #5FFFB8 !important; } /* ========== AURORA: Header, sidebar, cards (vivo y shining) ========== */ body.theme-aurora .header, body.theme-aurora-borealis .header { background: #1a2535 !important; border-bottom: 2px solid #2DD4BF; box-shadow: 0 4px 20px rgba(45, 212, 191, 0.2); } body.theme-aurora .left-sidebar, body.theme-aurora .right-sidebar, body.theme-aurora-borealis .left-sidebar, body.theme-aurora-borealis .right-sidebar { background-color: #1a2535 !important; border-color: #2DD4BF !important; color: #5FFFB8 !important; } body.theme-aurora .sidebar-item, body.theme-aurora .header-username, body.theme-aurora .header-handle, body.theme-aurora .status-name, body.theme-aurora-borealis .sidebar-item, body.theme-aurora-borealis .header-username, body.theme-aurora-borealis .header-handle, body.theme-aurora-borealis .status-name { color: #5FFFB8 !important; text-shadow: 0 0 10px rgba(95, 255, 184, 0.25); } body.theme-aurora .sidebar-item:hover, body.theme-aurora .header-nav-link:hover, body.theme-aurora-borealis .sidebar-item:hover, body.theme-aurora-borealis .header-nav-link:hover { background: #1e2a3d !important; color: #2DD4BF !important; } body.theme-aurora .sidebar-item.active, body.theme-aurora .header-nav-link.active, body.theme-aurora-borealis .sidebar-item.active, body.theme-aurora-borealis .header-nav-link.active { background: #2DD4BF !important; color: #0c1222 !important; border-color: #2DD4BF !important; } body.theme-aurora .glass-card, body.theme-aurora .post-card, body.theme-aurora .create-post-card, body.theme-aurora .settings-section, body.theme-aurora .modal-content, body.theme-aurora-borealis .glass-card, body.theme-aurora-borealis .post-card, body.theme-aurora-borealis .create-post-card, body.theme-aurora-borealis .settings-section, body.theme-aurora-borealis .modal-content { background: #1a2535 !important; border: 1px solid #2DD4BF !important; color: #5FFFB8 !important; box-shadow: 0 0 20px rgba(45, 212, 191, 0.1); } body.theme-aurora .form-input, body.theme-aurora input:not([type="checkbox"]):not([type="radio"]), body.theme-aurora textarea, body.theme-aurora select, body.theme-aurora-borealis .form-input, body.theme-aurora-borealis input:not([type="checkbox"]):not([type="radio"]), body.theme-aurora-borealis textarea, body.theme-aurora-borealis select { background: #0c1222 !important; border: 1px solid #2DD4BF !important; color: #5FFFB8 !important; } body.theme-aurora input::placeholder, body.theme-aurora textarea::placeholder, body.theme-aurora-borealis input::placeholder, body.theme-aurora-borealis textarea::placeholder { color: #64748b; } /* ========== AURORA: Botones ========== */ body.theme-aurora .btn-primary, body.theme-aurora .btn.btn-primary, body.theme-aurora button.btn-primary, body.theme-aurora a.btn.primary, body.theme-aurora input[type="submit"].btn-primary, body.theme-aurora .create-post-card .publish-btn, body.theme-aurora-borealis .btn-primary, body.theme-aurora-borealis .btn.btn-primary, body.theme-aurora-borealis button.btn-primary, body.theme-aurora-borealis a.btn.primary, body.theme-aurora-borealis input[type="submit"].btn-primary, body.theme-aurora-borealis .create-post-card .publish-btn { background: #2DD4BF !important; color: #0c1222 !important; -webkit-text-fill-color: #0c1222 !important; border: 1px solid #2DD4BF !important; box-shadow: 0 0 14px rgba(45, 212, 191, 0.35); } body.theme-aurora .btn-primary:hover, body.theme-aurora .btn.primary:hover, body.theme-aurora-borealis .btn-primary:hover, body.theme-aurora-borealis .btn.primary:hover { background: #5EEAD4 !important; border-color: #5EEAD4 !important; box-shadow: 0 0 20px rgba(45, 212, 191, 0.5); } body.theme-aurora .btn-secondary, body.theme-aurora a.btn-secondary, body.theme-aurora-borealis .btn-secondary, body.theme-aurora-borealis a.btn-secondary { background: transparent !important; border: 1px solid #2DD4BF !important; color: #2DD4BF !important; -webkit-text-fill-color: #2DD4BF !important; } body.theme-aurora .btn-secondary:hover, body.theme-aurora-borealis .btn-secondary:hover { background: #1e2a3d !important; color: #5FFFB8 !important; -webkit-text-fill-color: #5FFFB8 !important; } /* ========== AURORA: Widgets (Mi Música, Galería, Videos) ========== */ body.theme-aurora .right-sidebar .music-widget, body.theme-aurora .right-sidebar .gallery-section, body.theme-aurora .right-sidebar .gallery-cinematica, body.theme-aurora .right-sidebar .videos-section, body.theme-aurora-borealis .right-sidebar .music-widget, body.theme-aurora-borealis .right-sidebar .gallery-section, body.theme-aurora-borealis .right-sidebar .gallery-cinematica, body.theme-aurora-borealis .right-sidebar .videos-section { background: #1a2535 !important; border-color: #2DD4BF !important; color: #5FFFB8 !important; } body.theme-aurora .right-sidebar .music-widget h3, body.theme-aurora .right-sidebar .music-widget .song-title-main, body.theme-aurora .right-sidebar .section-title, body.theme-aurora .right-sidebar .gallery-section h3, body.theme-aurora-borealis .right-sidebar .music-widget h3, body.theme-aurora-borealis .right-sidebar .music-widget .song-title-main, body.theme-aurora-borealis .right-sidebar .section-title, body.theme-aurora-borealis .right-sidebar .gallery-section h3 { color: #5FFFB8 !important; text-shadow: 0 0 10px rgba(95, 255, 184, 0.2); } body.theme-aurora .right-sidebar .music-widget .btn-primary, body.theme-aurora .right-sidebar .music-widget .songs-header .btn, body.theme-aurora-borealis .right-sidebar .music-widget .btn-primary, body.theme-aurora-borealis .right-sidebar .music-widget .songs-header .btn { background: #1e2a3d !important; border: 1px solid #2DD4BF !important; color: #5FFFB8 !important; -webkit-text-fill-color: #5FFFB8 !important; } body.theme-aurora .right-sidebar .music-widget .btn-control, body.theme-aurora .right-sidebar .music-widget .btn-control-play, body.theme-aurora-borealis .right-sidebar .music-widget .btn-control, body.theme-aurora-borealis .right-sidebar .music-widget .btn-control-play { background: #1e2a3d !important; border-color: #2DD4BF !important; color: #5FFFB8 !important; } body.theme-aurora .right-sidebar .music-widget .song-item, body.theme-aurora .right-sidebar .music-widget .current-playing, body.theme-aurora-borealis .right-sidebar .music-widget .song-item, body.theme-aurora-borealis .right-sidebar .music-widget .current-playing { background: #0c1222 !important; border-color: rgba(45, 212, 191, 0.4) !important; color: #5FFFB8 !important; } body.theme-aurora .right-sidebar .music-widget input, body.theme-aurora .right-sidebar .music-widget select, body.theme-aurora-borealis .right-sidebar .music-widget input, body.theme-aurora-borealis .right-sidebar .music-widget select { background: #0c1222 !important; border-color: #2DD4BF !important; color: #5FFFB8 !important; } body.theme-aurora .right-sidebar .music-widget .modal-content, body.theme-aurora-borealis .right-sidebar .music-widget .modal-content { background: #1a2535 !important; border-color: #2DD4BF !important; color: #5FFFB8 !important; } body.theme-aurora .right-sidebar .music-widget .modal .btn, body.theme-aurora .right-sidebar .music-widget .modal .btn-primary, body.theme-aurora-borealis .right-sidebar .music-widget .modal .btn, body.theme-aurora-borealis .right-sidebar .music-widget .modal .btn-primary { background: #2DD4BF !important; color: #0c1222 !important; -webkit-text-fill-color: #0c1222 !important; } /* ========== AURORA: Auth, Admin, Donaciones ========== */ body.theme-aurora .topbar, body.theme-aurora-borealis .topbar { background: #1a2535 !important; border-bottom: 2px solid #2DD4BF; } body.theme-aurora .auth-card, body.theme-aurora .card, body.theme-aurora-borealis .auth-card, body.theme-aurora-borealis .card { background: #1a2535 !important; border: 2px solid #2DD4BF !important; color: #5FFFB8 !important; } body.theme-aurora .auth-card h1, body.theme-aurora .auth-card label, body.theme-aurora-borealis .auth-card h1, body.theme-aurora-borealis .auth-card label { color: #5FFFB8 !important; } body.theme-aurora .auth-card input, body.theme-aurora-borealis .auth-card input { background: #0c1222 !important; border: 2px solid #2DD4BF !important; color: #5FFFB8 !important; } body.theme-aurora .btn.primary, body.theme-aurora-borealis .btn.primary { background: #2DD4BF !important; color: #0c1222 !important; -webkit-text-fill-color: #0c1222 !important; border: none !important; } body.theme-aurora .admin-wrapper, body.theme-aurora-borealis .admin-wrapper { background: #0c1222 !important; } body.theme-aurora .admin-sidebar, body.theme-aurora-borealis .admin-sidebar { background: #1a2535 !important; border-right: 2px solid #2DD4BF; } body.theme-aurora .admin-main, body.theme-aurora-borealis .admin-main { background: #0c1222 !important; } body.theme-aurora .admin-sidebar .sidebar-brand, body.theme-aurora .admin-sidebar .sidebar-link, body.theme-aurora-borealis .admin-sidebar .sidebar-brand, body.theme-aurora-borealis .admin-sidebar .sidebar-link { color: #5FFFB8 !important; } body.theme-aurora .admin-sidebar .sidebar-link:hover, body.theme-aurora .admin-sidebar .sidebar-link.active, body.theme-aurora-borealis .admin-sidebar .sidebar-link:hover, body.theme-aurora-borealis .admin-sidebar .sidebar-link.active { background: #1e2a3d; border-color: #2DD4BF; color: #2DD4BF !important; } body.theme-aurora .donations-module .donate-modal, body.theme-aurora-borealis .donations-module .donate-modal { background: #1a2535; border: 2px solid #2DD4BF; } body.theme-aurora .donations-module .donate-modal-title, body.theme-aurora .donations-module .donate-modal-close, body.theme-aurora-borealis .donations-module .donate-modal-title, body.theme-aurora-borealis .donations-module .donate-modal-close { color: #5FFFB8 !important; } body.theme-aurora .donations-module .donate-amount-btn, body.theme-aurora .donations-module .donate-frequency-btn, body.theme-aurora .donations-module .donate-payment-btn, body.theme-aurora-borealis .donations-module .donate-amount-btn, body.theme-aurora-borealis .donations-module .donate-frequency-btn, body.theme-aurora-borealis .donations-module .donate-payment-btn { background: #1e2a3d; border-color: #2DD4BF; color: #5FFFB8; } body.theme-aurora .donations-module .donate-amount-btn.selected, body.theme-aurora .donations-module .donate-frequency-btn.selected, body.theme-aurora-borealis .donations-module .donate-amount-btn.selected, body.theme-aurora-borealis .donations-module .donate-frequency-btn.selected { background: #2DD4BF; color: #0c1222 !important; } body.theme-aurora .donations-module .donate-submit-btn, body.theme-aurora .donations-module .donate-btn, body.theme-aurora-borealis .donations-module .donate-submit-btn, body.theme-aurora-borealis .donations-module .donate-btn { background: #2DD4BF !important; color: #0c1222 !important; border: none !important; } body.theme-aurora .donations-module .donate-input, body.theme-aurora .donations-module .donate-select, body.theme-aurora-borealis .donations-module .donate-input, body.theme-aurora-borealis .donations-module .donate-select { background: #0c1222; border-color: #2DD4BF; color: #5FFFB8; } /* ========== AURORA: Títulos, main-feed, páginas Música/Fotos/Videos, error ========== */ body.theme-aurora .main-feed h1, body.theme-aurora .main-feed h2, body.theme-aurora .main-feed .page-title, body.theme-aurora .music-page-container h1, body.theme-aurora .music-page-container h2, body.theme-aurora .photos-page-container h1, body.theme-aurora .photos-page-container h2, body.theme-aurora .videos-container-yt h1, body.theme-aurora .videos-container-yt h2, body.theme-aurora .section-title, body.theme-aurora-borealis .main-feed h1, body.theme-aurora-borealis .main-feed h2, body.theme-aurora-borealis .main-feed .page-title, body.theme-aurora-borealis .music-page-container h1, body.theme-aurora-borealis .music-page-container h2, body.theme-aurora-borealis .photos-page-container h1, body.theme-aurora-borealis .photos-page-container h2, body.theme-aurora-borealis .videos-container-yt h1, body.theme-aurora-borealis .videos-container-yt h2, body.theme-aurora-borealis .section-title { color: #5FFFB8 !important; background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: #5FFFB8 !important; text-shadow: 0 0 12px rgba(95, 255, 184, 0.3), 0 0 24px rgba(95, 255, 184, 0.15); } body.theme-aurora.page-music-module, body.theme-aurora.page-photos-module, body.theme-aurora-borealis.page-music-module, body.theme-aurora-borealis.page-photos-module { background: #0c1222 !important; } body.theme-aurora .video-card, body.theme-aurora .photo-card, body.theme-aurora-borealis .video-card, body.theme-aurora-borealis .photo-card { background: #1a2535 !important; border-color: rgba(45, 212, 191, 0.5) !important; color: #5FFFB8 !important; } body.theme-aurora .error-card, body.theme-aurora-borealis .error-card { background: #1a2535; border: 2px solid #2DD4BF; color: #5FFFB8; } /* ========== AURORA: Sidebar Ir en Vivo / Donar (rojo CTA), placeholders, botones Crear, búsqueda ========== */ body.theme-aurora .sidebar-item-go-live, body.theme-aurora-borealis .sidebar-item-go-live { background: #dc3545 !important; border-color: #dc3545 !important; color: #ffffff !important; } body.theme-aurora .sidebar-item-go-live:hover, body.theme-aurora-borealis .sidebar-item-go-live:hover { background: #c82333 !important; color: #ffffff !important; } body.theme-aurora .right-sidebar .sidebar-placeholder-text, body.theme-aurora .right-sidebar [style*="text-align:center"][style*="padding"], body.theme-aurora .right-sidebar div[style*="No hay historias"], body.theme-aurora .right-sidebar div[style*="no_suggestions"], body.theme-aurora .suggested-friends-section .sidebar-placeholder-text, body.theme-aurora .sponsored-placeholder-text, body.theme-aurora .sponsored-placeholder-desc, body.theme-aurora-borealis .right-sidebar .sidebar-placeholder-text, body.theme-aurora-borealis .right-sidebar [style*="text-align:center"][style*="padding"], body.theme-aurora-borealis .right-sidebar div[style*="No hay historias"], body.theme-aurora-borealis .right-sidebar div[style*="no_suggestions"], body.theme-aurora-borealis .suggested-friends-section .sidebar-placeholder-text, body.theme-aurora-borealis .sponsored-placeholder-text, body.theme-aurora-borealis .sponsored-placeholder-desc { color: #94e8c8 !important; } body.theme-aurora .right-sidebar .section-action-btn, body.theme-aurora .right-sidebar .upload-btn, body.theme-aurora .music-widget .songs-header .btn, body.theme-aurora .music-widget .songs-header .btn-primary, body.theme-aurora .gallery-section .section-action-btn, body.theme-aurora .videos-section .section-action-btn, body.theme-aurora .music-page-container .upload-btn, body.theme-aurora.page-music-module .header-actions .upload-btn, body.theme-aurora-borealis .right-sidebar .section-action-btn, body.theme-aurora-borealis .right-sidebar .upload-btn, body.theme-aurora-borealis .music-widget .songs-header .btn, body.theme-aurora-borealis .music-widget .songs-header .btn-primary, body.theme-aurora-borealis .gallery-section .section-action-btn, body.theme-aurora-borealis .videos-section .section-action-btn, body.theme-aurora-borealis .music-page-container .upload-btn, body.theme-aurora-borealis.page-music-module .header-actions .upload-btn { color: #5FFFB8 !important; -webkit-text-fill-color: #5FFFB8 !important; border-color: #2DD4BF !important; background: #1e2a3d !important; } body.theme-aurora .right-sidebar .section-action-btn:hover, body.theme-aurora .music-widget .songs-header .btn:hover, body.theme-aurora .music-page-container .upload-btn:hover, body.theme-aurora.page-music-module .header-actions .upload-btn:hover, body.theme-aurora-borealis .right-sidebar .section-action-btn:hover, body.theme-aurora-borealis .music-widget .songs-header .btn:hover, body.theme-aurora-borealis .music-page-container .upload-btn:hover, body.theme-aurora-borealis.page-music-module .header-actions .upload-btn:hover { color: #2DD4BF !important; -webkit-text-fill-color: #2DD4BF !important; border-color: #2DD4BF !important; } body.theme-aurora .btn:not(.btn-primary):not(.primary):not(.btn-success):not(.btn-accent), body.theme-aurora-borealis .btn:not(.btn-primary):not(.primary):not(.btn-success):not(.btn-accent) { color: #5FFFB8 !important; border-color: #2DD4BF !important; background: #1e2a3d !important; } body.theme-aurora .btn:not(.btn-primary):not(.primary):not(.btn-success):not(.btn-accent):hover, body.theme-aurora-borealis .btn:not(.btn-primary):not(.primary):not(.btn-success):not(.btn-accent):hover { color: #2DD4BF !important; background: #1a2535 !important; } body.theme-aurora .header-search-compact input, body.theme-aurora .header-search-input, body.theme-aurora-borealis .header-search-compact input, body.theme-aurora-borealis .header-search-input { background: #0c1222 !important; border-color: #2DD4BF !important; color: #5FFFB8 !important; } body.theme-aurora .header-search-compact input::placeholder, body.theme-aurora .header-search-input::placeholder, body.theme-aurora-borealis .header-search-compact input::placeholder, body.theme-aurora-borealis .header-search-input::placeholder { color: #64748b !important; } body.theme-aurora .header-search-compact .search-icon, body.theme-aurora-borealis .header-search-compact .search-icon { color: #94e8c8 !important; } /* ========== AURORA: Salón de denominaciones (page-salon) ========== */ body.theme-aurora.page-salon, body.theme-aurora-borealis.page-salon, body.theme-aurora.page-salon .salon-fullwidth, body.theme-aurora-borealis.page-salon .salon-fullwidth, body.theme-aurora.page-salon .main-wrapper, body.theme-aurora-borealis.page-salon .main-wrapper { background: #0c1222 !important; } body.theme-aurora.page-salon .salon-header, body.theme-aurora.page-salon .salon-content .glass-card, body.theme-aurora.page-salon .salon-grid__chat .glass-card, body.theme-aurora-borealis.page-salon .salon-header, body.theme-aurora-borealis.page-salon .salon-content .glass-card, body.theme-aurora-borealis.page-salon .salon-grid__chat .glass-card { background: #1a2535 !important; border: 1px solid #2DD4BF !important; color: #5FFFB8 !important; } body.theme-aurora.page-salon .salon-header h1, body.theme-aurora.page-salon .salon-header__member-count, body.theme-aurora.page-salon .glass-card__title, body.theme-aurora.page-salon .locales-menu__title, body.theme-aurora-borealis.page-salon .salon-header h1, body.theme-aurora-borealis.page-salon .salon-header__member-count, body.theme-aurora-borealis.page-salon .glass-card__title, body.theme-aurora-borealis.page-salon .locales-menu__title { color: #5FFFB8 !important; text-shadow: 0 0 10px rgba(95, 255, 184, 0.25); } body.theme-aurora.page-salon .salon-actions .btn:not(.btn-success):not(.btn-donar-salón):not(.btn-live-cta), body.theme-aurora.page-salon .salon-actions .btn-accent:not(.btn-donar-salón), body.theme-aurora.page-salon .btn.btn-sm, body.theme-aurora-borealis.page-salon .salon-actions .btn:not(.btn-success):not(.btn-donar-salón):not(.btn-live-cta), body.theme-aurora-borealis.page-salon .salon-actions .btn-accent:not(.btn-donar-salón), body.theme-aurora-borealis.page-salon .btn.btn-sm { background: #1e2a3d !important; border: 1px solid #2DD4BF !important; color: #5FFFB8 !important; -webkit-text-fill-color: #5FFFB8 !important; } body.theme-aurora.page-salon .salon-actions .btn:not(.btn-success):hover, body.theme-aurora.page-salon .salon-actions .btn-accent:not(.btn-donar-salón):hover, body.theme-aurora-borealis.page-salon .salon-actions .btn:not(.btn-success):hover, body.theme-aurora-borealis.page-salon .salon-actions .btn-accent:not(.btn-donar-salón):hover { color: #2DD4BF !important; -webkit-text-fill-color: #2DD4BF !important; border-color: #2DD4BF !important; } body.theme-aurora.page-salon .salon-live-indicator, body.theme-aurora-borealis.page-salon .salon-live-indicator { background: #1e2a3d !important; border: 1px solid #2DD4BF !important; color: #5FFFB8 !important; -webkit-text-fill-color: #5FFFB8 !important; } body.theme-aurora.page-salon .salon-live-indicator.live-indicator--active, body.theme-aurora-borealis.page-salon .salon-live-indicator.live-indicator--active { background: rgba(16, 185, 129, 0.2) !important; border-color: #10b981 !important; color: #10b981 !important; -webkit-text-fill-color: #10b981 !important; } body.theme-aurora.page-salon .salon-join-row .salon-actions__join, body.theme-aurora.page-salon .salon-join-row .btn-success, body.theme-aurora-borealis.page-salon .salon-join-row .salon-actions__join, body.theme-aurora-borealis.page-salon .salon-join-row .btn-success { background: #2DD4BF !important; border-color: #2DD4BF !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-weight: 700 !important; font-size: 1rem !important; box-shadow: 0 0 16px rgba(45, 212, 191, 0.4); } body.theme-aurora.page-salon .salon-join-row .salon-actions__join:hover, body.theme-aurora.page-salon .salon-join-row .btn-success:hover, body.theme-aurora-borealis.page-salon .salon-join-row .salon-actions__join:hover, body.theme-aurora-borealis.page-salon .salon-join-row .btn-success:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 0 22px rgba(45, 212, 191, 0.5); } body.theme-aurora.page-salon .salon-meeting-bar, body.theme-aurora.page-salon .videocall-banner, body.theme-aurora.page-salon .iniciar-videollamada-banner, body.theme-aurora-borealis.page-salon .salon-meeting-bar, body.theme-aurora-borealis.page-salon .videocall-banner, body.theme-aurora-borealis.page-salon .iniciar-videollamada-banner { background: #1a2535 !important; border: 1px solid #2DD4BF !important; color: #94e8c8 !important; } body.theme-aurora.page-salon .salon-meeting-bar a, body.theme-aurora.page-salon .videocall-banner a, body.theme-aurora-borealis.page-salon .salon-meeting-bar a, body.theme-aurora-borealis.page-salon .videocall-banner a { color: #2DD4BF !important; } body.theme-aurora.page-salon .salon-meeting-bar .btn, body.theme-aurora.page-salon .salon-meeting-bar a.btn, body.theme-aurora.page-salon .salon-meeting-bar .btn-accent, body.theme-aurora-borealis.page-salon .salon-meeting-bar .btn, body.theme-aurora-borealis.page-salon .salon-meeting-bar a.btn, body.theme-aurora-borealis.page-salon .salon-meeting-bar .btn-accent { background: #2DD4BF !important; border-color: #2DD4BF !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-weight: 700 !important; } body.theme-aurora.page-salon .salon-meeting-bar .btn:hover, body.theme-aurora.page-salon .salon-meeting-bar a.btn:hover, body.theme-aurora-borealis.page-salon .salon-meeting-bar .btn:hover, body.theme-aurora-borealis.page-salon .salon-meeting-bar a.btn:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: #5EEAD4 !important; } body.theme-aurora.page-salon .btn-donar-salón, body.theme-aurora.page-salon .btn-live-cta, body.theme-aurora-borealis.page-salon .btn-donar-salón, body.theme-aurora-borealis.page-salon .btn-live-cta { background: #dc3545 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } body.theme-aurora.page-salon .locales-menu-list__empty, body.theme-aurora.page-salon .locales-menu-item__name, body.theme-aurora-borealis.page-salon .locales-menu-list__empty, body.theme-aurora-borealis.page-salon .locales-menu-item__name { color: #94e8c8 !important; } body.theme-aurora.page-salon .locales-menu-item__link:hover .locales-menu-item__name, body.theme-aurora-borealis.page-salon .locales-menu-item__link:hover .locales-menu-item__name { color: #2DD4BF !important; } body.theme-aurora.page-salon .chat-box__send, body.theme-aurora-borealis.page-salon .chat-box__send { background: rgba(45, 212, 191, 0.25) !important; border: 1px solid #2DD4BF !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } body.theme-aurora.page-salon .chat-box__send:hover, body.theme-aurora-borealis.page-salon .chat-box__send:hover { background: rgba(45, 212, 191, 0.4) !important; } body.theme-aurora.page-salon .chat-box__input, body.theme-aurora-borealis.page-salon .chat-box__input { background: #0c1222 !important; border: 1px solid rgba(45, 212, 191, 0.4) !important; color: #5FFFB8 !important; } body.theme-aurora.page-salon .chat-box__input::placeholder, body.theme-aurora-borealis.page-salon .chat-box__input::placeholder { color: #64748b !important; } /* ========== AURORA: Botón "Entrar" en cards de denominaciones (blanco shining) ========== */ body.theme-aurora .denominacion-card .denom-actions .btn.small, body.theme-aurora .denom-actions a.btn.small, body.theme-aurora-borealis .denominacion-card .denom-actions .btn.small, body.theme-aurora-borealis .denom-actions a.btn.small { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 0 8px rgba(255, 255, 255, 0.7), 0 0 14px rgba(255, 255, 255, 0.4); } body.theme-aurora .denominacion-card .denom-actions .btn.small:hover, body.theme-aurora .denom-actions a.btn.small:hover, body.theme-aurora-borealis .denominacion-card .denom-actions .btn.small:hover, body.theme-aurora-borealis .denom-actions a.btn.small:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.5); } /* ========== AURORA: Scrollbars, comunidad local ========== */ body.theme-aurora .right-sidebar::-webkit-scrollbar-track, body.theme-aurora .left-sidebar::-webkit-scrollbar-track, body.theme-aurora-borealis .right-sidebar::-webkit-scrollbar-track, body.theme-aurora-borealis .left-sidebar::-webkit-scrollbar-track { background: #0c1222; } body.theme-aurora .right-sidebar::-webkit-scrollbar-thumb, body.theme-aurora .left-sidebar::-webkit-scrollbar-thumb, body.theme-aurora-borealis .right-sidebar::-webkit-scrollbar-thumb, body.theme-aurora-borealis .left-sidebar::-webkit-scrollbar-thumb { background: rgba(45, 212, 191, 0.5); border-radius: 99px; } body.theme-aurora .right-sidebar, body.theme-aurora .left-sidebar, body.theme-aurora-borealis .right-sidebar, body.theme-aurora-borealis .left-sidebar { scrollbar-color: rgba(45, 212, 191, 0.5) #0c1222; } body.theme-aurora.page-community-local .community-shell, body.theme-aurora.page-community-local .community-header, body.theme-aurora-borealis.page-community-local .community-shell, body.theme-aurora-borealis.page-community-local .community-header { background: #0c1222; border-color: #2DD4BF; color: #5FFFB8; } body.theme-aurora.page-community-local .community-menu__section, body.theme-aurora.page-community-local .community-feed, body.theme-aurora.page-community-local .community-rightpanel__block, body.theme-aurora-borealis.page-community-local .community-menu__section, body.theme-aurora-borealis.page-community-local .community-feed, body.theme-aurora-borealis.page-community-local .community-rightpanel__block { background: #1a2535; border-color: #2DD4BF; color: #5FFFB8; } body.theme-aurora.page-community-local #btn-start-live, body.theme-aurora.page-community-local #btn-start-stream-url, body.theme-aurora.page-community-local .btn-live-cta-local, body.theme-aurora-borealis.page-community-local #btn-start-live, body.theme-aurora-borealis.page-community-local #btn-start-stream-url, body.theme-aurora-borealis.page-community-local .btn-live-cta-local { background: #dc3545 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ========== AURORA: Mi Música — dropdown, Previo/Siguiente (teal/verde shining) ========== */ body.theme-aurora .music-widget select, body.theme-aurora .music-widget .btn-mode, body.theme-aurora-borealis .music-widget select, body.theme-aurora-borealis .music-widget .btn-mode { background: #1e2a3d !important; border-color: #2DD4BF !important; color: #5FFFB8 !important; } body.theme-aurora .music-widget .btn-mode.active, body.theme-aurora-borealis .music-widget .btn-mode.active { border-color: #2DD4BF !important; color: #2DD4BF !important; box-shadow: 0 0 10px rgba(45, 212, 191, 0.3); } /* ============================================================ 10. 🟢 MATRIX — Tema global: fondos oscuros, cyan y verde neón (widgets, botones, todas las páginas) ============================================================ */ body.theme-matrix { --bg-primary: #0a0a0f; --bg-secondary: #1a1a2e; --bg-tertiary: #252538; --text-primary: #39ff14; --text-secondary: #94a3b8; --text-muted: #64748b; --accent: #22d3ee; --accent-secondary: #39ff14; --border: #22d3ee; --text-on-accent: #0a0a0f; } /* Aplicar en todo el sistema */ body.theme-matrix { background-color: #0a0a0f !important; background-image: none !important; color: #39ff14 !important; } /* ========== MATRIX: Header, sidebar, cards ========== */ body.theme-matrix .header { background: #1a1a2e !important; border-bottom: 2px solid #22d3ee; box-shadow: 0 4px 20px rgba(34, 211, 238, 0.15); } body.theme-matrix .left-sidebar, body.theme-matrix .right-sidebar { background-color: #1a1a2e !important; border-color: #22d3ee !important; color: #39ff14 !important; } body.theme-matrix .sidebar-item, body.theme-matrix .header-username, body.theme-matrix .header-handle, body.theme-matrix .status-name { color: #39ff14 !important; } body.theme-matrix .sidebar-item:hover, body.theme-matrix .header-nav-link:hover { background: #252538 !important; color: #22d3ee !important; } body.theme-matrix .sidebar-item.active, body.theme-matrix .header-nav-link.active { background: #22d3ee !important; color: #0a0a0f !important; border-color: #22d3ee !important; } body.theme-matrix .glass-card, body.theme-matrix .post-card, body.theme-matrix .create-post-card, body.theme-matrix .settings-section, body.theme-matrix .modal-content { background: #1a1a2e !important; border: 1px solid #22d3ee !important; color: #39ff14 !important; } body.theme-matrix .form-input, body.theme-matrix input:not([type="checkbox"]):not([type="radio"]), body.theme-matrix textarea, body.theme-matrix select { background: #0a0a0f !important; border: 1px solid #22d3ee !important; color: #39ff14 !important; } body.theme-matrix input::placeholder, body.theme-matrix textarea::placeholder { color: #64748b; } /* ========== MATRIX: Botones ========== */ body.theme-matrix .btn-primary, body.theme-matrix .btn.btn-primary, body.theme-matrix button.btn-primary, body.theme-matrix a.btn.primary, body.theme-matrix input[type="submit"].btn-primary, body.theme-matrix .create-post-card .publish-btn { background: #22d3ee !important; color: #0a0a0f !important; -webkit-text-fill-color: #0a0a0f !important; border: 1px solid #22d3ee !important; } body.theme-matrix .btn-primary:hover, body.theme-matrix .btn.primary:hover { background: #67e8f9 !important; border-color: #67e8f9 !important; } body.theme-matrix .btn-secondary, body.theme-matrix a.btn-secondary { background: transparent !important; border: 1px solid #22d3ee !important; color: #22d3ee !important; -webkit-text-fill-color: #22d3ee !important; } body.theme-matrix .btn-secondary:hover { background: #252538 !important; color: #39ff14 !important; } /* ========== MATRIX: Widgets (Mi Música, Mi Galería, etc.) ========== */ body.theme-matrix .right-sidebar .music-widget, body.theme-matrix .right-sidebar .gallery-section, body.theme-matrix .right-sidebar .gallery-cinematica, body.theme-matrix .right-sidebar .videos-section { background: #1a1a2e !important; border-color: #22d3ee !important; color: #39ff14 !important; } body.theme-matrix .right-sidebar .music-widget h3, body.theme-matrix .right-sidebar .music-widget .song-title-main, body.theme-matrix .right-sidebar .section-title, body.theme-matrix .right-sidebar .gallery-section h3 { color: #39ff14 !important; } body.theme-matrix .right-sidebar .music-widget .btn-primary, body.theme-matrix .right-sidebar .music-widget .songs-header .btn { background: #252538 !important; border: 1px solid #22d3ee !important; color: #39ff14 !important; } body.theme-matrix .right-sidebar .music-widget .btn-control, body.theme-matrix .right-sidebar .music-widget .btn-control-play { background: #252538 !important; border-color: #22d3ee !important; color: #39ff14 !important; } body.theme-matrix .right-sidebar .music-widget .song-item, body.theme-matrix .right-sidebar .music-widget .current-playing { background: #0a0a0f !important; border-color: rgba(34, 211, 238, 0.4) !important; color: #39ff14 !important; } body.theme-matrix .right-sidebar .music-widget input, body.theme-matrix .right-sidebar .music-widget select { background: #0a0a0f !important; border-color: #22d3ee !important; color: #39ff14 !important; } body.theme-matrix .right-sidebar .music-widget .modal-content { background: #1a1a2e !important; border-color: #22d3ee !important; color: #39ff14 !important; } body.theme-matrix .right-sidebar .music-widget .modal .btn, body.theme-matrix .right-sidebar .music-widget .modal .btn-primary { background: #22d3ee !important; color: #0a0a0f !important; -webkit-text-fill-color: #0a0a0f !important; } /* ========== MATRIX: Auth / Login ========== */ body.theme-matrix .topbar { background: #1a1a2e !important; border-bottom: 2px solid #22d3ee; } body.theme-matrix .auth-card, body.theme-matrix .card { background: #1a1a2e !important; border: 2px solid #22d3ee !important; color: #39ff14 !important; } body.theme-matrix .auth-card h1, body.theme-matrix .auth-card label { color: #39ff14 !important; } body.theme-matrix .auth-card input { background: #0a0a0f !important; border: 2px solid #22d3ee !important; color: #39ff14 !important; } body.theme-matrix .btn.primary { background: #22d3ee !important; color: #0a0a0f !important; -webkit-text-fill-color: #0a0a0f !important; border: none !important; } /* ========== MATRIX: Admin ========== */ body.theme-matrix .admin-wrapper { background: #0a0a0f !important; } body.theme-matrix .admin-sidebar { background: #1a1a2e !important; border-right: 2px solid #22d3ee; } body.theme-matrix .admin-main { background: #0a0a0f !important; } body.theme-matrix .admin-sidebar .sidebar-brand, body.theme-matrix .admin-sidebar .sidebar-link { color: #39ff14 !important; } body.theme-matrix .admin-sidebar .sidebar-link:hover, body.theme-matrix .admin-sidebar .sidebar-link.active { background: #252538; border-color: #22d3ee; color: #22d3ee !important; } /* ========== MATRIX: Donaciones ========== */ body.theme-matrix .donations-module .donate-modal { background: #1a1a2e; border: 2px solid #22d3ee; } body.theme-matrix .donations-module .donate-modal-title, body.theme-matrix .donations-module .donate-modal-close { color: #39ff14 !important; } body.theme-matrix .donations-module .donate-amount-btn, body.theme-matrix .donations-module .donate-frequency-btn, body.theme-matrix .donations-module .donate-payment-btn { background: #252538; border-color: #22d3ee; color: #39ff14; } body.theme-matrix .donations-module .donate-amount-btn.selected, body.theme-matrix .donations-module .donate-frequency-btn.selected { background: #22d3ee; color: #0a0a0f !important; } body.theme-matrix .donations-module .donate-submit-btn, body.theme-matrix .donations-module .donate-btn { background: #22d3ee !important; color: #0a0a0f !important; border: none !important; } body.theme-matrix .donations-module .donate-input, body.theme-matrix .donations-module .donate-select { background: #0a0a0f; border-color: #22d3ee; color: #39ff14; } /* ========== MATRIX: Comunidades / Dashboard local ========== */ body.theme-matrix.page-community-local .community-shell, body.theme-matrix.page-community-local .community-header { background: #0a0a0f; border-color: #22d3ee; color: #39ff14; } body.theme-matrix.page-community-local .community-menu__section, body.theme-matrix.page-community-local .community-feed, body.theme-matrix.page-community-local .community-rightpanel__block { background: #1a1a2e; border-color: #22d3ee; color: #39ff14; } body.theme-matrix.page-community-local #btn-start-live, body.theme-matrix.page-community-local #btn-start-stream-url, body.theme-matrix.page-community-local .btn-live-cta-local { background: #dc3545 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ========== MATRIX: Página Música, Videos, Fotos ========== */ body.theme-matrix.page-music-module, body.theme-matrix.page-photos-module { background: #0a0a0f !important; } body.theme-matrix .music-page-container h1, body.theme-matrix .music-page-container h2, body.theme-matrix .photos-page-container h1, body.theme-matrix .photos-page-container h2, body.theme-matrix .videos-container-yt h1, body.theme-matrix .videos-container-yt h2 { color: #39ff14 !important; } body.theme-matrix .video-card, body.theme-matrix .photo-card { background: #1a1a2e !important; border-color: rgba(34, 211, 238, 0.5) !important; color: #39ff14 !important; } /* ========== MATRIX: Páginas de error ========== */ body.theme-matrix .error-card { background: #1a1a2e; border: 2px solid #22d3ee; color: #39ff14; } body.theme-matrix .error-card h1 { color: #39ff14 !important; } /* ========== MATRIX: Títulos y secciones (sin gradiente que tape el tema) ========== */ body.theme-matrix .main-feed h1, body.theme-matrix .main-feed h2, body.theme-matrix .main-feed .page-title, body.theme-matrix .videos-container-yt h1, body.theme-matrix .videos-container-yt h2, body.theme-matrix .section-title { color: #39ff14 !important; background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: #39ff14 !important; } /* ========== MATRIX: Sidebar "Ir en Vivo" / Donar (rojo para CTA) ========== */ body.theme-matrix .sidebar-item-go-live { background: #dc3545 !important; border-color: #dc3545 !important; color: #ffffff !important; } body.theme-matrix .sidebar-item-go-live:hover { background: #c82333 !important; color: #ffffff !important; } /* ========== MATRIX: Placeholders, empty state, "Sin sugerencias", "No hay historias" ========== */ body.theme-matrix .right-sidebar .sidebar-placeholder-text, body.theme-matrix .right-sidebar [style*="text-align:center"][style*="padding"], body.theme-matrix .right-sidebar div[style*="No hay historias"], body.theme-matrix .right-sidebar div[style*="no_suggestions"], body.theme-matrix .suggested-friends-section .sidebar-placeholder-text, body.theme-matrix .sponsored-placeholder-text, body.theme-matrix .sponsored-placeholder-desc { color: #94a3b8 !important; } body.theme-matrix .right-sidebar div[style*="No hay historias"], body.theme-matrix .right-sidebar div[style*="no_suggestions"] { color: #94a3b8 !important; } /* ========== MATRIX: Botones "Crear", section-action-btn, btn en widgets (texto legible) ========== */ body.theme-matrix .right-sidebar .section-action-btn, body.theme-matrix .right-sidebar .upload-btn, body.theme-matrix .music-widget .songs-header .btn, body.theme-matrix .music-widget .songs-header .btn-primary, body.theme-matrix .gallery-section .section-action-btn, body.theme-matrix .videos-section .section-action-btn, body.theme-matrix .music-page-container .upload-btn, body.theme-matrix.page-music-module .header-actions .upload-btn { color: #39ff14 !important; -webkit-text-fill-color: #39ff14 !important; border-color: #22d3ee !important; background: #252538 !important; } body.theme-matrix .right-sidebar .section-action-btn:hover, body.theme-matrix .music-widget .songs-header .btn:hover, body.theme-matrix .music-page-container .upload-btn:hover, body.theme-matrix.page-music-module .header-actions .upload-btn:hover { color: #22d3ee !important; -webkit-text-fill-color: #22d3ee !important; border-color: #22d3ee !important; } body.theme-matrix .btn:not(.btn-primary):not(.primary):not(.btn-success):not(.btn-accent) { color: #39ff14 !important; border-color: #22d3ee !important; background: #252538 !important; } body.theme-matrix .btn:not(.btn-primary):not(.primary):not(.btn-success):not(.btn-accent):hover { color: #22d3ee !important; background: #1a1a2e !important; } /* ========== MATRIX: Barra de búsqueda (placeholder e input) ========== */ body.theme-matrix .header-search-compact input, body.theme-matrix .header-search-input { background: #0a0a0f !important; border-color: #22d3ee !important; color: #39ff14 !important; } body.theme-matrix .header-search-compact input::placeholder, body.theme-matrix .header-search-input::placeholder { color: #64748b !important; } body.theme-matrix .header-search-compact .search-icon { color: #94a3b8 !important; } /* ========== MATRIX: Salón de denominaciones (page-salon) — fondo, header, banner, botones ========== */ body.theme-matrix.page-salon, body.theme-matrix.page-salon .salon-fullwidth, body.theme-matrix.page-salon .main-wrapper { background: #0a0a0f !important; } body.theme-matrix.page-salon .salon-header, body.theme-matrix.page-salon .salon-content .glass-card, body.theme-matrix.page-salon .salon-grid__chat .glass-card { background: #1a1a2e !important; border: 1px solid #22d3ee !important; color: #39ff14 !important; } body.theme-matrix.page-salon .salon-header h1, body.theme-matrix.page-salon .salon-header__member-count, body.theme-matrix.page-salon .glass-card__title, body.theme-matrix.page-salon .locales-menu__title { color: #39ff14 !important; } body.theme-matrix.page-salon .salon-actions .btn:not(.btn-success):not(.btn-donar-salón):not(.btn-live-cta), body.theme-matrix.page-salon .salon-actions .btn-accent:not(.btn-donar-salón), body.theme-matrix.page-salon .btn.btn-sm { background: #252538 !important; border: 1px solid #22d3ee !important; color: #39ff14 !important; -webkit-text-fill-color: #39ff14 !important; } body.theme-matrix.page-salon .salon-actions .btn:not(.btn-success):hover, body.theme-matrix.page-salon .salon-actions .btn-accent:not(.btn-donar-salón):hover, body.theme-matrix.page-salon .btn.btn-sm:hover { color: #22d3ee !important; -webkit-text-fill-color: #22d3ee !important; border-color: #22d3ee !important; } /* Indicador "+ EN VIVO" en la barra del salón (mismo estilo que el resto de botones) */ body.theme-matrix.page-salon .salon-live-indicator { background: #252538 !important; border: 1px solid #22d3ee !important; color: #39ff14 !important; -webkit-text-fill-color: #39ff14 !important; } body.theme-matrix.page-salon .salon-live-indicator.live-indicator--active { background: rgba(34, 197, 94, 0.2) !important; border-color: #22c55e !important; color: #22c55e !important; -webkit-text-fill-color: #22c55e !important; } body.theme-matrix.page-salon .salon-join-row .salon-actions__join, body.theme-matrix.page-salon .salon-join-row .btn-success { background: #22d3ee !important; border-color: #22d3ee !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-weight: 700 !important; font-size: 1rem !important; } body.theme-matrix.page-salon .salon-join-row .salon-actions__join:hover, body.theme-matrix.page-salon .salon-join-row .btn-success:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } body.theme-matrix.page-salon .salon-meeting-bar, body.theme-matrix.page-salon .videocall-banner, body.theme-matrix.page-salon .iniciar-videollamada-banner { background: #1a1a2e !important; border: 1px solid #22d3ee !important; color: #94a3b8 !important; } body.theme-matrix.page-salon .salon-meeting-bar a, body.theme-matrix.page-salon .videocall-banner a { color: #22d3ee !important; } /* Botón "Iniciar videollamada / Ver comunidad" en la barra — texto blanco visible sobre cyan */ body.theme-matrix.page-salon .salon-meeting-bar .btn, body.theme-matrix.page-salon .salon-meeting-bar a.btn, body.theme-matrix.page-salon .salon-meeting-bar .btn-accent { background: #22d3ee !important; border-color: #22d3ee !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-weight: 700 !important; } body.theme-matrix.page-salon .salon-meeting-bar .btn:hover, body.theme-matrix.page-salon .salon-meeting-bar a.btn:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: #67e8f9 !important; } body.theme-matrix.page-salon .btn-donar-salón, body.theme-matrix.page-salon .btn-live-cta { background: #dc3545 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } body.theme-matrix.page-salon .locales-menu-list__empty, body.theme-matrix.page-salon .locales-menu-item__name { color: #94a3b8 !important; } body.theme-matrix.page-salon .locales-menu-item__link:hover .locales-menu-item__name { color: #22d3ee !important; } /* Botón "Enviar" del chat de comunidad — texto blanco visible */ body.theme-matrix.page-salon .chat-box__send { background: rgba(34, 211, 238, 0.2) !important; border: 1px solid #22d3ee !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } body.theme-matrix.page-salon .chat-box__send:hover { background: rgba(34, 211, 238, 0.35) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } body.theme-matrix.page-salon .chat-box__input { background: #0a0a0f !important; border: 1px solid rgba(34, 211, 238, 0.3) !important; color: #39ff14 !important; } body.theme-matrix.page-salon .chat-box__input::placeholder { color: #64748b !important; } /* ========== MATRIX: Botón "Entrar" en cards de denominaciones (blanco brillante) ========== */ body.theme-matrix .denominacion-card .denom-actions .btn.small, body.theme-matrix .denom-actions a.btn.small { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 0 8px rgba(255, 255, 255, 0.7), 0 0 14px rgba(255, 255, 255, 0.4); } body.theme-matrix .denominacion-card .denom-actions .btn.small:hover, body.theme-matrix .denom-actions a.btn.small:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.5); } /* ========== MATRIX: Scrollbars (sidebar y paneles) ========== */ body.theme-matrix .right-sidebar::-webkit-scrollbar-track, body.theme-matrix .left-sidebar::-webkit-scrollbar-track { background: #0a0a0f; } body.theme-matrix .right-sidebar::-webkit-scrollbar-thumb, body.theme-matrix .left-sidebar::-webkit-scrollbar-thumb { background: rgba(34, 211, 238, 0.5); border-radius: 99px; } body.theme-matrix .right-sidebar::-webkit-scrollbar-thumb:hover, body.theme-matrix .left-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(34, 211, 238, 0.75); } body.theme-matrix .right-sidebar, body.theme-matrix .left-sidebar { scrollbar-color: rgba(34, 211, 238, 0.5) #0a0a0f; } body.theme-matrix .main-feed::-webkit-scrollbar-thumb { background: rgba(34, 211, 238, 0.4); } body.theme-matrix .main-feed { scrollbar-color: rgba(34, 211, 238, 0.4) transparent; } /* ========== MATRIX: Mi Música — dropdown, Previo/Siguiente (estilo cyan) ========== */ body.theme-matrix .music-widget select, body.theme-matrix .music-widget .btn-mode { background: #252538 !important; border-color: #22d3ee !important; color: #39ff14 !important; } body.theme-matrix .music-widget .btn-mode.active { border-color: #22d3ee !important; color: #22d3ee !important; } /* ============================================================ 11. 🔮 HOLOGRAM — Colores vivos (fondos púrpura oscuro, cyan neón, gradiente rosa-púrpura) ============================================================ */ body.theme-hologram { --bg-primary: #1e1628; --bg-secondary: #2d2438; --bg-tertiary: #352a45; --text-primary: #ffffff; --text-secondary: #e0d4ff; --text-muted: #b8a8d0; --accent: #22d3ee; --accent-secondary: #e879f9; --border: #22d3ee; --text-on-accent: #0a0514; } /* Aplicar en todo el sistema (auth, admin, comunidades): fondo vivo sin gradientes opacos */ body.theme-hologram { background-color: #1e1628 !important; background-image: none !important; color: #ffffff !important; } /* ========== HOLOGRAM: Login / Auth (layout.html) ========== */ body.theme-hologram .topbar { background: #2d2438 !important; border-bottom: 2px solid #22d3ee; box-shadow: 0 4px 20px rgba(34, 211, 238, 0.15); } body.theme-hologram .topbar .brand { color: #ffffff; -webkit-text-fill-color: #ffffff; background: linear-gradient(135deg, #e879f9, #22d3ee); -webkit-background-clip: text; background-clip: text; } body.theme-hologram .topbar .nav a, body.theme-hologram .topbar .nav button.btn { color: #ffffff !important; } body.theme-hologram .topbar .nav a:hover { color: #22d3ee; background: #352a45; } body.theme-hologram .card, body.theme-hologram .auth-card { background: #2d2438 !important; border: 2px solid #22d3ee; box-shadow: 0 8px 32px rgba(34, 211, 238, 0.2); } body.theme-hologram .auth-card h1 { color: #ffffff; } body.theme-hologram .auth-card .subtitle, body.theme-hologram .auth-card .divider, body.theme-hologram .auth-card .footer { color: #e0d4ff; } body.theme-hologram .auth-card label { color: #ffffff; } body.theme-hologram .auth-card input { background: #352a45 !important; border: 2px solid #22d3ee !important; color: #ffffff !important; } body.theme-hologram .auth-card input::placeholder { color: #b8a8d0; } body.theme-hologram .auth-card button[type="button"] { background: #352a45 !important; border: 2px solid #22d3ee !important; color: #22d3ee !important; } body.theme-hologram .forgot-link a { color: #22d3ee; } body.theme-hologram .auth-card .footer a { color: #22d3ee; } body.theme-hologram .btn.primary { background: linear-gradient(135deg, #e879f9 0%, #8b5cf6 100%) !important; color: #0a0514 !important; -webkit-text-fill-color: #0a0514 !important; border: none !important; box-shadow: 0 4px 16px rgba(232, 121, 249, 0.45); } body.theme-hologram .btn.primary:hover { box-shadow: 0 0 24px rgba(34, 211, 238, 0.4); } body.theme-hologram #main-content.container { background: transparent; } /* ========== HOLOGRAM: Admin (admin_layout.html) ========== */ body.theme-hologram .admin-wrapper { background: #1e1628 !important; } body.theme-hologram .admin-sidebar { background: #2d2438 !important; border-right: 2px solid #22d3ee; } body.theme-hologram .admin-main { background: #1e1628 !important; } body.theme-hologram .admin-sidebar .sidebar-brand, body.theme-hologram .admin-sidebar .sidebar-link { color: #ffffff; } body.theme-hologram .admin-sidebar .sidebar-link:hover, body.theme-hologram .admin-sidebar .sidebar-link.active { background: #352a45; border-color: #22d3ee; color: #22d3ee; } body.theme-hologram .admin-sidebar .sidebar-link.active { background: linear-gradient(135deg, #e879f9 0%, #8b5cf6 100%); color: #ffffff; border-color: transparent; } /* ========== HOLOGRAM: Mi Música — botón Crear (letra blanca viva) ========== */ body.theme-hologram .music-widget .songs-header .btn-primary, body.theme-hologram .music-widget .songs-header .btn.btn-primary, body.theme-hologram .music-widget .songs-header button.btn-primary { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } body.theme-hologram .music-widget .songs-header .btn-primary i { color: #ffffff !important; } /* ========== HOLOGRAM: Donaciones (modal y botones) ========== */ body.theme-hologram .donations-module .donate-modal { background: #2d2438; border: 2px solid #22d3ee; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4), 0 0 40px rgba(34, 211, 238, 0.2); } body.theme-hologram .donations-module .donate-modal-header { border-bottom-color: rgba(34, 211, 238, 0.3); } body.theme-hologram .donations-module .donate-modal-title, body.theme-hologram .donations-module .donate-modal-close { color: #ffffff; } body.theme-hologram .donations-module .donate-modal-close:hover { background: #352a45; color: #22d3ee; } body.theme-hologram .donations-module .donate-amount-btn, body.theme-hologram .donations-module .donate-frequency-btn, body.theme-hologram .donations-module .donate-payment-btn { background: #352a45; border-color: rgba(34, 211, 238, 0.4); color: #ffffff; } body.theme-hologram .donations-module .donate-amount-btn:hover, body.theme-hologram .donations-module .donate-frequency-btn:hover, body.theme-hologram .donations-module .donate-payment-btn:hover { border-color: #22d3ee; background: #352a45; } body.theme-hologram .donations-module .donate-amount-btn.selected, body.theme-hologram .donations-module .donate-frequency-btn.selected, body.theme-hologram .donations-module .donate-payment-btn.selected, body.theme-hologram .donations-module .donate-campaign-item.selected { background: linear-gradient(135deg, #e879f9 0%, #8b5cf6 100%); border-color: transparent; color: #ffffff; } body.theme-hologram .donations-module .donate-submit-btn { background: linear-gradient(135deg, #e879f9 0%, #8b5cf6 100%); color: #0a0514; border: none; } body.theme-hologram .donations-module .donate-input, body.theme-hologram .donations-module .donate-select, body.theme-hologram .donations-module .donate-textarea { background: #352a45; border-color: #22d3ee; color: #ffffff; } body.theme-hologram .donations-module .donate-input:focus, body.theme-hologram .donations-module .donate-select:focus, body.theme-hologram .donations-module .donate-textarea:focus { border-color: #67e8f9; } body.theme-hologram .donations-module .donate-label, body.theme-hologram .donations-module .donate-campaign-name { color: #e0d4ff; } body.theme-hologram .donations-module .donate-card-errors { color: #e879f9; } /* ========== HOLOGRAM: Dashboard iglesia local (Washington ave, etc.) ========== */ body.theme-hologram.page-community-local .community-shell, body.theme-hologram.page-community-local .community-header { background: #1e1628; border-color: #22d3ee; color: #e0d4ff; } body.theme-hologram.page-community-local .community-header h1, body.theme-hologram.page-community-local .community-menu__title { color: #ffffff; } body.theme-hologram.page-community-local .community-menu__section, body.theme-hologram.page-community-local .community-feed, body.theme-hologram.page-community-local .community-rightpanel__block { background: #2d2438; border-color: #22d3ee; color: #e0d4ff; } body.theme-hologram.page-community-local .community-menu__action.btn:not(.btn-live-cta-local) { background: #352a45; border-color: #22d3ee; color: #ffffff; } body.theme-hologram.page-community-local .post-composer__textarea, body.theme-hologram.page-community-local .chat-panel__form input { background: #352a45; border-color: #22d3ee; color: #ffffff; } /* Solo Iniciar transmisión y Transmitir con URL (HLS): fondo rojo, letra blanca */ body.theme-hologram.page-community-local #btn-start-live, body.theme-hologram.page-community-local #btn-start-stream-url, body.theme-hologram.page-community-local .btn-live-cta-local { background: #dc3545 !important; border-color: #dc3545 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } body.theme-hologram.page-community-local #btn-start-live:hover, body.theme-hologram.page-community-local #btn-start-stream-url:hover, body.theme-hologram.page-community-local .btn-live-cta-local:hover { background: #c82333 !important; border-color: #c82333 !important; color: #ffffff !important; } /* ========== HOLOGRAM: Sidebar "Ir en Vivo" y botón Donar (todas las páginas con layout_futuristic) ========== */ body.theme-hologram .sidebar-item-go-live { background: #dc3545 !important; border-color: #dc3545 !important; color: #ffffff !important; } body.theme-hologram .sidebar-item-go-live:hover { background: #c82333 !important; border-color: #c82333 !important; color: #ffffff !important; } body.theme-hologram .donations-module .donate-btn { background: #dc3545 !important; border-color: #dc3545 !important; color: #ffffff !important; } body.theme-hologram .donations-module .donate-btn:hover { background: #c82333 !important; border-color: #c82333 !important; color: #ffffff !important; } /* ========== HOLOGRAM: Página Música (/music/) ========== */ body.theme-hologram.page-music-module { background: #1e1628 !important; } body.theme-hologram.page-music-module .music-page-container, body.theme-hologram.page-music-module .page-title { color: #e0d4ff; } body.theme-hologram.page-music-module .page-title { color: #ffffff; } /* ========== HOLOGRAM: Páginas de error (404, 403, 500) ========== */ body.theme-hologram .error-page { background: transparent; } body.theme-hologram .error-card { background: #2d2438; border: 2px solid #22d3ee; box-shadow: 0 8px 32px rgba(34, 211, 238, 0.2); } body.theme-hologram .error-card:hover { border-color: #67e8f9; box-shadow: 0 0 28px rgba(34, 211, 238, 0.25); } body.theme-hologram .error-card h1 { color: #ffffff; } body.theme-hologram .error-message, body.theme-hologram .error-suggestions ul { color: #e0d4ff; } body.theme-hologram .error-suggestions { background: #352a45; border-color: #22d3ee; } body.theme-hologram .error-search input { background: #352a45; border-color: #22d3ee; color: #ffffff; } body.theme-hologram .error-search .btn.primary { background: linear-gradient(135deg, #e879f9 0%, #8b5cf6 100%); color: #0a0514; } /* ============================================================ 12. 🎸 SYNTHWAVE — Contraste 7.9:1 ✅ WCAG AAA ============================================================ */ /* Synthwave racionalizado: fondo profundo, widgets elevados, texto claro, acento neón */ body.theme-synthwave { --bg-primary: #12081a; --bg-secondary: #251530; --bg-tertiary: #2d1838; --text-primary: #f4e8ff; --text-secondary: #b8a8c9; --text-muted: #8a7a9a; --accent: #ff2d95; --accent-secondary: #b026ff; --border: #3d2848; /* Texto oscuro sobre botones neón (gradiente con tonos claros = legible) */ --text-on-accent: #0a0514; --glow-accent: rgba(255, 45, 149, 0.35); } /* ============================================================ 13. 🎵 MI MÚSICA — Contraste 8.5:1 ✅ WCAG AAA ============================================================ */ body.theme-music { --bg-primary: #2a1e1e; --bg-secondary: #4f3333; --text-primary: #E8F4FD; --text-secondary: #d0c0c0; --accent: #e85d44; --border: #5c3d3d; } /* ============================================================ 14. ✏️ PERSONALIZADO — El usuario define sus propios colores ============================================================ */ body.theme-custom { --bg-primary: var(--custom-bg-primary, #1a2340); --bg-secondary: var(--custom-bg-secondary, #243058); --text-primary: var(--custom-text-primary, #E8F4FD); --text-secondary: var(--custom-text-secondary, #A8C8E8); --accent: var(--custom-accent, #4A90D9); --border: var(--custom-border, #2E4070); } /* ============================================================ USO GLOBAL — Todos los componentes deben usar estas variables ============================================================ */ body { background-color: var(--bg-primary); color: var(--text-primary); } a { color: var(--accent); } input, textarea, select { background-color: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); } button { background-color: var(--accent); color: var(--bg-primary); } hr, .divider { border-color: var(--border); } .text-secondary { color: var(--text-secondary); } .bg-secondary { background-color: var(--bg-secondary); } /* ============================================================ INTEGRACIÓN LAYOUT — header, sidebar, cards, modales ============================================================ */ .app-container, .main-feed, .content-area { background-color: var(--bg-primary); color: var(--text-primary); } .header, .mobile-nav { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); } .glass-card, .glass, .left-sidebar, .right-sidebar { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); } .sidebar-item, .header-nav-link, .header-username, .header-handle, .status-name { color: var(--text-primary); } .sidebar-item:hover, .header-nav-link:hover { background-color: var(--bg-primary); color: var(--accent); } .sidebar-item.active, .header-nav-link.active { background-color: var(--accent); color: var(--bg-primary); } .btn-primary { background-color: var(--accent); color: var(--bg-primary); border-color: var(--accent); } .modal-content, .modal-overlay .glass-card { background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary); } h1, h2, h3, h4, p, span { color: var(--text-primary); } .videos-container-yt { background-color: var(--bg-primary); color: var(--text-primary); } /* Títulos y secciones: mismo color que el menú (sin gradiente que tape el tema) */ body[class*="theme-"] .main-feed h1, body[class*="theme-"] .main-feed .page-title, body[class*="theme-"] .videos-container-yt h1, body[class*="theme-"] .videos-container-yt h2, body[class*="theme-"] .videos-container-yt .video-section h2, body[class*="theme-"] .videos-container-yt .section-title-accent { color: var(--text-primary) !important; background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: var(--text-primary) !important; } body[class*="theme-"] .main-feed .section-title, body[class*="theme-"] .section-title { color: var(--text-primary) !important; } .flash-message { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); } .flash-container .flash-message.success { border-left-color: var(--accent); } .post-card, .feed-card, .glass-card { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); } /* ============================================================ WIDGETS SIDEBAR DERECHO — Mi Música, galería, trending, etc. ============================================================ */ .right-sidebar .music-widget { background-color: var(--bg-secondary) !important; color: var(--text-primary); border-color: var(--border); } .right-sidebar .music-widget .music-header, .right-sidebar .music-widget h3, .right-sidebar .music-widget .song-title-main, .right-sidebar .music-widget .song-artist-main, .right-sidebar .music-widget .btn-mode { color: var(--text-primary); } .right-sidebar .music-widget .btn-mode.active { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--accent); } .right-sidebar .music-widget a, .right-sidebar .music-widget .like-btn, .right-sidebar .music-widget .comment-btn { color: var(--accent); } .right-sidebar .music-widget input, .right-sidebar .music-widget select { background: var(--bg-primary); color: var(--text-primary); border-color: var(--border); } .right-sidebar .music-widget .songs-header, .right-sidebar .music-widget .song-item { background: var(--bg-primary); border-color: var(--border); color: var(--text-primary); } .right-sidebar .music-widget .song-item:hover { background: var(--bg-secondary); } .right-sidebar .music-widget .play-mode-buttons .btn-mode { border-color: var(--border); color: var(--text-primary); } .right-sidebar .music-widget .current-playing { background: var(--bg-primary); border-color: var(--border); color: var(--text-primary); } .right-sidebar .music-widget .modal-content { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); } /* Botones del widget: mismo estilo que Guardados (secundario: borde + texto, sin relleno de acento) */ .right-sidebar .music-widget .btn-primary, .right-sidebar .music-widget .songs-header .btn { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; } .right-sidebar .music-widget .btn-primary:hover, .right-sidebar .music-widget .songs-header .btn:hover { background: var(--bg-primary) !important; border-color: var(--accent) !important; color: var(--text-primary) !important; } .right-sidebar .music-widget .btn-control, .right-sidebar .music-widget .btn-control-play { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } .right-sidebar .music-widget .btn-control-play.is-playing { background: var(--bg-secondary) !important; border-color: var(--accent) !important; color: var(--text-primary) !important; } .right-sidebar .music-widget .btn-random { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } .right-sidebar .music-widget .btn-random.active { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--accent) !important; } .right-sidebar .gallery-section, .right-sidebar .gallery-cinematica, .right-sidebar .suggested-friends-section, .right-sidebar .trending-section, .right-sidebar .sponsored-section { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); } .right-sidebar .section-title, .right-sidebar .gallery-section h3, .right-sidebar .suggested-friends-section h3, .right-sidebar .trending-section h3, .right-sidebar .sponsored-section h3 { color: var(--text-primary); } .right-sidebar .sidebar-placeholder-text, .right-sidebar .suggested-friend, .right-sidebar .trending-user-name, .right-sidebar .sponsored-ad-title, .right-sidebar .sponsored-ad-desc { color: var(--text-primary); } .right-sidebar .suggested-friends-section a, .right-sidebar .trending-section a { color: var(--accent); } .right-sidebar .gallery-carrusel-btn { background: var(--bg-primary); color: var(--text-primary); border-color: var(--border); } .right-sidebar .story-sidebar-item, .right-sidebar .story-sidebar-name { color: var(--text-primary); } /* ============================================================ COMUNIDADES / DENOMINACIONES — cards y controles ============================================================ */ .main-feed .denominaciones-section .denom-title, .main-feed .denominacion-card, .main-feed .denominacion-info h3, .main-feed .comunidad-card, .main-feed .comunidad-info h2, .main-feed .comunidades-header h1, .main-feed .search-header h1, .main-feed .empty-state h3 { color: var(--text-primary); } .main-feed .denominacion-card, .main-feed .comunidad-card, .main-feed .comunidades-grid .comunidad-card { background-color: var(--bg-secondary); border-color: var(--border); } /* !important: futuristic.css redefine con color accent después y anula el texto en botones-acento */ .main-feed .denom-actions .btn.small, .main-feed .denom-actions a.btn.small, .main-feed .comunidades-header .btn.primary, .main-feed .comunidades-header a.btn.primary, .main-feed .search-form .btn.primary, .main-feed .empty-state .btn.primary, .main-feed .empty-state a.btn.primary { background: var(--accent) !important; color: var(--bg-primary) !important; -webkit-text-fill-color: var(--bg-primary) !important; border-color: var(--accent) !important; } .main-feed .denom-search, .main-feed .search-input { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); } .main-feed .denom-search::placeholder, .main-feed .search-input::placeholder { color: var(--text-secondary); } .main-feed .comunidad-meta, .main-feed .results-count, .main-feed .empty-state .muted, .main-feed .comunidad-desc { color: var(--text-secondary); } .main-feed .badge.joined { background: var(--accent) !important; color: var(--bg-primary) !important; -webkit-text-fill-color: var(--bg-primary) !important; } .main-feed .comunidades-grid .comunidad-card:hover, .main-feed .denominacion-card:hover { border-color: var(--accent); } /* ============================================================ MÓDULO VIDEOS — contenedor y sidebar usan variables del tema ============================================================ */ body[class*="theme-"] .videos-container-yt { background-color: var(--bg-primary); color: var(--text-primary); } body[class*="theme-"] .videos-sidebar-yt { background-color: var(--bg-secondary); color: var(--text-primary); } body[class*="theme-"] .videos-container-yt .videos-back-bar .back-to-videos { color: var(--accent); } body[class*="theme-"] .videos-container-yt .videos-back-bar .back-to-videos:hover { color: var(--text-primary); } /* ============================================================ MÓDULO MARKETPLACE — acento y focos unificados con tema ============================================================ */ body[class*="theme-"] .marketplace [href]:focus, body[class*="theme-"] .marketplace button:focus { outline: 2px solid var(--accent); outline-offset: 2px; } body[class*="theme-"] .marketplace { background-color: var(--bg-secondary); color: var(--text-primary); } /* ============================================================ SYNTHWAVE — capa global (todo el layout futurista + formularios) ============================================================ */ body.theme-synthwave .header { background: linear-gradient(180deg, #2d1838 0%, #1a0f24 100%) !important; border-bottom: 1px solid var(--border) !important; box-shadow: 0 4px 30px rgba(255, 45, 149, 0.08) !important; } body.theme-synthwave .header-search-compact input, body.theme-synthwave .header-search-input { background: var(--bg-primary) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } body.theme-synthwave .sidebar-item.active, body.theme-synthwave .header-nav-link.active { background: linear-gradient(135deg, #ff3cac 0%, #784ba0 65%, #2b86c5 100%) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 0 22px var(--glow-accent) !important; } body.theme-synthwave .sidebar-item:hover { background: var(--bg-tertiary) !important; border-color: var(--accent) !important; } body.theme-synthwave .btn-primary, body.theme-synthwave .btn.btn-primary, body.theme-synthwave a.btn.primary, body.theme-synthwave button.btn.primary, body.theme-synthwave input[type="submit"].btn-primary, body.theme-synthwave .settings-page .btn-primary, body.theme-synthwave .create-post-card .publish-btn { background: linear-gradient(135deg, #ff3cac, #784ba0) !important; color: #0a0514 !important; -webkit-text-fill-color: #0a0514 !important; border: none !important; box-shadow: 0 4px 16px rgba(255, 60, 172, 0.35) !important; } body.theme-synthwave .btn-primary:hover, body.theme-synthwave .btn.primary:hover { filter: brightness(1.08); } /* Iconos dentro de botones neón */ body.theme-synthwave .btn-primary svg, body.theme-synthwave .btn.btn-primary svg, body.theme-synthwave .btn.primary svg, body.theme-synthwave a.btn.primary svg { fill: currentColor !important; color: #0a0514 !important; } /* Amigos / sugerencias: gradiente rosa + texto blanco era ilegible */ body.theme-synthwave .btn-add-friend:not(.sent), body.theme-synthwave .btn-add-friend:not(.sent) * { color: #0a0514 !important; -webkit-text-fill-color: #0a0514 !important; } body.theme-synthwave .btn-add-friend.sent, body.theme-synthwave .btn-add-friend.sent * { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* Publicidad: planes y pasos */ body.theme-synthwave .btn-plan.featured, body.theme-synthwave .step-number, body.theme-synthwave .popular-badge { color: #0a0514 !important; -webkit-text-fill-color: #0a0514 !important; } body.theme-synthwave .btn-plan.featured:hover { color: #0a0514 !important; } /* Menú lateral activo: gradiente oscuro, mantener blanco */ body.theme-synthwave .sidebar-item.active, body.theme-synthwave .sidebar-item.active span, body.theme-synthwave .header-nav-link.active { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.theme-synthwave .sidebar-item.active svg, body.theme-synthwave .header-nav-link.active svg { color: #fff !important; fill: #fff !important; } body.theme-synthwave .section-action-btn:hover { color: #0a0514 !important; -webkit-text-fill-color: #0a0514 !important; } body.theme-synthwave .btn-secondary, body.theme-synthwave a.btn-secondary { color: #0a0514 !important; -webkit-text-fill-color: #0a0514 !important; } body.theme-synthwave .header-icon-btn { border-color: var(--border); color: var(--text-primary); } body.theme-synthwave .header-icon-btn:hover { background: rgba(255, 45, 149, 0.12) !important; color: var(--accent) !important; border-color: var(--accent) !important; } body.theme-synthwave .glass-card, body.theme-synthwave .post-card, body.theme-synthwave .create-post-card, body.theme-synthwave .settings-section { background: var(--bg-secondary) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } body.theme-synthwave .form-input, body.theme-synthwave input:not([type="checkbox"]):not([type="radio"]), body.theme-synthwave textarea, body.theme-synthwave select { background: var(--bg-primary) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } body.theme-synthwave .post-action-btn:hover, body.theme-synthwave .post-action-btn.active { border-color: var(--accent) !important; color: var(--accent) !important; } body.theme-synthwave .notifications-panel { background: var(--bg-secondary) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } body.theme-synthwave .modal-content, body.theme-synthwave #reportModal .glass-card { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } body.theme-synthwave .badge { background: var(--accent) !important; color: #0a0514 !important; -webkit-text-fill-color: #0a0514 !important; font-weight: 700 !important; } /* Debates: pestaña activa (ej. En vivo) — evitar rosa claro + texto ilegible */ body.theme-synthwave .debates-tabs .tab.active, body.theme-synthwave .debates-container .tab.active { background: linear-gradient(135deg, #86198f 0%, #5b21b6 100%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.2); } /* Publicidad: asegurar bloque central visible y legible */ body.theme-synthwave.page-advertising .main-feed .pub-plans-page { position: relative; z-index: 2; width: 100%; min-height: 40vh; flex: 1 1 auto; } body.theme-synthwave.page-advertising .pub-plans-head .muted, body.theme-synthwave.page-advertising .pricing-section > .section-title, body.theme-synthwave.page-advertising h2.section-title { color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; opacity: 1 !important; } body.theme-synthwave.page-advertising .pub-plans-head .muted { color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; } /* Mi Música: botones En orden / Aleatorio más visibles */ body.theme-synthwave .music-widget .btn-mode { border-color: rgba(244, 232, 255, 0.5) !important; background: var(--bg-tertiary) !important; color: var(--text-primary) !important; } body.theme-synthwave .music-widget .btn-mode.active { border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(255, 45, 149, 0.35); } /* Mi Música: todos los botones con fondo oscuro → letra blanca (Crear, Cancelar, Agregar canción, Guardar, X) */ body.theme-synthwave .music-widget .songs-header .btn, body.theme-synthwave .music-widget .songs-header .btn-primary, body.theme-synthwave .music-widget .songs-header .btn-secondary, body.theme-synthwave .music-widget .modal .btn, body.theme-synthwave .music-widget .modal .btn-primary, body.theme-synthwave .music-widget .modal .btn-secondary, body.theme-synthwave .music-widget .form-actions .btn, body.theme-synthwave .music-widget .form-actions .btn-primary, body.theme-synthwave .music-widget .form-actions .btn-secondary, body.theme-synthwave .music-widget .modal-header .btn, body.theme-synthwave .music-widget .modal-content .btn { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.theme-synthwave .music-widget .songs-header .btn i, body.theme-synthwave .music-widget .modal .btn i, body.theme-synthwave .music-widget .form-actions .btn i { color: #fff !important; } /* Cancelar: mismo gradiente que Agregar canción / Guardar (legible, texto oscuro) */ body.theme-synthwave .music-widget .form-actions .btn-secondary { background: linear-gradient(135deg, #ff3cac, #784ba0) !important; border: none !important; box-shadow: 0 4px 16px rgba(255, 60, 172, 0.35) !important; color: #0a0514 !important; -webkit-text-fill-color: #0a0514 !important; } body.theme-synthwave .music-widget .form-actions .btn-secondary:hover { filter: brightness(1.08); } body.theme-synthwave .music-widget .form-actions .btn-secondary i { color: #0a0514 !important; } body.theme-synthwave .music-widget .form-actions .btn-primary { color: #0a0514 !important; -webkit-text-fill-color: #0a0514 !important; } body.theme-synthwave .music-widget .form-actions .btn-primary i { color: #0a0514 !important; }