/* Personalizaciones de bootstrap-select (v1.14-beta2).
   Se carga DESPUÉS de bootstrap-select.min.css para poder sobreescribir sus reglas.
   Aplica a los selects armados con putSelect(['selectpicker' => 1]), cuyo wrapper queda como .bootstrap-select.form-control. */

/* Menú desplegable: como el de un <select> nativo — sin bordes redondeados, sin padding vertical,
   con el borde gris oscuro de los controles nativos y pegado al botón (sin el offset que deja bootstrap-select). */
.bootstrap-select .dropdown-menu {
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: #767676;
    margin-top: -2px !important; /* !important porque bootstrap-select fija margin:0 inline en el menú */
}

/* Tamaño de letra de las opciones igual al del select sm (.875rem), no el 1rem por defecto del dropdown. */
.bootstrap-select.form-control-sm .dropdown-menu {
    font-size: .875rem;
}

/* Buscador (liveSearch) del mismo tamaño que el select: en un select sm, un input sm. */
.bootstrap-select.form-control-sm .bs-searchbox {
    padding: .25rem;
}
.bootstrap-select.form-control-sm .bs-searchbox .form-control {
    height: auto;
    min-height: 0;
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: var(--bs-border-radius-sm);
}

/* El alto máximo del desplegable NO se fija acá: lo maneja selectPicker.js, que toma el menor entre lo que
   calculó la librería (data-size / espacio disponible) y un tope en vh — 50vh por defecto, o el que diga
   data-max-vh en el <select>. Tiene que ser por JS porque el .inner y el .dropdown-menu tienen que quedar
   coordinados: si el menú recorta más que el .inner, la lista scrollea sobre una ventana más alta que la
   visible y la opción activa termina tapada por el buscador. */
.bootstrap-select .dropdown-menu .inner {
    /* Evita el scroll chaining: al llegar al tope del scroll interno, la rueda no arrastra el scroll de la página. */
    overscroll-behavior: contain;
}
/* Sin scroll-snap: con 'mandatory' Chrome directamente ignora la rueda dentro del listado. El scroll queda
   alineado a opciones enteras porque lo mueve selectPicker.js, de a filas. */


/* Cursor pointer sobre las opciones del dropdown. */
.bootstrap-select .dropdown-menu .dropdown-item:not(.disabled) {
    cursor: pointer;
}

/* Íconos de servicio (svg via data-content): un poco más grandes dentro del selectpicker (el contexto sm los achica). */
.bootstrap-select .service-icon {
    width: 1.25em;
    height: 1.25em;
}

/* Padding de las opciones compacto como en un select nativo: izquierda .5rem, derecha casi nula, vertical mínimo. */
.bootstrap-select .dropdown-menu .dropdown-item {
    padding: .15rem .1rem .15rem .5rem;
}

/* Check-mark en TODAS las opciones (no solo las seleccionadas), pegado a la derecha:
   gris clarito las no seleccionadas, oscuro las seleccionadas. La tilde toma el color de 'color' (border currentColor). */
.bootstrap-select.show-tick .dropdown-menu li a span.check-mark {
    display: inline-block;
    position: absolute;
    right: 6px;
    top: 5px;
    color: #ccc;
}
.bootstrap-select.show-tick .dropdown-menu li a.selected span.check-mark {
    color: #212529;
}

/* Opción resaltada (azul, como un <select> nativo). Una sola por vez: por defecto manda la '.active'
   (la que marca bootstrap-select al navegar con las flechas), y mientras el mouse esté dentro del menú
   —selectPicker.js pone 'nav-mouse' en el wrapper— manda la opción bajo el cursor y se apaga la del teclado.
   Sin ':focus', que la librería deja puesto en la opción navegada y no se va al mover el mouse. */
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select.nav-mouse .dropdown-menu .dropdown-item:hover {
    background-color: #0078D7;
    color: #fff;
}
/* Con el mouse mandando se apaga la del teclado. El ':hover' no puede pintar fuera de 'nav-mouse': si el
   puntero queda quieto sobre una opción y se sigue con las flechas, quedarían pintadas las dos. */
.bootstrap-select.nav-mouse .dropdown-menu .dropdown-item.active:not(:hover) {
    background-color: transparent;
    color: inherit;
}

/* En los multi-select NO se resalta la opción al pasar el mouse (lo elegido se ve por el check-mark),
   para diferenciarlos visualmente de los single. Se detecta por el <select multiple> que bootstrap-select
   conserva dentro del wrapper. */
.bootstrap-select:has(select[multiple]) .dropdown-menu .dropdown-item:hover,
.bootstrap-select:has(select[multiple]) .dropdown-menu .dropdown-item:focus,
.bootstrap-select:has(select[multiple]) .dropdown-menu .dropdown-item.active,
.bootstrap-select:has(select[multiple]).nav-mouse .dropdown-menu .dropdown-item:hover {
    background-color: transparent;
    color: inherit;
}

/* Ancho 100% del contenedor (como un <select> con form-select), para que llene su columna. */
.bootstrap-select.form-control:not([class*="col-"]) {
    width: 100%;
}
.bootstrap-select.form-control > .dropdown-toggle {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding-right: 2.25rem;
    /* misma flecha que .form-select nativo */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}
/* saco el triangulito propio del dropdown-toggle (usamos la flecha SVG de arriba) */
.bootstrap-select.form-control > .dropdown-toggle::after {
    display: none;
}
/* hover/active: btn-light lo pinta gris; mantenemos fondo blanco y borde default */
.bootstrap-select.form-control > .dropdown-toggle:hover,
.bootstrap-select.form-control > .dropdown-toggle:active {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}
/* foco / abierto: fondo blanco + ring azul como el form-control nativo.
   outline:0 !important para pisar el outline oscuro (thin dotted #333) que la librería mete con !important. */
.bootstrap-select.form-control > .dropdown-toggle:focus,
.bootstrap-select.form-control.show > .dropdown-toggle {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    outline: 0 !important;
}
/* tamaño sm: padding dejando lugar a la flecha + radius chico */
.bootstrap-select.form-control-sm > .dropdown-toggle {
    padding: .25rem 2.25rem .25rem .5rem;
    border-radius: var(--bs-border-radius-sm);
    font-size: .875rem;
}