/**
 * Estilos personalizados para Select2 con Bootstrap 5
 * Estos estilos garantizan que Select2 se integre visualmente con Bootstrap
 */

/* Ajustar altura del select para que coincida con los inputs de Bootstrap */
.select2-container--default .select2-selection--single {
    height: 38px !important;
    padding: 5px 10px;
    font-size: 1rem;
    border-radius: 0.375rem !important;
    border: 1px solid #ced4da !important;
}

/* Ajustar alineación del texto */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important;
    padding-left: 0;
}

/* Ajustar posición de la flecha desplegable */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}

/* Estilos para el estado de foco similar a Bootstrap */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Estilos para el dropdown */
.select2-dropdown {
    border-color: #86b7fe !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Estilos para los resultados de la búsqueda */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #eaeaec !important;
    color: #495057 !important;
}

/* Estilo para el placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #6c757d !important;
}

/* Estilo para el spinner de carga */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #6c757d transparent transparent transparent !important;
}