/* ── camada SPINNER ───────────────────────────────────────────────────────────
   Sinal de vida para espera longa: o anel que gira enquanto o CRM trabalha.

   Por que existe: até aqui o CRM avisava que estava ocupado só trocando o texto
   do botão ("Gerando...", "Salvando os bilhetes…"). Num clique rápido isso
   basta; no roteiro, que leva ~6 minutos, a pessoa fica olhando um parágrafo
   parado sem saber se a tela travou. O giro responde a essa pergunta.

   ONDE NÃO ENTRA: na busca instantânea. Lá o sinal continua sendo o traço que
   corre embaixo do campo (.campo-busca.buscando) — um spinner que nasce e morre
   a cada tecla faria a lista piscar, que é justamente o que se quis evitar.

   Origem do desenho: @spell/spinner (spell.sh/docs/spinner), reescrito de React
   para CSS+SVG da casa. Dois arcos com degradê em currentColor, ou seja: a cor
   vem do texto ao redor e o tema claro/escuro já funciona sem uma linha a mais.

   Desligar = tirar esta linha e a do ds-spinner.js no fim do console.html.
   Sem o JS, nenhum spinner é desenhado e todo o resto da tela segue igual.
   ────────────────────────────────────────────────────────────────────────── */

.ds-spinner {
  display: inline-block;
  width: 20px; height: 20px;
  flex: none;                 /* não deixa encolher dentro de flex */
  color: inherit;             /* o SVG inteiro é currentColor */
  vertical-align: -.28em;     /* alinha com a linha de base do texto vizinho */
}
.ds-spinner > svg {
  display: block; width: 100%; height: 100%;
  animation: ds-spinner-gira 1s linear infinite;
}

/* Tamanhos com o prefixo inteiro no nome. Classe curta como .sm ou .lg colide
   com o design system (já aconteceu com .vazio virando oval de 78px). */
.ds-spinner-sm { width: 12px; height: 12px; vertical-align: -.18em; }
.ds-spinner-lg { width: 32px; height: 32px; vertical-align: -.35em; }

.ds-spinner-devagar > svg { animation-duration: 2s; }
.ds-spinner-rapido  > svg { animation-duration: .6s; }

/* Bloco de espera: o giro à esquerda, a explicação à direita. O role="status"
   vai no HTML (ds-spinner.js) para o leitor de tela anunciar a frase — o SVG
   em si é aria-hidden, senão o rótulo seria lido duas vezes. */
.ds-espera {
  display: flex; align-items: center; gap: 12px;
  margin: 0;                  /* é <p>: sem isto herda margem de parágrafo e desalinha */
  color: var(--ds-texto-sec, var(--sub, #667085));
}
.ds-espera > span:last-child { min-width: 0; }

/* Quem pediu menos movimento não perde o sinal: em vez de girar, respira.
   Mesma cadência do .ds-skeleton do ds-components, para a tela falar uma língua só. */
@media (prefers-reduced-motion: reduce) {
  .ds-spinner > svg { animation: ds-spinner-respira 1.2s ease-in-out infinite; }
}
@keyframes ds-spinner-gira    { to { transform: rotate(360deg); } }
@keyframes ds-spinner-respira { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }