/* PADRÕES DE TELA, o que o inventário provou que se repete.
   ===========================================================================
   Arquiteto, 06/09/2026. Nasceu de uma varredura das doze ferramentas, com o
   critério fechado antes de olhar: o que aparece em TRÊS páginas ou mais é
   componente, o resto fica na página. Nada aqui foi inventado; cada bloco
   abaixo traz a contagem que o justificou, e é essa contagem que o parecer
   `interno/docs/melhorias/parecer-componentes-2026-09-06.md` registra.

   O catálogo escrito, com anatomia, variantes, estados e o que NÃO fazer,
   mora em `interno/docs/design-system.md` §23. Mudou aqui, muda lá no mesmo
   commit, e vice-versa: é a regra da casa desde que o design system existiu
   só como documento.

   CARREGAR DEPOIS de `design-system.css` e de `nucleo/rodape.css`, e antes do
   `<style>` da página. Tudo é token: nenhuma cor literal, nenhuma medida fora
   da escala de 4. O portão `testes/catalogo-de-componentes.teste.js` reprova
   página que redeclare o que está aqui.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. AVISO, a mensagem que a tela dá em resposta a uma ação.
   10 das 12 ferramentas tinham a sua: `.msg` / `.msg-ok` / `.msg-error` no
   Amigo Oculto, `.alert` / `.alert.err` no Bingo, `.aviso` / `.aviso-ok` /
   `.aviso-erro` em seis, `.notice` e `.uso` e `.recusa` e `.evidencia` em
   três. Dez desenhos para quatro papéis. Aqui são quatro, e o papel é o nome.

   Anatomia: ícone opcional (20px, na cor do papel) + texto. Uma caixa, um
   parágrafo, sem título: aviso com título é estado vazio, e estado vazio tem
   componente próprio em `estados.css`.

   O papel NUNCA é dito só pela cor (RD-03): quem usa `.aviso-erro` põe o
   ícone, e quem usa `.aviso-ok` põe o ✓. Cor é o segundo sinal, não o único.

   O QUE NÃO FAZER: não usar aviso para texto que está sempre na tela. Aviso é
   resposta; o que está sempre lá é `.apoio` ou a nota da ferramenta. */
