/*************************************************
 *       ESTILOS PERSONALIZADOS PARA SELECT2
 *               CON BOOTSTRAP 5
 *************************************************/

/* ==========================
   Espaciado y Estilos Generales
   ========================== */

/* Agrega un margen inferior para separar los elementos Select2 */
.select2-container--bootstrap-5 {
    margin-bottom: 1rem !important;
}

/* Quitar el outline azul cuando el select está enfocado o abierto */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    box-shadow: none !important;
    border: 2px solid var(--color_secundario) !important;
}

/* Establecer un borde por defecto para el select */
.select2-container--bootstrap-5 .select2-selection {
    border: 2px solid #f2f2f2 !important;
}

/* ==========================
   Estilos del Dropdown y Bordes
   ========================== */

/* Bordes cuadrados en select y dropdown */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--bootstrap-5 .select2-selection--multiple,
.select2-container--bootstrap-5 .select2-dropdown {
    border-radius: 0 !important;
}

/* Cuando el dropdown está abierto, cambiar el borde */
.select2-container--bootstrap-5.select2-container--open .select2-selection,
.select2-container--bootstrap-5 .select2-dropdown {
    border: 2px solid var(--color_secundario) !important;
}

/* Eliminar el borde superior del dropdown para unirlo visualmente con el select */
.select2-container--bootstrap-5 .select2-dropdown {
    border-top: transparent !important;
}

/* Eliminar el borde inferior del select cuando el dropdown está abierto */
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-bottom: transparent !important;
}

/* ==========================
   Tipografía y Colores
   ========================== */

/* Tamaño y color del texto en el select y opciones del dropdown */
.select2-container--bootstrap-5 .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-results__option,
.select2-container--bootstrap-5 .select2-results__option--selected,
.select2-container--bootstrap-5 .select2-selection__choice,
.select2-container--bootstrap-5 .select2-search__field {
    font-size: 15px !important;
    color: #616161 !important;
}

/* Estilo para la opción seleccionada dentro del dropdown */
.select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: var(--verde_principal) !important;
    color: white !important;
}
.select2-container--bootstrap-5 .select2-selection--single{
    background: url(../../img/flecha-menu.png) no-repeat calc(100% - 10px) 50% #fff;
}