/* ======================================================================== DPL · Theme System — claro/oscuro Aplica overrides cuando El JS adyacente (dpl-theme.js) lee localStorage y aplica el data-attribute antes de pintar para evitar el flash de tema incorrecto. ======================================================================== */ /* ── LIGHT THEME OVERRIDES ── */ html[data-theme="light"]{ --black:#fdfbf5; /* fondo página */ --card:rgba(255,255,255,.96); --cb:rgba(180,83,9,.13); --cbh:rgba(180,83,9,.28); --t1:#1c1917; /* texto alto */ --t2:#57534e; /* texto medio */ --t3:#a8a29e; /* texto bajo */ --a:#d97706; /* amber más oscuro para contraste */ --ag:#b45309; --ad:#92400e; color-scheme:light; } html[data-theme="light"] body{ background:#fdfbf5 !important; background-image: radial-gradient(ellipse 100% 50% at 50% 0%, rgba(245,158,11,.10) 0%, transparent 60%), radial-gradient(circle at 10% 90%, rgba(245,158,11,.06) 0%, transparent 35%) !important; } /* Nav */ html[data-theme="light"] nav{ background:rgba(253,251,245,.92) !important; border-bottom-color:rgba(180,83,9,.10) !important; } html[data-theme="light"] .nmt{color:var(--ag) !important} html[data-theme="light"] .npill{ background:rgba(180,83,9,.05) !important; border-color:rgba(180,83,9,.10) !important; } html[data-theme="light"] .npill a{color:#78716c !important} html[data-theme="light"] .npill a:hover{color:#44403c !important} html[data-theme="light"] .npill a.on{ background:linear-gradient(135deg,#d97706,#f59e0b) !important; color:#fff !important; box-shadow:0 4px 12px rgba(217,119,6,.35) !important; } /* Cards */ html[data-theme="light"] .card, html[data-theme="light"] .kc, html[data-theme="light"] .s-card, html[data-theme="light"] .src-card, html[data-theme="light"] .nc, html[data-theme="light"] .day-card, html[data-theme="light"] .modal-card, html[data-theme="light"] .sleep-hero{ background:#ffffff !important; border-color:rgba(180,83,9,.12) !important; box-shadow:0 1px 3px rgba(28,25,23,.05), 0 4px 12px rgba(28,25,23,.03) !important; } html[data-theme="light"] .card:hover, html[data-theme="light"] .kc:hover, html[data-theme="light"] .nc:hover, html[data-theme="light"] .day-card.has-workout:hover{ border-color:rgba(180,83,9,.30) !important; box-shadow:0 2px 6px rgba(28,25,23,.06), 0 8px 24px rgba(28,25,23,.04) !important; } /* Buttons */ html[data-theme="light"] .btn-sm, html[data-theme="light"] .week-btn, html[data-theme="light"] .qa-btn, html[data-theme="light"] .fpill{ background:rgba(217,119,6,.07) !important; border-color:rgba(217,119,6,.15) !important; color:#57534e !important; } html[data-theme="light"] .btn-sm:hover, html[data-theme="light"] .week-btn:hover, html[data-theme="light"] .qa-btn:hover, html[data-theme="light"] .fpill:hover{ color:var(--ag) !important; background:rgba(217,119,6,.13) !important; border-color:rgba(217,119,6,.30) !important; } html[data-theme="light"] .fpill.on, html[data-theme="light"] .toggle-track.on{ background:linear-gradient(135deg,#d97706,#f59e0b) !important; color:#fff !important; border:none !important; } html[data-theme="light"] .btn-primary, html[data-theme="light"] .sync-btn, html[data-theme="light"] .send-btn, html[data-theme="light"] .btn-login{ background:linear-gradient(135deg,#92400e,#d97706) !important; color:#fff !important; box-shadow:0 4px 14px rgba(146,64,14,.35) !important; } html[data-theme="light"] .btn-primary svg, html[data-theme="light"] .send-btn svg, html[data-theme="light"] .btn-login svg{stroke:#fff !important} /* Inputs */ html[data-theme="light"] .otp-input, html[data-theme="light"] .chat-input, html[data-theme="light"] .field input, html[data-theme="light"] input, html[data-theme="light"] textarea{ background:#fff !important; border-color:rgba(180,83,9,.18) !important; color:#1c1917 !important; } html[data-theme="light"] .otp-input:focus, html[data-theme="light"] .chat-input:focus, html[data-theme="light"] .field input:focus{ border-color:#d97706 !important; box-shadow:0 0 0 3px rgba(217,119,6,.15) !important; } /* Chat bubbles */ html[data-theme="light"] .msg.user .msg-bubble{ background:rgba(217,119,6,.10) !important; border-color:rgba(217,119,6,.20) !important; color:#451a03 !important; } html[data-theme="light"] .msg.ai .msg-bubble{ background:#faf7ed !important; border-color:rgba(180,83,9,.10) !important; color:#44403c !important; } /* Tables */ html[data-theme="light"] th{border-bottom-color:rgba(180,83,9,.18) !important;color:#a8a29e !important} html[data-theme="light"] td{border-bottom-color:rgba(180,83,9,.06) !important} html[data-theme="light"] tr:hover td{background:rgba(217,119,6,.03) !important} /* Hero numbers — keep amber but adjust */ html[data-theme="light"] .score-big, html[data-theme="light"] .kc-v{ color:#1c1917 !important; text-shadow:none !important; } html[data-theme="light"] .logo-name span{color:#d97706 !important} /* Particles — almost invisible in light mode */ html[data-theme="light"] #cv{opacity:.15 !important} /* Phase bars track */ html[data-theme="light"] .ph-track, html[data-theme="light"] .timer-track, html[data-theme="light"] .day-load{ background:rgba(180,83,9,.08) !important; } /* Scrollbar */ html[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(180,83,9,.25) !important} /* ── THEME TOGGLE BUTTON ── */ .dpl-theme-toggle{ position:fixed; bottom:20px; right:20px; width:44px; height:44px; border-radius:50%; background:rgba(12,9,4,.92); border:1px solid rgba(245,158,11,.20); color:#fbbf24; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:1000; transition:transform .25s cubic-bezier(.34,1.4,.64,1), background .2s, border-color .2s; backdrop-filter:blur(12px); box-shadow:0 4px 16px rgba(0,0,0,.4), 0 0 0 1px rgba(245,158,11,.08); } .dpl-theme-toggle:hover{ transform:scale(1.08) rotate(-12deg); border-color:rgba(245,158,11,.45); } .dpl-theme-toggle svg{ width:20px; height:20px; transition:transform .4s cubic-bezier(.34,1.4,.64,1); } .dpl-theme-toggle .icon-sun{display:none} .dpl-theme-toggle .icon-moon{display:block} html[data-theme="light"] .dpl-theme-toggle{ background:rgba(255,255,255,.92); border-color:rgba(180,83,9,.20); color:#d97706; box-shadow:0 4px 16px rgba(28,25,23,.12), 0 0 0 1px rgba(180,83,9,.08); } html[data-theme="light"] .dpl-theme-toggle:hover{ border-color:rgba(180,83,9,.45); } html[data-theme="light"] .dpl-theme-toggle .icon-sun{display:block} html[data-theme="light"] .dpl-theme-toggle .icon-moon{display:none} /* Smooth crossfade — but skip on initial paint */ html.dpl-theme-ready, html.dpl-theme-ready *{ transition:background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important; } html.dpl-theme-ready .npill a, html.dpl-theme-ready .fpill, html.dpl-theme-ready .qa-btn, html.dpl-theme-ready .btn-sm, html.dpl-theme-ready .send-btn, html.dpl-theme-ready .dpl-theme-toggle{ transition:background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .25s cubic-bezier(.34,1.4,.64,1) !important; }