/* ============================================================
   Archivo  : select_buscable.css
   Ruta     : wwwroot/css/select_buscable.css
   Modulo   : COMPARTIDO (Web.Rubro.Tableros) - Desplegables buscables
   Fase     : 8 - Views
   Version  : V1.1 - 2026-10-25 (copia de Web.Principal V1.0 + punto 5)
   Sistema  : Hana_Trianon_Satelital
   ------------------------------------------------------------
   Companero de js/Shared/select_buscable.js. Se carga en _HeadCSS DESPUES
   de app.min.css (que ya da el look de Select2 del tema) y solo agrega:
   1) texto largo en varias lineas (lista abierta y valor elegido),
   2) tamano chico para .form-select-sm,
   3) Select2 dentro de .input-group (icono a la izquierda),
   4) borde rojo de validacion Bootstrap,
   5) lista abierta por encima de un cuadro SweetAlert2 (z-index 1060).
   ============================================================ */

/* 1a. Lista abierta: cada opcion baja de linea en vez de cortarse */
.select2-results__option {
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}

/* 1b. Valor elegido: tambien en varias lineas; la caja crece con el texto */
.select2-container .select2-selection--single {
    height: auto;
    min-height: calc(1.5em + 0.9064rem + calc(var(--theme-border-width) * 2));
    display: flex;
    align-items: center;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
    padding-top: .4rem;
    padding-bottom: .4rem;
    padding-inline-end: 38px;
}
.select2-container .select2-selection--single .select2-selection__arrow {
    top: 50%;
    transform: translateY(-50%);
}

/* 2. Version chica (filtros de barra con .form-select-sm) */
.form-select-sm + .select2-container .select2-selection--single {
    min-height: calc(1.5em + .625rem + calc(var(--theme-border-width) * 2));
    font-size: .788rem;
    border-radius: var(--theme-border-radius-sm);
}
.form-select-sm + .select2-container .select2-selection--single .select2-selection__rendered {
    padding-top: .2rem;
    padding-bottom: .2rem;
    padding-inline-start: .7rem;
}

/* 3. Dentro de .input-group: ocupa el espacio restante junto al icono */
.input-group > .select2-container {
    position: relative;
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
}
.input-group > .select2-container .select2-selection {
    height: 100%;
}
.input-group > .input-group-text + select + .select2-container .select2-selection,
.input-group > .btn + select + .select2-container .select2-selection {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}
.input-group > .select2-container:has(+ .input-group-text) .select2-selection,
.input-group > .select2-container:has(+ .btn) .select2-selection {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

/* 4. Validacion Bootstrap: el <select> real queda oculto, el borde va al combo */
.form-select.is-invalid + .select2-container .select2-selection,
.was-validated .form-select:invalid + .select2-container .select2-selection {
    border-color: var(--theme-form-invalid-border-color);
}

/* 5. Desplegable dentro de un cuadro SweetAlert2: la lista abierta cuelga del
      body y quedaria detras del cuadro (z-index 1060). Solo mientras hay cuadro. */
body.swal2-shown > .select2-container--open {
    z-index: 1070;
}