/* ===========================================
   SISTEMA DE BOTÕES (Design System)

   Hierarquia de modificadores:
   — Estilo:    --primary | --accent | --outline | --white | --danger | --text
   — Estrutura: --large | --pill | --close | --fab | --icon
   TODO botão de AÇÃO (rótulo e/ou ícone) herda .btn — é a fundação única
   (sem borda, flex-center, cursor, transição, :active). Ver "Taxonomia de
   elementos" no CLAUDE.md: card = superfície; botão = ação; chip = pílula.
   ======================================== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-8);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.btn:active {
  transform: scale(var(--press-scale));
}

/* — Modificadores de Estilo — */
.btn--primary {
  background: var(--p-green);
  color: var(--t-light);
}

.btn--accent {
  background: var(--a-gold);
  color: var(--p-green-dark);
}

.btn--outline {
  background: var(--bg-soft);
  color: var(--t-sub);
}

/* Spinner de carregamento dos botões (SMS / reenvio) — extraído do inline-style
   duplicado em auth.js. Base: glifo autorenew girando, peso 700 (o padrão 500
   fica fino demais ao lado do texto em negrito). --sm para o link de reenvio. */
.btn__spinner {
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--space-xs);
  font-size: 22px;
  animation: spin 1s linear infinite;
}

.btn__spinner--sm {
  margin-right: 4px;
  font-size: 16px;
}

.btn--text {
  background: none;
  padding: 8px 0;
  color: var(--p-green);
  text-align: left;
  line-height: 1;
  vertical-align: middle;
}

/* Ícone de seta (ex.: "← Voltar") como Material Symbol em vez de caractere
   de texto — um glifo de seta comum não se alinha verticalmente ao centro
   do texto ao lado (métrica de fonte diferente); dentro do .btn flex com
   align-items:center, o ícone fica perfeitamente centrado com o rótulo. */
.btn--text .icon {
  font-size: 1.1rem;
}

.btn--text:active {
  transform: none;
  opacity: 0.7;
}

/* FECHAR/DISPENSAR sobre superfície VERDE — receita ÚNICA do app: fill branco
   translúcido (--on-green-soft) + glifo/texto claros. Composta no HTML pelos
   fechos ESTÁTICOS (Cancelar do onboarding, X do modo indicação, Fechar do
   popup de indicados, X do avatar de perfil). Os fechos DINÂMICOS usam a MESMA
   receita em blocos próprios porque precisam vencer o fill do botão por baixo:
   .action-close-mode (!important, navigation.css) e
   .agenda-filters__icon-btn--active (historico.css); o Cancelar do diálogo
   idem, por especificidade (#dialog-global .btn--outline, dialogs.css).
   Mudou a receita? Mude AQUI + esses 3 espelhos. */
.btn--close-on-green {
  background: var(--on-green-soft);
  color: var(--t-light);
}
.btn--close-on-green .icon { color: var(--t-light); }

/* Botão "Fechar" / dispensar — caixa compacta para cabeçalhos de painéis */
.btn--close {
  padding: 7px 12px;
  font-size: var(--fs-4);
  gap: 5px;
  border-radius: var(--radius-md);
}

.btn--close .icon {
  font-size: 1.1rem;
}

/* — Modificadores de Estrutura — */
.btn--large {
  width: 100%;
  border-radius: var(--radius-pill);
  font-size: var(--fs-9);
}

.btn--pill {
  padding: 10px var(--space-md);
  border-radius: var(--radius-pill);
  font-size: var(--fs-6);
}

/* Botão SÓ-ÍCONE: quadrado, sem padding lateral. Categoria canônica das ações
   de ícone em cards (voltar, compartilhar, pin). Combine com uma cor/bg. */
.btn--icon {
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  flex-shrink: 0;
}