/* Seletor de idioma das telas públicas — ver templates/_seletor_idioma.html.
   Autossuficiente (cores com fallback): as telas públicas usam paletas diferentes. */
.idioma-menu {
  position: fixed; top: 16px; right: 16px; z-index: 1000;
  font-family: inherit;
}
.idioma-menu--com-menu { right: 60px; } /* páginas que já têm o botão de 3 pontos no canto */

.idioma-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--menu-border, rgba(124, 58, 237, .25));
  background: var(--menu-bg, #fff);
  color: var(--accent, #7c3aed);
  cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.idioma-btn:hover { transform: scale(1.06); box-shadow: 0 4px 14px rgba(124, 58, 237, .22); }
.idioma-btn:focus-visible { outline: 2px solid var(--accent, #7c3aed); outline-offset: 2px; }

.idioma-lista {
  list-style: none; margin: 0; padding: 6px;
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px;
  background: var(--menu-bg, #fff);
  border: 1px solid var(--menu-border, rgba(124, 58, 237, .2));
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.97); transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease;
}
.idioma-menu.aberto .idioma-lista { opacity: 1; pointer-events: auto; transform: none; }

.idioma-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: none; border-radius: 7px; background: none;
  font: inherit; font-size: 14px; color: var(--menu-text, #1e1b4b);
  cursor: pointer; text-align: left; transition: background .15s;
}
.idioma-item:hover { background: var(--menu-hover, rgba(124, 58, 237, .08)); }
.idioma-item.ativo { font-weight: 700; color: var(--accent, #7c3aed); }
.idioma-bandeira { flex-shrink: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }

/* Sugestão do idioma do navegador (nunca aplicada sozinha) */
.idioma-sugestao {
  position: fixed; top: 64px; right: 16px; z-index: 999; width: 290px; max-width: calc(100vw - 32px);
  padding: 14px 16px; border-radius: 12px;
  background: var(--menu-bg, #fff); color: var(--menu-text, #1e1b4b);
  border: 1px solid var(--menu-border, rgba(124, 58, 237, .2));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  animation: idiomaSugestaoEntra .3s ease both;
}
.idioma-menu--com-menu ~ .idioma-sugestao { right: 60px; }
.idioma-sugestao p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; }
.idioma-sugestao-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.idioma-sugestao-acoes button {
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 8px; cursor: pointer;
}
.idioma-sugestao-aceitar { border: none; background: var(--accent, #7c3aed); color: #fff; }
.idioma-sugestao-manter { border: 1px solid var(--menu-border, rgba(124, 58, 237, .3)); background: transparent; color: inherit; }
@keyframes idiomaSugestaoEntra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

[data-theme="dark"] .idioma-btn,
[data-theme="dark"] .idioma-lista,
[data-theme="dark"] .idioma-sugestao { background: var(--menu-bg, #1c1730); color: var(--menu-text, #f0ecff); }
[data-theme="dark"] .idioma-item { color: var(--menu-text, #f0ecff); }

@media (max-width: 480px) {
  .idioma-menu { top: 12px; right: 12px; }
  .idioma-menu--com-menu { right: 56px; }
  .idioma-sugestao { top: 58px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .idioma-lista, .idioma-btn, .idioma-sugestao { transition: none; animation: none; }
}