/* ==================================================================== CSS Variables - Definición en modo claro (light mode defaults) ==================================================================== */ :root { --border-color: #dee2e6; --text-color: #212529; --card-bg: #ffffff; --input-bg: #ffffff; --sidebar-active: #0d6efd; --dropdown-shadow: rgba(0, 0, 0, 0.1); } /* Sobreescritura de variables en modo oscuro */ [data-bs-theme='dark'], html[data-bs-theme='dark'] { --border-color: #3a3f55; --text-color: #eaeaea; --card-bg: #141824; --input-bg: #1e2337; --sidebar-active: #3874ff; --dropdown-shadow: rgba(0, 0, 0, 0.4); } /* ==================================================================== Light mode - corrección item seleccionado en Select2 (base necesaria para evitar que quede transparente/blanco) ==================================================================== */ .select2-container--default .select2-results__option[aria-selected=true] { background-color: #e9ecef !important; color: #212529 !important; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: #0d6efd !important; color: #fff !important; } /* Base: garantizar texto visible en opciones normales (luz) */ .select2-container--default .select2-results__option { color: #212529; background-color: transparent; } /* Dark mode styles for tables */ :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) table { background-color: #141824 !important; color: #eaeaea; } :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) table thead { background-color: #141824 !important; color: #f1f1f1; } :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) table tbody tr:hover { background-color: rgba(255,255,255,0.08); } :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) th, :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) td { border-color: rgba(255,255,255,0.12); } /* ==================================================================== Dark mode - Select2 (global para todas las páginas) Select2 appends dropdown to , so we need broad selectors ==================================================================== */ /* Cuadro de selección (el input visible) */ :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .select2-container--default .select2-selection--single, :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .select2-container--default .select2-selection--multiple, html[data-bs-theme='dark'] .select2-container--default .select2-selection--single, html[data-bs-theme='dark'] .select2-container--default .select2-selection--multiple, body.dark .select2-container--default .select2-selection--single, body.dark .select2-container--default .select2-selection--multiple { background-color: #1e2533 !important; border-color: rgba(255,255,255,0.2) !important; color: #eaeaea !important; } :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .select2-container--default .select2-selection--single .select2-selection__rendered, html[data-bs-theme='dark'] .select2-container--default .select2-selection--single .select2-selection__rendered { color: #eaeaea !important; } :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .select2-container--default .select2-selection--single .select2-selection__placeholder, html[data-bs-theme='dark'] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: rgba(255, 255, 255, 0.4) !important; } :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .select2-container--default .select2-selection--single .select2-selection__arrow b, html[data-bs-theme='dark'] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #eaeaea transparent transparent transparent !important; } /* Dropdown (se renderiza en body, fuera del árbol del componente) */ html[data-bs-theme='dark'] .select2-dropdown, html.dark .select2-dropdown, html.dark-mode .select2-dropdown, :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .select2-dropdown { background-color: #141824 !important; border-color: rgba(255,255,255,0.2) !important; color: #eaeaea !important; } /* Contenedor de resultados */ html[data-bs-theme='dark'] .select2-results, html.dark .select2-results, html.dark-mode .select2-results, :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .select2-results { background-color: #141824 !important; color: #eaeaea !important; } html[data-bs-theme='dark'] .select2-results__options, html.dark .select2-results__options, html.dark-mode .select2-results__options, :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .select2-results__options { background-color: #141824 !important; } /* Cada opción */ html[data-bs-theme='dark'] .select2-results__option, html.dark .select2-results__option, html.dark-mode .select2-results__option, :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .select2-results__option { color: #eaeaea !important; background-color: #141824 !important; } /* Opción hover / highlighted */ html[data-bs-theme='dark'] .select2-container--default .select2-results__option--highlighted[aria-selected], html[data-bs-theme='dark'] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable, html.dark .select2-container--default .select2-results__option--highlighted[aria-selected], html.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected], :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .select2-container--default .select2-results__option--highlighted[aria-selected], :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: #0d6efd !important; color: #fff !important; } /* Opción ya seleccionada */ html[data-bs-theme='dark'] .select2-container--default .select2-results__option[aria-selected=true], html.dark .select2-container--default .select2-results__option[aria-selected=true], :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .select2-container--default .select2-results__option[aria-selected=true] { background-color: rgba(255, 255, 255, 0.08) !important; color: #eaeaea !important; } /* Campo de búsqueda dentro del dropdown */ html[data-bs-theme='dark'] .select2-container--default .select2-search--dropdown .select2-search__field, html.dark .select2-container--default .select2-search--dropdown .select2-search__field, html.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field, :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .select2-container--default .select2-search--dropdown .select2-search__field { background-color: #1e2533 !important; color: #eaeaea !important; border-color: rgba(255,255,255,0.2) !important; outline: none; } html[data-bs-theme='dark'] .select2-container--default .select2-search--dropdown .select2-search__field::placeholder, html.dark .select2-container--default .select2-search--dropdown .select2-search__field::placeholder { color: rgba(255,255,255,0.35) !important; } /* Mensaje de cargando / sin resultados */ html[data-bs-theme='dark'] .select2-results__option.select2-results__message, html.dark .select2-results__option.select2-results__message, :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .select2-results__option.select2-results__message { color: rgba(255,255,255,0.5) !important; background-color: #141824 !important; } /* ==================================================================== Dark mode - Formularios (global para todas las páginas) ==================================================================== */ :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .form-control, :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .form-select { background-color: var(--input-bg, #1e2533) !important; color: var(--text-color, #eaeaea) !important; border-color: var(--border-color, rgba(255,255,255,0.15)) !important; } :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .form-control::placeholder { color: rgba(255, 255, 255, 0.35) !important; } :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .form-control:disabled, :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .form-control[readonly] { background-color: rgba(255,255,255,0.05) !important; color: rgba(255,255,255,0.5) !important; } /* ==================================================================== Dark mode - Cards y Modales (global para todas las páginas) ==================================================================== */ :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .card { background-color: var(--card-bg, #141824) !important; border-color: var(--border-color, rgba(255,255,255,0.12)) !important; color: var(--text-color, #eaeaea); } :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .modal-content { background-color: var(--card-bg, #141824) !important; color: var(--text-color, #eaeaea) !important; border-color: var(--border-color, rgba(255,255,255,0.12)) !important; } :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .modal-header, :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .modal-footer { border-color: var(--border-color, rgba(255,255,255,0.12)) !important; } :where([data-bs-theme='dark'], .dark, .dark-mode, [data-theme='dark']) .modal-title { color: var(--text-color, #eaeaea) !important; }