/* =========================================================
   Componente: Botao (variantes, estados, loading, tamanhos)
   Uso: <button class="btn-cf btn-primary-cf">...</button>
   ========================================================= */

.btn-cf {
  --btn-bg: var(--bg-muted);
  --btn-fg: var(--text-primary);
  --btn-border: var(--border-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-base);
  line-height: 1;
  padding: 0.65rem 1.15rem;
  min-height: 42px;
  border-radius: var(--radius-control);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out);
}
.btn-cf:hover { filter: brightness(0.97); }
.btn-cf:active { transform: translateY(1px); }
.btn-cf:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--pitch-200);
}
.btn-cf:disabled, .btn-cf.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* Variantes */

/* `--color-primary` e nao `--pitch-600` cru: a primaria TROCA de valor entre os
   temas (escura no claro, clara no escuro), e so o token semantico acompanha.
   E `--color-on-primary` no lugar de `#fff` pelo mesmo motivo — no tema escuro
   o botao primario e verde claro e o texto tem de ser escuro. */
.btn-primary-cf {
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-on-primary);
  --btn-border: transparent;
}
.btn-primary-cf:hover { --btn-bg: var(--color-primary-hover); filter: none; }

/* Um botao pode ser <a> (navega) ou <button> (age) — a classe e a mesma, e a
   tinta vem sempre de --btn-fg. Mas `a:hover` do design-system tem
   especificidade (0,1,1) e vencia o `.btn-cf` (0,1,0): no hover o texto do
   link-botao virava --color-primary-hover, que e EXATAMENTE a cor que o fundo
   do primario acabara de assumir. Texto invisivel, nos DOIS temas, em todo
   <a class="btn-cf"> do sistema. `a.btn-cf:hover` e (0,2,1) e ganha. */
a.btn-cf:hover, a.btn-cf:focus, a.btn-cf:active { color: var(--btn-fg); }

/* `.btn-gradient-cf` REMOVIDO nesta leva. Era um botao cuja unica razao de
   existir era o gradiente indigo->violeta; sem o gradiente ele virou uma copia
   exata do primario. Existia em um lugar so, a vitrine do style guide, e saiu
   de la junto. Botao de acao no sistema agora e um so. */

.btn-outline-cf {
  --btn-bg: transparent;
  --btn-fg: var(--color-primary);
  --btn-border: var(--color-primary);
}
.btn-ghost-cf {
  --btn-bg: transparent;
  --btn-fg: var(--text-secondary);
  --btn-border: transparent;
}
.btn-ghost-cf:hover { --btn-bg: var(--bg-surface-hover); --btn-fg: var(--text-primary); }

.btn-danger-cf {
  --btn-bg: var(--falta);
  --btn-fg: #fff;
  --btn-border: transparent;
}
.btn-success-cf {
  --btn-bg: var(--presente);
  --btn-fg: #fff;
  --btn-border: transparent;
}

/* Tamanhos */
.btn-sm-cf { padding: 0.4rem 0.8rem; font-size: var(--text-sm); }
.btn-lg-cf { padding: 0.85rem 1.5rem; font-size: var(--text-md); border-radius: var(--radius-md); }
.btn-block-cf { width: 100%; }
.btn-icon-cf { padding: 0.6rem; width: 42px; height: 42px; }

/* Estado loading */
.btn-cf.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn-cf.is-loading::after {
  content: '';
  position: absolute;
  width: 1.05em;
  height: 1.05em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--btn-fg);
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   ALVOS DE TOQUE NO CELULAR (bloco H) — a regra canonica do sistema.

   44px e o minimo recomendado para o dedo (WCAG 2.5.5 pede 44x44 CSS px). O
   que existia, medido no Chrome em iPhone 390x844 em 8 rotas:

     button.icon-btn      102 ocorrencias   32px   <- de longe o pior
     input.form-control    14                37px
     button.btn            10                41px
     button.btn-cf + a.btn-cf  16            28px
     button.cmdk-trigger    8                33px
     .page-link             5                30px
     links de card-cf__header  3             19px  <- o menor de todos
     botoes do FullCalendar    6             35px

   Sao COMPONENTES, nao telas: por isso a correcao mora em cada componente e
   nao em cada pagina. Consertar `.icon-btn` sozinho resolve 102 alvos.

   A media query e a MESMA do bloco C (`forms.css`): vale por APARELHO
   (`hover: none` + `pointer: coarse`), com a largura como rede de seguranca.
   Por aparelho e nao por largura porque o iPad em paisagem passa de 991px e
   continua sendo toque — e no desktop o alvo menor e uma vantagem de
   densidade, nao um defeito.

   `min-height` e nao `height`: botao com duas linhas de texto (acontece em
   traducao longa) tem de poder crescer.
   --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse), (max-width: 991.98px) {
  .btn-cf,
  .btn {
    min-height: 44px;
  }
  /* O `btn-sm-cf` media 28px: o padding menor e a fonte menor somavam menos que
     o dobro do minimo. A fonte continua menor (a hierarquia visual do botao
     secundario e proposital); so a caixa cresce. */
  .btn-sm-cf {
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .btn-icon-cf {
    width: 44px;
    height: 44px;
    padding: 0;
  }
}