/* ========================================================================== Dark Mode 2025 — Patch unificado (Bootstrap 5.3 + DataTables + Bootstrap-Select) Activo con: Paleta: bootstrap charcoal + acento #6366f1 ========================================================================== */ html[data-bs-theme="dark"] { --bs-body-bg: #212529; --bs-body-color: #e9ecef; --bs-secondary-bg: #2b3035; --bs-tertiary-bg: #343a40; --bs-border-color: #3b4147; --bs-card-bg: #2b3035; --bs-card-border-color: #3b4147; --bs-heading-color: #f8f9fa; --bs-link-color: #aab4ff; --bs-link-hover-color: #c7d2ff; --dm-hover: rgba(255, 255, 255, .06); --dm-brand: #6366f1; /* Recolorea el SVG de la flecha (ojo: el # va escapado como %23) */ --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bfc6ce' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } /* ---------- Base ---------- */ html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select, html[data-bs-theme="dark"] textarea.form-control { color-scheme: dark; } html[data-bs-theme="dark"] body, html[data-bs-theme="dark"] .wrapper, html[data-bs-theme="dark"] .main, html[data-bs-theme="dark"] main.content { background-color: var(--bs-body-bg); color: var(--bs-body-color); } html[data-bs-theme="dark"] a { color: var(--bs-link-color); } html[data-bs-theme="dark"] a:hover { color: var(--bs-link-hover-color); } /* Forzar “blancos” genéricos a oscuro */ html[data-bs-theme="dark"] .bg-white, html[data-bs-theme="dark"] .bg-light, html[data-bs-theme="dark"] .card, html[data-bs-theme="dark"] .list-group-item, html[data-bs-theme="dark"] .modal-content, html[data-bs-theme="dark"] .accordion-button { background-color: var(--bs-card-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-card-border-color) !important; } html[data-bs-theme="dark"] hr { border-top-color: var(--bs-border-color); opacity: .5; } /* ===== Login – Dark mode coherente con el resto ===== */ html[data-bs-theme="dark"] .form-signin { background: var(--bs-card-bg) !important; color: var(--bs-body-color) !important; border: 1px solid var(--bs-card-border-color) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, .45); /* sombra más profunda en dark */ } /* Campos dentro del login con el mismo “look” que los de modal */ html[data-bs-theme="dark"] .form-signin .form-control, html[data-bs-theme="dark"] .form-signin .form-select, html[data-bs-theme="dark"] .form-signin .input-group-text { background-color: var(--bs-card-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } /* ---------- Formularios (BASE) ---------- */ /* Base neutra: terciario. Luego se especializa en modal / accordion */ html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select, html[data-bs-theme="dark"] .input-group-text { /*background-color: var(--bs-tertiary-bg);*/ color: var(--bs-body-color); border-color: var(--bs-border-color); } html[data-bs-theme="dark"] .form-select { /* Por si en el CSS se sobreescribió el background-image, lo reponemos */ background-image: var(--bs-form-select-bg-img); } html[data-bs-theme="dark"] .form-control:hover, html[data-bs-theme="dark"] .form-select:hover { border-color: #e9ecef !important; transition: border-color 0.2s ease; } /* Placeholder gris si NO es floating label */ html[data-bs-theme="dark"] .form-control::placeholder { color: #adb5bd; } /* En .form-floating el placeholder debe ir oculto */ html[data-bs-theme="dark"] .form-floating > .form-control::placeholder, html[data-bs-theme="dark"] .form-floating > textarea.form-control::placeholder { color: transparent !important; } html[data-bs-theme="dark"] .form-floating > label { color: #bfc6ce; } html[data-bs-theme="dark"] .form-control:focus, html[data-bs-theme="dark"] .form-select:focus { background-color: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--dm-brand); box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .20); } /* Checkbox/radio */ html[data-bs-theme="dark"] .form-check-input { background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color); } html[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--dm-brand); border-color: var(--dm-brand); } /* ---------- Bootstrap-Select (BASE) ---------- */ html[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle, html[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-light { /*background-color: var(--bs-tertiary-bg) !important;*/ color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } /* caret del botón toggle */ html[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle::after { border-top-color: #bfc6ce; /* color de la “V” */ } html[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle .filter-option, html[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle .filter-option .filter-option-inner, html[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle .filter-option .filter-option-inner .filter-option-inner-inner, html[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle .filter-option-inner-inner, html[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle .text { color: var(--bs-body-color) !important; } /* DARK: placeholder de bootstrap-select con el mismo color que la label */ html[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder, html[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option, html[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option .filter-option-inner, html[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option .filter-option-inner .filter-option-inner-inner, html[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option-inner-inner, html[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder .text { color: #bfc6ce !important; } html[data-bs-theme="dark"] .bootstrap-select .dropdown-menu { background-color: var(--bs-card-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); } html[data-bs-theme="dark"] .bootstrap-select .dropdown-menu .dropdown-item { color: var(--bs-body-color) !important; } html[data-bs-theme="dark"] .bootstrap-select .dropdown-menu .dropdown-item:hover, html[data-bs-theme="dark"] .bootstrap-select .dropdown-menu .dropdown-item:focus { background-color: #3b4147 !important; color: #fff !important; } html[data-bs-theme="dark"] .bootstrap-select .dropdown-menu .dropdown-item.active, html[data-bs-theme="dark"] .bootstrap-select .dropdown-menu .dropdown-item.selected, html[data-bs-theme="dark"] .bootstrap-select .dropdown-menu .active > .dropdown-item { background-color: var(--dm-brand) !important; color: #fff !important; } html[data-bs-theme="dark"] .dropdown-item:focus:not(.active):not(:active) { background-color: var(--bs-card-bg) !important; color: #fff !important; } /* --- MULTIPLE: sin fondo morado al estar seleccionada --- */ /*html[data-bs-theme="dark"] .bootstrap-select:has(> select[multiple]) .dropdown-menu .dropdown-item.active,*/ /*html[data-bs-theme="dark"] .bootstrap-select:has(> select[multiple]) .dropdown-menu .active > .dropdown-item {*/ html[data-bs-theme="dark"] .bootstrap-select:has(> select[multiple]) .dropdown-menu .dropdown-item.selected { background-color: transparent !important; /*color: var(--bs-body-color) !important;*/ } /* Hover en multiple (igual que el resto del sistema) */ html[data-bs-theme="dark"] .bootstrap-select:has(> select[multiple]) .dropdown-menu .dropdown-item:hover, html[data-bs-theme="dark"] .bootstrap-select:has(> select[multiple]) .dropdown-menu .dropdown-item:focus { background-color: #3b4147 !important; /*color: #fff !important;*/ } /* ==== bootstrap-select: Actions Box (Select all / Deselect all) – DARK ==== */ html[data-bs-theme="dark"] .bootstrap-select .bs-actionsbox { /* Ajusta los tokens de estado activo SÓLO dentro del actions box */ --bs-btn-active-bg: #3b4147; /* mismo hover */ --bs-btn-active-border-color: var(--dm-brand); --bs-btn-active-color: #fff; --bs-btn-focus-box-shadow: 0 0 0 .15rem rgba(99, 102, 241, .25); } /* Botones base: mismos tonos que el resto de controles oscuros */ html[data-bs-theme="dark"] .bootstrap-select .bs-actionsbox .btn, html[data-bs-theme="dark"] .bootstrap-select .bs-donebutton .btn { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; border: 1px solid var(--bs-border-color) !important; box-shadow: none !important; } /* Hover */ html[data-bs-theme="dark"] .bootstrap-select .bs-actionsbox .btn:hover, html[data-bs-theme="dark"] .bootstrap-select .bs-donebutton .btn:hover { background-color: #3b4147 !important; color: #fff !important; border-color: var(--dm-brand) !important; } /* Active/Focus: evita el “relleno raro” por la regla global de Bootstrap */ html[data-bs-theme="dark"] .bootstrap-select .bs-actionsbox .btn:active, html[data-bs-theme="dark"] .bootstrap-select .bs-actionsbox .btn.active, html[data-bs-theme="dark"] .bootstrap-select .bs-actionsbox .btn:focus, html[data-bs-theme="dark"] .bootstrap-select .bs-donebutton .btn:active, html[data-bs-theme="dark"] .bootstrap-select .bs-donebutton .btn.active, html[data-bs-theme="dark"] .bootstrap-select .bs-donebutton .btn:focus { background-color: #3b4147 !important; color: #fff !important; border-color: var(--dm-brand) !important; box-shadow: 0 0 0 .15rem rgba(99, 102, 241, .25) !important; } /* Layout más limpio de los dos botones */ html[data-bs-theme="dark"] .bootstrap-select .bs-actionsbox .btn-group { display: flex; gap: .5rem; } html[data-bs-theme="dark"] .bootstrap-select .bs-actionsbox .btn-group > .btn { flex: 1 1 0; border-radius: .5rem !important; } html[data-bs-theme="dark"] .bootstrap-select.disabled > .dropdown-toggle { opacity: .65; } html[data-bs-theme="dark"] .bootstrap-select .no-results { background: inherit; } /* ===== Bootstrap Datepicker — Dark ===== */ html[data-bs-theme="dark"] .datepicker.datepicker-dropdown { background-color: var(--bs-card-bg) !important; color: var(--bs-body-color) !important; border: 1px solid var(--bs-border-color) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); border-radius: .5rem; } /* Tabla interna */ html[data-bs-theme="dark"] .datepicker .table-condensed { background: transparent !important; color: inherit; border-collapse: separate; border-spacing: 0; } html[data-bs-theme="dark"] .datepicker th, html[data-bs-theme="dark"] .datepicker td { color: var(--bs-body-color) !important; border: 0 !important; } /* Cabecera (mes/año y flechas) */ html[data-bs-theme="dark"] .datepicker th.datepicker-switch, html[data-bs-theme="dark"] .datepicker th.prev, html[data-bs-theme="dark"] .datepicker th.next { cursor: pointer; border-radius: .375rem; } html[data-bs-theme="dark"] .datepicker th.datepicker-switch:hover, html[data-bs-theme="dark"] .datepicker th.prev:hover, html[data-bs-theme="dark"] .datepicker th.next:hover { background-color: #3b4147 !important; } /* Días de la semana */ html[data-bs-theme="dark"] .datepicker th.dow { color: #bfc6ce !important; /* mismo tono que las labels */ font-weight: 600; } /* Celdas de día (vista días) */ html[data-bs-theme="dark"] .datepicker td.day { border-radius: .375rem; } html[data-bs-theme="dark"] .datepicker td.day:hover { background-color: #3b4147 !important; /* mismo hover que options */ color: #fff !important; } /* Días de meses anterior/siguiente */ html[data-bs-theme="dark"] .datepicker td.old, html[data-bs-theme="dark"] .datepicker td.new { color: #8b949e !important; } /* Deshabilitados */ html[data-bs-theme="dark"] .datepicker td.disabled, html[data-bs-theme="dark"] .datepicker span.disabled { color: #6c757d !important; opacity: .65; cursor: not-allowed; } /* Seleccionado (activo) */ html[data-bs-theme="dark"] .datepicker td.active, html[data-bs-theme="dark"] .datepicker td.active:hover, html[data-bs-theme="dark"] .datepicker span.active, html[data-bs-theme="dark"] .datepicker span.active:hover { background-color: var(--dm-brand) !important; color: #fff !important; text-shadow: none !important; border-radius: .375rem; } /* Focus (navegación con teclado) */ html[data-bs-theme="dark"] .datepicker td.focused, html[data-bs-theme="dark"] .datepicker span.focused { outline: 0; box-shadow: inset 0 0 0 2px rgba(99, 102, 241, .5); border-radius: .375rem; } /* Vistas meses / años / décadas (los ) */ html[data-bs-theme="dark"] .datepicker .month, html[data-bs-theme="dark"] .datepicker .year, html[data-bs-theme="dark"] .datepicker .decade, html[data-bs-theme="dark"] .datepicker .century { color: var(--bs-body-color) !important; border-radius: .375rem; } html[data-bs-theme="dark"] .datepicker .month:hover:not(.active):not(.focused), html[data-bs-theme="dark"] .datepicker .year:hover:not(.active):not(.focused), html[data-bs-theme="dark"] .datepicker .decade:hover:not(.active):not(.focused), html[data-bs-theme="dark"] .datepicker .century:hover:not(.active):not(.focused) { background-color: #3b4147 !important; color: #fff !important; } /* Footer (Hoy / Borrar) */ html[data-bs-theme="dark"] .datepicker tfoot th.today, html[data-bs-theme="dark"] .datepicker tfoot th.clear { color: var(--bs-body-color) !important; border-radius: .375rem; cursor: pointer; } html[data-bs-theme="dark"] .datepicker tfoot th.today:hover, html[data-bs-theme="dark"] .datepicker tfoot th.clear:hover { background-color: #3b4147 !important; color: #fff !important; } /* Bootstrap-Datepicker — DARK: forzar activo al morado y quitar degradados del plugin */ html[data-bs-theme="dark"] .datepicker table tr td.active, html[data-bs-theme="dark"] .datepicker table tr td.active:hover, html[data-bs-theme="dark"] .datepicker table tr td.active.disabled, html[data-bs-theme="dark"] .datepicker table tr td.active.disabled:hover, html[data-bs-theme="dark"] .datepicker table tr td.selected, html[data-bs-theme="dark"] .datepicker table tr td.selected:hover { background-color: var(--dm-brand) !important; background-image: none !important; border-color: var(--dm-brand) !important; color: #fff !important; text-shadow: none !important; } /* Vistas de meses/años/décadas (los ) */ html[data-bs-theme="dark"] .datepicker table tr td span.active, html[data-bs-theme="dark"] .datepicker table tr td span.active:hover { background-color: var(--dm-brand) !important; background-image: none !important; color: #fff !important; border-color: var(--dm-brand) !important; text-shadow: none !important; } /* Hover/focus de esos (evita el #eee del plugin) */ html[data-bs-theme="dark"] .datepicker table tr td span:hover:not(.disabled):not(.active):not(.focused) { background-color: #3b4147 !important; background-image: none !important; color: #fff !important; } /* “Hoy” sin amarillo */ html[data-bs-theme="dark"] .datepicker table tr td.today, html[data-bs-theme="dark"] .datepicker table tr td.today:hover, html[data-bs-theme="dark"] .datepicker table tr td.today.disabled, html[data-bs-theme="dark"] .datepicker table tr td.today.disabled:hover { background-color: transparent !important; background-image: none !important; color: var(--bs-body-color) !important; border-color: transparent !important; text-shadow: none !important; box-shadow: inset 0 0 0 2px rgba(99, 102, 241, .6) !important; border-radius: .375rem; } /* “Hoy” cuando además está activo */ html[data-bs-theme="dark"] .datepicker table tr td.active.today, html[data-bs-theme="dark"] .datepicker table tr td.active.today:hover { background-color: var(--dm-brand) !important; background-image: none !important; color: #fff !important; box-shadow: none !important; } html[data-bs-theme="dark"] .datepicker table tr td span.focused { background-color: transparent !important; } /* Mes/Año (y década/century) cuando están active + focused a la vez */ html[data-bs-theme="dark"] .datepicker table tr td span.month.active.focused, html[data-bs-theme="dark"] .datepicker table tr td span.year.active.focused, html[data-bs-theme="dark"] .datepicker table tr td span.decade.active.focused, html[data-bs-theme="dark"] .datepicker table tr td span.century.active.focused { background-color: var(--dm-brand) !important; color: #fff !important; background-image: none !important; border-color: var(--dm-brand) !important; text-shadow: none !important; } /* ----- TYPEAHEAD ----- */ /* Input/hint (no forzamos fondos: heredan los de .form-control/.form-floating) */ html[data-bs-theme="dark"] .tt-input, html[data-bs-theme="dark"] .typeahead { color: var(--bs-body-color); } html[data-bs-theme="dark"] .tt-hint { color: #9CA3AF; /* placeholder-like */ background-color: inherit !important; } /* Popup */ html[data-bs-theme="dark"] .tt-menu { width: 100%; margin: 8px 0; padding: 6px 0; background-color: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); z-index: 1071; /* por encima de modales/overlays */ overflow: hidden; } /* Dataset header */ html[data-bs-theme="dark"] .tt-header { padding: .375rem .75rem; font-size: .85rem; color: #adb5bd; border-bottom: 1px solid rgba(255, 255, 255, .06); } /* Sugerencias */ html[data-bs-theme="dark"] .tt-suggestion { padding: .5rem .75rem; color: var(--bs-body-color); } html[data-bs-theme="dark"] .tt-suggestion + .tt-suggestion { border-top: 1px solid rgba(255, 255, 255, .06); } /* Hover con terciario; cursor (selección teclado) con color de marca */ html[data-bs-theme="dark"] .tt-suggestion:hover { cursor: pointer; background-color: #3b4147; color: #fff; } html[data-bs-theme="dark"] .tt-suggestion.tt-cursor { background-color: var(--dm-brand); color: #fff; } /* Texto resaltado de coincidencia */ html[data-bs-theme="dark"] .tt-highlight, html[data-bs-theme="dark"] .tt-suggestion mark, html[data-bs-theme="dark"] .tt-suggestion strong { color: #fff; background: rgba(99, 102, 241, .18); /* var(--dm-brand) con alpha */ padding: 0 .1em; border-radius: .2em; } /* Estado “sin resultados” */ html[data-bs-theme="dark"] .tt-empty, html[data-bs-theme="dark"] .tt-no-results { padding: .5rem .75rem; color: #adb5bd; } /* ====== ESPECIALIZACIONES POR CONTEXTO ====== */ /* MODALES: campos con fondo de “tarjeta” */ html[data-bs-theme="dark"] .modal .form-control, html[data-bs-theme="dark"] .modal .form-select, html[data-bs-theme="dark"] .modal .input-group-text { background-color: var(--bs-card-bg) !important; } html[data-bs-theme="dark"] .modal .bootstrap-select > .dropdown-toggle, html[data-bs-theme="dark"] .modal .bootstrap-select > .dropdown-toggle.btn-light { /*background-color: var(--bs-card-bg) !important;*/ color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } html[data-bs-theme="dark"] .modal .bootstrap-select .bs-searchbox .form-control { /*background-color: var(--bs-tertiary-bg) !important;*/ color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } /* ----- AUTOFILL ----- */ /* Base DARK */ html[data-bs-theme="dark"] :is(input.form-control, textarea.form-control, select.form-select):is( :-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :-webkit-autofill:active, :autofill, :-moz-autofill, :-moz-autofill:hover, :-moz-autofill:focus ) { -webkit-box-shadow: 0 0 0 1000px var(--bs-body-bg) inset !important; -webkit-text-fill-color: var(--bs-body-color) !important; color: var(--bs-body-bg) !important; caret-color: currentColor !important; transition: background-color 0s, color 0s, -webkit-text-fill-color 0s; } /* Modal DARK */ html[data-bs-theme="dark"] .modal :is(input.form-control, textarea.form-control, select.form-select):is( :-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :-webkit-autofill:active, :autofill, :-moz-autofill, :-moz-autofill:hover, :-moz-autofill:focus ) { -webkit-box-shadow: 0 0 0 1000px var(--bs-card-bg) inset !important; -webkit-text-fill-color: var(--bs-body-color) !important; color: var(--bs-body-bg) !important; caret-color: currentColor !important; transition: background-color 0s, color 0s, -webkit-text-fill-color 0s; } /* Accordion (filtros) DARK */ html[data-bs-theme="dark"] .accordion .accordion-body :is(input.form-control, textarea.form-control, select.form-select):is( :-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :-webkit-autofill:active, :autofill, :-moz-autofill, :-moz-autofill:hover, :-moz-autofill:focus ) { -webkit-box-shadow: 0 0 0 1000px var(--bs-body-bg) inset !important; -webkit-text-fill-color: var(--bs-body-color) !important; color: var(--bs-body-bg) !important; caret-color: currentColor !important; /* re-aplica el color justo después del repaint del UA */ transition: background-color 0s, color 0s, -webkit-text-fill-color 0s; } /* Login DARK */ html[data-bs-theme="dark"] .form-signin :is(input.form-control, textarea.form-control, select.form-select):is( :-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :-webkit-autofill:active, :autofill, :-moz-autofill, :-moz-autofill:hover, :-moz-autofill:focus ) { -webkit-box-shadow: 0 0 0 1000px var(--bs-card-bg) inset !important; -webkit-text-fill-color: var(--bs-body-color) !important; color: var(--bs-body-bg) !important; caret-color: currentColor !important; transition: background-color 0s, color 0s, -webkit-text-fill-color 0s; } /* FILTROS (accordion): campos con fondo “--bs-body-bg” sobre body */ html[data-bs-theme="dark"] .accordion .accordion-body .form-control, html[data-bs-theme="dark"] .accordion .accordion-body .form-select, html[data-bs-theme="dark"] .accordion .accordion-body .input-group-text { /*background-color: var(--bs-body-bg) !important;*/ } html[data-bs-theme="dark"] .accordion .accordion-body .bootstrap-select > .dropdown-toggle, html[data-bs-theme="dark"] .accordion .accordion-body .bootstrap-select > .dropdown-toggle.btn-light { /*background-color: var(--bs-body-bg) !important;*/ color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } html[data-bs-theme="dark"] .accordion .bootstrap-select .bs-searchbox .form-control { background-color: var(--bs-card-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } /* ---------- Botones ---------- */ html[data-bs-theme="dark"] .btn, html[data-bs-theme="dark"] .dt-buttons .btn { color: var(--bs-body-color); background-color: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); } html[data-bs-theme="dark"] .btn:hover, html[data-bs-theme="dark"] .dt-buttons .btn:hover { background-color: #3b4147; border-color: var(--dm-brand); } html[data-bs-theme="dark"] .btn-primary, html[data-bs-theme="dark"] .dt-buttons .btn-primary, html[data-bs-theme="dark"] .btn-custom { background-color: var(--dm-brand); border-color: var(--dm-brand); color: #fff !important; } html[data-bs-theme="dark"] .btn-primary:hover, html[data-bs-theme="dark"] .btn-custom:hover { background-color: #4f46e5; border-color: #4f46e5; color: #fff !important; } html[data-bs-theme="dark"] .btn-success { background-color: #10B981; border-color: #10B981; color: #fff !important; } html[data-bs-theme="dark"] .btn-success:hover { background-color: #059669; border-color: #059669; color: #fff !important; } html[data-bs-theme="dark"] .btn-danger { background-color: #EF4444; border-color: #EF4444; color: #fff !important; } html[data-bs-theme="dark"] .btn-danger:hover { background-color: #DC2626; border-color: #DC2626; color: #fff !important; } html[data-bs-theme="dark"] .btn-info { background-color: #06b6d4; border-color: #06b6d4; color: #fff !important; } html[data-bs-theme="dark"] .btn-info:hover { background-color: #0891b2; border-color: #0891b2; color: #fff !important; } html[data-bs-theme="dark"] .btn-warning { background-color: #f59e0b; border-color: #f59e0b; color: #000 !important; } html[data-bs-theme="dark"] .btn-warning:hover { background-color: #d97706; border-color: #d97706; color: #000 !important; } /* Badges con fondo de color: forzar texto blanco/negro visible */ html[data-bs-theme="dark"] .badge.bg-success, html[data-bs-theme="dark"] .badge.bg-danger, html[data-bs-theme="dark"] .badge.bg-primary, html[data-bs-theme="dark"] .badge.bg-secondary, html[data-bs-theme="dark"] .badge.bg-info { color: #fff !important; } html[data-bs-theme="dark"] .badge.bg-warning { color: #000 !important; } html[data-bs-theme="dark"] .btn-secondary { background-color: #3b4147; border-color: var(--bs-border-color); color: var(--bs-body-color); } html[data-bs-theme="dark"] .btn-secondary:hover { background-color: #474d53; } html[data-bs-theme="dark"] .btn-outline-secondary { border-color: var(--bs-border-color); color: #ced4da; } html[data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: #3b4147; color: #fff; } html[data-bs-theme="dark"] .spanMostrarPass { background-color: var(--bs-card-bg) !important; color: var(--bs-body-color); } /* ---------- Accordion ---------- */ /* Base: sin sombra por defecto */ html[data-bs-theme="dark"] .accordion .accordion-item, html[data-bs-theme="dark"] .accordion .accordion-collapse, html[data-bs-theme="dark"] .accordion .accordion-body { color: var(--bs-body-color) !important; background-color: var(--bs-body-bg); border-color: var(--bs-card-bg) !important; border-radius: var(--bs-border-radius) !important; box-shadow: none !important; } /* Sólo cuando está abierto */ html[data-bs-theme="dark"] .accordion .accordion-collapse.show > .accordion-body { box-shadow: 0 .150rem 0 0 var(--bs-card-bg) !important; } html[data-bs-theme="dark"] .accordion .accordion-button { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; box-shadow: none !important; } html[data-bs-theme="dark"] .accordion .accordion-button:not(.collapsed) { background-color: var(--bs-tertiary-bg) !important; } /* ---------- Sidebar ---------- */ html[data-bs-theme="dark"] #sidebar { background: var(--bs-secondary-bg); color: var(--bs-body-color); border-right: 1px solid var(--bs-border-color); } html[data-bs-theme="dark"] #sidebar ul li a { color: var(--bs-body-color); } html[data-bs-theme="dark"] #sidebar ul li a:hover { background-color: var(--dm-hover); color: var(--bs-link-color); } html[data-bs-theme="dark"] #sidebar.active ul li a:hover { background-color: transparent; } html[data-bs-theme="dark"] .sidebar-brand .brand .brand-text, html[data-bs-theme="dark"] .brand .brand-text, html[data-bs-theme="dark"] .profile-card .user-info .name span, html[data-bs-theme="dark"] .profile-card .user-info .role span { color: var(--bs-body-color) !important; } html[data-bs-theme="dark"] #sidebar .custom-menu .btn, html[data-bs-theme="dark"] #sidebarCollapse { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); color: #adb5bd; } html[data-bs-theme="dark"] #sidebar .custom-menu .btn:hover { background: #3b4147; color: #fff; } /* ---------- Footer ---------- */ html[data-bs-theme="dark"] footer.bg-light, html[data-bs-theme="dark"] .footer { background-color: var(--bs-secondary-bg) !important; border-top-color: var(--bs-border-color) !important; } html[data-bs-theme="dark"] .footer h6 { color: var(--bs-heading-color) !important; } html[data-bs-theme="dark"] .footer p, html[data-bs-theme="dark"] .text-muted { color: #adb5bd !important; } html[data-bs-theme="dark"] .footer a { color: var(--bs-link-color) !important; } html[data-bs-theme="dark"] .footer a:hover { color: var(--bs-link-hover-color) !important; } /* ---------- Modal ---------- */ html[data-bs-theme="dark"] .modal-header, html[data-bs-theme="dark"] .modal-body, html[data-bs-theme="dark"] .modal-footer, html[data-bs-theme="dark"] .modal-content { background-color: var(--bs-card-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } html[data-bs-theme="dark"] .btn-close, html[data-bs-theme="dark"] .btn-close-white { filter: invert(1) grayscale(100%); } /* ---------- Toast ---------- */ html[data-bs-theme="dark"] .toast, html[data-bs-theme="dark"] .toast-header, html[data-bs-theme="dark"] .toast-body { background-color: var(--bs-card-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); } /* ========================= Nav Tabs – Dark theme ========================= */ html[data-bs-theme="dark"] .nav-tabs { background: inherit; border-bottom: 1px solid var(--bs-border-color); } html[data-bs-theme="dark"] .nav-tabs .nav-link { color: #bfc6ce; /* como la label */ background: transparent; } html[data-bs-theme="dark"] .nav-tabs .nav-link:hover:not(.active) { background-color: #3b4147; /* terciario en hover */ color: #fff; border-color: var(--bs-border-color); } html[data-bs-theme="dark"] .nav-tabs .nav-link.active, html[data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link { background-color: var(--dm-brand); /* morado activo */ color: #fff; border-color: var(--dm-brand); box-shadow: 0 2px 10px rgba(99, 102, 241, .25); } html[data-bs-theme="dark"] .nav-tabs .nav-link:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .25); } html[data-bs-theme="dark"] .nav-tabs .nav-link.disabled { color: #6c757d; pointer-events: none; background: transparent; border-color: transparent; } /* ---------- DataTables: tabla ---------- */ html[data-bs-theme="dark"] .dataTables_wrapper { color: var(--bs-body-color); } html[data-bs-theme="dark"] table.dataTable { background: var(--bs-card-bg); border-color: var(--bs-card-border-color); } html[data-bs-theme="dark"] table.dataTable thead th { background: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; border-bottom: 1px solid var(--bs-card-border-color) !important; } html[data-bs-theme="dark"] table.dataTable tbody td { color: var(--bs-body-color) !important; border-bottom: 1px solid #2f343a !important; } html[data-bs-theme="dark"] table.dataTable tbody tr:not(.selected):hover td { box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, .04) !important; } /* DataTables search/length/info */ html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter label, html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length label, html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info { color: #adb5bd !important; } html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input, html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select { background: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; border: 1px solid var(--bs-border-color) !important; } /* DataTables Buttons + collections */ html[data-bs-theme="dark"] .dt-buttons .btn { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); color: var(--bs-body-color); } html[data-bs-theme="dark"] .dt-buttons .btn:hover { background: #3b4147; border-color: var(--dm-brand); box-shadow: 0 2px 6px rgba(99, 102, 241, .2); } html[data-bs-theme="dark"] .dt-button-collection { background: var(--bs-card-bg); border-color: var(--bs-border-color); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); } html[data-bs-theme="dark"] .dt-button-collection .dt-button { color: var(--bs-body-color); } html[data-bs-theme="dark"] .dt-button-collection .dt-button:hover { background: var(--bs-tertiary-bg); color: var(--bs-link-color); } html[data-bs-theme="dark"] div.dtsr-confirmation button { background-color: #3b4147; border-color: var(--bs-border-color); color: var(--bs-body-color); } /* === Equivalentes para Buttons 3.2.x (ul/li/a) === */ /* Cada ítem es
  • con */ html[data-bs-theme="dark"] .dt-button-collection .dropdown-menu .dt-button { list-style: none; } html[data-bs-theme="dark"] .dt-button-collection .dropdown-menu .dropdown-item { color: var(--bs-body-color); } html[data-bs-theme="dark"] .dt-button-collection .dropdown-menu .dt-button:hover .dropdown-item { color: var(--bs-link-color); } html[data-bs-theme="dark"] .dt-button-collection .dropdown-menu .dropdown-item:hover { background: var(--bs-tertiary-bg) !important; color: var(--bs-link-color); } /* Split: equivalente del selector antiguo con :last-child */ html[data-bs-theme="dark"] .dt-button-collection .dt-button-split .dt-button-split-drop { color: #e9ecef; } /* DataTables paginación (oscura con activo morado y sin hover en activo) */ html[data-bs-theme="dark"] .dataTables_wrapper .pagination .page-link, html[data-bs-theme="dark"] .pagination .page-link, html[data-bs-theme="dark"] .dataTables_wrapper a.paginate_button { background-color: var(--bs-tertiary-bg) !important; border: 1px solid var(--bs-border-color) !important; color: var(--bs-body-color) !important; border-radius: .5rem; } html[data-bs-theme="dark"] .dataTables_wrapper .page-item.active .page-link, html[data-bs-theme="dark"] .page-item.active .page-link, html[data-bs-theme="dark"] .dataTables_wrapper a.paginate_button.current, html[data-bs-theme="dark"] .dataTables_wrapper a.paginate_button.current:hover { background-color: var(--dm-brand) !important; border-color: var(--dm-brand) !important; color: #fff !important; } html[data-bs-theme="dark"] .dataTables_wrapper .pagination .page-link:hover, html[data-bs-theme="dark"] .pagination .page-link:hover, html[data-bs-theme="dark"] .dataTables_wrapper a.paginate_button:hover { background-color: #3b4147 !important; border-color: var(--dm-brand) !important; color: #fff !important; } html[data-bs-theme="dark"] .dataTables_wrapper .page-item.active .page-link:hover, html[data-bs-theme="dark"] .page-item.active .page-link:hover, html[data-bs-theme="dark"] .dataTables_wrapper a.paginate_button.current:hover { background-color: var(--dm-brand) !important; border-color: var(--dm-brand) !important; color: #fff !important; cursor: default; } /* ======================= Chips DataTables (dark) ======================= */ html[data-bs-theme="dark"] .dt-chip { background: var(--bs-tertiary-bg, #343a40); border-color: var(--bs-border-color, #3b4147); color: var(--bs-body-color, #e9ecef); } html[data-bs-theme="dark"] .dt-chip:hover { background: #3b4147; /* mismo hover que usamos en dark */ border-color: var(--dm-brand, #6366f1); } html[data-bs-theme="dark"] .dt-chip:focus-within { box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .25); } html[data-bs-theme="dark"] .dt-chip .dt-chip-label { color: inherit; opacity: .8; /* un pelín más legible en dark */ } html[data-bs-theme="dark"] .dt-chip .dt-chip-close { color: #bfc6ce; /* mismo tono que labels */ } html[data-bs-theme="dark"] .dt-chip .dt-chip-close:hover { background: #495057; color: #fff; } /* ---------- ColumnControl & DateTime ---------- */ html[data-bs-theme="dark"] .dtcc-dropdown.dropdown-menu { background: var(--bs-card-bg) !important; color: var(--bs-body-color) !important; border: 1px solid var(--bs-border-color) !important; } html[data-bs-theme="dark"] .dtcc-dropdown .form-select, html[data-bs-theme="dark"] .dtcc-dropdown .form-control { background: var(--bs-card-bg) !important; /* unificado: card-bg para coherencia del menú */ color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } /*