body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-base);
  font-size: var(--texto-tamanho-corpo);
  font-weight: var(--texto-peso-normal);
  line-height: var(--texto-altura-linha);
}

/* A PAGINA GANHOU SUPERFICIE em 2026-09-08 (interface-mais-viva). Ate aqui o formulario da
   portaria FLUTUAVA NO BRANCO: numa tela de 1280 era uma coluna estreita perdida no vazio, sem
   nada dizendo onde a tarefa comeca e termina.

   O fundo tingido entra por `:has()`, e nao no `body` direto: assim ele alcanca so as telas que
   usam `.pagina` — a portaria inteira — e nao o admin, que tem casca propria e fundo do
   AdminLTE. Uma regra no `body` teria vazado para la.

   O par e o mesmo que o site ja usa: nevoa atras, branco no cartao. Separam-se em 1,08:1, que e
   pouco de proposito — e superficie, e nao aviso. O texto continua medido contra o branco. */
body:has(> .pagina) { background: var(--cor-superficie); }

.pagina {
  max-width: var(--largura-conteudo);
  margin: var(--espaco-5) auto;
  padding: var(--espaco-5) var(--espaco-4);
  border: var(--borda-espessura) solid var(--cor-borda-suave);
  border-radius: var(--raio-2);
  background: var(--cor-fundo);
}

h1 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-tamanho-titulo);
  font-weight: var(--texto-peso-forte);
}

.apoio-da-pagina { margin: var(--espaco-2) 0 var(--espaco-5); }

/* O topo: a faixa que diz onde a pessoa esta. Nas tres areas e a mesma faixa; muda o que ela
   escreve — o nome da area, e na portaria o ponto e a operadora do turno aberto. */
.topo {
  background: var(--cor-topo-fundo);
  color: var(--cor-topo-texto);
}

.topo-conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-4);
  max-width: var(--largura-conteudo);
  min-height: var(--toque-minimo);
  margin: 0 auto;
  padding: var(--espaco-2) var(--espaco-3);
  box-sizing: border-box;
}

.pagina--larga + .topo .topo-conteudo,
.topo--largo .topo-conteudo { max-width: var(--largura-larga); }

.topo-marca {
  color: inherit;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-tamanho-destaque);
  font-weight: var(--texto-peso-forte);
  text-decoration: none;
}

/* ICONE COM TEXTO no topo (telas-que-crescem, 2026-09-12). O contexto do turno e o atalho do
   turno eram duas frases soltas na mesma faixa escura, a segunda distinguivel da primeira so
   pelo sublinhado. O icone e o que separa "onde eu estou" de "o que eu posso fazer" antes da
   leitura. Reusa `.icone`, que ja carrega tamanho, `fill: none` e `currentColor`. */
.topo-contexto {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  font-size: var(--texto-tamanho-apoio);
}

.topo-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  align-items: center;
  margin-left: auto;
}

/* O ATALHO DO TURNO E ALVO DE DEDO, e ate aqui nao era: `min-height: auto` com --espaco-2 de
   respiro dava cerca de 40 px numa area cujo piso e --toque-minimo. Continua sendo um link, e
   nao um botao — o que muda e a area que o dedo alcanca.

   O sublinhado passa para o `<span>` do texto: sublinhar o link inteiro riscaria o icone. */
.topo-nav a,
.topo-nav button {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: var(--toque-minimo);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--texto-tamanho-apoio);
  text-decoration: none;
  cursor: pointer;
}

.topo-nav a span,
.topo-nav button span { text-decoration: underline; }

.topo a:focus-visible,
.topo button:focus-visible {
  outline: var(--foco-espessura) solid var(--cor-topo-foco);
  outline-offset: var(--foco-afastamento);
}

/* O botao fica fora da regiao trocada e nao se move entre acionamentos: dentro dela, cada
   acionamento destruiria o elemento focado e jogaria o foco para o body. */
.acao {
  display: block;
  width: 100%;
  min-height: var(--toque-minimo);
  padding: 0 var(--espaco-4);
  border: 0;
  border-radius: var(--raio-2);
  background: var(--cor-acao-fundo);
  color: var(--cor-acao-texto);
  font-family: var(--fonte-base);
  font-size: var(--texto-tamanho-destaque);
  font-weight: var(--texto-peso-forte);
  cursor: pointer;

  /* RESPOSTA AO TOQUE (interface-mais-viva, 2026-09-08). `--movimento-curto` porque isto nao e
     animacao, e CONFIRMACAO: acima de ~150 ms deixa de parecer resposta e passa a parecer
     atraso, e na portaria atraso e segundo por pessoa no pico.
     Nunca anima `min-height` nem `padding`: mexer no tamanho de um alvo de toque enquanto o
     dedo esta descendo e como o alvo escapa embaixo dele. */
  transition:
    background-color var(--movimento-curto) var(--movimento-curva),
    transform var(--movimento-curto) var(--movimento-curva);
}

/* O botao AFUNDA um triz ao ser apertado. E o unico sinal que a operadora tem de que o toque
   pegou, antes de a proxima tela chegar — e num aparelho lento essa espera existe. */
.acao:active { transform: translateY(1%); }

/* O REALCE DO PONTEIRO ESCURECE, e nao troca de cor. Uma cor nova exigiria medir e registrar em
   design-system.md — e aqui nao ha o que medir: escurecer o verde SO AUMENTA o contraste com o
   texto branco por cima, entao o piso de 5,5:1 medido para `--cor-acao-fundo` fica preservado
   por construcao, e nao por sorte. `filter` tambem nao e valor literal: o portao segue limpo. */
.acao:hover { filter: brightness(.92); }

.acao--secundaria:hover,
.acao--discreta:hover { background: var(--cor-superficie-hover); }

/* O afastamento separa o anel do verde do botao, de modo que o azul e medido contra o
   branco da pagina (5,3:1) e nao contre o verde. */
.acao:focus-visible {
  outline: var(--foco-espessura) solid var(--cor-foco);
  outline-offset: var(--foco-afastamento);
}

/* Tres pesos de acao, e a diferenca entre eles e o que faz uma tela ter UM proximo passo.
   Uma tela em que "Credenciar", "Vincular cracha" e "Voltar" sao o mesmo bloco verde nao diz
   nada; o olho procura o verde cheio e encontra tres. Primaria: o verde cheio, uma por tela.
   Secundaria: contorno verde sobre branco (5,5:1 — o mesmo par da primaria, e contraste nao
   depende de quem e fundo; o 5,0 que estava escrito aqui era o numero velho, corrigido em
   2026-09-13 junto com clientes.md), para o que tambem se faz aqui. Discreta:
   texto sublinhado, para voltar e sair. */
/* Um LINK com peso de acao. O <button> centraliza o rotulo sozinho; o <a> nao, e sem isto o
   texto cola no topo do alvo de 64 px.
   A paginacao usa link, e nao formulario GET, por um motivo de comportamento: um formulario GET
   DESCARTA a consulta escrita no `action` e envia so os proprios campos — levaria embora a busca
   e os filtros a cada troca de pagina. */
a.acao {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.acao--secundaria {
  border: var(--acao-borda-espessura) solid var(--cor-acao-fundo);
  background: var(--cor-fundo);
  color: var(--cor-acao-fundo);
}

/* A discreta NAO redefine `min-height`: ela herda `--toque-minimo` de `.acao`, e isso e
   deliberado — conferido em 2026-09-12 por `telas-que-crescem`, que suspeitava do contrario.
   Ela e alvo de dedo tanto quanto as outras: errar o "voltar" com fila atras custa o mesmo
   tempo que errar o "credenciar". Quem for enxugar esta regra, nao acrescente altura menor
   aqui pensando que "e so um link". */
.acao--discreta {
  border: 0;
  background: none;
  color: var(--cor-texto);
  font-weight: var(--texto-peso-normal);
  text-decoration: underline;
}

/* Acoes lado a lado quando cabem, empilhadas quando nao. A proporcao decide, nao um ponto de
   quebra: 40% cabe duas por linha num notebook e uma por linha num celular. */
.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  margin-top: var(--espaco-4);
}

.acoes form { flex: 1 1 40%; margin: 0; }
.acoes form .acao { margin-top: 0; }

.indicador { display: none; margin: var(--espaco-4) 0 0; }
.acao.htmx-request + .indicador { display: block; }
#estado { margin-top: var(--espaco-4); }

/* A BARRA DE ACAO DA PORTARIA (telas-que-crescem, 2026-09-12). O passo de cada tela passa a
   morar SEMPRE NO MESMO LUGAR.

   O defeito era este: as acoes ficavam no fluxo, depois do conteudo, entao a altura em que o
   verde aparecia dependia de quantos avisos aquele atendimento tinha — um cartao de "ja entrou"
   ou de kit pendente empurrava o botao para baixo, e o olho procurava. Com fila atras, procurar
   o proximo passo e segundo por pessoa.

   `sticky` E NAO `100vh`, e a escolha importa no aparelho: com altura de viewport, a barra de
   endereco do navegador entra na conta e a acao fica parcialmente fora da tela em alguns
   aparelhos — exatamente o defeito que se queria evitar. Com `sticky`, conteudo curto deixa a
   barra no fluxo, no fim do conteudo, e conteudo longo a cola na borda inferior. Nos dois casos
   a posicao relativa a tela e previsivel.

   As margens laterais negativas fazem a barra SANGRAR ate a borda do cartao: e o filete
   atravessando a largura toda que a faz ler como barra, e nao como mais um bloco empilhado. O
   raio inferior acompanha o do cartao, porque `overflow: hidden` no ancestral mataria o
   `sticky`.

   O `gap` de --espaco-4 e a separacao minima entre alvos de toque vizinhos que o projeto ja
   adotou (24 px, acima do minimo de 16): e ela que protege do toque acidental, agora que os
   tres pesos de acao ficam juntos num canto da tela. */
.barra-de-acao {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  margin: var(--espaco-5) calc(var(--espaco-4) * -1) 0;
  padding: var(--espaco-4);
  border-top: var(--borda-espessura) solid var(--cor-borda-suave);
  border-radius: 0 0 var(--raio-2) var(--raio-2);
  background: var(--cor-fundo);
}

/* Sem isto sobra o respiro inferior do cartao EMBAIXO da barra colada, e ao rolar aparece uma
   tira branca sob ela. `:has()` para alcancar so a pagina que de fato tem barra. */
.pagina:has(> .barra-de-acao) { padding-bottom: 0; }

/* Dentro da barra o respiro e do `gap`, e nao das margens que cada acao carrega no fluxo. */
.barra-de-acao form { margin: 0; }
.barra-de-acao form .acao,
.barra-de-acao > .acao { margin-top: 0; }
.barra-de-acao .acoes { margin-top: 0; }

/* A forma do cartao e a mesma nos quatro estados: e o que permite reconhecer o resultado
   antes de ler, sem que a cor carregue sozinha a informacao. */
/* O CARTAO DE RESULTADO (interface-mais-viva, 2026-09-08). Ele ganhou respiro e fundo proprio:
   com a pagina agora tingida, um cartao sem fundo se dissolvia nela.

   NENHUMA ENTRADA ANIMADA, e isto e requisito e nao gosto — spec `participant-check-in`. Este e
   o cartao que diz "pode entrar", e quem le tem fila atras: ele precisa estar legivel no
   PRIMEIRO QUADRO em que existe. Uma transicao de 200 ms aqui e 200 ms por pessoa, e o alvo
   medido do projeto e 15 s de mediana.

   Nenhuma cor nova: o fundo e `--cor-fundo`, e o que separa os estados continua sendo o filete,
   o icone E A PALAVRA — cor sozinha nunca carrega informacao neste projeto. */
