/* ══════════════════════════════════════════════════════ JairCode — Light mode overrides Se activa añadiendo la clase `light-mode` a ══════════════════════════════════════════════════════ */ html.light-mode { color-scheme: light; } /* ── Body / fondo ─────────────────────────────────── */ .light-mode body { background: #f1f5f9 !important; background-image: radial-gradient(ellipse at 20% 50%, rgba(220,38,38,0.04) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(59,130,246,0.03) 0%, transparent 50%) !important; color: #1e293b !important; } /* ── Cards / Nav (glass) ──────────────────────────── */ .light-mode .glass { background: rgba(255,255,255,0.92) !important; border-color: rgba(0,0,0,0.08) !important; } /* ── Inputs ───────────────────────────────────────── */ .light-mode .input-field, .light-mode input[type="text"], .light-mode input[type="password"], .light-mode input[type="email"], .light-mode select { background: #f8fafc !important; border-color: rgba(0,0,0,0.14) !important; color: #1e293b !important; } .light-mode .input-field::placeholder, .light-mode input::placeholder, .light-mode select option { color: #94a3b8; } .light-mode .input-wrap i { color: #94a3b8 !important; } /* ── Texto Tailwind ───────────────────────────────── */ .light-mode .text-white { color: #0f172a !important; } .light-mode .text-slate-100 { color: #1e293b !important; } .light-mode .text-slate-200 { color: #334155 !important; } .light-mode .text-slate-300 { color: #475569 !important; } .light-mode .text-slate-400 { color: #64748b !important; } .light-mode .text-slate-500 { color: #94a3b8 !important; } .light-mode .text-slate-600 { color: #94a3b8 !important; } /* ── Fondos Tailwind ──────────────────────────────── */ .light-mode .bg-slate-800 { background-color: #e2e8f0 !important; } .light-mode .bg-slate-900 { background-color: #f1f5f9 !important; } .light-mode .bg-opacity-40 {} /* let specific rules handle */ /* ── Bordes Tailwind ──────────────────────────────── */ .light-mode .border-slate-700 { border-color: rgba(0,0,0,0.10) !important; } .light-mode .border-slate-800 { border-color: rgba(0,0,0,0.06) !important; } .light-mode .border-b { border-color: rgba(0,0,0,0.07); } /* ── Botones ghost / gray ─────────────────────────── */ .light-mode .btn-ghost { background: rgba(100,116,139,0.10) !important; border-color: rgba(100,116,139,0.22) !important; color: #475569 !important; } .light-mode .btn-ghost:hover { background: rgba(100,116,139,0.22) !important; color: #1e293b !important; } .light-mode .btn-gray { background: rgba(100,116,139,0.10) !important; border-color: rgba(100,116,139,0.22) !important; color: #475569 !important; } .light-mode .btn-gray:hover { background: rgba(100,116,139,0.22) !important; color: #1e293b !important; } /* ── Badge de usuario en nav ──────────────────────── */ .light-mode .bg-slate-800.rounded-full { background-color: #e2e8f0 !important; border-color: rgba(0,0,0,0.08) !important; } /* ── Tabla ────────────────────────────────────────── */ .light-mode .tr-hover:hover { background: rgba(0,0,0,0.025) !important; } .light-mode thead tr { border-color: rgba(0,0,0,0.08) !important; } .light-mode tbody tr { border-color: rgba(0,0,0,0.05) !important; } /* ── Email list items (portal) ────────────────────── */ .light-mode .email-list-item { background: rgba(241,245,249,0.9) !important; border-color: rgba(0,0,0,0.10) !important; } .light-mode .email-list-item:hover { border-color: rgba(0,0,0,0.18) !important; } /* ── Slide panel (admin) ──────────────────────────── */ .light-mode .slide-panel { background: #f8fafc !important; border-left-color: rgba(0,0,0,0.08) !important; } .light-mode .slide-panel .sticky { background: #f1f5f9 !important; border-color: rgba(0,0,0,0.08) !important; } .light-mode .panel-backdrop { background: rgba(0,0,0,0.25) !important; } /* ── Infopanel inside rules slide ─────────────────── */ .light-mode .bg-slate-800.rounded-xl { background: #e9eef4 !important; border-color: rgba(0,0,0,0.08) !important; } /* ── Tags de reglas ───────────────────────────────── */ .light-mode .tag { background: rgba(220,38,38,0.10) !important; border-color: rgba(220,38,38,0.25) !important; color: #dc2626 !important; } .light-mode .tag-blue { background: rgba(59,130,246,0.10) !important; border-color: rgba(59,130,246,0.25) !important; color: #2563eb !important; } /* ── Regla cards ──────────────────────────────────── */ .light-mode .rule-card { background: rgba(255,255,255,0.85) !important; border-color: rgba(0,0,0,0.09) !important; } /* ── Overlays / modals ────────────────────────────── */ .light-mode .overlay { background: rgba(0,0,0,0.40) !important; } .light-mode .overlay .glass { background: rgba(255,255,255,0.97) !important; } /* ── Filtro de asunto (portal inline style) ───────── */ .light-mode #subject-filter { background: #f1f5f9 !important; border-color: rgba(0,0,0,0.12) !important; color: #1e293b !important; } /* ── Barra de intentos (login) ────────────────────── */ .light-mode .attempts-bar { background: rgba(0,0,0,0.08) !important; } /* ── Botón theme en login (fixed top-right) ───────── */ .light-mode #theme-toggle.fixed { background: #e2e8f0 !important; border-color: rgba(0,0,0,0.10) !important; color: #475569 !important; } .light-mode #theme-toggle.fixed:hover { background: #cbd5e1 !important; color: #1e293b !important; } /* ── iframe container (portal email body) ─────────── */ /* El iframe ya usa fondo blanco, no necesita override */ /* ── Mobile dropdown menu ─────────────────────────── */ .light-mode #mobile-menu { border-color: rgba(0,0,0,0.08) !important; } .light-mode #mobile-menu a:hover, .light-mode #mobile-menu button:hover { background: rgba(0,0,0,0.05) !important; } /* ── Tab buttons ──────────────────────────────────── */ .light-mode .tab-btn { color: #64748b; } .light-mode .tab-btn:hover { background: rgba(0,0,0,0.05) !important; color: #1e293b; } .light-mode .tab-btn.active { background: rgba(220,38,38,0.10) !important; color: #dc2626; border-color: rgba(220,38,38,0.25); } /* ── Log terminal (siempre oscuro) ────────────────── */ /* El terminal mantiene su fondo oscuro en light mode */ /* ── Scrollbar ────────────────────────────────────── */ .light-mode ::-webkit-scrollbar-track { background: #e2e8f0; }