/* ===================================================== DARK MODE — Global overrides Activated when has class="dark" ===================================================== */ /* Card */ html.dark .card { background-color: #1f2937 !important; border-color: #374151 !important; color: #e5e7eb !important; } html.dark .card-header { background-color: #111827 !important; border-bottom-color: #374151 !important; color: #f3f4f6 !important; } html.dark .card-body { background-color: #1f2937 !important; color: #e5e7eb !important; } html.dark .card-footer { background-color: #111827 !important; border-top-color: #374151 !important; color: #d1d5db !important; } /* Tables */ html.dark .table { color: #e5e7eb !important; border-color: #374151 !important; --bs-table-bg: #1f2937 !important; --bs-table-striped-bg: rgba(55, 65, 81, 0.5) !important; --bs-table-hover-bg: rgba(75, 85, 99, 0.6) !important; } html.dark .table th, html.dark .table td { border-color: #374151 !important; color: #e5e7eb !important; } html.dark .table thead { border-color: #374151 !important; } html.dark .table thead th:not([style]) { background-color: #111827 !important; color: #f3f4f6 !important; border-color: #374151 !important; } html.dark .table-striped > tbody > tr:nth-of-type(odd) > *:not([style]) { background-color: rgba(55, 65, 81, 0.5) !important; color: #e5e7eb !important; } html.dark .table-hover > tbody > tr:hover > *:not([style]) { background-color: rgba(75, 85, 99, 0.6) !important; color: #f3f4f6 !important; } /* Form controls */ html.dark .form-control { background-color: #374151 !important; border-color: #4b5563 !important; color: #e5e7eb !important; } html.dark .form-control:focus { background-color: #374151 !important; border-color: #6b7280 !important; color: #f3f4f6 !important; box-shadow: 0 0 0 0.25rem rgba(107, 114, 128, 0.25) !important; } html.dark .form-control::placeholder { color: #9ca3af !important; } html.dark .form-select { background-color: #374151 !important; border-color: #4b5563 !important; color: #e5e7eb !important; } html.dark .form-check-label { color: #d1d5db !important; } /* Buttons */ html.dark .btn-outline-primary { color: #93c5fd !important; border-color: #93c5fd !important; } html.dark .btn-outline-primary:hover { background-color: #3b82f6 !important; color: #fff !important; } html.dark .btn-outline-danger { color: #fca5a5 !important; border-color: #fca5a5 !important; } html.dark .btn-outline-danger:hover { background-color: #ef4444 !important; color: #fff !important; } html.dark .btn-outline-secondary { color: #d1d5db !important; border-color: #6b7280 !important; } html.dark .btn-outline-secondary:hover { background-color: #4b5563 !important; color: #fff !important; } html.dark .btn-sm.btn-info { background-color: #0e7490 !important; border-color: #0e7490 !important; } html.dark .btn-sm.btn-warning { background-color: #b45309 !important; border-color: #b45309 !important; } html.dark .btn-sm.btn-success { background-color: #065f46 !important; border-color: #065f46 !important; } /* Spinner */ html.dark .spinner-border { color: #60a5fa !important; } /* Alerts */ html.dark .alert-warning { background-color: #78350f !important; border-color: #92400e !important; color: #fde68a !important; } html.dark .alert-danger { background-color: #7f1d1d !important; border-color: #991b1b !important; color: #fecaca !important; } html.dark .alert-info { background-color: #164e63 !important; border-color: #155e75 !important; color: #a5f3fc !important; } /* Modals */ html.dark .modal-content { background-color: #1f2937 !important; border-color: #374151 !important; color: #e5e7eb !important; } html.dark .modal-header { background-color: #111827 !important; border-bottom-color: #374151 !important; color: #f3f4f6 !important; } html.dark .modal-footer { background-color: #111827 !important; border-top-color: #374151 !important; } /* Input groups */ html.dark .input-group-text { background-color: #374151 !important; border-color: #4b5563 !important; color: #d1d5db !important; } /* Nav / tabs */ html.dark .nav-tabs { border-bottom-color: #374151 !important; } html.dark .nav-tabs .nav-link { color: #9ca3af !important; } html.dark .nav-tabs .nav-link:hover { color: #e5e7eb !important; border-color: #4b5563 !important; } html.dark .nav-tabs .nav-link.active { background-color: #1f2937 !important; border-color: #374151 #374151 #1f2937 !important; color: #f3f4f6 !important; } /* List groups */ html.dark .list-group-item { background-color: #1f2937 !important; border-color: #374151 !important; color: #e5e7eb !important; } html.dark .list-group-item-action:hover { background-color: #374151 !important; color: #f3f4f6 !important; } /* Border utility */ html.dark .border { border-color: #374151 !important; } /* Labels and text */ html.dark label { color: #d1d5db; } /* Generic container with border */ html.dark .col-span-1.border { border-color: #374151 !important; } /* Bootstrap badge */ html.dark .badge.bg-secondary { background-color: #4b5563 !important; } /* Blazorise DataGrid overrides */ html.dark .b-table { background-color: #1f2937 !important; color: #e5e7eb !important; border-color: #374151 !important; } html.dark .b-table th, html.dark .b-table td { background-color: inherit !important; color: #e5e7eb !important; border-color: #374151 !important; } html.dark .b-table thead th { background-color: #111827 !important; color: #f3f4f6 !important; } html.dark .b-table tbody tr:hover td { background-color: rgba(75, 85, 99, 0.5) !important; } html.dark .pagination .page-link { background-color: #374151 !important; border-color: #4b5563 !important; color: #d1d5db !important; } html.dark .pagination .page-link:hover { background-color: #4b5563 !important; color: #f3f4f6 !important; } html.dark .pagination .page-item.active .page-link { background-color: #3b82f6 !important; border-color: #3b82f6 !important; color: #fff !important; } /* ===================================================== Global Tailwind utility class overrides for dark mode These cover components that use Tailwind without dark: prefixes ===================================================== */ /* Background overrides */ html.dark [class~="bg-white"] { background-color: #1f2937 !important; } html.dark [class~="bg-gray-50"] { background-color: #111827 !important; } html.dark [class~="bg-gray-100"] { background-color: #1f2937 !important; } html.dark [class~="bg-gray-200"] { background-color: #374151 !important; } html.dark [class~="bg-indigo-50"] { background-color: #1e1b4b !important; } html.dark [class~="bg-blue-50"] { background-color: #172554 !important; } html.dark [class~="bg-blue-100"] { background-color: #1e3a5f !important; } html.dark [class~="bg-yellow-50"] { background-color: #451a03 !important; } html.dark [class~="bg-orange-50"] { background-color: #431407 !important; } html.dark [class~="bg-red-50"] { background-color: #450a0a !important; } html.dark [class~="bg-green-50"] { background-color: #052e16 !important; } /* Text color overrides */ html.dark [class~="text-gray-900"] { color: #f3f4f6 !important; } html.dark [class~="text-gray-800"] { color: #e5e7eb !important; } html.dark [class~="text-gray-700"] { color: #d1d5db !important; } html.dark [class~="text-gray-600"] { color: #9ca3af !important; } html.dark [class~="text-gray-500"] { color: #9ca3af !important; } html.dark [class~="text-gray-400"] { color: #6b7280 !important; } /* Colored text adjustments for dark backgrounds */ html.dark [class~="text-blue-900"] { color: #93c5fd !important; } html.dark [class~="text-blue-800"] { color: #93c5fd !important; } html.dark [class~="text-green-900"] { color: #6ee7b7 !important; } html.dark [class~="text-green-800"] { color: #6ee7b7 !important; } html.dark [class~="text-red-900"] { color: #fca5a5 !important; } html.dark [class~="text-red-800"] { color: #fca5a5 !important; } html.dark [class~="text-yellow-800"] { color: #fde68a !important; } html.dark [class~="text-yellow-700"] { color: #fde68a !important; } /* Border overrides */ html.dark [class~="border-gray-200"] { border-color: #374151 !important; } html.dark [class~="border-gray-300"] { border-color: #374151 !important; } html.dark [class~="border-blue-200"] { border-color: #1e3a5f !important; } html.dark [class~="border-green-200"] { border-color: #14532d !important; } html.dark [class~="border-red-200"] { border-color: #7f1d1d !important; } html.dark [class~="border-yellow-200"] { border-color: #78350f !important; } /* Divide color overrides */ html.dark [class~="divide-gray-200"] > * + * { border-color: #374151 !important; } /* Hover state overrides — use lower specificity to allow explicit dark: variants to win */ html.dark [class~="hover:bg-white"]:hover { background-color: #374151 !important; } html.dark [class~="hover:bg-gray-50"]:hover { background-color: #374151 !important; } html.dark [class~="hover:bg-gray-100"]:hover { background-color: #374151 !important; } html.dark [class~="hover:bg-gray-200"]:hover { background-color: #4b5563 !important; } html.dark [class~="hover:bg-indigo-50"]:hover { background-color: #312e81 !important; } html.dark [class~="hover:bg-blue-50"]:hover { background-color: #1e3a5f !important; } html.dark [class~="hover:bg-blue-100"]:hover { background-color: #1e40af !important; } html.dark [class~="hover:bg-green-50"]:hover { background-color: #14532d !important; } html.dark [class~="hover:bg-green-100"]:hover { background-color: #166534 !important; } html.dark [class~="hover:bg-red-50"]:hover { background-color: #7f1d1d !important; } html.dark [class~="hover:bg-red-100"]:hover { background-color: #991b1b !important; } html.dark [class~="hover:bg-yellow-50"]:hover { background-color: #78350f !important; } html.dark [class~="hover:bg-yellow-100"]:hover { background-color: #92400e !important; } html.dark [class~="hover:bg-orange-50"]:hover { background-color: #7c2d12 !important; } html.dark [class~="hover:bg-orange-100"]:hover { background-color: #9a3412 !important; } /* Input / textarea with Tailwind classes */ html.dark input[class~="border-gray-300"], html.dark input[class~="border-gray-200"], html.dark textarea[class~="border-gray-300"] { background-color: #374151 !important; border-color: #4b5563 !important; color: #e5e7eb !important; } html.dark select[class~="border-gray-300"], html.dark select[class~="border-gray-200"] { background-color: #374151 !important; border-color: #4b5563 !important; color: #e5e7eb !important; } /* Shadow/ring class containers */ html.dark [class~="shadow-sm"] { box-shadow: 0 1px 2px rgba(0,0,0,0.4) !important; } /* Flatpickr — global dark mode overrides */ html.dark .flatpickr-calendar { background: #1f2937 !important; border-color: #374151 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important; color: #e5e7eb !important; } html.dark .flatpickr-months { background: #111827 !important; } html.dark .flatpickr-month { color: #f3f4f6 !important; fill: #f3f4f6 !important; } html.dark .flatpickr-prev-month svg, html.dark .flatpickr-next-month svg { fill: #9ca3af !important; } html.dark .flatpickr-weekdays { background: #111827 !important; } html.dark .flatpickr-weekday { color: #9ca3af !important; } html.dark .flatpickr-day { color: #e5e7eb !important; border-color: transparent; } html.dark .flatpickr-day:hover, html.dark .flatpickr-day:focus { background: #374151 !important; border-color: #4b5563 !important; } html.dark .flatpickr-day.selected, html.dark .flatpickr-day.startRange, html.dark .flatpickr-day.endRange { background: #3b82f6 !important; border-color: #3b82f6 !important; color: #fff !important; } html.dark .flatpickr-day.today { border-color: #6b7280 !important; } html.dark .flatpickr-day.flatpickr-disabled { color: #4b5563 !important; } html.dark .flatpickr-current-month input.cur-year { color: #f3f4f6 !important; background: transparent !important; } html.dark .flatpickr-current-month .flatpickr-monthDropdown-months { background: #1f2937 !important; color: #f3f4f6 !important; } html.dark .numInputWrapper:hover { background: #374151 !important; } html.dark .numInputWrapper span { border-color: #4b5563 !important; } /* Generic table text — covers tables that don't use Bootstrap .table class */ html.dark table { color: #e5e7eb; background-color: #1f2937; } html.dark table th { color: #f3f4f6; background-color: #111827; border-color: #374151; } html.dark table td { color: #e5e7eb; border-color: #374151; } /* Generic select/input elements without specific border-gray classes */ html.dark select { background-color: #374151 !important; border-color: #4b5563 !important; color: #e5e7eb !important; } html.dark select option { background-color: #374151; color: #e5e7eb; } html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) { background-color: #374151 !important; border-color: #4b5563 !important; color: #e5e7eb !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #9ca3af !important; } /* ===================================================== Scrollbar styling ===================================================== */ html.dark ::-webkit-scrollbar { width: 8px; height: 8px; } html.dark ::-webkit-scrollbar-track { background: #1f2937; border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; } html.dark ::-webkit-scrollbar-corner { background: #1f2937; } html.dark { scrollbar-color: #4b5563 #1f2937; scrollbar-width: thin; } /* ===================================================== highlight-error dark mode — light pink unreadable on dark ===================================================== */ html.dark .highlight-error { background-color: #7f1d1d !important; border-color: #b91c1c !important; color: #fecaca !important; } html.dark .highlight-error td { color: #fecaca !important; } /* bg-gray-300 override (tfoot totals rows etc.) */ html.dark [class~="bg-gray-300"] { background-color: #4b5563 !important; } /* Sidebar sub-menu items — dark:text-white/60 no se genera para elementos con @if en WASM */ html.dark .sidebar ul.sub-menu { color: rgba(255, 255, 255, 0.6) !important; } html.dark .sidebar ul.sub-menu li a { color: rgba(255, 255, 255, 0.6) !important; } html.dark .sidebar ul.sub-menu li a.active { color: rgb(239, 68, 68) !important; } html.dark .sidebar ul.sub-menu li a:hover { color: rgb(239, 68, 68) !important; } /* form-input class (Tailwind forms) */ html.dark .form-input { background-color: #374151 !important; border-color: #4b5563 !important; color: #e5e7eb !important; } html.dark .form-input:focus { background-color: #374151 !important; border-color: #6b7280 !important; color: #f3f4f6 !important; } /* ===================================================== Iconos luna/sol en Topbar — CSS puro, sin x-show de Alpine .icon-light-mode = ícono luna (mostrar en modo claro) .icon-dark-mode = ícono sol (mostrar en modo oscuro) ===================================================== */ .icon-light-mode { display: block; } .icon-dark-mode { display: none; } html.dark .icon-light-mode { display: none !important; } html.dark .icon-dark-mode { display: block !important; } /* ===================================================== Template custom colors (pre-built tailwind.css los define pero el CDN no los conoce para contenido dinámico) dark = #0e1726 darklight = #1b2e4b darkborder= #1b2e4b darkmuted = #888ea8 ===================================================== */ /* ── Backgrounds ── */ html.dark [class~="dark:bg-dark"] { background-color: #0e1726 !important; } html.dark [class~="dark:bg-dark/90"] { background-color: rgba(14,23,38,.9) !important; } html.dark [class~="dark:bg-darklight"] { background-color: #1b2e4b !important; } html.dark [class~="dark:bg-darkborder"] { background-color: #1b2e4b !important; } html.dark [class~="dark:bg-gray-600"] { background-color: #4b5563 !important; } html.dark [class~="dark:bg-gray-700"] { background-color: #374151 !important; } html.dark [class~="dark:bg-gray-800"] { background-color: #1f2937 !important; } html.dark [class~="dark:bg-gray-900"] { background-color: #111827 !important; } html.dark [class~="dark:bg-white/5"] { background-color: rgba(255,255,255,.05) !important; } html.dark [class~="dark:bg-white/80"] { background-color: rgba(255,255,255,.80) !important; } html.dark [class~="dark:bg-red-600"] { background-color: #dc2626 !important; } html.dark [class~="dark:bg-red-700"] { background-color: #b91c1c !important; } html.dark [class~="dark:bg-red-800"] { background-color: #991b1b !important; } html.dark [class~="dark:bg-red-900"] { background-color: #7f1d1d !important; } html.dark [class~="dark:bg-red-900/20"] { background-color: rgba(127,29,29,.2) !important; } html.dark [class~="dark:bg-red-900/30"] { background-color: rgba(127,29,29,.3) !important; } html.dark [class~="dark:bg-red-900/40"] { background-color: rgba(127,29,29,.4) !important; } html.dark [class~="dark:bg-blue-800"] { background-color: #1e40af !important; } html.dark [class~="dark:bg-blue-900"] { background-color: #1e3a8a !important; } html.dark [class~="dark:bg-blue-900/20"] { background-color: rgba(30,58,138,.2) !important; } html.dark [class~="dark:bg-blue-900/30"] { background-color: rgba(30,58,138,.3) !important; } html.dark [class~="dark:bg-green-800"] { background-color: #166534 !important; } html.dark [class~="dark:bg-green-900"] { background-color: #14532d !important; } html.dark [class~="dark:bg-green-900/20"]{ background-color: rgba(20,83,45,.2) !important; } html.dark [class~="dark:bg-green-900/30"]{ background-color: rgba(20,83,45,.3) !important; } html.dark [class~="dark:bg-green-900/40"]{ background-color: rgba(20,83,45,.4) !important; } html.dark [class~="dark:bg-yellow-800"] { background-color: #92400e !important; } html.dark [class~="dark:bg-yellow-900/20"]{ background-color: rgba(78,35,14,.2) !important; } html.dark [class~="dark:bg-yellow-900/30"]{ background-color: rgba(78,35,14,.3) !important; } html.dark [class~="dark:bg-yellow-900/40"]{ background-color: rgba(78,35,14,.4) !important; } html.dark [class~="dark:!bg-yellow-900/20"]{ background-color: rgba(78,35,14,.2) !important; } html.dark [class~="dark:bg-orange-800"] { background-color: #9a3412 !important; } html.dark [class~="dark:bg-orange-900/30"]{ background-color: rgba(124,45,18,.3) !important; } html.dark [class~="dark:bg-orange-900/40"]{ background-color: rgba(124,45,18,.4) !important; } html.dark [class~="dark:bg-indigo-900/10"]{ background-color: rgba(49,46,129,.1) !important; } html.dark [class~="dark:bg-indigo-900/20"]{ background-color: rgba(49,46,129,.2) !important; } html.dark [class~="dark:bg-indigo-900/30"]{ background-color: rgba(49,46,129,.3) !important; } html.dark [class~="dark:bg-indigo-900/40"]{ background-color: rgba(49,46,129,.4) !important; } html.dark [class~="dark:bg-indigo-900/50"]{ background-color: rgba(49,46,129,.5) !important; } html.dark [class~="dark:bg-violet-900"] { background-color: #4c1d95 !important; } html.dark [class~="dark:even:bg-gray-800/30"] { background-color: rgba(31,41,55,.3) !important; } /* ── Text ── */ html.dark [class~="dark:text-white"] { color: #ffffff !important; } html.dark [class~="dark:!text-white"] { color: #ffffff !important; } html.dark [class~="dark:text-white/80"] { color: rgba(255,255,255,.8) !important; } html.dark [class~="dark:text-white/60"] { color: rgba(255,255,255,.6) !important; } html.dark [class~="dark:text-white/30"] { color: rgba(255,255,255,.3) !important; } html.dark [class~="dark:text-darkmuted"] { color: #888ea8 !important; } html.dark [class~="dark:text-gray-100"] { color: #f3f4f6 !important; } html.dark [class~="dark:text-gray-200"] { color: #e5e7eb !important; } html.dark [class~="dark:text-gray-300"] { color: #d1d5db !important; } html.dark [class~="dark:text-gray-400"] { color: #9ca3af !important; } html.dark [class~="dark:text-gray-500"] { color: #6b7280 !important; } html.dark [class~="dark:text-slate-300"] { color: #cbd5e1 !important; } html.dark [class~="dark:text-red-400"] { color: #f87171 !important; } html.dark [class~="dark:text-red-500"] { color: #ef4444 !important; } html.dark [class~="dark:text-red-100"] { color: #fee2e2 !important; } html.dark [class~="dark:text-red-200"] { color: #fecaca !important; } html.dark [class~="dark:text-red-300"] { color: #fca5a5 !important; } html.dark [class~="dark:text-blue-100"] { color: #dbeafe !important; } html.dark [class~="dark:text-blue-200"] { color: #bfdbfe !important; } html.dark [class~="dark:text-blue-300"] { color: #93c5fd !important; } html.dark [class~="dark:text-blue-400"] { color: #60a5fa !important; } html.dark [class~="dark:text-green-100"] { color: #dcfce7 !important; } html.dark [class~="dark:text-green-200"] { color: #bbf7d0 !important; } html.dark [class~="dark:text-green-300"] { color: #86efac !important; } html.dark [class~="dark:text-green-400"] { color: #4ade80 !important; } html.dark [class~="dark:text-yellow-100"]{ color: #fef9c3 !important; } html.dark [class~="dark:text-yellow-200"]{ color: #fef08a !important; } html.dark [class~="dark:text-yellow-300"]{ color: #fde047 !important; } html.dark [class~="dark:text-indigo-100"]{ color: #e0e7ff !important; } html.dark [class~="dark:text-indigo-200"]{ color: #c7d2fe !important; } html.dark [class~="dark:text-indigo-300"]{ color: #a5b4fc !important; } html.dark [class~="dark:text-indigo-400"]{ color: #818cf8 !important; } html.dark [class~="dark:text-orange-100"]{ color: #ffedd5 !important; } html.dark [class~="dark:text-orange-200"]{ color: #fed7aa !important; } html.dark [class~="dark:text-orange-300"]{ color: #fdba74 !important; } html.dark [class~="dark:text-orange-400"]{ color: #fb923c !important; } html.dark [class~="dark:text-red-400"] { color: #f87171 !important; } html.dark [class~="dark:text-[rgb(240,82,82)]"] { color: rgb(240,82,82) !important; } html.dark [class~="dark:hover:text-black"]:hover { color: #000 !important; } html.dark [class~="dark:hover:text-white"]:hover { color: #fff !important; } html.dark [class~="dark:hover:text-gray-200"]:hover { color: #e5e7eb !important; } html.dark [class~="dark:hover:text-gray-300"]:hover { color: #d1d5db !important; } html.dark [class~="dark:hover:text-red-300"]:hover { color: #fca5a5 !important; } /* ── Borders ── */ html.dark [class~="dark:border-darkborder"]{ border-color: #1b2e4b !important; } html.dark [class~="dark:border-gray-500"] { border-color: #6b7280 !important; } html.dark [class~="dark:border-gray-600"] { border-color: #4b5563 !important; } html.dark [class~="dark:border-gray-700"] { border-color: #374151 !important; } html.dark [class~="dark:border-gray-800"] { border-color: #1f2937 !important; } html.dark [class~="dark:border-red-400"] { border-color: #f87171 !important; } html.dark [class~="dark:border-red-700"] { border-color: #b91c1c !important; } html.dark [class~="dark:border-red-800"] { border-color: #991b1b !important; } html.dark [class~="dark:border-blue-400"] { border-color: #60a5fa !important; } html.dark [class~="dark:border-blue-600"] { border-color: #2563eb !important; } html.dark [class~="dark:border-blue-800"] { border-color: #1e40af !important; } html.dark [class~="dark:border-green-700"]{ border-color: #15803d !important; } html.dark [class~="dark:border-green-800"]{ border-color: #166534 !important; } html.dark [class~="dark:border-indigo-600"]{ border-color: #4f46e5 !important; } html.dark [class~="dark:border-indigo-700"]{ border-color: #4338ca !important; } html.dark [class~="dark:border-indigo-800"]{ border-color: #3730a3 !important; } html.dark [class~="dark:border-orange-700"]{ border-color: #c2410c !important; } html.dark [class~="dark:border-yellow-700"]{ border-color: #a16207 !important; } html.dark [class~="dark:hover:border-gray-500"]:hover { border-color: #6b7280 !important; } /* ── Divide ── */ html.dark [class~="dark:divide-darkborder"] > :not([hidden]) ~ :not([hidden]) { border-color: #1b2e4b !important; } html.dark [class~="dark:divide-gray-700"] > :not([hidden]) ~ :not([hidden]) { border-color: #374151 !important; } html.dark [class~="dark:divide-gray-800"] > :not([hidden]) ~ :not([hidden]) { border-color: #1f2937 !important; } /* ── Hover backgrounds ── */ html.dark [class~="dark:hover:bg-white/5"]:hover { background-color: rgba(255,255,255,.05) !important; } html.dark [class~="dark:hover:bg-white/10"]:hover { background-color: rgba(255,255,255,.10) !important; } html.dark [class~="dark:hover:bg-gray-500"]:hover { background-color: #6b7280 !important; } html.dark [class~="dark:hover:bg-gray-600"]:hover { background-color: #4b5563 !important; } html.dark [class~="dark:hover:bg-gray-700"]:hover { background-color: #374151 !important; } html.dark [class~="dark:hover:bg-gray-700/50"]:hover { background-color: rgba(55,65,81,.5) !important; } html.dark [class~="dark:hover:bg-gray-800"]:hover { background-color: #1f2937 !important; } html.dark [class~="dark:hover:bg-red-600"]:hover { background-color: #dc2626 !important; } html.dark [class~="dark:hover:bg-red-700"]:hover { background-color: #b91c1c !important; } html.dark [class~="dark:hover:bg-red-900"]:hover { background-color: #7f1d1d !important; } html.dark [class~="dark:hover:bg-red-900/20"]:hover { background-color: rgba(127,29,29,.2) !important; } html.dark [class~="dark:hover:bg-blue-600"]:hover { background-color: #2563eb !important; } html.dark [class~="dark:hover:bg-blue-700"]:hover { background-color: #1d4ed8 !important; } html.dark [class~="dark:hover:bg-blue-900/20"]:hover { background-color: rgba(30,58,138,.2) !important; } html.dark [class~="dark:hover:bg-green-900"]:hover { background-color: #14532d !important; } html.dark [class~="dark:hover:bg-indigo-900/20"]:hover { background-color: rgba(49,46,129,.2) !important; } html.dark [class~="dark:group-hover:bg-gray-700/50"] { background-color: rgba(55,65,81,.5) !important; } html.dark [class~="dark:group-hover:bg-blue-900/20"] { background-color: rgba(30,58,138,.2) !important; } html.dark [class~="dark:group-hover:bg-indigo-900/20"] { background-color: rgba(49,46,129,.2) !important; } html.dark [class~="dark:group-hover:bg-red-900/20"] { background-color: rgba(127,29,29,.2) !important; } /* ── Placeholder ── */ html.dark [class~="dark:placeholder-gray-400"]::placeholder { color: #9ca3af !important; } html.dark [class~="dark:placeholder-gray-500"]::placeholder { color: #6b7280 !important; } /* ── Invert (íconos/imágenes en dark mode) ── */ html.dark [class~="dark:invert"] { filter: invert(1) !important; } /* ── Hidden/Block helpers ── */ html.dark [class~="dark:hidden"] { display: none !important; } html.dark [class~="dark:block"] { display: block !important; }