:root {
  /* ========================================================
     VARIABLES SELECT2 BOOTSTRAP 5
     ======================================================== */
   
  --s2-btn-padding-y: var(--wpbc-input-btn-padding-y, 0.375rem);
  --s2-btn-padding-x: var(--wpbc-input-btn-padding-x, 0.75rem);
  --s2-btn-font-size: var(--wpbc-input-btn-font-size, 1rem);
  --s2-btn-font-weight: var(--wpbc-input-btn-font-weight, 400);
  --s2-btn-line-height: var(--wpbc-input-btn-line-height, 1.5);

  /* Altura total calculada dinámicamente */
  --s2-btn-height: calc(
    (var(--s2-btn-font-size) * var(--s2-btn-line-height)) + 
    (var(--s2-btn-padding-y) * 2) + 
    (var(--s2-btn-border-width) * 2)
    );
  
  /* Colores tomados de Bootstrap */
  --s2-btn-bg: var(--bs-body-bg, #ffffff);
  --s2-btn-color: var(--bs-body-color, #212529);
  --s2-btn-placeholder-color: var(--bs-secondary-color, #6c757d);
  --s2-btn-border-color: var(--bs-border-color, #dee2e6);
  --s2-btn-border-radius: var(--bs-border-radius, 0.375rem);
  --s2-btn-border-width: var(--bs-border-width, 1px);
  
  /* Estados Focus / Open */
  --s2-btn-focus-border-color: var(--bs-primary, #0d6efd);
  --s2-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
  
  /* Flecha / Chevron (SVG oficial de Bootstrap Form Select) */
  --s2-arrow-size: 16px;
  --s2-arrow-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

  /* Menu / items */

  /* Item Hover / Foco con teclado (--highlighted) */
  --s2-item-hover-bg: var(--bs-primary, #0d6efd);
  --s2-item-hover-color: var(--bs-white, #fff);

  /* Item ya seleccionado / Activo (--selected) */
  --s2-item-selected-bg: var(--bs-tertiary-bg, #f8f9fa);
  --s2-item-selected-color: var(--bs-primary, #212529);

  /* Padding y tipografía del item */
  --s2-item-padding-y: var(--bs-dropdown-item-padding-y, 0.375rem);
  --s2-item-padding-x: var(--bs-dropdown-item-padding-x, 0.75rem);
  --s2-item-font-size: var(--s2-btn-font-size, 1rem);
}

/* 1. Ancho del contenedor principal (evita el style="width: 1296px" fijo) */
.select2-container {
  width: 100% !important;
  display: block;
}

/* 2. El "botón" (caja principal) */
.select2-container--default .select2-selection--single {
  min-height: var(--s2-btn-height);
  padding: var(--s2-btn-padding-y) var(--s2-btn-padding-x);
  font-size: var(--s2-btn-font-size);
  font-weight: var(--s2-btn-font-weight);
  line-height: var(--s2-btn-line-height);
  color: var(--s2-btn-color);
  background-color: var(--s2-btn-bg);
  border: var(--s2-btn-border-width) solid var(--s2-btn-border-color);
  border-radius: var(--s2-btn-border-radius);
  box-shadow: var(--bs-box-shadow-sm, inset 0 1px 2px rgba(0, 0, 0, 0.075));
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  display: flex;
  align-items: center;
  position: relative;
}

/* 3. Texto renderizado / Placeholder */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--s2-btn-color);
  line-height: inherit;
  padding-left: 0;
  padding-right: calc(var(--s2-arrow-size) + 0.5rem); /* Espacio para no pisar la flecha */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Placeholder estilo Bootstrap */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--s2-btn-placeholder-color);
}

/* 4. Flecha (Reemplaza el triángulo CSS por el SVG de Bootstrap 5) */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  position: absolute;
  top: 0;
  right: var(--s2-btn-padding-x);
  width: var(--s2-arrow-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ocultar el triángulo nativo de Select2 */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: none !important;
  width: var(--s2-arrow-size);
  height: var(--s2-arrow-size);
  background-image: var(--s2-arrow-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.2s ease-in-out;
    position: relative;
    top: inherit;
    z-index: 1;
    left: inherit;
    margin: 0;
}

/* 5. Estados Focus y Open (Dropdown activo) */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--s2-btn-focus-border-color);
  outline: 0;
  box-shadow: var(--s2-btn-focus-box-shadow);
}

/* Rotar la flecha hacia arriba cuando está abierto */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  transform: rotate(180deg);
}

/* 6. Estado Disabled */
.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: var(--bs-secondary-bg, #e9ecef);
  opacity: 1;
  border-color: var(--s2-btn-border-color);
  cursor: not-allowed;
}

/* Menu / Items */

/* 1. Item base */
.select2-container--default .select2-results__option {
  padding: var(--s2-item-padding-y) var(--s2-item-padding-x);
  font-size: var(--s2-item-font-size);
  user-select: none;
}

/* 2. Item en Hover o navegación por flechas del teclado */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--s2-item-hover-bg) !important;
  color: var(--s2-item-hover-color) !important;
}

/* 3. Item seleccionado actualmente en la lista */
.select2-container--default .select2-results__option--selected {
  background-color: var(--s2-item-selected-bg) !important;
  color: var(--s2-item-selected-color) !important;
}

/* 4. Item seleccionado cuando además pasás el cursor encima */
.select2-container--default .select2-results__option--selected.select2-results__option--highlighted {
  background-color: var(--s2-item-hover-bg) !important;
  color: var(--s2-item-hover-color) !important;
}

/* Search input */

.select2-search__field:focus-visible{
  outline: none;
}


/* select2-fade-down */

/* Estado base cuando Select2 abre el contenedor */
.select2-dropdown {
    opacity: 0; 
    transition: opacity 0.2s ease-out, transform 0.2s ease-out !important;
    border: 0;
    border-radius: 0;
    pointer-events: none;
    box-shadow: 0px 17px 20px rgba(0, 0, 0, 0.25);

    transform: translateY(-20px);
} 

/* Estado con la clase que pusimos en el timeout */
.select2-dropdown.select2-fade-down {
    opacity: 1;
    transform: translateY(0);
    pointer-events: inherit;
}