/* Selector de idioma (lo inserta js/i18n.js en la barra superior y en el pie). */
.fbd-lang {
    background-color: var(--bg-2, #161B22);
    color: var(--text-2, #C9D1D9);
    border: 1px solid var(--line-2, #30363D);
    border-radius: 6px;
    padding: 6px 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    line-height: 1.2;
    cursor: pointer;
    color-scheme: dark;
    max-width: 150px;
}

.fbd-lang:hover { border-color: var(--line-3, #484F58); }

.fbd-lang:focus-visible {
    outline: 2px solid #388BFD;
    outline-offset: 2px;
}

.fbd-lang--desktop { width: 112px; }

.fbd-lang--mobile { display: none; }

@media (min-width: 1024px) and (max-width: 1360px) {
    .navbar .nav-buttons { gap: 8px; }
    .navbar .nav-buttons .btn { padding: 8px 12px; }
    .fbd-lang--desktop { width: 96px; padding-left: 6px; padding-right: 4px; }
}

.fbd-lang--footer {
    display: inline-block;
    margin-top: 14px;
}

@media (max-width: 1023px) {
    .fbd-lang--mobile {
        display: block;
        margin-left: auto;
        margin-right: 0;
        max-width: 120px;
    }

    /* Con el menú desplegable ya está el selector de la barra: no repetir el de escritorio. */
    .fbd-lang--desktop { display: none; }
}

@media (max-width: 420px) {
    .fbd-lang--mobile { max-width: 96px; padding-left: 6px; padding-right: 4px; }
}

/* Títulos que en otros idiomas son una sola palabra larga: que no se salgan de la pantalla en el móvil. */
html:not([lang|="es"]) h1 { overflow-wrap: break-word; }
html[lang|="de"] h1,
html[lang|="nl"] h1 { -webkit-hyphens: auto; hyphens: auto; }

.i18n-legal-note {
    font-size: 0.85rem;
    color: var(--muted, #8B949E);
    border-left: 2px solid var(--line-2, #30363D);
    padding-left: 12px;
    margin: 0 0 24px;
}