/*
File: Custom Css File
*/

/* Forzar que el contenedor de selección múltiple crezca verticalmente */
.select2-container--default .select2-selection--multiple,
.select2-container .select2-selection--multiple {
    height: auto !important;
    min-height: 38px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    padding-bottom: 2px !important;
    position: relative !important;
}

/* Asegurar que el icono de limpiar (x) esté arriba a la derecha */
.select2-container--default .select2-selection--multiple .select2-selection__clear,
.select2-container .select2-selection--multiple .select2-selection__clear {
    position: absolute !important;
    right: 10px !important;
    top: 6px !important;
    z-index: 1 !important;
    order: 999 !important; /* Por si acaso sigue afectando el flex layout */
}

/* Asegurar que la lista de elementos seleccionados fluya correctamente */
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    padding: 0 25px 0 4px !important; /* Espacio a la derecha para el botón clear */
    gap: 2px !important;
}

/* Ajustar los elementos individuales (tags) */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 4px !important;
    margin-bottom: 2px !important;
}

/* Asegurar que el campo de búsqueda no rompa el layout */
.select2-container--default .select2-selection--multiple .select2-search--inline {
    flex-grow: 1 !important;
}

.select2-container--default .select2-selection--multiple .select2-search__field {
    margin-top: 5px !important;
    height: 24px !important;
    width: 100% !important;
}

.select2-search--inline {
    width: 100% !important;
}

.select2-search__field {
    width: 100% !important;
}