/* Vazio, erro e espera: a folha dos três estados.
   ---------------------------------------------------------------------------
   Companheira de `estados.js`. Está separada porque a marcação vem do JS e o
   estilo precisa existir mesmo em tela que ainda não chamou o componente.

   Tudo aqui é token. Nenhuma cor literal, nenhuma medida fora da escala de 4,
   é o que faz os três estados atravessarem o tema claro sem uma linha a mais.
   Antes disso, cada tela improvisava o seu: seis desenhos para três estados. */

.est {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e-3);
  padding: var(--e-7) var(--e-5);
  border-radius: var(--r-g);
  background: var(--fundo-2);
  border: 1px solid var(--borda);
}

/* O ícone é ilustração, não interface: pode ser maior e mais leve que os
   ícones de botão. A cor vem do estado e nunca é a única pista: o texto ao
   lado diz a mesma coisa, para projetor desbotado e para quem não vê cor. */
.est-ic { color: var(--texto-3); flex: none; }
.est-titulo {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 20px; font-weight: 700; line-height: 1.3;
  color: var(--texto); margin: 0;
}
/* O detalhe enche o componente (design-system.md §21, regra E2). Até
   10/09/2026 ele parava a 46ch no meio de uma caixa de 900px: o portão de
   espaço mediu linhas de 45% da largura oferecida no estado vazio de Feedback
   de Reunião, nos dois motores. Centrado, sem teto, o texto de uma ou duas
   linhas ocupa a caixa e a última linha fica no meio, que é o desenho. */
.est-detalhe {
  font-size: 16px; line-height: 1.6; color: var(--texto-2);
  margin: 0; max-width: none;
}

/* A ação é um botão de verdade: mesmo porte dos outros do produto (toque
   mínimo, raio do sistema, preenchimento pelos tokens semânticos que
   atravessam os dois temas). */
.est-acao {
  min-height: var(--toque-min);
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-m);
  border: 0;
  background: var(--btn-fundo);
  color: var(--btn-texto);
  font: inherit; font-size: 16px; font-weight: 700;
  cursor: pointer;
  transition: background var(--t-medio) var(--mola), transform var(--t-rapido) var(--mola);
}
.est-acao:hover  { background: var(--btn-fundo-hover); }
.est-acao:active { transform: scale(.98); }

/* --- Vazio: não é falha, é o começo. -----------------------------------
   Tracejado em vez de cheio, porque a borda tracejada é o sinal não-cromático
   de "ainda não tem nada" que o produto já usa no cartão "em breve". */
.est-vazio { border-style: dashed; border-color: var(--borda-forte); background: transparent; }
.est-vazio .est-ic { color: var(--texto-3); }

/* --- Erro: coral, que é um dos três papéis que a regra do coral permite. */
.est-erro { border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
.est-erro .est-ic { color: var(--acento); }

/* --- Espera: ciano, e o giro é do ícone, não do bloco. */
.est-espera .est-ic { color: var(--secundaria); animation: est-girar 1.4s linear infinite; }
@keyframes est-girar { to { transform: rotate(360deg); } }

/* Quem pediu menos movimento recebe menos movimento. A regra global do design
   system já zera a duração; aqui a animação para de vez, porque um relógio
   girando devagar é pior que um relógio parado. */
@media (prefers-reduced-motion: reduce) {
  .est-espera .est-ic { animation: none; }
}

/* No celular o bloco encosta nas bordas e o respiro vertical encolhe: a tela
   do participante é pequena e o estado não pode empurrar a ação para fora. */
@media (max-width: 480px) {
  .est { padding: var(--e-6) var(--e-4); border-radius: var(--r-m); }
  .est-detalhe { font-size: 16px; }
}