.lang-switcher { position: relative; }

.lang-trigger {
    display: flex; align-items: center; gap: 7px;
    height: 40px; padding: 0 14px; border-radius: 20px;
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.4s var(--ease-in-out), border-color 0.25s var(--ease-out-expo), transform 0.35s var(--ease-spring);
}
.lang-trigger:hover { border-color: var(--accent); transform: translateY(-2px); }
.lang-trigger:active { transform: scale(0.95); transition-duration: 0.12s; }
.lang-chevron { transition: transform 0.35s var(--ease-spring); opacity: 0.7; }
.lang-switcher.open .lang-chevron { transform: rotate(180deg); }
.lang-switcher.open .lang-trigger { border-color: var(--accent); }

.lang-panel {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 200;
    width: 260px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    opacity: 0; visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top right;
    transition: opacity 0.25s var(--ease-out-expo), transform 0.3s var(--ease-spring),
    background-color 0.4s var(--ease-in-out), visibility 0s linear 0.25s;
    will-change: transform, opacity;
}
.lang-switcher.open .lang-panel {
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.25s var(--ease-out-expo), transform 0.3s var(--ease-spring),
    background-color 0.4s var(--ease-in-out), visibility 0s linear 0s;
}

.lang-search {
    position: sticky; top: 0; z-index: 2;
    width: 100%; box-sizing: border-box;
    padding: 14px 16px 10px; border: none; border-bottom: 1px solid var(--border);
    background: var(--surface); color: var(--text);
    font-family: 'Inter', sans-serif; font-size: 0.85rem;
    outline: none;
    transition: background-color 0.4s var(--ease-in-out);
}
.lang-search::placeholder { color: var(--muted); }

.lang-options { max-height: 300px; overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.lang-options::-webkit-scrollbar { width: 6px; }
.lang-options::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.lang-option {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: none; background: none; border-radius: 10px;
    cursor: pointer; text-align: left;
    font-family: 'Inter', sans-serif; color: var(--text);
    transition: background-color 0.15s var(--ease-out-expo), transform 0.25s var(--ease-spring);
}
.lang-option:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); transform: translateX(3px); }
.lang-option:active { transform: translateX(3px) scale(0.98); }
.lang-option-code { font-size: 0.7rem; font-weight: 700; color: var(--muted); min-width: 26px; letter-spacing: 0.02em; }
.lang-option-native { flex: 1; font-size: 0.9rem; }
.lang-check { opacity: 0; color: var(--accent); transform: scale(0.5) rotate(-20deg); transition: opacity 0.25s var(--ease-out-expo), transform 0.3s var(--ease-spring); }
.lang-option.active .lang-check { opacity: 1; transform: scale(1) rotate(0); }
.lang-option.active { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* Cambio de idioma: crossfade con leve desplazamiento, más agradable que un simple parpadeo */
[data-i18n] { transition: opacity 0.15s var(--ease-out-expo), transform 0.15s var(--ease-out-expo); }
[data-i18n].i18n-fade { opacity: 0; transform: translateY(3px); }

@media (max-width: 480px) { .lang-panel { right: -40px; width: 240px; } }
@media (prefers-reduced-motion: reduce) {
    .lang-panel, .lang-chevron, .lang-option, .lang-check, [data-i18n] { transition: none !important; }
}

/* i18n: enlaces */
/* Las opciones de idioma son <a> reales (se pueden abrir en pestaña nueva y los buscadores las ven) */
.lang-option, .lang-option:hover, .lang-option:focus-visible { color: var(--text); text-decoration: none; }