/* ============================================================
   FEEDBACK DE INTERAÇÃO — botões e troca de tela
   Carregado em todas as telas pelo header.html.

   O fluxo de cadastro tinha botões "secos": a pessoa tocava em
   Continuar e nada mudava até a resposta chegar. Em conexão ruim
   isso vira toque repetido — e requisição repetida.

   Nada aqui exige marcação nova: o spinner é um ::after que
   entra ao lado do rótulo. O texto do botão continua legível —
   "Continuar" com um spinner ao lado diz mais do que um botão
   vazio girando.
   ============================================================ */

:root {
  /* 1em: o spinner acompanha o tamanho da fonte do botao em que estiver. */
  --fk-spinner-tamanho: 1em;
}

/* ---- 1. Toque: resposta imediata, antes de qualquer rede ---- */

/* O :active sozinho é engolido pelo delay de 300ms de alguns
   navegadores móveis; a classe é posta no pointerdown. */
button,
.fk-card-cta,
[data-loader] {
  transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
}

.fk-tocado {
  transform: scale(0.97);
  filter: brightness(0.96);
}

/* ---- 2. Carregando ---- */

/*
 * O spinner fica AO LADO do rotulo, nunca por cima.
 *
 * A primeira versao escondia o texto (color: transparent) e centralizava o
 * spinner. So que o rotulo desses botoes vem de folhas carregadas depois
 * desta — Tailwind e o fluxo-documento —, entao a cor nem sempre cedia e o
 * spinner acabava desenhado em cima da palavra. Ao lado nao ha o que
 * esconder: some a disputa de especificidade junto com o problema.
 *
 * currentColor: o spinner herda a cor do texto do botao, entao funciona no
 * botao vermelho e no botao vazado sem override nenhum.
 */
.fk-carregando {
  pointer-events: none;
  cursor: progress;
}

.fk-carregando::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  /* Nos botoes flex o ::after vira item da linha e senta ao lado do texto;
     o flex-basis fixo impede que ele seja espremido. */
  flex: 0 0 auto;
  width: var(--fk-spinner-tamanho);
  height: var(--fk-spinner-tamanho);
  margin-left: 8px;
  border-radius: 50%;
  /* Duas bordas coloridas e duas transparentes formam o arco. Evita o
     color-mix(), que nao existe em navegador antigo e deixaria o spinner
     invisivel justamente no aparelho mais fraco. */
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  animation: fkGirando 0.7s linear infinite;
}

@keyframes fkGirando {
  to { transform: rotate(360deg); }
}

/* ---- 3. Troca de tela ---- */

/* A seção que entra aparece com um deslize curto, para a pessoa
   perceber que mudou de etapa em vez de a tela "piscar" outra. */
.fk-entrando {
  animation: fkEntrada 0.22s ease-out;
}

@keyframes fkEntrada {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- 4. Quem pediu menos movimento não recebe nada disso ---- */

@media (prefers-reduced-motion: reduce) {
  .fk-tocado {
    transform: none;
  }
  .fk-entrando {
    animation: none;
  }
  .fk-carregando::after {
    animation-duration: 1.6s;
  }
}