.cartao {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding: var(--espaco-4);
  border: var(--borda-espessura) solid var(--cor-borda);
  border-left: var(--filete-espessura) solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-fundo);
}

.cartao--sucesso { border-left-color: var(--cor-sucesso); }
.cartao--sucesso .icone { color: var(--cor-sucesso); }

/* O "pode entrar" e o unico desfecho que a operadora precisa reconhecer SEM LER, de relance,
   com a proxima pessoa ja se aproximando. O icone maior e o que faz isso — e o titulo continua
   ali, porque reconhecer de relance nao pode virar adivinhar. */
.cartao--sucesso .icone {
  width: calc(var(--icone-tamanho) * 1.5);
  height: calc(var(--icone-tamanho) * 1.5);
}

/* O cartao de quem NAO tem o que fazer aqui: evento que ainda nao abriu, que encerrou, ou
   que esgotou. Ate 2026-09-03 os quatro estados do site publico vestiam o filete verde do
   sucesso, e um evento encerrado anunciava-se com a mesma cor de um aberto — a forma dizia
   "pode entrar" enquanto a palavra dizia o contrario.

   O filete some para o cinza de borda, medido em 3,6:1 sobre o branco: e elemento nao
   textual, e a palavra dentro do cartao continua carregando a informacao. */
.cartao--neutro { border-left-color: var(--cor-borda-suave); }
.cartao--neutro .icone { color: var(--cor-borda-suave); }

/* O AVISO se pinta inteiro, e nao so no filete: e o unico estado em que a pessoa precisa PARAR.
   O par `--cor-aviso-texto` sobre `--cor-aviso-fundo` esta medido em 9,6:1. */
.cartao--aviso {
  border-left-color: var(--cor-aviso-texto);
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso-texto);
}

/* O codigo curto do erro, que a organizadora cruza com o log. Fonte de largura fixa e um
   respiro maior: ele existe para ser LIDO EM VOZ ALTA por telefone, e `0` e `O` juntos numa
   fonte proporcional ja custaram ligacao em muito sistema. */

.cartao h2 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-tamanho-destaque);
  font-weight: var(--texto-peso-forte);
}

.cartao p { margin: var(--espaco-2) 0 0; }
.cartao .apoio { font-size: var(--texto-tamanho-apoio); }

/* O NOME NO CARTAO DE DESFECHO (telas-que-crescem, 2026-09-12). Tamanho de titulo, e nao de
   corpo: sem kit a entregar, credenciar volta para a BUSCA com este cartao — ele e o desfecho
   no caso comum, e o nome vinha dentro de uma frase, do mesmo tamanho do resto.

   Nao usa `--texto-tamanho-desfecho` como a tela "pode entrar": esta tela continua sendo a
   BUSCA, e o campo da proxima pessoa precisa caber junto. Aberto em 375x812 com o nome nos
   40 px do desfecho, o campo saia da tela — e a tela existe para digitar o proximo nome. */
.cartao-nome {
  margin: var(--espaco-2) 0 0;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-tamanho-titulo);
  font-weight: var(--texto-peso-forte);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* A hora fica de apoio abaixo do nome: ela informa, mas nao e o que se le de longe. */
.cartao-nome + p { font-size: var(--texto-tamanho-apoio); }

/* O CODIGO CURTO saiu de dentro de `.cartao` em 2026-09-10: a TELA DE ERRO tambem o mostra, e
   la ele estava com a classe da ajuda de campo — o mesmo tamanho e a mesma cor de uma dica
   secundaria. Era o elemento MENOS visivel da tela, e e o unico que a operadora precisa ler em
   voz alta no telefone para quem cuida do sistema. */
.codigo {
  display: inline-block;
  padding: var(--espaco-1) var(--espaco-2);
  border: var(--borda-espessura) solid currentColor;
  border-radius: var(--raio-1);
  font-family: var(--fonte-codigo);
  font-size: var(--texto-tamanho-apoio);
  font-weight: var(--texto-peso-forte);
  letter-spacing: var(--espaco-1);
}

/* O CABECALHO DA TELA DE ERRO: icone e titulo na mesma linha. Sem o icone a tela de "algo deu
   errado" tinha exatamente a mesma forma de uma tela de sucesso — so o texto mudava, e quem
   olha de longe, com fila, nao le texto. */
.aviso-da-pagina {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-3);
}

.aviso-da-pagina h1 { margin: 0; }

/* Com codigo na tela houve FALHA INESPERADA (ver ErroModel): so ai o icone leva a cor de erro.
   Endereco que nao existe nao e falha do sistema, e pintar os dois igual ensinaria a operadora
   a ignorar a cor. */
.aviso-da-pagina .icone { color: var(--cor-borda-suave); }
.aviso-da-pagina--falha .icone { color: var(--cor-erro); }

.aviso-da-pagina .icone {
  width: calc(var(--icone-tamanho) * 1.5);
  height: calc(var(--icone-tamanho) * 1.5);
}

/* O cartao das telas de acesso vem antes do conteudo, e nao depois: e a modificacao que
   separa "algo aconteceu" do rotulo do campo. */
.cartao--topo { margin-bottom: var(--espaco-5); }

.cartao--topo .cartao__texto { min-width: 0; }

/* A PORTARIA E UMA TAREFA CURTA: numa fila, o primeiro campo e a acao nao podem perder metade
   da tela para a moldura. Este ajuste vale so para a busca e o cadastro na porta; paginas de
   leitura e administracao preservam o respiro normal. Os alvos continuam com 64 px. */
.pagina--porta {
  margin: var(--espaco-3) auto;
  padding: var(--espaco-4);
}

.pagina--porta .apoio-da-pagina { margin-bottom: var(--espaco-4); }

.pagina--porta .barra-de-acao {
  gap: var(--espaco-3);
  margin-top: var(--espaco-4);
  padding: var(--espaco-3) var(--espaco-4);
}

