/* Selector de idioma: cabecera de escritorio (_Traduccion) y menú móvil (_TraduccionMovil). */

/* WP26: era el único desplegable claro de la barra, con un hover casi invisible (de blanco a #f5f5f5) y una lista que
   heredaba la atenuación de la barra y dejaba ver lo que había debajo. Ahora el botón tiene el alto de las pastillas
   del menú y la lista usa la superficie común de los desplegables (WP15). El elemento se centra en la barra, que cambia
   de alto al hacer scroll; antes se colocaba con un margen fijo y se corregía con un desplazamiento en la barra
   reducida. La plantilla estira los elementos de la barra (.mpl-navbar-top .mpl-navbar-nav > li); este selector le
   gana en especificidad. */
.mpl-navbar-top .mpl-navbar-nav > .moc-navbar-idioma {
    display: flex;
    align-items: center;
}

.idioma-container {
    position: relative;
    display: inline-block;
    font-family: inherit;
}

.idioma-selected {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 2.2rem;
    padding: 0 .75rem;
    border: 1px solid var(--qg-public-border-subtle);
    border-radius: var(--qg-public-radius-sm);
    background-color: var(--qg-public-color-white-05);
    color: var(--qg-public-text-strong);
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .05em;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, opacity .2s ease;
}

.idioma-selected img {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--qg-public-radius-circle);
    object-fit: cover;
}

/* Flecha dibujada con dos bordes: gira al abrir la lista. */
.idioma-selected::after {
    width: .4rem;
    height: .4rem;
    margin: 0 0 .2rem .1rem;
    content: "";
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: .7;
    transform: rotate(45deg);
    transition: transform .2s ease, margin .2s ease;
}

.idioma-container.active .idioma-selected::after {
    margin: .2rem 0 0 .1rem;
    transform: rotate(-135deg);
}

.idioma-selected:hover,
.idioma-selected:focus-visible,
.idioma-container.active .idioma-selected {
    border-color: var(--qg-public-border-strong);
    background-color: var(--qg-public-color-white-10);
}

.idioma-selected:focus-visible {
    outline: 2px solid var(--qg-public-color-gold-light);
    outline-offset: 2px;
}

.idioma-dropdown {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 999;
    min-width: 11rem;
    padding: .35rem;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background-color: var(--qg-public-color-surface-dropdown);
    border: 1px solid var(--qg-public-color-white-12);
    border-radius: var(--qg-public-radius-md);
    box-shadow: var(--qg-public-shadow-dropdown);
    transform: translateY(-.5rem);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

/* Cerrado sigue oculto también para el teclado (visibility), no solo a la vista. */
.idioma-container.active .idioma-dropdown {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.idioma-option {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    border-radius: var(--qg-public-radius-sm);
    color: var(--qg-public-text-base);
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}

.idioma-option img {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--qg-public-radius-circle);
    object-fit: cover;
}

.idioma-option:hover,
.idioma-option:focus-visible {
    color: var(--qg-public-text-strong);
    text-decoration: none;
    background-color: var(--qg-public-color-white-08);
}

/* Idioma actual: se marca con el dorado, que en la barra significa «estás aquí» (WP24). */
.idioma-option[aria-current="true"],
.idioma-movil-opcion.activo {
    color: var(--qg-public-text-strong);
    font-weight: 600;
}

.idioma-option[aria-current="true"]::after,
.idioma-movil-opcion.activo::after {
    width: .4rem;
    height: .4rem;
    margin-left: auto;
    content: "";
    border-radius: var(--qg-public-radius-circle);
    background-color: var(--qg-public-color-gold-light);
}

/* Menú móvil */

.idioma-movil-container {
    padding: 10px 16px;
    border-top: 1px solid var(--qg-public-color-white-10);
}

.idioma-movil-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 0;
    color: inherit;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.idioma-movil-toggle img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.idioma-movil-toggle .idioma-movil-arrow {
    margin-left: auto;
    font-size: 10px;
    transition: transform 0.2s ease;
}

.idioma-movil-container.open .idioma-movil-arrow {
    transform: rotate(180deg);
}

.idioma-movil-lista {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0 0 0;
}

.idioma-movil-container.open .idioma-movil-lista {
    display: flex;
}

.idioma-movil-opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.idioma-movil-opcion:hover,
.idioma-movil-opcion:focus-visible {
    color: inherit;
    text-decoration: none;
    background: var(--qg-public-color-white-10);
}

.idioma-movil-opcion.activo {
    background: var(--qg-public-color-white-15);
}

.idioma-movil-opcion img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}