.aviso {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  border-radius: var(--r-m);
  border: 1px solid transparent;
  padding: var(--e-3) var(--e-4);
  margin: var(--ritmo-rotulo) 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto);
}
.aviso:empty { display: none; }
.aviso-ic { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.aviso-ok {
  background: color-mix(in srgb, var(--sucesso) 10%, transparent);
  border-color: color-mix(in srgb, var(--sucesso) 30%, transparent);
  color: var(--sucesso);
}
/* Coral: `--acento` e não `--acento-claro`, porque no tema claro o claro é cor
   de gráfico. O parecer do QA de 05/09 mediu 3,29:1 para o claro sobre a tinta
   e 4,18:1 para o `--acento`. */
.aviso-erro {
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  border-color: color-mix(in srgb, var(--acento) 35%, transparent);
}
.aviso-erro .aviso-ic { color: var(--acento); }
.aviso-atencao {
  background: color-mix(in srgb, var(--alerta) 8%, transparent);
  border-color: color-mix(in srgb, var(--alerta) 30%, transparent);
  color: var(--alerta-claro);
}
.aviso-info {
  background: color-mix(in srgb, var(--secundaria) 8%, transparent);
  border-color: color-mix(in srgb, var(--secundaria) 25%, transparent);
}
.aviso-info .aviso-ic { color: var(--secundaria); }
/* No telão o aviso lê a três metros: só o corpo muda, o desenho é o mesmo. */
.projecao .aviso, .aviso-telao { font-size: var(--telao-apoio); padding: var(--e-4) var(--e-5); }

/* ---------------------------------------------------------------------------
   2. SELO, o rótulo curto que qualifica o que está ao lado.
   8 das 12 tinham o seu: `.selo` na Descompressão, `.be-extra` na base, `.pill`
   no Amigo Oculto, `.nome-tag` e `.cselo` no Bingo, contagens no NR-1 e na
   Rotina. Caixa alta, 12px, peso 700, raio pequeno.

   Anatomia: ícone opcional de 12px + texto de uma a três palavras.
   Variantes pelo papel, iguais às do aviso. `.selo-pilula` para quando ele é
   uma etiqueta de pessoa, e não um estado.

   O QUE NÃO FAZER: selo não é botão. Se clica, é `.chip` (formulario.css). */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  border-radius: var(--r-p);
  padding: 2px var(--e-2);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto);
  background: var(--fundo-3);
  border: 1px solid transparent;
}
.selo svg { width: 12px; height: 12px; flex: none; }
.selo-ok      { background: color-mix(in srgb, var(--sucesso) 22%, var(--fundo-2)); border-color: color-mix(in srgb, var(--sucesso) 45%, transparent); }
.selo-atencao { background: color-mix(in srgb, var(--alerta) 22%, var(--fundo-2)); }
.selo-erro    { background: color-mix(in srgb, var(--acento) 18%, var(--fundo-2)); border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
.selo-marca   { background: color-mix(in srgb, var(--primaria) 18%, var(--fundo-2)); border-color: color-mix(in srgb, var(--primaria) 45%, transparent); }
/* Etiqueta de pessoa: pílula, caixa normal, corpo de leitura. É o `.nome-tag`
   do telão do Bingo e o `.pill` da revelação do Amigo Oculto. */
.selo-pilula {
  border-radius: var(--r-total);
  padding: var(--e-2) var(--e-4);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  background: var(--fundo-2);
  border-color: var(--borda);
}
.projecao .selo-pilula, .selo-telao { font-size: var(--telao-apoio); padding: var(--e-2) var(--e-5); }

/* ---------------------------------------------------------------------------
   3. APOIO, o texto de segunda ordem.
   9 das 12 tinham a mesma declaração escrita à mão: 14px, altura 1,5,
   `--texto-3`. Chamava-se `.apoio`, `.nota`, `.hint`, `.apoio-pe`, `.dim`,
   `.legenda`, `.qr-cap`, `.reveal-secret` e `.corrida-mais`.

   `.apoio` mantém a medida de leitura da §21: é texto que se lê. Quem precisa
   que a caixa acompanhe a largura de um CAMPO usa `.campo-ajuda`, que é a
   legenda do campo e não uma coluna de leitura (ver §E.1 de formulario.css).

   O QUE NÃO FAZER: não usar `.apoio` como parágrafo principal. Ele é
   `--texto-3`, que é cor de apoio; texto que a pessoa precisa ler é `--texto-2`
   ou `--texto`. */
.apoio { color: var(--texto-3); font-size: 14px; line-height: 1.5; margin: 0 0 var(--ritmo-paragrafo); }
.apoio-pe { color: var(--texto-3); font-size: 14px; line-height: 1.5; margin: var(--ritmo-rotulo) 0 0; }
.apoio-centro { text-align: center; margin-inline: auto; }
.projecao .apoio, .apoio-telao { font-size: var(--telao-apoio); color: var(--texto-2); }

/* ---------------------------------------------------------------------------
   4. CONTADOR, o número que a sala olha para saber se pode começar.
   6 das 12: quantas pessoas entraram (Bingo, Feedback, Roleta), quantas
   estão presentes (Descompressão), quantas responderam (NR-1, Retro). Sempre
   o mesmo desenho: número em monoespaçada, largura reservada para o número
   não empurrar o texto a cada pessoa que entra, e o texto ao lado.

   Anatomia: <b> com o número + <span> com o que se está contando.
   `min-width: 3ch` no número é o que impede o texto de saltar de 9 para 10. */
.contador { display: inline-flex; align-items: center; gap: var(--e-2); }
.contador b {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  text-align: right;
  color: var(--texto);
}
.contador span { color: var(--texto-2); }
.projecao .contador, .contador-telao { font-size: var(--telao-apoio); gap: var(--e-3); }

/* ---------------------------------------------------------------------------
   5. LINHA DE AÇÕES, os botões no pé de um bloco ou de uma tela.
   5 das 12: `.pe` na Descompressão, Duas Verdades e Feedback, `.acoes` na
   Rotina, `.result-foot` no Amigo Oculto, `.barra-controle` no Bingo.

   Anatomia: botões em linha, vão `--e-3`, quebrando para baixo no celular.
   `.linha-acoes-entre` afasta os extremos (voltar à esquerda, avançar à
   direita); `.linha-acoes-centro` centra, que é o do telão.

   O QUE NÃO FAZER: não pôr mais de uma ação primária na mesma linha. A regra
   4 do §14.1 continua valendo. */
.linha-acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; margin-top: var(--ritmo-paragrafo); }
.linha-acoes-entre { justify-content: space-between; }
.linha-acoes-centro { justify-content: center; }
.linha-acoes .btn { width: auto; }
/* No celular a ação principal ocupa a largura do bloco, e as outras a dividem. */
@media (max-width: 480px) { .linha-acoes > .btn-acao { flex: 1 0 100%; } }
.projecao .linha-acoes .btn, .linha-acoes-telao .btn { font-size: var(--telao-apoio); }