/* O cadastro so aparece depois de a busca dizer que nao encontrou ninguem. A superficie e a
   instrucao separam esse caso da proxima tentativa, sem tornar a acao secundaria invisivel. */
.atalho-cadastro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-3);
  margin-top: var(--espaco-4);
  padding: var(--espaco-3);
  border: var(--borda-espessura) solid var(--cor-borda-suave);
  border-radius: var(--raio-2);
  background: var(--cor-superficie);
}

.atalho-cadastro > div { flex: 1 1 50%; }
.atalho-cadastro h2 { margin: 0; font-size: var(--texto-tamanho-destaque); }
.atalho-cadastro p { margin: var(--espaco-1) 0 0; font-size: var(--texto-tamanho-apoio); }
.atalho-cadastro form { flex: 1 1 40%; margin: 0; }
.atalho-cadastro .acao { margin-top: 0; }

/* O unico CSS novo desta fatia e o de um <input type="text"> e de um <label> nativos,
   composto inteiramente dos tokens da fatia 1. Nao e componente novo: e a estilizacao do
   controle da plataforma. */
.campo-rotulo {
  display: block;
  margin-bottom: var(--espaco-2);
  font-weight: var(--texto-peso-forte);
}

/* Um formulario que vem logo depois do titulo, ou depois de uma tabela, respira antes de
   comecar: sem isto o primeiro rotulo cola no h1 e a tabela cola no formulario de criar. */
h1 + form,
.rolagem + form { margin-top: var(--espaco-5); }

.campo-aviso + form { margin-top: var(--espaco-4); }

/* Um rotulo que vem depois de outro campo abre um grupo novo, e ganha o respiro de um grupo.
   Sem isto, "CPF" cola na ajuda do nome e o formulario vira uma coluna de texto sem pausa. */
.campo + .campo-rotulo,
.campo-ajuda + .campo-rotulo,
.campo-aviso + .campo-rotulo,
.cartao + .campo-rotulo { margin-top: var(--espaco-4); }

/* A caixa de aceite e alvo de dedo como tudo aqui: do tamanho de um espaco-4, e nao do
   quadradinho padrao do navegador. O mesmo vale para a escolha de uma opcao entre varias. */
.campo-rotulo input[type="checkbox"],
.campo-rotulo input[type="radio"] {
  width: var(--espaco-4);
  height: var(--espaco-4);
  margin: 0 var(--espaco-2) 0 0;
  vertical-align: middle;
  accent-color: var(--cor-acao-fundo);
}

/* Os graficos do painel. O SVG vem pronto do servidor, sem cor nenhuma: e AQUI que ele ganha
   cor, dos mesmos tokens que o resto da identidade. As coordenadas internas dele sao um sistema
   de proporcao que o viewBox escala, e por isso nao passam por esta camada. */
.grafico {
  display: block;
  width: 100%;
  height: auto;
}

.grafico-bloco { margin-top: var(--espaco-5); }

.grafico-rotulo,
.grafico-valor { fill: var(--cor-texto); }

.grafico-valor { font-weight: var(--texto-peso-forte); }

.grafico-barra { fill: var(--cor-acao-fundo); }

/* Um grupo de escolhas — as variantes do kit, os modos de um posto — com a legenda no lugar do
   rotulo. Sem contorno: o <fieldset> do navegador traz uma borda que nao pertence a esta
   identidade, e o que agrupa aqui e o respiro, como no resto do formulario. */
.campo-grupo {
  margin: var(--espaco-4) 0 0;
  padding: 0;
  border: 0;
}

.campo-grupo .campo-rotulo + .campo-rotulo { margin-top: var(--espaco-2); }

/* O campo e alvo de toque tanto quanto o botao: errar o campo com o dedo custa o mesmo tempo
   que errar o botao. Dai os mesmos 64 px de --toque-minimo. */
.campo {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--toque-minimo);
  padding: 0 var(--espaco-3);
  border: var(--borda-espessura) solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-base);
  font-size: var(--texto-tamanho-corpo);
  transition:
    border-color var(--movimento-curto) var(--movimento-curva),
    box-shadow var(--movimento-curto) var(--movimento-curva);
}

/* O CAMPO EM FOCO ganha a borda da cor de foco alem do anel do navegador. Duas marcas e nao
   uma: o anel some em contraste alto de alguns sistemas, e quem digita codigo de posto com sol
   na tela precisa ver onde esta o cursor sem procurar. */
.campo:focus-visible {
  border-color: var(--cor-foco);
  outline: var(--foco-espessura) solid var(--cor-foco);
  outline-offset: var(--foco-afastamento);
}

/* Recusado pelo servidor: a BORDA acompanha a palavra, e nunca a substitui. O texto do erro
   continua sendo o que informa — a cor so faz o olho chegar nele primeiro. */
.campo[aria-invalid="true"] { border-color: var(--cor-erro); }

textarea.campo {
  min-height: calc(var(--toque-minimo) * 3);
  padding: var(--espaco-3);
  line-height: var(--texto-altura-linha);
  resize: vertical;
}

/* O campo nao muda de cor quando ha erro: nao existe cor de erro medida em clientes.md, e um
   sinal so de cor reprovaria em AA de qualquer jeito. O erro se anuncia pelo cartao acima,
   pelo aria-invalid e pelo foco que chega ao campo. */
.campo:focus-visible {
  outline: var(--foco-espessura) solid var(--cor-foco);
  outline-offset: var(--foco-afastamento);
}

.campo-ajuda {
  margin: var(--espaco-2) 0 0;
  font-size: var(--texto-tamanho-apoio);
}

.campo-aviso {
  margin: var(--espaco-4) 0 0;
  font-size: var(--texto-tamanho-apoio);
}

