/* 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;
}

/* Alto máximo del desplegable con scroll interno, para que no se vaya de pantalla (bootstrap-select calcula
   un alto = todo el espacio disponible, que queda muy largo). !important porque la librería lo fija inline en el .inner. */
.bootstrap-select .dropdown-menu .inner {
    max-height: 50vh !important;
    /* Evita el scroll chaining: al llegar al tope del scroll interno, la rueda no arrastra el scroll de la página. */
    overscroll-behavior: contain;
}


/* 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): la que está bajo el cursor/foco y la '.active'.
   La '.active' la mueve selectPicker.js para que siga al mouse (al abrir la pone bootstrap-select sobre
   la seleccionada; al hacer hover pasa a seguir el cursor y queda en la última, sin volver a la seleccionada). */
.bootstrap-select .dropdown-menu .dropdown-item:hover,
.bootstrap-select .dropdown-menu .dropdown-item:focus,
.bootstrap-select .dropdown-menu .dropdown-item.active {
    background-color: #0078D7;
    color: #fff;
}

/* 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 {
    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;
}