/* ============================================================ MODO OSCURO — Sistema de Verificación Sísmica Estrategia: en vez de agregar la clase dark: de Tailwind en cientos de sitios repartidos por 14 vistas, sobreescribimos aquí los mismos colores base cuando tiene la clase "dark". Un solo archivo, fácil de mantener. ============================================================ */ /* Transición suave entre temas (no golpe seco) */ *, *::before, *::after { transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease; } /* ---------- Fondos ---------- */ html.dark body, html.dark .bg-slate-50 { background-color: #0f172a !important; } /* El login usa un degradado (bg-gradient-to-br) que pinta por encima del background-color normal — hay que anularlo explicitamente en oscuro */ html.dark body.bg-gradient-to-br { background-image: none !important; background-color: #0f172a !important; } html.dark .bg-white { background-color: #1e293b !important; } html.dark .bg-slate-100 { background-color: #334155 !important; } html.dark .bg-sky-50, html.dark .bg-sky-50\/50 { background-color: #0c4a6e !important; } html.dark .bg-amber-50 { background-color: #78350f !important; } html.dark .bg-emerald-50 { background-color: #064e3b !important; } html.dark .bg-red-50 { background-color: #7f1d1d !important; } html.dark .bg-orange-50 { background-color: #7c2d12 !important; } /* ---------- Textos ---------- */ html.dark .text-slate-800 { color: #f1f5f9 !important; } html.dark .text-slate-700 { color: #e2e8f0 !important; } html.dark .text-slate-600 { color: #cbd5e1 !important; } html.dark .text-slate-500 { color: #94a3b8 !important; } html.dark .text-slate-400 { color: #64748b !important; } html.dark .text-slate-300 { color: #475569 !important; } /* ---------- Bordes ---------- */ html.dark .border-slate-200 { border-color: #334155 !important; } html.dark .border-slate-300 { border-color: #475569 !important; } html.dark .border-slate-100 { border-color: #1e293b !important; } html.dark .divide-slate-100 > * + * { border-color: #334155 !important; } /* ---------- Inputs y formularios ---------- */ html.dark input, html.dark select, html.dark textarea { background-color: #0f172a !important; color: #f1f5f9 !important; border-color: #475569 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b !important; } html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: #38bdf8 !important; } /* ---------- Tablas ---------- */ html.dark table thead.bg-slate-50, html.dark thead.bg-slate-50 { background-color: #0f172a !important; } html.dark tr.hover\:bg-slate-50:hover, html.dark .hover\:bg-slate-50:hover { background-color: #334155 !important; } /* ---------- Sombras (mas suaves en oscuro) ---------- */ html.dark .shadow-sm, html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow-xl { box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; } /* ---------- Botón de tema ---------- */ .boton-tema { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid #e2e8f0; color: #64748b; cursor: pointer; background: transparent; } .boton-tema:hover { background: #f1f5f9; } html.dark .boton-tema { border-color: #334155; color: #cbd5e1; } html.dark .boton-tema:hover { background: #334155; } /* Ícono de sol/luna: solo se muestra el que corresponde al tema activo */ .icono-claro { display: block; } .icono-oscuro { display: none; } html.dark .icono-claro { display: none; } html.dark .icono-oscuro { display: block; }