/* O TERMO que a pessoa aceita, nas quatro telas que o mostram: a inscricao pelo site, o
   cadastro e o consentimento na porta, e o totem.

   Ate 2026-09-03 ele usava `.campo-aviso`, que e visualmente IDENTICO a `.campo-ajuda` — mesmo
   tamanho, so a margem diferente. O texto que a pessoa esta autorizando tinha, na tela, o mesmo
   peso de "Com DDD.", e em corpo reduzido. Letra miuda em texto que se aceita e o padrao
   escuro classico; aqui era acidente, e acidente e pior, porque ninguem o defendeu.

   Duas decisoes: tamanho de CORPO, e nao de apoio — o termo nao e nota de rodape, e diminui-lo
   e o proprio defeito. E bloco com filete, a mesma linguagem do cartao: o olho reconhece "isto
   e uma coisa inteira" antes de ler.

   Sem cor nova: `--cor-texto` sobre `--cor-superficie` da 17,2:1, ja medido em
   docs/design-system.md como "Superficie secundaria". */
.termo {
  margin: var(--espaco-4) 0 0;
  padding: var(--espaco-3);
  border: var(--borda-espessura) solid var(--cor-borda-suave);
  border-left: var(--filete-espessura) solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-superficie);
  font-size: var(--texto-tamanho-corpo);
}

.termo p { margin: 0; }
.termo p + p { margin-top: var(--espaco-2); }

/* A linha de como REVOGAR fica dentro do bloco, e nao solta depois dele: ela e parte do que a
   caixa de aceite descreve, e o `aria-describedby` aponta para as duas. */
.termo-revogar { font-size: var(--texto-tamanho-apoio); }

.termo + .campo-rotulo { margin-top: var(--espaco-4); }

/* ==========================================================================
   A pessoa na confirmacao, e o "pode entrar" — portaria-refinada, 2026-09-04.

   Ate aqui a confirmacao empilhava tres cartoes verdes iguais: a pessoa, a autorizacao e o
   kit. O olho procurava o nome e achava tres filetes. Agora a pessoa e um bloco com o nome em
   tamanho de titulo, e o que o sistema sabe dela vem em linhas com icone; o cartao fica para
   o que e aviso. Sem cor nova: tudo vem dos tokens ja medidos.
   ========================================================================== */
.pessoa {
  margin: 0 0 var(--espaco-4);
  padding: var(--espaco-3) var(--espaco-4);
  border: var(--borda-espessura) solid var(--cor-borda-suave);
  border-left: var(--filete-espessura) solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-superficie);
}

.pessoa-rotulo { margin: 0; font-size: var(--texto-tamanho-apoio); }

/* O nome no tamanho do titulo da pagina: e ele que a operadora le em voz alta, e e ele que a
   pessoa confere de pe, do outro lado da mesa. */
.pessoa-nome {
  margin: var(--espaco-1) 0 0;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-tamanho-titulo);
  font-weight: var(--texto-peso-forte);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* As linhas de estado: icone e frase. O icone verde diz "resolvido", o de kit diz "falta
   entregar"; a frase diz o mesmo, para quem nao ve a cor. */
