/* ═══════════════════════════════════════════════════════════ UnaPelo — Light Theme Palette: warm parchment + deep purple accents Inspired by: Criterion Collection / A24 editorial Applied when ═══════════════════════════════════════════════════════════ */ /* ── Global ─────────────────────────────────────────────── */ html.theme-light body { background: #f5f0e8 !important; background-image: none !important; color: #1a1208 !important; } /* ── Header ─────────────────────────────────────────────── */ html.theme-light .app-header, html.theme-light .glass-header { background: rgba(245,240,232,0.92) !important; border-bottom: 1px solid rgba(120,80,40,0.1) !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; box-shadow: 0 1px 20px rgba(80,50,20,0.07) !important; } html.theme-light .app-logo { color: #2d1a0e !important; } html.theme-light .page-title { color: #1a1208 !important; font-weight: 700 !important; } html.theme-light .btn-logout { background: rgba(100,65,30,0.07) !important; border-color: rgba(100,65,30,0.15) !important; color: #5a3a18 !important; } html.theme-light .btn-logout:hover { background: rgba(239,68,68,0.1) !important; color: #dc2626 !important; } /* ── Bottom navbar ──────────────────────────────────────── */ html.theme-light .bottom-nav { background: rgba(245,240,232,0.95) !important; border-top: 1px solid rgba(120,80,40,0.08) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; box-shadow: 0 -4px 24px rgba(80,50,20,0.08) !important; } html.theme-light .nav-item { color: #a08060 !important; } html.theme-light .nav-item.active { color: #7c3aed !important; } html.theme-light .nav-center-circle { background: linear-gradient(135deg,#6d28d9,#9333ea) !important; box-shadow: 0 0 20px rgba(109,40,217,0.35) !important; } /* ── Cards & Panels ─────────────────────────────────────── */ html.theme-light .stat-card, html.theme-light .profile-section, html.theme-light .step, html.theme-light .summary-card, html.theme-light .group-matrix-card, html.theme-light .platforms-section, html.theme-light .dna-preview, html.theme-light .watchlist-card, html.theme-light .movie-card, html.theme-light .radar-card, html.theme-light .model-selector, html.theme-light [class*="-section"] { background: rgba(255,252,245,0.82) !important; border-color: rgba(120,80,40,0.1) !important; box-shadow: 0 2px 16px rgba(80,50,20,0.05) !important; } html.theme-light .movie-card { background: #fffcf5 !important; } /* ── Text ────────────────────────────────────────────────── */ html.theme-light .stat-val { color: #1a1208 !important; } html.theme-light .stat-lbl { color: #7c5c3c !important; } html.theme-light .movie-title { color: #1a1208 !important; } html.theme-light .movie-meta { color: #7c5c3c !important; } html.theme-light .movie-reason { color: #3d2b1a !important; line-height: 1.6 !important; } html.theme-light .step-title { color: #1a1208 !important; } html.theme-light .step-optional { color: #a08060 !important; } html.theme-light .results-title { color: #1a1208 !important; } html.theme-light .group-analysis { color: #3d2b1a !important; border-color: rgba(120,80,40,0.12) !important; background: rgba(200,160,100,0.06) !important; } html.theme-light .gm-title { color: #1a1208 !important; } html.theme-light .divergence-title { color: #a08060 !important; } html.theme-light .div-insight { color: #5a3a18 !important; } html.theme-light .platforms-title { color: #a08060 !important; } html.theme-light .any-platform-label { color: #3d2b1a !important; } html.theme-light .any-platform-label span { color: #a08060 !important; } html.theme-light .tog-label { color: #3d2b1a !important; } html.theme-light .user-name { color: #1a1208 !important; } html.theme-light .user-stats { color: #7c5c3c !important; } /* ── Inputs ──────────────────────────────────────────────── */ html.theme-light input[type="text"], html.theme-light input[type="email"], html.theme-light textarea, html.theme-light .mood-input, html.theme-light .login-input, html.theme-light .search-bar { background: #fffcf5 !important; border-color: rgba(120,80,40,0.18) !important; color: #1a1208 !important; } html.theme-light input::placeholder, html.theme-light textarea::placeholder { color: #c0a080 !important; } html.theme-light input:focus, html.theme-light textarea:focus { border-color: rgba(109,40,217,0.4) !important; box-shadow: 0 0 0 3px rgba(109,40,217,0.08) !important; } /* ── Genre chips ─────────────────────────────────────────── */ html.theme-light .genre-chip { background: rgba(120,80,40,0.06) !important; border-color: rgba(120,80,40,0.15) !important; color: #5a3a18 !important; } html.theme-light .genre-chip.active { background: rgba(109,40,217,0.1) !important; border-color: rgba(109,40,217,0.4) !important; color: #4c1d95 !important; } /* ── User rows (Recomendar) ──────────────────────────────── */ html.theme-light .user-row { background: rgba(255,252,245,0.7) !important; border-color: rgba(120,80,40,0.1) !important; } html.theme-light .user-row.selected { background: rgba(109,40,217,0.06) !important; border-color: rgba(109,40,217,0.3) !important; } /* ── Platform chips ──────────────────────────────────────── */ html.theme-light .platform-chip { background: rgba(255,252,245,0.7) !important; border-color: rgba(120,80,40,0.12) !important; } html.theme-light .platform-chip.active { background: rgba(109,40,217,0.08) !important; border-color: rgba(109,40,217,0.4) !important; } html.theme-light .platform-chip-name { color: #5a3a18 !important; } html.theme-light .platform-chip.active .platform-chip-name { color: #4c1d95 !important; } html.theme-light .platforms-save-indicator { color: #16a34a !important; } /* ── CTA button ──────────────────────────────────────────── */ html.theme-light .cta-btn { background: linear-gradient(135deg,#5b21b6,#7c3aed) !important; color: white !important; box-shadow: 0 4px 20px rgba(109,40,217,0.3) !important; } /* ── Model selector ──────────────────────────────────────── */ html.theme-light .model-btn { color: #5a3a18 !important; } html.theme-light .model-btn.active { background: rgba(109,40,217,0.1) !important; color: #3b0764 !important; } /* ── Toggles ─────────────────────────────────────────────── */ html.theme-light .tog-track { background: rgba(120,80,40,0.15) !important; } html.theme-light .platform-toggle-track { background: rgba(120,80,40,0.15) !important; } /* ── Skeleton loaders ────────────────────────────────────── */ html.theme-light .skeleton { background: rgba(120,80,40,0.08) !important; } /* ── Divergence cards (perfil) ───────────────────────────── */ html.theme-light .div-card.up { background: rgba(22,163,74,0.06) !important; border-color: rgba(22,163,74,0.18) !important; } html.theme-light .div-card.down { background: rgba(220,38,38,0.05) !important; border-color: rgba(220,38,38,0.15) !important; } /* ── Rating bar chart (perfil) ───────────────────────────── */ html.theme-light .rating-bar-bg { background: rgba(120,80,40,0.1) !important; } /* ── Radar / watchlist ───────────────────────────────────── */ html.theme-light .wl-title { color: #1a1208 !important; } html.theme-light .wl-meta { color: #7c5c3c !important; } html.theme-light .radar-empty { color: #a08060 !important; } /* ── Ronda rápida texts ──────────────────────────────────── */ html.theme-light #movieTitle { color: #1a1208 !important; } html.theme-light #movieMeta { color: #7c5c3c !important; } html.theme-light .swipe-hint { color: #7c5c3c !important; border-color: rgba(120,80,40,0.15) !important; background: rgba(245,240,232,0.7) !important; } /* ── Toast notifications ─────────────────────────────────── */ html.theme-light .toast { background: rgba(255,252,245,0.95) !important; border-color: rgba(120,80,40,0.1) !important; color: #1a1208 !important; box-shadow: 0 4px 20px rgba(80,50,20,0.12) !important; } /* ── Details / DNA preview ───────────────────────────────── */ html.theme-light details.dna-preview summary { color: #a08060 !important; } html.theme-light .dna-text { color: #3d2b1a !important; } /* ── Theme selector itself ───────────────────────────────── */ html.theme-light .theme-section-label { color: #a08060 !important; } html.theme-light .theme-opt { border-color: rgba(120,80,40,0.15) !important; background: rgba(255,252,245,0.7) !important; color: #5a3a18 !important; } html.theme-light .theme-opt.active { border-color: rgba(109,40,217,0.4) !important; background: rgba(109,40,217,0.08) !important; color: #3b0764 !important; } /* ── Login page ──────────────────────────────────────────── */ html.theme-light .login-card { background: rgba(255,252,245,0.9) !important; border-color: rgba(120,80,40,0.1) !important; box-shadow: 0 8px 40px rgba(80,50,20,0.1) !important; } html.theme-light .login-title { color: #1a1208 !important; } html.theme-light .login-subtitle { color: #7c5c3c !important; } html.theme-light .login-label { color: #5a3a18 !important; } html.theme-light .login-btn { background: linear-gradient(135deg,#5b21b6,#7c3aed) !important; color: white !important; } /* ── Cinematic profile (perfil.html) ─────────────────────── */ html.theme-light .profile-summary { color: #2d1a0e !important; } html.theme-light .profile-item { background: rgba(245,235,215,0.5) !important; border: 1px solid rgba(120,80,40,0.1) !important; } html.theme-light .profile-item > strong { color: #7c5c3c !important; } html.theme-light .profile-item span { color: #2d1a0e !important; } html.theme-light .profile-item span strong { color: #5b21b6 !important; font-weight: 700 !important; } html.theme-light .profile-section h3 { color: #5b21b6 !important; } html.theme-light .profile-meta { color: #a08060 !important; } html.theme-light .no-profile-msg { color: #a08060 !important; } html.theme-light .profile-alert p { color: #4c1d95 !important; } /* ── Rating breakdown bars ───────────────────────────────── */ html.theme-light .breakdown { background: rgba(255,252,245,0.7) !important; border-color: rgba(120,80,40,0.1) !important; } html.theme-light .bd-label { color: #7c5c3c !important; } html.theme-light .bd-bar-wrap { background: rgba(120,80,40,0.1) !important; } html.theme-light .bd-count { color: #a08060 !important; } /* ── Skeleton for light mode ─────────────────────────────── */ html.theme-light .skeleton { background: linear-gradient(90deg,rgba(120,80,40,0.06) 25%,rgba(120,80,40,0.12) 50%,rgba(120,80,40,0.06) 75%) !important; background-size: 200% 100% !important; } html.theme-light .skeleton-card { background: rgba(245,235,215,0.5) !important; border-color: rgba(120,80,40,0.08) !important; } /* ── catch-all for any remaining white text ──────────────── */ html.theme-light .container, html.theme-light .container * { border-color: inherit; } /* Force readable text on common light-grey values */ html.theme-light [style*="color:#e2e8f0"], html.theme-light [style*="color: #e2e8f0"], html.theme-light [style*="color:#94a3b8"], html.theme-light [style*="color: #94a3b8"], html.theme-light [style*="color:#cbd5e1"], html.theme-light [style*="color: #cbd5e1"], html.theme-light [style*="color:#64748b"], html.theme-light [style*="color: #64748b"], html.theme-light [style*="color:#475569"], html.theme-light [style*="color: #475569"], html.theme-light [style*="color:#334155"], html.theme-light [style*="color: #334155"] { color: #3d2b1a !important; } /* White text elements → dark */ html.theme-light [style*="color:white"], html.theme-light [style*="color: white"], html.theme-light [style*="color:#ffffff"], html.theme-light [style*="color:#f1f5f9"], html.theme-light [style*="color:#f8fafc"] { color: #1a1208 !important; } /* Light purple inline text (bold highlights in profile) → deep purple */ html.theme-light [style*="color:#c4b5fd"], html.theme-light [style*="color:#a78bfa"] { color: #5b21b6 !important; } /* ── Emoji white-filter fix for light mode ───────────────── */ /* In dark mode: brightness(0) invert(1) = white emoji */ /* In light mode: show original emoji colors (naturally dark) */ html.theme-light [style*="brightness(0) invert(1)"] { filter: none !important; } /* Keep white only where emoji sits on a dark/colored background */ html.theme-light .nav-center-circle [style*="brightness(0) invert(1)"], html.theme-light .cta-btn [style*="brightness(0) invert(1)"], html.theme-light .btn-regenerate [style*="brightness(0) invert(1)"] { filter: brightness(0) invert(1) !important; }