/* ui2.css — UX 2.0 rollout: modo oscuro + píldora de tema (landing/portal/admin) Fase 2-3 del refresh. Se enlaza DESPUÉS de ui.css. El tema explícito vive en (persistido en localStorage 'hb-theme'). */ /* ── Píldora de tema (fija, esquina inferior derecha, safe-area) ── */ #theme-pill{ position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:2147483000; padding:10px 16px; border-radius:999px; cursor:pointer; user-select:none; font:600 12.5px/1 'Inter',system-ui,sans-serif; letter-spacing:.02em; background:rgba(28,29,22,.88); color:#f2efe4; border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2); box-shadow:0 10px 30px -8px rgba(0,0,0,.45); transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .2s; } #theme-pill:hover{ transform:translateY(-2px) scale(1.03); } #theme-pill:active{ transform:scale(.95); } [data-theme="dark"] #theme-pill{ background:rgba(246,242,231,.92); color:#3a3b2e; border-color:rgba(0,0,0,.08); } /* ── MODO OSCURO curado (portal + admin + páginas con ui.css) ── */ [data-theme="dark"]{ color-scheme:dark; } [data-theme="dark"] body{ background:#17180f !important; background-image:radial-gradient(1100px 560px at 50% -8%, rgba(197,167,107,.08), transparent 60%) !important; color:#eceadf !important; } /* Superficies tipo tarjeta (misma lista que ui.css) */ [data-theme="dark"] .card,[data-theme="dark"] .qa-box,[data-theme="dark"] .stat-card, [data-theme="dark"] .fn-card,[data-theme="dark"] .tcard,[data-theme="dark"] .shop, [data-theme="dark"] .mod,[data-theme="dark"] .links-card,[data-theme="dark"] .funnel-card, [data-theme="dark"] .kb-card,[data-theme="dark"] .prospect-card,[data-theme="dark"] .les, [data-theme="dark"] .prog-band,[data-theme="dark"] .hub-btn,[data-theme="dark"] #modal-box, [data-theme="dark"] .login-card,[data-theme="dark"] .neu-panel{ background:#22231a !important; border-color:rgba(255,255,255,.09) !important; color:#eceadf !important; box-shadow:0 1px 2px rgba(0,0,0,.3), 0 18px 40px -14px rgba(0,0,0,.5) !important; } [data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3{ color:#cfd3b8 !important; } [data-theme="dark"] p,[data-theme="dark"] label,[data-theme="dark"] td,[data-theme="dark"] th, [data-theme="dark"] li,[data-theme="dark"] span:not(.kb-badge):not(.badge):not(.pill){ color:inherit; } /* Inputs */ [data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{ background:#1b1c13 !important; color:#eceadf !important; border-color:rgba(255,255,255,.14) !important; } [data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{ color:#8d8877 !important; } /* Botones secundarios / quick */ [data-theme="dark"] .fup-quick,[data-theme="dark"] .week-btn,[data-theme="dark"] .btn-back, [data-theme="dark"] .tab,[data-theme="dark"] .seg-btn,[data-theme="dark"] .ctrl-btn{ background:#2a2b20 !important; color:#e4e1d2 !important; border-color:rgba(255,255,255,.14) !important; } /* Tablas (admin) */ [data-theme="dark"] table{ color:#eceadf !important; } [data-theme="dark"] tr,[data-theme="dark"] td,[data-theme="dark"] th{ background:transparent !important; border-color:rgba(255,255,255,.08) !important; } /* Check-list semanal (portal) */ [data-theme="dark"] .cell{ background:#1b1c13 !important; border-color:rgba(255,255,255,.22) !important; } [data-theme="dark"] .cell.on{ background:#8a9068 !important; border-color:#8a9068 !important; } [data-theme="dark"] .chk-item,[data-theme="dark"] .refl-t{ background:#1b1c13 !important; border-color:rgba(255,255,255,.12) !important; color:#eceadf !important; } [data-theme="dark"] .wgrid .htx{ color:#e4e1d2 !important; } [data-theme="dark"] .wgrid td.col-today{ background:rgba(197,167,107,.12) !important; } /* Overlays */ [data-theme="dark"] #modal-overlay,[data-theme="dark"] [id$="-ov"]{ background:rgba(0,0,0,.6) !important; } /* Scrollbars */ [data-theme="dark"] *::-webkit-scrollbar-thumb{ background:rgba(197,167,107,.35); background-clip:content-box; } /* ── Impresión: plan.html/resultado.html son documentos PDF — siempre claros ── */ @media print{ #theme-pill{ display:none !important; } [data-theme="dark"] body{ background:#fff !important; color:#2e2e2e !important; } [data-theme="dark"] .card,[data-theme="dark"] .qa-box{ background:#fff !important; color:#2e2e2e !important; box-shadow:none !important; } [data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3{ color:#535a3d !important; } }