/* =========================================================
   SELECTOR DE IDIOMA (ES / EUS en la cabecera)
   ========================================================= */

.idioma {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(32, 110, 149, 0.14);
    border-radius: 999px;
    background-color: #e8f2f9;
    box-shadow: 0 8px 26px -10px rgba(18, 48, 74, 0.22);
}

.idioma-op {
    -webkit-appearance: none;
    appearance: none;
    width: 42px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: #206e95;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.idioma-op:hover {
    background-color: rgba(32, 110, 149, 0.1);
}

.idioma-op[aria-pressed="true"] {
    background-color: #206e95;
    color: #fff;
    cursor: default;
}

.idioma-op:focus-visible {
    outline: 2px solid #168bb0;
    outline-offset: 2px;
}

/* Móvil: va fuera del menú, a la izquierda de la lupa */
@media (max-width: 600px) {
    .idioma {
        align-self: flex-start;
        margin: 4px 0 0 auto;
        padding: 2px;
        box-shadow: none;
    }

    .idioma-op {
        width: 34px;
        height: 26px;
        font-size: 12px;
    }

    .idioma + .busca-btn {
        margin-left: 6px;
    }
}

/* Tableta: va dentro del menú, justo antes de la lupa */
@media (min-width: 601px) and (max-width: 900px) {
    .idioma {
        margin-left: 6px;
        box-shadow: none;
    }
}

/* Ordenador: burbuja aparte, entre la cápsula del menú y la lupa */
@media (min-width: 901px) {
    .idioma {
        position: fixed;
        top: 32px;
        right: calc(max(7%, (100% - 1280px) / 2) + 58px);
        z-index: 1000;
    }

    /* la cápsula se aparta un poco más para dejar sitio */
    :is(.hero, .site-header) .menu {
        right: calc(max(7%, (100% - 1280px) / 2) + 58px + 104px);
    }
}

/* Ordenador algo estrecho (de 901 a 1279 px): no cabe al lado de la cápsula,
   así que va justo debajo de la lupa y la cápsula se queda donde estaba */
@media (min-width: 901px) and (max-width: 1279px) {
    .idioma {
        top: 83px;
        right: max(7%, (100% - 1280px) / 2);
    }

    :is(.hero, .site-header) .menu {
        right: calc(max(7%, (100% - 1280px) / 2) + 58px);
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .idioma {
        right: max(4%, (100% - 1280px) / 2);
    }

    :is(.hero, .site-header) .menu {
        right: calc(max(4%, (100% - 1280px) / 2) + 56px);
    }
}