/** * light-mode.css — Sistema Kuantion * Overrides de colores para el modo claro. * Se activa cuando tiene la clase "light". */ html.light { /* Fondos principales */ --bg-base: #f1f5f9; --bg-surface: #ffffff; --bg-card: #f8fafc; --bg-sidebar: #ffffff; --bg-header: #ffffff; --border-color: #e2e8f0; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; } /* Body y fondos globales */ html.light body { background-color: #f1f5f9 !important; color: #0f172a !important; } /* Sidebar */ html.light aside { background-color: #ffffff !important; border-color: #e2e8f0 !important; } html.light aside .sidebar-link { color: #475569 !important; } html.light aside .sidebar-link:hover, html.light aside .sidebar-link.active { background: rgba(13, 127, 242, 0.08) !important; color: #0d7ff2 !important; } /* Headers */ html.light header { background-color: #ffffff !important; border-color: #e2e8f0 !important; } /* Inputs y selects */ html.light input, html.light select, html.light textarea { background-color: #f8fafc !important; border-color: #cbd5e1 !important; color: #0f172a !important; } /* Cards / Glass panels */ html.light .glass-panel { background: rgba(255, 255, 255, 0.9) !important; border-color: #e2e8f0 !important; } /* Slate colors overrides */ html.light .bg-\[#0b1120\] { background-color: #f1f5f9 !important; } html.light .bg-\[#0f172a\] { background-color: #ffffff !important; } html.light .bg-\[#1e293b\] { background-color: #f1f5f9 !important; } html.light .bg-slate-900\/50 { background-color: rgba(241, 245, 249, 0.8) !important; } html.light .bg-slate-800\/50 { background-color: rgba(226, 232, 240, 0.7) !important; } html.light .bg-slate-800\/30 { background-color: rgba(226, 232, 240, 0.4) !important; } html.light .bg-slate-800 { background-color: #e2e8f0 !important; } html.light .bg-slate-700 { background-color: #cbd5e1 !important; } /* Texto */ html.light .text-slate-300 { color: #334155 !important; } html.light .text-slate-400 { color: #475569 !important; } html.light .text-slate-500 { color: #64748b !important; } html.light .text-slate-600 { color: #94a3b8 !important; } html.light .text-white { color: #0f172a !important; } /* Bordes */ html.light .border-slate-800 { border-color: #e2e8f0 !important; } html.light .border-slate-800\/50 { border-color: rgba(226, 232, 240, 0.8) !important; } html.light .border-slate-700 { border-color: #cbd5e1 !important; } /* Divide */ html.light .divide-slate-800>*+* { border-color: #e2e8f0 !important; } html.light .divide-slate-800\/50>*+* { border-color: rgba(226, 232, 240, 0.5) !important; } /* Hover rows de tablas */ html.light tr:hover { background-color: rgba(241, 245, 249, 0.8) !important; } /* Scrollbar */ html.light ::-webkit-scrollbar-track { background: #f1f5f9; } html.light ::-webkit-scrollbar-thumb { background: #cbd5e1; } /* Mobile Drawer */ html.light #mn-header { background-color: #ffffff !important; border-color: #e2e8f0 !important; } html.light #mn-drawer { background-color: #ffffff !important; border-color: #e2e8f0 !important; } html.light #mn-menu .sidebar-link { color: #475569 !important; } /* Modales */ html.light .modal { color: #0f172a !important; } html.light .modal .bg-\[#1e293b\] { background-color: #ffffff !important; } html.light .modal .bg-\[#0f172a\]\/50 { background-color: rgba(248, 250, 252, 0.8) !important; } /* Logo: cambiar a versión dark en light mode */ html.light img[src*="logo_kuantion_dark"] { filter: none; }