/* idioma.css: o seletor PT/EN/ES e o botão de tema (docs/DESIGN.md §10). Só tokens, funciona no claro,
   no escuro e dentro do lado escuro do Entrar (que redefine os tokens localmente). */

.barra-idioma-tema { display: flex; align-items: center; gap: 10px; }

.seletor-idioma {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid var(--linha-forte); border-radius: 999px; background: var(--sup);
}
.seg-idioma {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px;
  border: 0; border-radius: 999px; background: transparent; color: var(--txt-2);
  font: 600 13px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.seletor-idioma.compacto .seg-idioma { padding: 0 8px; }
.seg-idioma:hover { color: var(--txt); background: var(--sup-2); }
.seg-idioma.ativo { background: var(--afundado); color: var(--txt); font-weight: 700; }
.seg-idioma:focus-visible { outline: 2px solid var(--zera); outline-offset: 1px; }
.seg-idioma .bandeira { flex: none; display: block; border-radius: 2px; }

.botao-tema {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--linha-forte); background: var(--sup); color: var(--txt-2); cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.botao-tema:hover { color: var(--txt); background: var(--sup-2); }
.botao-tema:focus-visible { outline: 2px solid var(--zera); outline-offset: 2px; }

.link-suporte { display: inline-flex; align-items: center; gap: 6px; color: var(--txt-2); font-weight: 600; font-size: 13px; text-decoration: none; }
.link-suporte:hover { color: var(--txt); text-decoration: underline; }

@media (max-width: 480px) {
  .seg-idioma { padding: 0 8px; }
  .seg-idioma .sigla-idioma { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .seg-idioma, .botao-tema { transition: none; }
}