/* ============================================================================ * Modo oscuro global del sistema * Aplica cuando tiene la clase "dark" * ========================================================================== */ /* -------- Base -------- */ html.dark body { background-color: #0f172a; color: #e2e8f0; } html.dark main { background: linear-gradient(to bottom right, #0f172a, #1e293b, #0f172a) !important; } /* -------- Fondos Tailwind -------- */ html.dark .bg-white { background-color: #1e293b !important; } html.dark .bg-gray-50, html.dark .bg-gray-100, html.dark .bg-slate-50, html.dark .bg-slate-50\/50 { background-color: #1e293b !important; } html.dark .bg-slate-100, html.dark .bg-gray-200 { background-color: #334155 !important; } html.dark .bg-slate-200 { background-color: #475569 !important; } /* Gradientes claros neutros */ html.dark .from-slate-50, html.dark .via-white, html.dark .to-slate-50, html.dark .from-white, html.dark .to-white, html.dark .from-gray-50, html.dark .to-gray-50 { --tw-gradient-from: #0f172a !important; --tw-gradient-via: #1e293b !important; --tw-gradient-to: #0f172a !important; } /* Gradientes suaves de color (from-*-50 / to-*-50) — los volvemos tintes oscuros */ html.dark .from-emerald-50, html.dark .from-green-50, html.dark .to-emerald-50, html.dark .to-green-50, html.dark .via-emerald-50, html.dark .via-green-50 { --tw-gradient-from: rgba(16, 185, 129, 0.12) !important; --tw-gradient-to: rgba(16, 185, 129, 0.04) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html.dark .from-teal-50, html.dark .from-cyan-50, html.dark .to-teal-50, html.dark .to-cyan-50, html.dark .via-teal-50, html.dark .via-cyan-50 { --tw-gradient-from: rgba(20, 184, 166, 0.12) !important; --tw-gradient-to: rgba(20, 184, 166, 0.04) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html.dark .from-blue-50, html.dark .from-sky-50, html.dark .from-indigo-50, html.dark .to-blue-50, html.dark .to-sky-50, html.dark .to-indigo-50, html.dark .via-blue-50, html.dark .via-sky-50, html.dark .via-indigo-50 { --tw-gradient-from: rgba(59, 130, 246, 0.12) !important; --tw-gradient-to: rgba(59, 130, 246, 0.04) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html.dark .from-amber-50, html.dark .from-yellow-50, html.dark .from-orange-50, html.dark .to-amber-50, html.dark .to-yellow-50, html.dark .to-orange-50, html.dark .via-amber-50, html.dark .via-yellow-50, html.dark .via-orange-50 { --tw-gradient-from: rgba(245, 158, 11, 0.12) !important; --tw-gradient-to: rgba(245, 158, 11, 0.04) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html.dark .from-red-50, html.dark .from-rose-50, html.dark .to-red-50, html.dark .to-rose-50, html.dark .via-red-50, html.dark .via-rose-50 { --tw-gradient-from: rgba(239, 68, 68, 0.12) !important; --tw-gradient-to: rgba(239, 68, 68, 0.04) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html.dark .from-purple-50, html.dark .from-violet-50, html.dark .from-pink-50, html.dark .from-fuchsia-50, html.dark .to-purple-50, html.dark .to-violet-50, html.dark .to-pink-50, html.dark .to-fuchsia-50, html.dark .via-purple-50, html.dark .via-violet-50, html.dark .via-pink-50, html.dark .via-fuchsia-50 { --tw-gradient-from: rgba(168, 85, 247, 0.12) !important; --tw-gradient-to: rgba(168, 85, 247, 0.04) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } /* Bordes de color suaves (border-*-200/300) — los llevamos al tono de acento translúcido */ html.dark .border-emerald-200, html.dark .border-emerald-300, html.dark .border-green-200, html.dark .border-green-300 { border-color: rgba(16, 185, 129, 0.3) !important; } html.dark .border-teal-200, html.dark .border-teal-300, html.dark .border-cyan-200, html.dark .border-cyan-300 { border-color: rgba(20, 184, 166, 0.3) !important; } html.dark .border-blue-200, html.dark .border-blue-300, html.dark .border-sky-200, html.dark .border-sky-300, html.dark .border-indigo-200, html.dark .border-indigo-300 { border-color: rgba(59, 130, 246, 0.3) !important; } html.dark .border-amber-200, html.dark .border-amber-300, html.dark .border-yellow-200, html.dark .border-yellow-300, html.dark .border-orange-200, html.dark .border-orange-300 { border-color: rgba(245, 158, 11, 0.3) !important; } html.dark .border-red-200, html.dark .border-red-300, html.dark .border-rose-200, html.dark .border-rose-300 { border-color: rgba(239, 68, 68, 0.3) !important; } html.dark .border-purple-200, html.dark .border-purple-300, html.dark .border-violet-200, html.dark .border-violet-300, html.dark .border-pink-200, html.dark .border-pink-300 { border-color: rgba(168, 85, 247, 0.3) !important; } /* Textos con acento medio (*-600/700) — aclaramos para que resalten sobre oscuro */ html.dark .text-emerald-600, html.dark .text-green-600 { color: #34d399 !important; } html.dark .text-teal-600, html.dark .text-cyan-600 { color: #2dd4bf !important; } html.dark .text-blue-600, html.dark .text-sky-600, html.dark .text-indigo-600 { color: #60a5fa !important; } html.dark .text-amber-600, html.dark .text-yellow-600, html.dark .text-orange-600 { color: #fbbf24 !important; } html.dark .text-red-600, html.dark .text-rose-600 { color: #f87171 !important; } html.dark .text-purple-600, html.dark .text-violet-600, html.dark .text-pink-600 { color: #c084fc !important; } /* -------- Textos -------- */ html.dark .text-gray-900, html.dark .text-slate-900, html.dark .text-gray-800, html.dark .text-slate-800, html.dark .text-black { color: #f1f5f9 !important; } html.dark .text-gray-700, html.dark .text-slate-700 { color: #cbd5e1 !important; } html.dark .text-gray-600, html.dark .text-slate-600, html.dark .text-gray-500, html.dark .text-slate-500, html.dark .text-gray-400, html.dark .text-slate-400 { color: #94a3b8 !important; } /* -------- Bordes y divisores -------- */ html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300, html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-slate-300, html.dark [class*="divide-slate-"] > :not([hidden]) ~ :not([hidden]), html.dark [class*="divide-gray-"] > :not([hidden]) ~ :not([hidden]) { border-color: #334155 !important; } /* -------- Hover claros -------- */ html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-100:hover, html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-slate-100:hover, html.dark .hover\:bg-white:hover { background-color: #334155 !important; } /* -------- Sombras -------- */ html.dark .shadow, html.dark .shadow-sm, html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow-xl, html.dark .shadow-2xl { box-shadow: 0 10px 30px rgba(0, 0, 0, .5) !important; } /* -------- Inputs / selects / textareas -------- */ html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), html.dark select, html.dark textarea { background-color: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b !important; } /* -------- Tablas -------- */ html.dark table { color: #e2e8f0; } html.dark thead, html.dark th { background-color: #1e293b !important; color: #f1f5f9 !important; } html.dark td { border-color: #334155 !important; } html.dark tr:hover { background-color: #334155 !important; } /* -------- Variables CSS comunes del sistema (admin_dashboard.css, menu.css, etc.) -------- */ html.dark { --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #334155; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --border-color: #334155; --card-bg: #1e293b; /* menu.css */ --text-main: #f1f5f9; --bg-body: #0f172a; --nav-bg: #1e293b; } /* -------- Navegación fija (menu.css .premium-nav) -------- */ html.dark .premium-nav { background: rgba(15, 23, 42, 0.85) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } html.dark .nav-link { color: #94a3b8; } html.dark .nav-link.active { color: #fbbf24; } /* -------- Sidebars y menús custom -------- */ html.dark .sidebar, html.dark .mobile-sidebar, html.dark .admin-sidebar, html.dark .side-menu, html.dark aside { background-color: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; } html.dark .sidebar a, html.dark .mobile-sidebar a, html.dark aside a { color: #cbd5e1 !important; } html.dark .sidebar a:hover, html.dark .mobile-sidebar a:hover, html.dark aside a:hover { background-color: #334155 !important; color: #f1f5f9 !important; } /* -------- Badges / fondos de color suaves (tonos 50/100) -------- */ /* Tailwind pinta bg-*-50/100 + text-*-700/800 para badges de estado. En oscuro los reemplazamos por tintes translúcidos del mismo matiz. */ html.dark .bg-emerald-50, html.dark .bg-emerald-100, html.dark .bg-green-50, html.dark .bg-green-100 { background-color: rgba(16, 185, 129, 0.15) !important; } html.dark .text-emerald-700, html.dark .text-emerald-800, html.dark .text-emerald-900, html.dark .text-green-700, html.dark .text-green-800, html.dark .text-green-900 { color: #6ee7b7 !important; } html.dark .bg-red-50, html.dark .bg-red-100, html.dark .bg-rose-50, html.dark .bg-rose-100 { background-color: rgba(239, 68, 68, 0.15) !important; } html.dark .text-red-700, html.dark .text-red-800, html.dark .text-red-900, html.dark .text-rose-700, html.dark .text-rose-800 { color: #fca5a5 !important; } html.dark .bg-amber-50, html.dark .bg-amber-100, html.dark .bg-yellow-50, html.dark .bg-yellow-100, html.dark .bg-orange-50, html.dark .bg-orange-100 { background-color: rgba(245, 158, 11, 0.15) !important; } html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-amber-900, html.dark .text-yellow-700, html.dark .text-yellow-800, html.dark .text-orange-700, html.dark .text-orange-800 { color: #fcd34d !important; } html.dark .bg-blue-50, html.dark .bg-blue-100, html.dark .bg-sky-50, html.dark .bg-sky-100, html.dark .bg-indigo-50, html.dark .bg-indigo-100 { background-color: rgba(59, 130, 246, 0.15) !important; } html.dark .text-blue-700, html.dark .text-blue-800, html.dark .text-blue-900, html.dark .text-sky-700, html.dark .text-sky-800, html.dark .text-indigo-700, html.dark .text-indigo-800 { color: #93c5fd !important; } html.dark .bg-purple-50, html.dark .bg-purple-100, html.dark .bg-violet-50, html.dark .bg-violet-100, html.dark .bg-pink-50, html.dark .bg-pink-100, html.dark .bg-fuchsia-50, html.dark .bg-fuchsia-100 { background-color: rgba(168, 85, 247, 0.15) !important; } html.dark .text-purple-700, html.dark .text-purple-800, html.dark .text-violet-700, html.dark .text-violet-800, html.dark .text-pink-700, html.dark .text-pink-800 { color: #d8b4fe !important; } html.dark .bg-teal-50, html.dark .bg-teal-100, html.dark .bg-cyan-50, html.dark .bg-cyan-100 { background-color: rgba(20, 184, 166, 0.15) !important; } html.dark .text-teal-700, html.dark .text-teal-800, html.dark .text-cyan-700, html.dark .text-cyan-800 { color: #5eead4 !important; } /* -------- Ring / outline de focus claros -------- */ html.dark .ring-white, html.dark .ring-slate-100, html.dark .ring-slate-200, html.dark .ring-gray-100, html.dark .ring-gray-200 { --tw-ring-color: #334155 !important; } /* -------- Fondos semi-transparentes blancos -------- */ html.dark [class*="bg-white\\/"], html.dark [style*="rgba(255, 255, 255"], html.dark [style*="rgba(255,255,255"] { /* No se puede sobreescribir inline style con CSS, pero sí las clases bg-white/N */ } html.dark .bg-white\/5 { background-color: rgba(255, 255, 255, 0.04) !important; } html.dark .bg-white\/10 { background-color: rgba(255, 255, 255, 0.06) !important; } html.dark .bg-white\/20 { background-color: rgba(255, 255, 255, 0.08) !important; } html.dark .bg-white\/50, html.dark .bg-white\/60, html.dark .bg-white\/70, html.dark .bg-white\/80, html.dark .bg-white\/90, html.dark .bg-white\/95 { background-color: rgba(30, 41, 59, 0.95) !important; } /* -------- Mobile headers fijos (top bar con hamburger) -------- */ html.dark .lg\:hidden[class*="bg-white"], html.dark .md\:hidden[class*="bg-white"] { background-color: rgba(15, 23, 42, 0.95) !important; border-color: #334155 !important; } /* Mobile headers con background inline rgba(255,255,255) */ html.dark .mobile-header { background: rgba(15, 23, 42, 0.95) !important; border-bottom-color: #334155 !important; } html.dark .mobile-header.sticky { background: rgba(15, 23, 42, 0.98) !important; border-bottom-color: #334155 !important; } html.dark .mobile-header.sticky::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent) !important; } /* -------- Sidebar móvil -------- */ html.dark .sidebar-header { border-bottom-color: #334155 !important; } html.dark .sidebar-close-btn { color: #94a3b8; } html.dark .sidebar-close-btn:hover { background-color: rgba(51, 65, 85, 0.8) !important; color: #f1f5f9; } /* -------- Modales / overlays -------- */ html.dark .modal, html.dark .modal-content, html.dark .dialog, html.dark [role="dialog"] { background-color: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; } /* -------- Select options (algunos navegadores honran esto) -------- */ html.dark select option { background-color: #1e293b; color: #e2e8f0; } /* -------- Scrollbar -------- */ html.dark ::-webkit-scrollbar-track { background: #0f172a; } html.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #475569; } html.dark { scrollbar-color: #334155 #0f172a; } /* -------- Iconos y textos utilitarios -------- */ html.dark hr { border-color: #334155 !important; } html.dark code, html.dark pre, html.dark kbd { background-color: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; } /* -------- Toastr (notificaciones) -------- */ html.dark #toast-container > div { box-shadow: 0 10px 30px rgba(0, 0, 0, .6) !important; } /* ============================================================================ * Botón flotante del toggle * ========================================================================== */ #theme-toggle { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 99999; width: 3rem; height: 3rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: #ffffff; color: #f59e0b; border: 1px solid #e2e8f0; box-shadow: 0 10px 25px rgba(15, 23, 42, .15); cursor: pointer; font-size: 1.125rem; transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease; } #theme-toggle:hover { transform: translateY(-2px) rotate(-12deg); } #theme-toggle:active { transform: translateY(0) rotate(0); } html.dark #theme-toggle { background: #1e293b; color: #fbbf24; border-color: #334155; box-shadow: 0 10px 25px rgba(0, 0, 0, .5); } #theme-toggle .icon-sun { display: none; } #theme-toggle .icon-moon { display: inline-block; } html.dark #theme-toggle .icon-sun { display: inline-block; } html.dark #theme-toggle .icon-moon { display: none; } @media (max-width: 767px) { #theme-toggle { bottom: 5.5rem; right: 1rem; width: 2.75rem; height: 2.75rem; } }