/* Controle de tamanho de texto — folha PRÓPRIA, carregada em toda página.
 *
 * Estava dentro de resultados.css, que a home não carrega: os botões apareciam sem
 * estilo nenhum na página principal, medido em 2026-07-30. Componente que vive em
 * todas as páginas precisa da própria folha, não da folha de uma delas.
 *
 * O azul sólido também mora aqui, pelo mesmo motivo: é a cor de superfície com
 * texto branco em todo o projeto, e branco sobre o azul claro reprovaria (2,41
 * contra os 4,5 que a AA exige). #2E6E93 dá 5,57.
 */
:root{
  --azul-solido: #2E6E93;
}

/* Controle de tamanho de texto no topo. */
.fonte-ctl{
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  margin-right: .9rem;
  vertical-align: middle;
}
.fonte-ctl button{
  min-width: 1.9rem;
  padding: .2rem .35rem;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.35;
  color: #FFFFFF;
  background: var(--azul-solido);
  border: 0;
  border-radius: .22rem;
  cursor: pointer;
}
.fonte-ctl button:hover:not(:disabled){ filter: brightness(1.12); }
.fonte-ctl button:disabled{ opacity: .38; cursor: default; }
.fonte-ctl button:focus-visible{ outline: 2px solid var(--azul-solido); outline-offset: 2px; }
#fonte-nivel{
  min-width: 2.7rem;
  font-size: .68rem;
  text-align: center;
  color: var(--navy-3, #5C6982);
}
@media (max-width: 620px){
  /* Em tela estreita o número sai e ficam só os dois botões: o rótulo é conforto,
     os botões são a função. */
  #fonte-nivel{ display: none; }
  .fonte-ctl{ margin-right: .4rem; }
}

/* Versão grande do controle, para a página de Preferências. No topo ele ficava apertado
   contra os links e desalinhado — o dono apontou, e a correção certa não era centralizar
   um controle que não pertence ali: é movê-lo para onde configuração mora.
   (Estava DENTRO do @media acima por uma chave não fechada — o controle grande só
   ganhava estilo abaixo de 620px; corrigido em 2026-08-07.) */
.fonte-ctl--grande{ margin: .6rem 0 0; gap: .3rem; }
.fonte-ctl--grande button{ min-width: 3rem; padding: .5rem .7rem; font-size: 1rem; }
.fonte-ctl--grande #fonte-nivel{ min-width: 4rem; font-size: .85rem; }
