/* ══════════════════════════════════════════════════════════════
   DESPLEGABLES
   ──────────────────────────────────────────────────────────────
   Sustituyen la lista nativa del <select>, que la pinta el sistema
   operativo y se sale del diseño de la app. El botón cerrado es
   idéntico al campo de siempre; lo que cambia es la lista abierta.
   Depende de: base.css → components.css
   ══════════════════════════════════════════════════════════════ */

/* El <select> real sigue en el DOM como fuente de verdad, pero no se
   ve. No se usa `display:none` para que siga siendo un campo de
   formulario a todos los efectos. */
.sel__nativo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    pointer-events: none;
}

.sel {
    position: relative;
    width: 100%;
}

/* ── Botón (el campo cerrado) ───────────────────────────────────
   Repite el aspecto de .field__select para que no se note el cambio. */
.sel__btn {
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    padding: 0 44px 0 14px;
    font-family: inherit;
    font-size: var(--font-size-btn);
    text-align: left;
    color: var(--iconos-oscuros);
    background: var(--relleno-general);
    border: var(--border-width-medium) solid var(--contorno);
    border-radius: var(--radio-borde);
    cursor: pointer;
    outline: none;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

/* Con icono a la izquierda, el texto se aparta para dejarle sitio. */
.field__control > .field__icon ~ .sel .sel__btn {
    padding-left: 44px;
}

@media (hover: hover) and (pointer: fine) {
    .sel__btn:hover {
        border-color: #d6dae1;
    }
}

.sel__btn:focus-visible,
.sel.is-abierto .sel__btn {
    background: var(--color-blanco);
    border-color: var(--color-naranja);
    box-shadow: 0 0 0 4px var(--color-naranja-suave);
}

.sel__valor {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* «Selecciona…» se lee como marcador, no como un valor elegido. */
.sel__valor--vacio {
    color: var(--gris-mas-claro-desactivado-labels);
}

/* La flecha del campo gira al abrirse. */
.field__control:has(.sel.is-abierto) .field__chevron {
    color: var(--color-naranja);
    transform: rotate(180deg);
}

/* ── Lista desplegada ───────────────────────────────────────── */
.sel__lista {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 264px;
    overflow-y: auto;
    padding: var(--spacing-xs);
    background: var(--color-blanco);
    border: var(--border-width-default) solid var(--contorno);
    border-radius: var(--radio-borde);
    box-shadow:
        0 4px 10px -4px rgba(17, 24, 39, 0.12),
        0 16px 32px -12px rgba(17, 24, 39, 0.28);
    animation: sel-abrir 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* Sin sitio abajo, se despliega hacia arriba. */
.sel--arriba .sel__lista {
    top: auto;
    bottom: calc(100% + 6px);
    animation-name: sel-abrir-arriba;
}

@keyframes sel-abrir {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

@keyframes sel-abrir-arriba {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.sel__lista::-webkit-scrollbar {
    width: 6px;
}

.sel__lista::-webkit-scrollbar-thumb {
    background: var(--contorno);
    border-radius: 999px;
}

/* ── Cada opción ────────────────────────────────────────────── */
.sel__opcion {
    display: flex;
    align-items: center;
    gap: var(--spacing-10);
    width: 100%;
    min-height: 44px;
    padding: 0 10px;
    font-family: inherit;
    font-size: var(--font-size-small);
    font-weight: 600;
    text-align: left;
    color: var(--iconos-oscuros);
    background: transparent;
    border: none;
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    outline: none;
    transition: background 0.12s ease, color 0.12s ease;
}

.sel__opcion:focus-visible {
    background: var(--color-naranja-suave);
    color: var(--color-naranja-hover);
}

@media (hover: hover) and (pointer: fine) {
    .sel__opcion:hover:not([disabled]) {
        background: var(--color-naranja-suave);
        color: var(--color-naranja-hover);
    }
}

.sel__opcion[disabled] {
    color: var(--gris-mas-claro-desactivado-labels);
    cursor: default;
}

.sel__opcion-txt {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La marca solo aparece en la opción elegida. */
.sel__opcion-check {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: var(--color-blanco);
    background: var(--color-naranja);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.sel__opcion-check svg {
    width: 11px;
    height: 11px;
}

.sel__opcion.is-sel {
    color: var(--color-naranja-hover);
    background: var(--color-naranja-suave);
}

.sel__opcion.is-sel .sel__opcion-check {
    opacity: 1;
    transform: none;
}

/* ── Sin animación para quien la haya desactivado ───────────── */
@media (prefers-reduced-motion: reduce) {
    .sel__lista {
        animation: none;
    }

    .sel__opcion-check {
        transition: none;
    }
}