.estados {
  list-style: none;
  margin: var(--espaco-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.linha-estado { display: flex; align-items: flex-start; gap: var(--espaco-2); }
.linha-estado .icone { margin-top: var(--espaco-1); }
.linha-estado--ok .icone { color: var(--cor-sucesso); }
.linha-estado--falta .icone { color: var(--cor-aviso-texto); }

/* "Pode entrar": o desfecho para ler de longe. O tique no dobro do tamanho de icone, o titulo
   em verde, o nome no tamanho de titulo. Centralizado, porque nesta tela nao ha campo a
   alinhar — so um resultado a mostrar. */
.pronto {
  margin: 0 0 var(--espaco-5);
  padding: var(--espaco-5) var(--espaco-4);
  border: var(--borda-espessura) solid var(--cor-sucesso);
  border-left: var(--filete-espessura) solid var(--cor-sucesso);
  border-radius: var(--raio-2);
  text-align: center;
}

.pronto-icone {
  width: var(--espaco-6);
  height: var(--espaco-6);
  margin: 0 auto;
  color: var(--cor-sucesso);
}

.pronto-titulo {
  margin: var(--espaco-2) 0 0;
  color: var(--cor-sucesso);
  font-size: var(--texto-tamanho-destaque);
  font-weight: var(--texto-peso-forte);
}

/* O NOME E O MAIOR ELEMENTO DA TELA, e nao mais um titulo (telas-que-crescem, 2026-09-12).
   Ele nao esta ali para a operadora, que ja sabe quem atendeu: esta ali para a FILA ATRAS
   saber que andou, e para a pessoa conferir de pe do outro lado da mesa. No tamanho de titulo
   ele perdia essa funcao num notebook. Ver `--texto-tamanho-desfecho`, que cresce com a tela
   sem ponto de quebra.

   `overflow-wrap` continua sendo o que segura nome longo: com o teto do `clamp()`, ele quebra
   em duas linhas em vez de vazar. */
.pronto-nome {
  margin: var(--espaco-2) 0 0;
  font-size: var(--texto-tamanho-desfecho);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.pronto-quando { margin: var(--espaco-2) 0 0; font-size: var(--texto-tamanho-apoio); }

/* A separacao minima entre alvos de toque vizinhos, que a fatia 1 nomeou como divida e disse
   que nasceria na primeira tela com dois controles adjacentes: 24 px, acima do minimo de 16.
   Sem token novo — seria um segundo nome para um numero que a escala ordinal ja expressa. */
form .acao { margin-top: var(--espaco-4); }

.icone {
  flex: none;
  width: var(--icone-tamanho);
  height: var(--icone-tamanho);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Tabela. Nasceu com o relatorio do admin, e e a primeira tela do sistema que mostra uma lista
   de gente — a portaria nunca mostra, e a inscricao publica muito menos.

   Todo valor vem dos tokens: o unico jeito de a identidade da campanha valer nas tres areas e
   nenhuma delas ter valor visual proprio. */
.tabela {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--espaco-4);
}

.tabela th,
.tabela td {
  padding: var(--espaco-2) var(--espaco-3);
  text-align: left;
  border-bottom: var(--borda-espessura) solid var(--cor-borda);
}

.tabela th {
  font-size: var(--texto-tamanho-apoio);
  font-weight: var(--texto-peso-forte);
}

/* Hora e numero alinham pela coluna quando os algarismos tem a mesma largura — sem isto, uma
   lista de horarios fica serrilhada e mais dificil de percorrer com o olho. */
.tabela .numero { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Dentro de uma tabela a acao e por linha, e uma por linha: cabe no tamanho do texto, nao no
   tamanho do dedo. Quem opera a tabela esta sentado num notebook. */
.tabela .acao {
  width: auto;
  min-height: auto;
  margin: 0;
  padding: var(--espaco-2) var(--espaco-3);
  font-size: var(--texto-tamanho-apoio);
}

.tabela form { margin: 0; }

/* A pagina larga do admin: a unica que tem tabela, e a unica que a usa. */
.pagina--larga { max-width: var(--largura-larga); }

/* A PAGINA DO DESFECHO (telas-que-crescem, 2026-09-12). Nao reaproveita `.pagina--larga`: essa
   existe para caber uma TABELA, e carrega --largura-larga por esse motivo. Aqui a intencao e
   outra — "nao limite a largura de formulario" —, e misturar as duas faria a proxima pessoa
   mudar a largura da tabela do admin achando que mexia no desfecho da porta.

   O teto e --largura-total, a mesma da casca: sem teto nenhum, um monitor ultra-largo esticaria
   a linha do "pode entrar" por dois palmos de vidro. */
.pagina--desfecho { max-width: var(--largura-total); }

/* Tabela larga rola dentro do proprio contorno, e nao empurra a pagina de lado. A regra vive
   aqui, e nao num `style=` na pagina: valor visual em atributo e exatamente o que o teste de
   convencao existe para impedir. */
.rolagem { overflow-x: auto; }

/* O cracha: o QR herda cor e tamanho da pagina — o SVG nao traz nenhum dos dois. A largura e
   proporcao, e nao medida: na tela do celular ocupa a tela, no papel ocupa o papel. */
.cracha {
  margin: var(--espaco-5) 0;
  padding: var(--espaco-4);
  border: var(--borda-espessura) solid var(--cor-borda);
  border-radius: var(--raio-2);
  text-align: center;
}

.cracha-qr {
  width: 70%;
  margin: 0 auto;
}

.cracha-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.cracha-nome {
  margin: 0 0 var(--espaco-3);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-tamanho-titulo);
  font-weight: var(--texto-peso-forte);
}

.cracha-codigo {
  margin: var(--espaco-3) 0 0;
  font-size: var(--texto-tamanho-destaque);
  font-weight: var(--texto-peso-forte);
}

.cracha-evento {
  margin: var(--espaco-2) 0 0;
  font-size: var(--texto-tamanho-apoio);
}

/* AS DUAS VIAS DA ETIQUETA DO GUARDA-VOLUMES (2026-09-13). Ate aqui a operadora ESCREVIA o
   numero a mao, com fila na frente — e numero escrito a mao e onde nasce a troca de volume: um
   3 que vira 8, um 1 que vira 7, e dois volumes com a mesma leitura.

   Duas vias identicas, lado a lado quando cabem e empilhadas quando nao, pelo mesmo `flex-wrap`
   do resto da folha. O tracejado entre elas e onde se corta.

   O NUMERO E O UNICO PROTAGONISTA, e usa o token do desfecho: a via do volume e lida de longe,
   pendurada numa pilha de mochilas, e a da pessoa e conferida com pressa na saida. */
.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  margin: var(--espaco-4) 0;
}

.etiqueta {
  flex: 1 1 40%;
  min-width: min(100%, var(--largura-cartao-minimo));
  box-sizing: border-box;
  padding: var(--espaco-4);
  border: var(--borda-espessura) dashed var(--cor-borda);
  border-radius: var(--raio-2);
  text-align: center;
}

.etiqueta-via {
  margin: 0;
  font-size: var(--texto-tamanho-apoio);
  font-weight: var(--texto-peso-forte);
  text-transform: uppercase;
  letter-spacing: calc(var(--espaco-1) / 2);
}

.etiqueta-rotulo { margin: var(--espaco-3) 0 0; font-size: var(--texto-tamanho-apoio); }

/* Largura fixa e o mesmo motivo do codigo curto de erro: este numero e lido em voz alta e
   conferido a distancia, e `0` contra `O` em fonte proporcional ja custou volume trocado. */
.etiqueta-numero {
  margin: 0;
  font-family: var(--fonte-codigo);
  font-size: var(--texto-tamanho-desfecho);
  font-weight: var(--texto-peso-forte);
  line-height: 1.1;
}

.etiqueta-evento { margin: var(--espaco-2) 0 0; font-size: var(--texto-tamanho-apoio); }

/* No papel, so o cracha e as etiquetas: sem botoes, sem apoio, sem borda de tela. */
@media print {
  .acao, .apoio-da-pagina, .campo-ajuda, .naopapel { display: none; }
  .pagina { padding: 0; }
  .cracha { border: 0; }

  /* Quando ha etiqueta para imprimir, o papel leva SO ela: a tela em volta tem o nome da
     pessoa, a tabela dos volumes dela e o topo do turno, e nada disso pode sair pendurado num
     volume no balcao. */
  .pagina:has(.etiquetas) > *:not(.etiquetas) { display: none; }
  .etiquetas { margin: 0; }
  .etiqueta { border-style: solid; }
}

/* A descricao do evento no site: o que o admin escreveu, com as quebras de linha dele. */
.descricao { white-space: pre-line; margin: 0 0 var(--espaco-4); }

/* ==========================================================================
   A casca do admin — acrescentada em 2026-09-03.

   Ate aqui o admin tinha topo e nada mais: quinze telas soltas, cada uma
   terminando num botao "Voltar". A casca da lugar a navegacao e mantem o
   evento escolhido a vista.

   SEM MEDIA QUERY, e a ausencia nao e preguica: o teste de convencao reprova
   qualquer medida com unidade fora de tokens.css, e `@media` nao aceita
   `var()`. A quebra vem do flex, que e o mesmo idioma que `.acoes` ja usa —
   quando a lateral nao cabe ao lado dos 60% do conteudo, ela sobe para cima.
   ========================================================================== */
.casca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--espaco-5);
  max-width: var(--largura-total);
  margin: 0 auto;
  padding: var(--espaco-4) var(--espaco-3);
}