/* ---------------------------------------------------------------------------
   6. LINHA DE ADICIONAR, um campo e o botão que empurra o valor para uma lista.
   4 das 12: `.adicionar` no Amigo Oculto, `.addrow` no Bingo, `.linha-frase`
   em Duas Verdades, a entrada de item na Roleta.

   Anatomia: `.entrada` que estica + `.btn` que não estica. O botão guarda o
   alvo de toque do campo ao lado, e é por isso que ele não é `.btn-sm`. */
.linha-adicionar { display: flex; gap: var(--e-2); align-items: flex-start; }
.linha-adicionar > .entrada, .linha-adicionar > .seletor { flex: 1 1 auto; min-width: 0; }
.linha-adicionar > .btn { flex: none; width: auto; }
@media (max-width: 420px) { .linha-adicionar { flex-wrap: wrap; } .linha-adicionar > .btn { width: 100%; } }

/* ---------------------------------------------------------------------------
   7. LISTA DE ITENS, o que a pessoa acabou de montar e ainda pode desfazer.
   4 das 12: as exclusões do Amigo Oculto, os itens do Bingo, as opções da
   Roleta, os passos da Rotina.

   Anatomia: <ul> sem marcador, cada <li> com o conteúdo à esquerda e o
   remover à direita, caixa com borda de superfície e raio médio.
   A entrada de um item novo é animada porque a pessoa precisa VER onde ele
   caiu numa lista que já tem doze linhas. Quem pede menos movimento não recebe
   a animação: a regra global do design system já zera a duração. */
.lista-itens { list-style: none; display: flex; flex-direction: column; gap: var(--e-2); margin: var(--ritmo-rotulo) 0 0; padding: 0; }
.lista-itens > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4);
  font-size: 16px;
  line-height: 1.6;
  min-height: var(--toque-min);
  animation: rhc-entra .35s var(--mola);
}
.lista-itens > li > :first-child { min-width: 0; }
.lista-itens .item-nota { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--alerta); font-size: 14px; line-height: 1.5; }
.lista-itens:empty { display: none; }

/* A entrada de bloco, uma só para o produto inteiro. Era `pop` no Amigo
   Oculto, `entra` no Bingo, `rise` na revelação e `fadeIn` no Kudos: quatro
   nomes para a mesma curva. */
