/* assets/css/acessibilidade.css — Widget de acessibilidade (tamanho de texto, tema, movimento). */

/* ---------------------------------------------------
   WIDGET DE ACESSIBILIDADE — botão flutuante fixo (canto inferior
   esquerdo) que abre um painel com A-/A/A+ (tamanho de texto) e
   alternância de tema claro/escuro. Ficou de fora do cabeçalho de
   propósito (o Luciano achou que ia disputar espaço e parecer
   controle de idioma/busca) e também não virou topbar (pra não
   ficar parecido com o site do Staecnon, que já usa esse padrão). */
.stieen-acessibilidade-widget { position: fixed; left: 20px; bottom: 20px; z-index: 500; }
.stieen-acessibilidade-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--stieen-vermelho);
  color: var(--stieen-branco);
  font-size: 20px;
  box-shadow: 0 6px 16px var(--stieen-sombra);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.stieen-acessibilidade-btn:hover { background: var(--stieen-vermelho-escuro); box-shadow: 0 8px 20px var(--stieen-sombra); }
.stieen-acessibilidade-painel {
  display: none;
  position: absolute;
  left: 0;
  bottom: 64px;
  width: 270px;
  background: var(--stieen-escuro);
  border-radius: 10px;
  box-shadow: 0 12px 30px var(--stieen-sombra);
  padding: 16px;
}
.stieen-acessibilidade-painel.is-aberto { display: block; }
.stieen-acessibilidade-linha { display: flex; align-items: center; justify-content: space-between; }
.stieen-acessibilidade-linha:not(:last-child) { margin-bottom: 14px; }
.stieen-acessibilidade-label { font-size: 14px; font-weight: 600; color: var(--stieen-claro); white-space: nowrap; }
.stieen-acessibilidade-fonte-btns { display: flex; gap: 6px; }
.stieen-acessibilidade-fonte-btns button {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--stieen-borda-escura);
  background: none;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  color: var(--stieen-claro);
}
.stieen-acessibilidade-fonte-btns button.is-ativo { background: var(--stieen-vermelho); color: var(--stieen-branco); border-color: var(--stieen-vermelho); }
.stieen-acessibilidade-fonte-btns button:disabled { opacity: .35; cursor: not-allowed; }
/* Switch base compartilhado — usado pelo toggle de tema escuro E
   pelo de reduzir movimento (mesmo visual, só o estado ".is-ativo"
   muda a cor/posição da bolinha). Nunca duplicar esse CSS pra cada
   controle novo do painel de acessibilidade. */
.stieen-acessibilidade-toggle {
  width: 48px;
  height: 26px;
  border-radius: 20px;
  border: none;
  background: var(--stieen-cinza-suave);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.stieen-acessibilidade-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--stieen-branco);
  transition: transform .2s ease;
}
.stieen-acessibilidade-toggle.is-ativo { background: var(--stieen-vermelho); }
.stieen-acessibilidade-toggle.is-ativo::before { transform: translateX(22px); }

[data-tema="escuro"] .stieen-acessibilidade-painel { background: var(--stieen-branco); }
[data-tema="escuro"] .stieen-acessibilidade-label,
[data-tema="escuro"] .stieen-acessibilidade-fonte-btns button { color: var(--stieen-escuro); }
[data-tema="escuro"] .stieen-acessibilidade-fonte-btns button { border-color: var(--stieen-cinza-borda); }

@media (max-width: 720px) {
  .stieen-acessibilidade-widget { left: 14px; bottom: 14px; }
  .stieen-acessibilidade-btn { width: 46px; height: 46px; font-size: 18px; }
}