/* ============================================================ * theme.css — Variables de diseño, modo oscuro y reset base * ------------------------------------------------------------ * RESPONSABILIDAD: * - Define la paleta de colores y tokens de diseño globales * (--navy, --accent, --bg, --card, --radius, --sidebar, etc). * - Provee el override de variables para modo oscuro * (data-theme="dark"). * - Aplica el reset universal (* { box-sizing }) y el estilo * base del . * - Override puntuales de componentes específicos cuando * están en modo oscuro (tablas, badges, alertas, etc). * * Cualquier cambio de paleta o de tipografía global se hace * acá. Las clases específicas viven en components.css o * modulos.css. * ============================================================ */ /* =================== VARIABLES MODO CLARO =================== */ :root{ --navy:#0f1f3d;--navy2:#162847;--navy3:#1e3560; --accent:#3b82f6;--accent2:#60a5fa; --green:#10b981;--red:#ef4444;--amber:#f59e0b;--pink:#ec4899;--gold:#d97706; --white:#fff;--gray50:#f8fafc;--gray100:#f1f5f9;--gray200:#e2e8f0; --gray400:#94a3b8;--gray600:#475569;--gray800:#1e293b; --bg:#f1f5f9;--card:#ffffff;--card2:#f8fafc; --text:#1e293b;--text2:#475569;--border:#e2e8f0; --radius:10px;--sidebar:224px; --shadow:0 1px 3px rgba(0,0,0,.08); } /* =================== VARIABLES MODO OSCURO =================== */ [data-theme="dark"]{ --bg:#0f172a;--card:#1e293b;--card2:#263245; --text:#e2e8f0;--text2:#94a3b8;--border:#334155; --gray50:#1e293b;--gray100:#1e293b;--gray200:#334155; --gray400:#64748b;--navy:#0a1628;--navy2:#0f1f3d;--navy3:#1e3560; --shadow:0 1px 4px rgba(0,0,0,.4); --white:#1e293b; } /* =================== RESET / BASE =================== */ *{box-sizing:border-box;margin:0;padding:0} body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh;font-size:14px} /* =================== DARK MODE OVERRIDES (componentes) =================== */ /* Ajustes finos cuando data-theme="dark" pero la regla base está en * components.css o modulos.css. Mantenemos acá juntos para auditar. */ [data-theme="dark"] .topbar{border-bottom-color:var(--border)} [data-theme="dark"] .nav-item:hover{background:var(--navy3)} [data-theme="dark"] select,[data-theme="dark"] input,[data-theme="dark"] textarea{ background:var(--card2)!important;color:var(--text)!important;border-color:var(--border)!important} [data-theme="dark"] .kpi,[data-theme="dark"] .card{box-shadow:var(--shadow)} [data-theme="dark"] .tbl thead th{background:var(--card2)} [data-theme="dark"] .tbl tr:hover{background:var(--card2)} [data-theme="dark"] .subtab{background:var(--card2);color:var(--text2)} [data-theme="dark"] .subtab.active{background:var(--card);color:var(--text)} [data-theme="dark"] .badge{opacity:.9} [data-theme="dark"] .crm-add-btn{border-color:var(--border);color:var(--text2)} [data-theme="dark"] .crm-add-btn:hover{background:var(--card2)} [data-theme="dark"] .vac-cal-day{color:var(--text)} [data-theme="dark"] .vac-cal-day.other-month{color:var(--text2)} [data-theme="dark"] #login-screen{background:linear-gradient(135deg,#0a1628,#1e293b)} [data-theme="dark"] .login-box{background:var(--card);border:1px solid var(--border)} [data-theme="dark"] .bar-bg{background:var(--card2)} [data-theme="dark"] .modal-box,[data-theme="dark"] .lead-modal,[data-theme="dark"] .lead-detail{border:1px solid var(--border)} [data-theme="dark"] .crm-card{box-shadow:none} [data-theme="dark"] .crm-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.3)} [data-theme="dark"] .alert-amber{background:rgba(245,158,11,.15);color:#fcd34d;border-color:rgba(245,158,11,.3)} [data-theme="dark"] .alert-red{background:rgba(239,68,68,.15);color:#fca5a5;border-color:rgba(239,68,68,.3)} [data-theme="dark"] .alert-green{background:rgba(16,185,129,.15);color:#6ee7b7;border-color:rgba(16,185,129,.3)} [data-theme="dark"] .alert-blue{background:rgba(59,130,246,.15);color:#93c5fd;border-color:rgba(59,130,246,.3)} [data-theme="dark"] .alert-card.critical{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.25)} [data-theme="dark"] .alert-card.warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.25)} [data-theme="dark"] .alert-card.info{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.25)} [data-theme="dark"] .alert-card.ok{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.25)} [data-theme="dark"] .badge-green{background:rgba(16,185,129,.2);color:#6ee7b7} [data-theme="dark"] .badge-red{background:rgba(239,68,68,.2);color:#fca5a5} [data-theme="dark"] .badge-amber{background:rgba(245,158,11,.2);color:#fcd34d} [data-theme="dark"] .badge-blue{background:rgba(59,130,246,.2);color:#93c5fd} [data-theme="dark"] .badge-pink{background:rgba(236,72,153,.2);color:#f9a8d4} [data-theme="dark"] .ev-item{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.05)} [data-theme="dark"] .vac-conflict-badge{background:rgba(239,68,68,.15);color:#fca5a5;border-color:rgba(239,68,68,.3)} [data-theme="dark"] .alert-title{color:var(--text)} [data-theme="dark"] .alert-desc{color:var(--text2)}