.select2 {
  width: 100% !important;
}

.select2Multi {
  width: 85% !important;
}

/* para mostrar/ocultar el placeholder 
   https://github.com/select2/select2/issues/5585
*/
.select2-results {
  text-align: left;
} 

.select2-search--inline {
  display: contents;
}

/*
.select2-search__field:placeholder-shown {
  width: 100% !important;
}
*/  
  
.select2-search__field {
  width: 0px !important;
}

.select2-results__option {
  padding-right: 20px;
  /*vertical-align: middle;*/
  text-align: left;
  width: auto;
}

.select2-results__option:before {
  content: "";
  display: inline-block;
  position: relative;
  height: 20px;
  width: 20px;
  border: 2px solid #e9e9e9;
  border-radius: 4px;
  background-color: #fff;
  margin-right: 20px;
  /*vertical-align: middle;*/
}

.select2-results__option[aria-selected=true]:before {
  font-family: fontAwesome;
  content: "\f00c";
  color: #fff;
  background-color: #007bff;
  border: 0;
  display: inline-block;
  padding-left: 3px;
}

.select2-container {
  flex: 1;
  min-width: auto;
  /*400px;*/
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #fff;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #eaeaeb;
  color: #272727;
}

.select2-container--default .select2-selection--multiple {
  margin-bottom: 10px;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border-radius: 4px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #007bff;
  border-width: 2px;
}

.select2-container--default .select2-selection--multiple {
  border-width: 2px;
}

.select2-container--open .select2-dropdown--below {

  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

}

.select2-selection .select2-selection--multiple:after {
  content: 'hhghgh';
}

/* select with icons badges single*/
.select-icon .select2-selection__placeholder .badge {
  display: none;
}

.select-icon .placeholder {
  display: none;
}

.select-icon .select2-results__option:before,
.select-icon .select2-results__option[aria-selected=true]:before {
  display: none !important;
  /* content: "" !important; */
}

.select-icon .select2-search--dropdown {
  display: none;
}

/** Buttons Icons Check UnCheck ***/
.button-group {
  /*display: flex;*/
  display: inline-flex;
  gap: 10px;
  flex-shrink: 0;
  margin-bottom: 5px;
  margin-left: 10px;
}

.btn-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  font-size: 18px;
  color: white;
}

/* Botón Check All - Color verde con icono de check */
.btn-check-all {
  background-color: #28a745;
  box-shadow: 0 3px 6px rgba(40, 167, 69, 0.3);
}

.btn-check-all:hover {
  background-color: #218838;
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 5px 10px rgba(40, 167, 69, 0.4);
}

.btn-check-all:active {
  transform: translateY(-1px) scale(1.05);
}

/* Botón Uncheck All - Color rojo con icono de x */
.btn-uncheck-all {
  background-color: #dc3545;
  box-shadow: 0 3px 6px rgba(220, 53, 69, 0.3);
}

.btn-uncheck-all:hover {
  background-color: #c82333;
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 5px 10px rgba(220, 53, 69, 0.4);
}

.btn-uncheck-all:active {
  transform: translateY(-1px) scale(1.05);
}

/* Tooltip para los botones */
.btn-icon {
  position: relative;
}

.selected-count {
  font-weight: bold;
  color: #007bff;
}

.icon-description {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
}

@media (max-width: 768px) {
  .select2 {
    width: 100% !important;
  }

  .form-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .button-group {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
  }
}

/*----------------------------------------------- */

/* Asegura que el contenedor principal pueda albergar elementos en línea y manejar el desbordamiento si es necesario */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    box-sizing: border-box;
    display: flex; /* Utiliza flexbox para alinear elementos seleccionados y el input */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan si el contenedor se llena */
    width: 100%;
    padding: 0 10px; /* Añade un padding para evitar que se peguen a los bordes */
}

/* El contenedor del buscador debe ser inline para fluir con los tags seleccionados */
.select2-container--default .select2-selection--multiple .select2-search--inline {
    display: inline-block !important;
    max-width: 100%; /* Evita que el input empuje a los tags seleccionados fuera de la vista */
    margin: 5px 0; /* Espaciado adecuado */
}

/* El campo de búsqueda debe tener un ancho flexible */
.select2-container--default .select2-selection--multiple .select2-search__field {
    width: auto !important; /* Permite que el ancho se ajuste dinámicamente */
    min-width: 100px; /* Un ancho mínimo para que sea usable */
    margin-top: 0px !important;
}

.select2-selection__clear {
    font-size: 0; /* Oculta la X original */
}

.select2-selection__clear::before {
    content: '\f2ed'; /* Código Unicode del icono (ej. trash en FontAwesome) */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    color: #e74c3c;
}

/* Ocultar la flecha original */
.select2-selection__arrow b {
    display: none !important;
}

/* Insertar un icono de FontAwesome */
.select2-selection__arrow::before {
    content: '\f107'; /* Código de flecha hacia abajo (angle-down) */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: block;
    text-align: center;
    line-height: 34px; /* Ajusta según la altura de tu select */
    color: #555;
    font-size: 14px;
}


/* Cuando el select está abierto */
.select2-container--open .select2-selection__arrow::before {
    transform: rotate(180deg);
    transition: transform 0.2s ease-in-out;
}