/* ==========================================================================
   Select2 — tema CleverDX (claro y oscuro)
   Se carga en todas las páginas, después de vendor/libs/select2/select2.css.

   Los valores son los de un `.form-control` de core.css / core-dark.css, para que un select2
   y un campo nativo uno al lado del otro no se distingan. Lo que existe como variable `--bs-*`
   (color de texto, primario, borde de card) se lee de ahí; el resto (fondo y borde de campo,
   que Bootstrap no expone como variable) vive en las fichas de abajo.

   El modo oscuro es `html.dark-style` (el que pone el conmutador de la barra); `data-theme` es
   el nombre del tema de color (`theme-default`), nunca `dark`.
   ========================================================================== */

:root {
  --cs-select-bg: #ffffff;
  --cs-select-border: #d1d5db;
  --cs-select-disabled-bg: rgba(var(--bs-black-rgb), 0.08);
  --cs-select-chip-bg: rgba(var(--bs-black-rgb), 0.12);
  --cs-select-active-color: #ffffff;
  --cs-select-hover-bg: rgba(var(--bs-primary-rgb), 0.08);
  --cs-select-hover-color: var(--bs-primary);
  --cs-select-shadow: 0 0.25rem 1rem rgba(var(--bs-black-rgb), 0.12);
}

.dark-style {
  --cs-select-bg: #1e293b;
  --cs-select-border: #475569;
  --cs-select-disabled-bg: rgba(var(--bs-primary-rgb), 0.08);
  --cs-select-chip-bg: var(--bs-body-bg);
  --cs-select-active-color: var(--bs-body-bg);
  --cs-select-hover-bg: rgba(var(--bs-primary-rgb), 0.12);
  --cs-select-hover-color: var(--bs-body-color);
  --cs-select-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.35);
}

.select2-container--default .select2-selection {
  background-color: var(--cs-select-bg) !important;
  border-color: var(--cs-select-border) !important;
  color: var(--bs-body-color) !important;
}

.select2-container--default .select2-selection__rendered {
  color: var(--bs-body-color) !important;
}

.select2-dropdown {
  background-color: var(--cs-select-bg) !important;
  border-color: var(--bs-border-color) !important;
  box-shadow: var(--cs-select-shadow) !important;
}

.select2-results__option {
  color: var(--bs-body-color) !important;
}

.select2-results__option[aria-selected=true] {
  background-color: var(--bs-primary) !important;
  color: var(--cs-select-active-color) !important;
}

.select2-container--default .select2-results__option--highlighted:not([aria-selected=true]) {
  background-color: var(--cs-select-hover-bg) !important;
  color: var(--cs-select-hover-color) !important;
}

.select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search__field {
  background-color: var(--cs-select-bg) !important;
  border-color: var(--cs-select-border) !important;
  color: var(--bs-body-color) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--cs-select-chip-bg) !important;
  color: var(--bs-body-color) !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: var(--cs-select-disabled-bg) !important;
  border-color: var(--cs-select-border) !important;
}