/* ═══════════════════════════════════════════════════════════
   YouAnime — components/ya-select.css
   Select personalizado.
   ═══════════════════════════════════════════════════════════ */

.ya-select { position: relative; display: block; width: 100%; }

.ya-select__native {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.ya-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    width: 100%;
    height: 42px;
    padding: 0 12px;
    background: rgba(5, 9, 18, 0.6);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--txt-1);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: all var(--tr-fast);
    text-align: left;
}
.ya-select__trigger:hover {
    border-color: var(--border-hover);
    background: rgba(20, 35, 60, 0.6);
}
.ya-select.is-open .ya-select__trigger {
    border-color: var(--cyan);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.18);
}
.ya-select.is-placeholder .ya-select__value { color: var(--txt-4); }
.ya-select__value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ya-select__arrow {
    font-size: 20px;
    color: var(--cyan);
    flex-shrink: 0;
    transition: transform var(--tr-fast);
}
.ya-select.is-open .ya-select__arrow { transform: rotate(180deg); }

/* ── Dropdown ──────────────────────────────────────────── */
/*  Ancho: como mínimo, el del trigger. Si alguna opción es más
    larga que el trigger, el dropdown CRECE (width: max-content)
    hasta un tope razonable para no desbordar la pantalla. Así
    textos tipo "Título (A → Z)" nunca se recortan.
    Ojo: el dropdown se ancla al borde IZQUIERDO del trigger
    (`left: 0`) y crece hacia la derecha. Si el trigger está
    pegado al borde derecho de la pantalla, el `max-width`
    evita que se salga. */
.ya-select__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: min(340px, calc(100vw - 32px));
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    background: rgba(15, 26, 46, 0.98);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-hover);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: yaSelectIn 140ms ease;
}
.ya-select__dropdown[hidden] { display: none !important; }
@keyframes yaSelectIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ya-select__dropdown::-webkit-scrollbar { width: 8px; }
.ya-select__dropdown::-webkit-scrollbar-track { background: var(--bg-1); }
.ya-select__dropdown::-webkit-scrollbar-thumb {
    background: rgba(34, 211, 238, 0.25);
    border-radius: var(--r-full);
}
.ya-select__dropdown::-webkit-scrollbar-thumb:hover { background: rgba(34, 211, 238, 0.5); }

.ya-select__option {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 8px 12px;
    border-radius: var(--r-sm);
    color: var(--txt-2);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: all var(--tr-fast);
    background: transparent;
    border: 0;
    width: 100%;
}
.ya-select__option:hover {
    background: rgba(34, 211, 238, 0.10);
    color: var(--cyan);
}
.ya-select__option.is-selected {
    background: rgba(34, 211, 238, 0.15);
    color: var(--cyan);
    font-weight: 600;
}
.ya-select__option-label {
    flex: 1;
    /* Sin truncado: el dropdown crece para que quepa todo el texto.
       Se deja `nowrap` para que una opción no ocupe dos líneas. */
    white-space: nowrap;
}
.ya-select__check {
    font-size: 16px;
    color: var(--cyan);
    opacity: 0;
    transition: opacity var(--tr-fast);
    flex-shrink: 0;
}
.ya-select__option.is-selected .ya-select__check { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   ELEVACIÓN DEL CONTENEDOR
   Cuando el dropdown se abre, el ancestro con `backdrop-filter`
   (típicamente .admin-card) recibe esta clase desde JS. Así
   toda la tarjeta pasa por encima de las demás y el dropdown
   queda visible, sin necesidad de tocar la estructura HTML.
   ═══════════════════════════════════════════════════════════ */
.ya-select-host-elevated {
    position: relative !important;
    z-index: 999 !important;
}