.casca-lateral {
  flex: 1 1 var(--largura-barra-lateral);
  background: var(--cor-superficie);
  border: var(--borda-espessura) solid var(--cor-borda-suave);
  border-radius: var(--raio-2);
  padding: var(--espaco-3);
}

/* `flex: 999` faz o conteudo ficar com a sobra toda enquanto houver espaco, e
   `min-width` em porcentagem e o que o obriga a quebrar em tela estreita. */
.casca-conteudo { flex: 999 1 60%; min-width: 60%; }

.casca-conteudo > .pagina { padding: 0; max-width: none; }

/* A navegacao lateral. Alvo de toque inteiro, como todo o resto. */
.lateral-nav { display: flex; flex-direction: column; gap: var(--espaco-1); }
.lateral-nav-titulo {
  margin: var(--espaco-3) 0 var(--espaco-1);
  font-size: var(--texto-tamanho-apoio);
  font-weight: var(--texto-peso-forte);
}
.lateral-nav-titulo:first-child { margin-top: 0; }

.lateral-nav a {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: var(--toque-minimo);
  padding: 0 var(--espaco-2);
  border-radius: var(--raio-1);
  color: var(--cor-texto);
  text-decoration: none;
}

.lateral-nav a:hover { background: var(--cor-superficie-hover); }

/* O item ativo se marca por `aria-current="page"`, entao a mesma coisa que o
   leitor de tela anuncia e a que o olho ve. Nao ha classe "ativo" a esquecer. */
.lateral-nav a[aria-current="page"] {
  background: var(--cor-acao-fundo);
  color: var(--cor-acao-texto);
  font-weight: var(--texto-peso-forte);
}

.lateral-nav a[aria-current="page"] .icone { stroke: var(--cor-acao-texto); }

/* ==========================================================================
   Barra de ferramentas de listagem, paginacao e abas
   ========================================================================== */

/* Busca e filtros numa linha so, acima da tabela. Em tela estreita eles
   empilham sozinhos. */
.ferramentas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espaco-3);
  margin: var(--espaco-4) 0;
}

.ferramentas > * { flex: 1 1 30%; margin: 0; }
.ferramentas .campo { margin: 0; }
.ferramentas .acao { margin-top: 0; }

/* A contagem do que a lista esta mostrando. Ate 2026-09-03 a lista de
   inscritos cortava em 100 e NAO dizia — quem procurava alguem que ficou de
   fora concluia que a pessoa nao existia. */
.ferramentas-resumo {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--texto-tamanho-apoio);
}

.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  margin: var(--espaco-4) 0;
}

.paginacao-posicao { margin: 0; font-size: var(--texto-tamanho-apoio); }

/* O primeiro botao vai para a DIREITA, e a posicao dele diante do texto e a informacao: o
   texto diz onde se esta, o botao diz para onde se vai.

   A regra era `.paginacao form`, e parou de casar quando a paginacao virou link em vez de
   formulario GET — um formulario GET DESCARTA a consulta escrita no `action` e levaria embora a
   busca e os filtros a cada troca de pagina. Trocado o mecanismo, a regra continuou apontando
   para um seletor que nao existe mais ali, e o botao ficou colado no texto com 684 px de vao a
   direita. So se ve olhando. */
.paginacao form,
.paginacao > .acao:first-of-type { margin-left: auto; }

.paginacao .acao { margin-top: 0; width: auto; }

.abas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1);
  margin-bottom: var(--espaco-4);
  border-bottom: var(--borda-espessura) solid var(--cor-borda-suave);
}

.abas a {
  min-height: var(--toque-minimo);
  display: flex;
  align-items: center;
  padding: 0 var(--espaco-3);
  color: var(--cor-texto);
  text-decoration: none;
}

.abas a:hover { background: var(--cor-superficie-hover); }

/* A aba ativa leva filete, e nao so cor: cor sozinha nao carrega informacao. */
.abas a[aria-current="page"] {
  font-weight: var(--texto-peso-forte);
  box-shadow: inset 0 calc(var(--filete-espessura) * -1) 0 0 var(--cor-acao-fundo);
}

/* ==========================================================================
   Badges de situacao

   Contorno, e nao fundo cheio: assim a cor e reforco e a PALAVRA continua
   sendo a informacao. Nenhum badge existe sem texto dentro.
   ========================================================================== */
.badge {
  display: inline-block;
  padding: var(--espaco-1) var(--espaco-2);
  border: var(--acao-borda-espessura) solid currentColor;
  border-radius: var(--raio-1);
  font-size: var(--texto-tamanho-apoio);
  font-weight: var(--texto-peso-forte);
  white-space: nowrap;
}

.badge--ok { color: var(--cor-sucesso); }
.badge--erro { color: var(--cor-erro); }
.badge--neutro { color: var(--cor-texto); }
.badge--aviso {
  color: var(--cor-aviso-texto);
  background: var(--cor-aviso-fundo);
  border-color: var(--cor-aviso-texto);
}