@keyframes rhc-entra { from { transform: scale(.94) translateY(6px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---------------------------------------------------------------------------
   8. CARTÃO DE QR, o código que a sala lê do projetor.
   3 das 12: Amigo Oculto, Bingo, Feedback de Reunião.

   O fundo é branco literal e NÃO é token, e isto é decisão, não descuido:
   Leitor de QR precisa de módulos escuros sobre fundo claro, e com `--fundo-2`
   o código sumiria no tema escuro. É a única cor literal do catálogo, e ela
   está aqui em UM lugar para não voltar a aparecer em três páginas. */
.qr-cartao { display: inline-block; background: #FFFFFF; border-radius: var(--r-m); padding: var(--e-3); }
.qr-cartao svg, .qr-cartao img { display: block; width: 100%; height: auto; }
.qr-cartao-legenda { font-size: 12px; line-height: 1.5; color: var(--texto-3); margin: var(--e-2) 0 0; text-align: center; }

/* ---------------------------------------------------------------------------
   9. RÉGUA DO ESPECTRO, o filete da marca acima de um título de telão.
   3 das 12: Duas Verdades, Feedback de Reunião, Roleta.
   O gradiente vai para a régua, onde perder contraste não custa leitura, e
   nunca para o texto que a sala precisa ler a três metros. */
.regua-espectro { height: 4px; border-radius: var(--r-total); background: var(--espectro); max-width: 320px; margin: 0 auto var(--e-4); }

/* ---------------------------------------------------------------------------
   10. TEXTO NO ESPECTRO, o nome que a tela celebra.
   3 das 12: o nome sorteado do Amigo Oculto, os títulos do telão do Bingo, o
   título do Feedback. Escrito à mão com cinco linhas de `background-clip` em
   cada uma.

   O QUE NÃO FAZER: nunca em texto que a pessoa precisa LER. O gradiente
   atravessa três matizes e não tem contraste garantido em nenhum ponto; ele
   serve a nome próprio grande e curto, que se reconhece pela forma. Texto de
   instrução, botão e aviso ficam de fora. */
.texto-espectro {
  background: var(--espectro);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------------------------------------------------------------------------
   11. PROJEÇÃO, a tela que vai ao projetor.
   7 das 12 declaram uma: Bingo, Descompressão, Duas Verdades, Feedback,
   Kudos, Nuvem, Roleta. Sempre a mesma estrutura, com sete larguras máximas
   diferentes e três paddings diferentes, que é o que fazia duas ferramentas
   projetadas lado a lado não parecerem o mesmo produto.

   Anatomia, de cima para baixo:
     .projecao            a tela inteira, altura da janela, coluna
       .regua-espectro    opcional
       .projecao-titulo   --telao-titulo, centrado
       .projecao-legenda  --telao-apoio, --texto-2, centrado
       .projecao-centro   o conteúdo do jogo, centrado no que sobra
       .projecao-pe       o rodapé de controle de quem conduz

   `100dvh` e não `100vh`: no celular a barra do navegador entra e sai, e com
   `vh` o pé da tela ficava embaixo dela. O Bingo já usava `dvh` e as outras
   seis não. O fallback em `vh` vem antes para quem não entende `dvh`.

   O QUE NÃO FAZER: não escrever largura máxima própria. `--projecao-largura`
   é o ajuste, e ele existe porque a rodada do Bingo precisa de 1500 onde o
   resto precisa de 1240. Trocar o token é uma linha; reescrever a caixa é o
   que gerou sete desenhos. */
.projecao {
  --projecao-largura: var(--container);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--e-6) clamp(var(--e-4), 4vw, var(--e-8));
}
.projecao-titulo { font-size: var(--telao-titulo); line-height: 1.15; text-align: center; margin: 0 0 var(--e-3); color: var(--texto); }
.projecao-legenda { font-size: var(--telao-apoio); line-height: 1.5; color: var(--texto-2); text-align: center; margin: 0 0 var(--e-6); max-width: none; }
.projecao-centro { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: var(--projecao-largura); margin-inline: auto; }
.projecao-pe { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; justify-content: center; margin-top: var(--e-5); color: var(--texto-2); }
.projecao-larga { --projecao-largura: 1500px; }
@media (max-width: 720px) { .projecao { padding: var(--e-4); } }

/* ---------------------------------------------------------------------------
   12. ESCALA, a fileira de opções que se aperta uma vez e pronto.
   5 das 12: as carinhas e as notas de eNPS do Check-in, os votos do Bingo, as
   opções do Feedback, as respostas do NR-1, os cartões da Retro. Todas com
   `aria-pressed` e todas com o mesmo desenho reescrito.

   Anatomia: um `role="group"` com botões de largura igual, alvo `--toque-jogo`,
   borda `--borda-forte`, e o pressionado com borda `--primaria` mais 16% de
   tinta. O estado é dito por `aria-pressed` E pela borda, nunca só pela cor.

   `.escala-2linhas` é a variante de onze opções (o eNPS 0 a 10), que no
   celular vira duas fileiras em vez de onze tiras de 32px.

   O QUE NÃO FAZER: escala não é chip. Chip é seleção múltipla numa nuvem de
   rótulos de tamanhos diferentes; escala é uma fileira de larguras iguais
   onde a POSIÇÃO tem significado. */
.escala { display: flex; gap: var(--e-2); }
.escala-opcao {
  flex: 1;
  appearance: none;
  border: 1px solid var(--borda-forte);
  background: var(--fundo);
  color: var(--texto);
  border-radius: var(--r-m);
  min-height: var(--toque-jogo);
  padding: var(--e-3) var(--e-2);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--t-rapido) var(--mola), border-color var(--t-rapido), background var(--t-rapido);
}
.escala-opcao:hover { border-color: var(--secundaria); }
/* A tinta do marcado é UM token, e não uma regra por variante. Medido no
   Bingo: cinco fileiras de opção (tema, avatar, grupo, nome, resposta) tinham
   cinco blocos quase idênticos, e a única diferença real entre eles era o
   matiz. Com o token, a variante custa uma linha e não pode divergir em
   borda, respiro ou movimento. */
.escala-opcao { --escala-tinta: var(--primaria); }
.escala-opcao[aria-pressed="true"] {
  border-color: var(--escala-tinta);
  background: color-mix(in srgb, var(--escala-tinta) 16%, transparent);
  transform: scale(1.04);
}
.escala-fria   { --escala-tinta: var(--secundaria); }
.escala-boa    { --escala-tinta: var(--sucesso); }
.escala-quente { --escala-tinta: var(--acento); }
/* Opção em COLUNA (cartão) e opção em LINHA: a fileira continua a mesma, o que
   muda é como o miolo se arruma dentro do botão. */
.escala-linha .escala-opcao { display: flex; align-items: center; gap: var(--e-3); text-align: left; }
.escala-coluna { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.escala-coluna .escala-opcao { flex: none; }
.escala-opcao[disabled] { color: var(--texto-4); border-color: var(--borda); cursor: not-allowed; transform: none; }
.escala-2linhas { flex-wrap: wrap; }
.escala-2linhas .escala-opcao { flex: 1 1 calc(16.66% - var(--e-2)); border-radius: var(--r-p); }