/* ==========================================================================
   Combo con búsqueda — desplegable que además permite escribir para filtrar.
   Se monta sobre un <select> real; sin JS el <select> sigue funcionando.
   ========================================================================== */

.combo { position: relative; }

/* Con el JS montado, el <select> nativo se oculta pero sigue en el formulario
   (es el que lleva el name y el valor que se envía). */
.combo.is-ready .combo-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Cuadro de texto --- */
.combo-field { position: relative; display: block; }

/* Doble clase para ganarle a las reglas de formulario del layout
   (.form-group input / .filters select) sin recurrir a !important. */
.combo .combo-input {
    width: 100%;
    font-family: inherit;
    cursor: pointer;
    padding-right: 56px;   /* deja libre la flecha y el botón de borrar */
    text-overflow: ellipsis;
}
.combo-input::placeholder { color: #b3b1a9; }
.combo.is-open .combo-input { cursor: text; }

.combo-caret {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: #5F5E5A;
    pointer-events: none;
    transition: transform .16s ease;
}
.combo.is-open .combo-caret { transform: translateY(-50%) rotate(180deg); }

/* Borrar la selección */
.combo-clear {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(22, 36, 76, .08);
    color: #5F5E5A;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background .14s, color .14s;
}
.combo.has-value .combo-clear { display: inline-flex; }
.combo-clear:hover { background: rgba(22, 36, 76, .16); color: #16244C; }

/* --- Panel de resultados --- */
.combo-panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid rgba(22, 36, 76, .16);
    border-radius: 10px;
    box-shadow: 0 12px 32px -12px rgba(15, 26, 51, .28), 0 4px 12px -6px rgba(15, 26, 51, .16);
    padding: 6px;
    display: none;
}
.combo.is-open .combo-panel { display: block; }

.combo-group {
    padding: 10px 10px 5px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9AA3B7;
}
.combo-group:first-child { padding-top: 4px; }

.combo-option {
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.4;
    color: #3B4A6B;
    cursor: pointer;
}
.combo-option:hover { background: #F8FAFD; color: #0F1A33; }
/* Resaltado del recorrido con el teclado */
.combo-option.is-active { background: rgba(22, 36, 76, .08); color: #16244C; }
.combo-option.is-selected { font-weight: 600; color: #16244C; }
.combo-option mark { background: rgba(129, 215, 66, .38); color: inherit; border-radius: 2px; padding: 0 1px; }

.combo-empty {
    padding: 14px 10px;
    font-size: 13px;
    color: #6B7689;
    text-align: center;
}

/* Lector de pantalla: anuncia cuántos resultados quedan al filtrar */
.combo-status {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}