/* ==========================================================================
   Tabela: alternancia e passagem do mouse

   Ate 2026-09-03 nao havia UMA regra `:hover` nesta folha. Numa tabela de
   centenas de linhas, perder a linha que se estava lendo e o erro mais comum.
   ========================================================================== */
.tabela tbody tr:nth-child(even) { background: var(--cor-superficie); }
.tabela tbody tr:hover { background: var(--cor-superficie-hover); }
.tabela thead th { background: var(--cor-superficie); }

/* ==========================================================================
   O painel: grade de cartoes e numero de destaque
   ========================================================================== */
.painel-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--largura-cartao-minimo), 1fr));
  gap: var(--espaco-3);
  margin: var(--espaco-4) 0;
}

.painel-numero {
  border: var(--borda-espessura) solid var(--cor-borda-suave);
  border-radius: var(--raio-2);
  padding: var(--espaco-3);
}

.painel-numero dt { margin: 0; font-size: var(--texto-tamanho-apoio); }

.painel-numero dd {
  margin: var(--espaco-1) 0 0;
  font-size: var(--texto-tamanho-titulo);
  font-weight: var(--texto-peso-forte);
  font-variant-numeric: tabular-nums;
}

/* As quatro series, em ordem fixa. Ver docs/design-system.md: o conjunto foi
   validado por script, e cada marca leva rotulo e numero ao lado — a cor e
   reforco, e nunca a informacao. */
.grafico-barra--1 { fill: var(--cor-serie-1); }
.grafico-barra--2 { fill: var(--cor-serie-2); }
.grafico-barra--3 { fill: var(--cor-serie-3); }
.grafico-barra--4 { fill: var(--cor-serie-4); }

.legenda { display: flex; flex-wrap: wrap; gap: var(--espaco-3); margin: var(--espaco-2) 0 0; }
.legenda-item { display: flex; align-items: center; gap: var(--espaco-2); font-size: var(--texto-tamanho-apoio); }
.legenda-marca { width: var(--espaco-3); height: var(--espaco-3); border-radius: var(--raio-1); }

/* O logo herda a cor de quem o contem, como todo icone desta folha. */
.marca-logo { width: var(--icone-tamanho); height: var(--icone-tamanho); flex: none; }
.topo-marca { display: inline-flex; align-items: center; gap: var(--espaco-2); }


/* A LEITURA DO QR PELA CAMERA (2026-09-16). O quadro do video ocupa a largura do cartao e fica
   quadrado: o QR mostrado por uma pessoa e quadrado, e um quadro largo gastaria a altura do
   celular com o teto e o chao da sala. `object-fit: cover` corta as sobras sem deformar. */
.camera-quadro {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--raio-2);
  background: var(--cor-topo-fundo);
}

.camera-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-estado {
  margin: var(--espaco-2) 0 0;
  color: var(--cor-texto-apoio);
  font-size: var(--texto-tamanho-apoio);
}

/* O desfecho vem ACIMA da proxima leitura, e as acoes dele empilham quando nao cabem lado a
   lado — pelo flex-wrap, como o resto da folha. */
.camera-resultado:empty { display: none; }
.camera-resultado { margin-top: var(--espaco-3); }

.leitura-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  margin-top: var(--espaco-3);
}

.leitura-acoes > .acao { flex: 1 1 40%; margin-top: 0; }

/* A LISTA DOS HOMONIMOS na busca da porta (2026-09-16). Cada nome e um alvo de toque inteiro,
   com contorno e nao verde: o passo da tela continua sendo o Procurar da barra. O estado vem
   escrito, nunca so na cor. */
.escolhas { margin-bottom: var(--espaco-4); }
.escolhas h2 { margin-bottom: var(--espaco-1); }
.escolhas-lista {
  list-style: none;
  margin: var(--espaco-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--espaco-2);
}
.escolha {
  width: 100%;
  min-height: var(--toque-minimo);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-1) var(--espaco-3);
  padding: var(--espaco-2) var(--espaco-3);
  border: var(--borda-espessura) solid var(--cor-borda);
  border-radius: var(--raio-1);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.escolha:hover { background: var(--cor-superficie-hover); }
.escolha:focus-visible { outline: var(--borda-espessura) solid var(--cor-foco); outline-offset: var(--borda-espessura); }
.escolha-nome { font-weight: var(--texto-peso-forte); }
.escolha-estado {
  font-size: var(--texto-tamanho-apoio);
  border: var(--borda-espessura) solid currentColor;
  border-radius: var(--raio-1);
  padding: 0 var(--espaco-1);
}
.escolhas-cortadas { margin-top: var(--espaco-2); font-size: var(--texto-tamanho-apoio); }

/* O AVISO RAPIDO da leitura pela camera (2026-09-17). Flutua no topo da tela, por cima do video,
   e some sozinho: nao tem botao, e nao ocupa o lugar do conteudo. Verde com icone E a palavra
   "Credenciado" — a cor nunca e o unico sinal. A entrada usa `--movimento-curto`, que zera
   sozinho para quem pede menos movimento. */
.aviso-rapido {
  position: fixed;
  top: var(--espaco-3);
  left: var(--espaco-3);
  right: var(--espaco-3);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--raio-2);
  background: var(--cor-sucesso);
  color: var(--cor-acao-texto);
  opacity: 0;
  transform: translateY(-50%);
  transition:
    opacity var(--movimento-curto) var(--movimento-curva),
    transform var(--movimento-curto) var(--movimento-curva);
  pointer-events: none;
}
.aviso-rapido--visivel { opacity: 1; transform: none; }
.aviso-rapido .icone { flex: none; width: var(--espaco-5); height: var(--espaco-5); stroke-width: 3; }
.aviso-rapido-texto { display: flex; flex-direction: column; min-width: 0; }
.aviso-rapido-titulo { font-size: var(--texto-tamanho-apoio); }
.aviso-rapido-nome {
  font-size: var(--texto-tamanho-destaque);
  font-weight: var(--texto-peso-forte);
  overflow-wrap: anywhere;
}