.ff-lang {
    background-color: #161B22;
    color: #C9D1D9;
    border: 1px solid #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;
}

.ff-lang:hover { border-color: #484F58; }

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

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

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

/* Barras con menú de enlaces (portada, docs, estado): el selector solo se muestra donde cabe; por debajo queda el del pie de página. */
@media (min-width: 769px) and (max-width: 1023px) {
    .ff-lang--crowded { display: none; }
}

@media (min-width: 1024px) and (max-width: 1180px) {
    .navbar .nav-links { gap: 18px; }
    .navbar .nav-buttons { gap: 8px; }
    .navbar .nav-buttons .btn { padding: 8px 12px; }
    .ff-lang--crowded { width: 96px; padding-left: 6px; padding-right: 4px; }
}

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

.docs-sidebar-footer .ff-lang--footer {
    display: block;
    width: 100%;
    max-width: none;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .ff-lang--mobile {
        display: block;
        margin-left: auto;
        margin-right: 12px;
    }
}

/* Títulos que en otros idiomas son una sola palabra larga ("Nutzungsbedingungen"): que no se salgan de la pantalla en 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: #8B949E;
    border-left: 2px solid #30363D;
    padding-left: 12px;
    margin: 0 0 24px;
}