/* ──────────────────────────────────────────────────────────────────────────────
   Selector del sistema — js/select_sistema.js
   El desplegable nativo de <select> lo dibuja el navegador y no admite estilos.
   js/select_sistema.js lo reemplaza por un dropdown de Bootstrap con esta
   apariencia; el <select> original sigue en la página (oculto) y es el que
   guarda el valor, así que formularios, validaciones y onchange no cambian.

   Prefijo `as-sel` en todo.
   ────────────────────────────────────────────────────────────────────────────── */

.as-sel { position: relative; display: block; }
.as-sel.as-sel-auto { display: inline-block; }

/* El <select> real queda fuera de la vista pero en el DOM (valida `required`). */
select.as-sel-nativo {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
}

.as-sel-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    /* alto, borde, radio y tipografía: css/componentes.css */
    padding: 0 12px;
    border: 1px solid #d9e2ec;
    background: #fff;
    text-align: left;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.as-sel-sm .as-sel-btn { padding: 0 10px; }

.as-sel-btn:hover { border-color: #b9c7d8; }

.as-sel-btn[aria-expanded="true"],
.as-sel-btn:focus-visible {
    border-color: #0253ac;
    box-shadow: 0 0 0 4px rgba(2, 83, 172, .12);
}

.as-sel-btn:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.as-sel.is-invalid .as-sel-btn { border-color: #dc3545; }
.as-sel.is-valid .as-sel-btn { border-color: #198754; }

.as-sel-btn .bi-chevron-down {
    flex-shrink: 0;
    font-size: .8rem;
    color: #64748b;
    transition: transform .2s ease;
}

.as-sel-btn[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

.as-sel-texto {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.as-sel-texto > span:not(.as-sel-punto) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.as-sel-btn.es-placeholder .as-sel-texto { color: #94a3b8; }

.as-sel-punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.as-sel-menu {
    min-width: 100%;
    max-height: 280px;
    overflow-y: auto;
    margin-top: 6px !important;
    padding: 6px;
    border: 1px solid #e8edf2;
    border-radius: 12px;
    box-shadow: 0 14px 32px rgba(15, 40, 80, .16);
    /* Solo opacidad: un `transform` en la animación pisaría el que usa Popper
       para colocar el menú y lo dejaría encima del botón. */
    animation: as-sel-aparece .18s ease both;
}

.as-sel-op {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: .9rem;
    color: #334155;
    text-align: left;
    white-space: nowrap;
    transition: background .12s ease, padding-left .12s ease;
}

.as-sel-op:hover,
.as-sel-op:focus {
    background: rgba(2, 83, 172, .07);
    color: #0253ac;
    padding-left: 16px;
}

/* Opción activa sobria: tono suave y el check basta como señal */
.as-sel-op.is-activo {
    background: rgba(2, 83, 172, .08);
    color: #0253ac;
    font-weight: 500;
}

.as-sel-op:disabled { color: #b0bac6; cursor: not-allowed; background: transparent; padding-left: 12px; }

.as-sel-op .as-sel-n {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 99px;
    background: #eef2f7;
    color: #64748b;
    font-size: .72rem;
    font-weight: 600;
}

.as-sel-op .bi-check2 { color: #0253ac; }

/* Botón que mide como la opción más larga (lo usa dashboard_inicio.js) */
.as-sel-medida {
    display: grid;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.as-sel-medida > span { white-space: nowrap; grid-area: 1 / 1; }
.as-sel-medida i { display: inline-block; width: 52px; }

@keyframes as-sel-aparece {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .as-sel-menu { animation: none; }
    .as-sel-btn, .as-sel-btn .bi-chevron-down, .as-sel-op { transition: none; }
}