/* ==========================================================================================
   FLX Digital · sistema de design do conector
   ==========================================================================================
   Usado por TODAS as telas: páginas públicas, página de conexão e painel interno.
   A moldura (cabeçalho, <main class="conteudo"> e rodapé) vem de src/layout.js, função pagina().

   Regras
   - Nada de fora: sem fonte, imagem ou folha de estilo de outro endereço (a CSP só aceita 'self').
   - Sem style="" e sem <style> no HTML (a CSP bloqueia): tudo é classe deste arquivo. O que for
     só de uma tela vai num arquivo próprio (static/conectar.css, static/admin.css), carregado
     DEPOIS deste e usando as variáveis de :root, nunca cores soltas.
   - Não usar o verde nem o logo do WhatsApp, nem marcas da Meta (regra da Meta para apps).
   - Contraste AA: texto sempre com as cores "-texto" sobre os fundos "-fundo" da mesma família.
   - Estado nunca só pela cor: um selo ou aviso sempre traz o texto do estado.
   - Para esconder e mostrar (estados da página de conexão), use o atributo hidden.

   Largura da página (classe no <body>, parâmetro classeCorpo de pagina())
     (nenhuma)         64rem: páginas públicas
     corpo--largo      78rem: painel interno (tabelas)
     corpo--estreito   40rem: um cartão central (conexão, login)
     corpo--centrado   centraliza o conteúdo na altura da janela (junto com corpo--estreito)

   ------------------------------------------------------------------------------------------
   COMPONENTES (copie o HTML do exemplo; modificadores entre parênteses)
   ------------------------------------------------------------------------------------------

   .topo: cabeçalho com a marca e a navegação (montado pelo layout.js)
     <header class="topo"><div class="topo__dentro">
       <a class="marca" href="/"><img class="marca__simbolo" src="/static/icone.svg" alt="" width="32" height="32">
         <span class="marca__nome">FLX Digital</span></a>
       <nav class="topo__nav" aria-label="Navegação principal">
         <a href="/" aria-current="page">Início</a> <a href="/privacidade">Privacidade</a>
       </nav>
     </div></header>
     Navegação própria (painel): <div class="topo__lado"> ... </div> no lugar do <nav>.

   .conteudo: coluna central da página (montada pelo layout.js)
     <main class="conteudo" id="conteudo"> ... </main>

   .cabeca: título de uma página interna
     <header class="cabeca">
       <p class="sobretitulo">Clientes</p>
       <h1>Barbearia Exemplo</h1>            (fora de um <h1>, use class="cabeca__titulo")
       <p class="cabeca__texto">Uma frase que explica a tela.</p>
       <p class="cabeca__meta"><span>Atualizado há 2 min</span> <a class="botao botao--pequeno" href="#">Ação</a></p>
     </header>

   .secao: bloco de uma página, com respiro em cima
     <section class="secao"><h2>Título</h2><p class="secao__texto">Introdução.</p> ... </section>

   .cartao (.cartao--plano sem sombra, .cartao--destaque com faixa azul, .cartao--link para um <a> inteiro clicável)
     <div class="cartao"><h3 class="cartao__titulo">Título</h3><p>Texto.</p></div>
     <a class="cartao cartao--link" href="/termos"><span class="cartao__titulo">Termos</span><span>Resumo.</span></a>

   .grade: cartões em colunas que se ajustam à largura (.grade--2 e .grade--3 fixam o número de colunas no computador)
     <div class="grade"><div class="cartao">...</div><div class="cartao">...</div></div>

   .icone: quadrado com um desenho SVG, para o topo de um cartão
     <span class="icone"><svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor"> ... </svg></span>

   .botao (.botao--primario, .botao--secundario, .botao--perigo, .botao--grande, .botao--pequeno, .botao--bloco)
     <a class="botao botao--primario" href="#">Continuar</a>
     <a class="botao botao--secundario" href="#">Voltar</a>                  (.botao sozinho tem a mesma aparência)
     <button class="botao botao--primario botao--grande" type="button">Conectar WhatsApp</button>
     <button class="botao botao--perigo" type="submit">Apagar dados</button>
     <button class="botao" type="button" disabled>Desabilitado</button>     (ou aria-disabled="true" num <a>)
     Botão com espera: <button class="botao botao--primario" disabled><span class="carregando"></span> Enviando</button>

   .acoes: linha de botões
     <div class="acoes"><button class="botao botao--primario">Salvar</button><a class="botao" href="#">Cancelar</a></div>

   Formulários: .formulario, .campo (.campo--erro), .campo__rotulo, .campo__entrada, .campo__ajuda, .campo__erro, .opcao
     <form class="formulario" method="post">
       <div class="campo">
         <label class="campo__rotulo" for="senha">Senha</label>
         <input class="campo__entrada" id="senha" name="senha" type="password" aria-describedby="senha-ajuda">
         <p class="campo__ajuda" id="senha-ajuda">Texto de ajuda.</p>
       </div>
       <div class="campo campo--erro">
         <label class="campo__rotulo" for="numero">Número</label>
         <input class="campo__entrada" id="numero" name="numero" aria-invalid="true" aria-describedby="numero-erro">
         <p class="campo__erro" id="numero-erro">Informe só dígitos, com DDI.</p>
       </div>
       <div class="campo"><label class="campo__rotulo" for="tipo">Tipo</label>
         <select class="campo__entrada" id="tipo" name="tipo"><option>Texto</option></select></div>
       <div class="campo"><label class="campo__rotulo" for="msg">Mensagem</label>
         <textarea class="campo__entrada" id="msg" name="msg" rows="4"></textarea></div>
       <label class="opcao"><input type="checkbox" name="ok"> <span>Li e confirmo.</span></label>
       <div class="acoes"><button class="botao botao--primario" type="submit">Enviar</button></div>
     </form>

   .tabela (.tabela--compacta): sempre dentro de .tabela-rolagem, que cuida da borda e da rolagem no celular
     <div class="tabela-rolagem"><table class="tabela">
       <thead><tr><th>Cliente</th><th>Situação</th><th class="num">Fila</th></tr></thead>
       <tbody><tr><th scope="row">Nome</th><td><span class="selo selo--ok">Conectado</span></td><td class="num">0</td></tr></tbody>
     </table></div>

   .selo: estado curto (.selo--ok, .selo--alerta, .selo--erro, .selo--neutro, .selo--info)
     <span class="selo selo--ok">Conectado</span> <span class="selo selo--alerta">Pendente</span>
     <span class="selo selo--erro">Falhou</span> <span class="selo selo--neutro">Desligado</span>

   .aviso: mensagem em destaque (.aviso--info, .aviso--sucesso, .aviso--alerta, .aviso--erro)
     <div class="aviso aviso--alerta" role="status"><strong class="aviso__titulo">Atenção</strong><p>Texto do aviso.</p></div>

   .passos: etapas numeradas; marque a etapa atual com aria-current="step" e as concluídas com data-estado="feito"
     <ol class="passos">
       <li data-estado="feito"><strong class="passos__titulo">Entrar com o Facebook</strong><p>Detalhe da etapa.</p></li>
       <li aria-current="step"><strong class="passos__titulo">Escolher a empresa</strong><p>Detalhe da etapa.</p></li>
     </ol>

   .dados: lista de rótulo e valor
     <dl class="dados"><div><dt>WABA</dt><dd><code class="codigo">100000000000001</code></dd></div></dl>

   .codigo: IDs e valores técnicos em monoespaçada (.codigo--bloco para várias linhas)
     <code class="codigo">200000000000001</code>   <pre class="codigo codigo--bloco">linha 1</pre>

   .vazio: estado vazio
     <div class="vazio"><strong class="vazio__titulo">Nenhuma mensagem ainda</strong><p>Elas aparecem aqui quando chegarem.</p></div>

   .abas: navegação do painel
     <nav class="abas" aria-label="Painel">
       <a class="abas__item" href="#" aria-current="page">Overview</a> <a class="abas__item" href="#">Clients</a>
       <span class="abas__fim"><a class="botao botao--pequeno" href="#">Sign out</a></span>
     </nav>

   .resumo: números grandes do painel
     <dl class="resumo">
       <div class="resumo__item"><dt class="resumo__rotulo">Clientes conectados</dt><dd class="resumo__valor">3</dd>
         <dd class="resumo__nota">de 5 cadastrados</dd></div>
     </dl>

   .idiomas: troca de idioma
     <nav class="idiomas" aria-label="Idioma"><a href="?lang=pt" aria-current="true">PT</a><a href="?lang=en">EN</a></nav>

   .carregando: indicador de espera (.carregando--grande)
     <span class="carregando" role="status" aria-label="Carregando"></span>

   .rodape: rodapé com os links legais (montado pelo layout.js)
     <footer class="rodape"><div class="rodape__dentro"> ... </div></footer>

   Texto longo (páginas públicas): .documento (sumário ao lado do texto), .sumario, .prosa (.prosa--versao
   quando o bloco começa num <h2>, como a versão em inglês), .versao (separa a versão em inglês)
     <div class="documento">
       <nav class="sumario" aria-label="Nesta página"><p class="sumario__titulo">Nesta página</p>
         <ol><li><a href="#dados">Quais dados tratamos</a></li></ol></nav>
       <article class="cartao prosa"><section id="dados"><h2>Quais dados tratamos</h2><p>Texto.</p></section></article>
     </div>

   .destaque: abertura da página inicial (no computador, o segundo filho fica ao lado do primeiro)
     <section class="destaque">
       <div class="destaque__principal"><p class="sobretitulo">FLX Digital</p><h1>Título</h1>
         <p class="destaque__texto">Frase de apoio.</p><div class="acoes"> ... </div>
         <p class="destaque__nota">Observação.</p></div>
       <ol class="fluxo"> ... </ol>
     </section>

   .fluxo: caminho em etapas ligadas por uma linha (.fluxo__destaque realça uma etapa)
     <ol class="fluxo" aria-label="Caminho de uma mensagem">
       <li><strong class="fluxo__titulo">Plataforma do WhatsApp Business</strong><span class="fluxo__texto">API oficial</span></li>
       <li class="fluxo__destaque"><strong class="fluxo__titulo">FLX Digital</strong><span class="fluxo__texto">entrega</span></li>
     </ol>

   Utilitários: .oculto-visual (só para leitor de tela), .texto-2 (texto secundário), .pendente (dado
   "(a informar)"), .nota (observação pequena), .centro (texto centralizado), .pilha (filhos em coluna,
   com espaço), .linha (filhos lado a lado, com espaço), .sem-margem.
   ========================================================================================== */

/* ---------- Variáveis ---------- */

:root {
  color-scheme: light;

  /* Cores de base */
  --tinta: #0F172A;            /* títulos e texto forte */
  --texto: #334155;            /* texto corrido */
  --texto-2: #5B6474;          /* texto secundário */
  --fundo: #F5F7FA;
  --superficie: #FFFFFF;
  --superficie-2: #F8FAFC;     /* cabeçalho de tabela, campo só leitura */
  --borda: #E3E8EF;
  --borda-media: #CBD3DE;      /* botão secundário, estado vazio */
  --borda-forte: #8792A2;      /* campos de formulário: 3:1 sobre o branco */

  /* Primária */
  --primaria: #1F4FD8;
  --primaria-hover: #1A43B8;
  --primaria-suave: #EEF3FE;
  --primaria-borda: #C9D8FB;
  --primaria-texto: #1B3A8F;
  --foco: #1F4FD8;

  /* Estados: cor cheia, texto sobre o fundo claro, fundo claro e borda */
  --sucesso: #0E8A4F;
  --sucesso-texto: #0A6B3D;
  --sucesso-fundo: #E7F5EE;
  --sucesso-borda: #BFE3CF;
  --alerta: #B45309;
  --alerta-texto: #8A4308;
  --alerta-fundo: #FEF4E6;
  --alerta-borda: #F5D9AE;
  --perigo: #C0362C;
  --perigo-hover: #A52D24;
  --perigo-texto: #9F2A21;
  --perigo-fundo: #FDECEA;
  --perigo-borda: #F3C4BF;
  --neutro-texto: #475467;
  --neutro-fundo: #EEF1F5;
  --neutro-borda: #DCE2EA;

  /* Tipografia: fontes do sistema, nada baixado de fora */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* Espaços */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;

  /* Formas */
  --raio-p: 0.5rem;
  --raio: 0.75rem;
  --raio-g: 1rem;
  --sombra-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --sombra-2: 0 12px 32px -12px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.05);

  /* Página */
  --largura: 64rem;
  --margem: clamp(1rem, 4vw, 2rem);
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] {
  display: none !important;
}

/* O cabeçalho fixo não pode cobrir o destino de uma âncora (#exclusao, #english) */
[id] {
  scroll-margin-top: 5.5rem;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--e3);
  color: var(--tinta);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.875rem, 1.35rem + 2.2vw, 2.75rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
}

h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.125rem;
}

h4 {
  font-size: 1rem;
}

p,
ul,
ol,
dl,
pre,
table {
  margin: 0 0 var(--e4);
}

ul,
ol {
  padding-left: 1.375rem;
}

li {
  margin-bottom: var(--e2);
}

li > ul,
li > ol {
  margin: var(--e2) 0 0;
}

li::marker {
  color: var(--texto-2);
}

strong {
  color: var(--tinta);
  font-weight: 600;
}

a {
  color: var(--primaria);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--primaria-hover);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: 4px;
}

img,
svg {
  max-width: 100%;
  vertical-align: middle;
}

hr {
  border: 0;
  border-top: 1px solid var(--borda);
  margin: var(--e6) 0;
}

::selection {
  background: #C9D8FB;
  color: var(--tinta);
}

/* ---------- Moldura: pular, topo, conteúdo, rodapé ---------- */

.pular {
  position: absolute;
  left: var(--e4);
  top: -6rem;
  z-index: 100;
  padding: var(--e3) var(--e4);
  border-radius: var(--raio-p);
  background: var(--tinta);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
}

.pular:focus {
  top: var(--e3);
  color: #FFFFFF;
}

.topo {
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.topo__dentro {
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--e3) var(--margem);
  min-height: 4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2) var(--e5);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--tinta);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
}

.marca:hover {
  color: var(--tinta);
}

.marca__simbolo {
  display: block;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
}

.marca__nome {
  white-space: nowrap;
}

.topo__nav,
.topo__lado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e1);
}

.topo__lado {
  gap: var(--e3);
}

.topo__nav a {
  padding: 0.5rem 0.75rem;
  border-radius: var(--raio-p);
  color: var(--texto-2);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.topo__nav a:hover {
  background: var(--fundo);
  color: var(--tinta);
}

.topo__nav a[aria-current="page"] {
  background: var(--primaria-suave);
  color: var(--primaria);
  font-weight: 600;
}

.conteudo {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--margem) var(--e7);
}

/* O foco chega aqui pelo link "pular para o conteúdo": não precisa de contorno */
.conteudo:focus {
  outline: none;
}

.corpo--largo {
  --largura: 78rem;
}

.corpo--estreito {
  --largura: 40rem;
}

.corpo--centrado .conteudo {
  display: grid;
  align-content: center;
}

.rodape {
  margin-top: var(--e7);
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  color: var(--texto-2);
  font-size: 0.9375rem;
}

.rodape__dentro {
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--e6) var(--margem);
  display: grid;
  gap: var(--e5);
}

.rodape__nota {
  max-width: 36rem;
  margin: var(--e3) 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.rodape__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
}

.rodape__links a {
  color: var(--tinta);
  font-weight: 500;
  text-decoration: none;
}

.rodape__links a:hover {
  color: var(--primaria);
  text-decoration: underline;
}

.rodape__direitos {
  margin: 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
  font-size: 0.8125rem;
}

/* ---------- Títulos de página e seções ---------- */

.sobretitulo {
  margin: 0 0 var(--e3);
  color: var(--primaria);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.cabeca {
  max-width: 46rem;
  margin: 0 0 var(--e6);
}

.cabeca__titulo {
  margin: 0 0 var(--e3);
  font-size: clamp(1.875rem, 1.35rem + 2.2vw, 2.75rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.cabeca__texto {
  margin-bottom: var(--e4);
  color: var(--texto-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
}

.cabeca__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3) var(--e4);
  margin: 0;
  color: var(--texto-2);
  font-size: 0.9375rem;
}

.secao {
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.secao__texto {
  max-width: 44rem;
  margin-bottom: var(--e5);
  color: var(--texto-2);
  font-size: 1.0625rem;
}

/* A versão em inglês fica na mesma página, logo abaixo da versão em português */
.versao {
  margin-top: var(--e8);
  padding-top: var(--e7);
  border-top: 1px solid var(--borda-media);
}

.destaque {
  display: grid;
  gap: var(--e6);
  padding: clamp(1.5rem, 4.5vw, 3.5rem);
  border: 1px solid var(--borda);
  border-radius: 1.5rem;
  background:
    radial-gradient(48rem 22rem at 100% 0%, #DCE6FD 0%, rgba(220, 230, 253, 0) 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F7F9FE 100%);
  box-shadow: var(--sombra-1);
}

.destaque__principal {
  min-width: 0;
}

.destaque h1,
.destaque .cabeca__titulo {
  max-width: 44rem;
  margin-bottom: var(--e4);
}

.destaque__texto {
  max-width: 42rem;
  margin-bottom: var(--e5);
  color: var(--texto);
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);
  line-height: 1.6;
}

.destaque__nota {
  margin: var(--e5) 0 0;
  color: var(--texto-2);
  font-size: 0.9375rem;
}

/* Caminho em etapas ligadas por uma linha (por onde passa uma mensagem) */
.fluxo {
  display: grid;
  gap: var(--e5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fluxo > li {
  position: relative;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
}

.fluxo > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: calc(100% + 1px);
  width: 2px;
  height: var(--e5);
  background: var(--primaria-borda);
}

.fluxo > .fluxo__destaque {
  border-color: var(--primaria);
  background: var(--primaria-suave);
  box-shadow: 0 0 0 3px rgba(31, 79, 216, 0.12);
}

.fluxo__titulo {
  display: block;
  color: var(--tinta);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.fluxo__texto {
  display: block;
  margin-top: 0.125rem;
  color: var(--texto-2);
  font-size: 0.8125rem;
  line-height: 1.45;
}

@media (min-width: 62rem) {
  .destaque {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: var(--e7);
    align-items: center;
  }
}

/* ---------- Cartão, grade e ícone ---------- */

.cartao {
  display: block;
  padding: var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
}

.cartao > :last-child {
  margin-bottom: 0;
}

.cartao__titulo {
  display: block;
  margin: 0 0 var(--e2);
  color: var(--tinta);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.cartao--plano {
  box-shadow: none;
}

.cartao--destaque {
  border-top: 3px solid var(--primaria);
}

.cartao--link {
  color: var(--texto);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cartao--link .cartao__titulo {
  color: var(--primaria);
}

.cartao--link .cartao__titulo::after {
  content: " \2192";
}

.cartao--link:hover {
  border-color: var(--primaria-borda);
  box-shadow: var(--sombra-2);
  color: var(--texto);
  transform: translateY(-2px);
}

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--e4);
  margin: 0 0 var(--e5);
}

.grade > * {
  margin: 0;
}

.icone {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--e4);
  border: 1px solid var(--primaria-borda);
  border-radius: var(--raio);
  background: var(--primaria-suave);
  color: var(--primaria);
}

/* Com o número de colunas fixo, nenhum cartão sobra sozinho numa linha: ou todos lado a lado, ou um por linha */
.grade--2,
.grade--3 {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
  .grade--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 56rem) {
  .grade--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 2.75rem;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--borda-media);
  border-radius: 0.625rem;
  background: var(--superficie);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  color: var(--tinta);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.05s ease;
}

/* O botão secundário é a aparência padrão: a classe existe para o HTML dizer a intenção */
.botao:hover,
.botao--secundario:hover {
  border-color: var(--borda-forte);
  background: var(--superficie-2);
  color: var(--tinta);
}

.botao:active {
  box-shadow: none;
  transform: translateY(1px);
}

.botao--primario {
  border-color: var(--primaria);
  background: var(--primaria);
  box-shadow: 0 1px 2px rgba(31, 79, 216, 0.35);
  color: #FFFFFF;
}

.botao--primario:hover {
  border-color: var(--primaria-hover);
  background: var(--primaria-hover);
  color: #FFFFFF;
}

.botao--perigo {
  border-color: var(--perigo);
  background: var(--perigo);
  box-shadow: 0 1px 2px rgba(192, 54, 44, 0.35);
  color: #FFFFFF;
}

.botao--perigo:hover {
  border-color: var(--perigo-hover);
  background: var(--perigo-hover);
  color: #FFFFFF;
}

.botao--grande {
  min-height: 3.25rem;
  padding: 0.875rem 1.625rem;
  border-radius: var(--raio);
  font-size: 1.0625rem;
}

.botao--pequeno {
  min-height: 2.125rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--raio-p);
  font-size: 0.875rem;
}

.botao--bloco {
  display: flex;
  width: 100%;
}

.botao:disabled,
.botao[aria-disabled="true"] {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

a.botao[aria-disabled="true"] {
  pointer-events: none;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
}

/* ---------- Formulários ---------- */

.formulario {
  display: grid;
  gap: var(--e5);
}

.campo {
  display: grid;
  gap: 0.375rem;
}

.campo__rotulo {
  color: var(--tinta);
  font-size: 0.9375rem;
  font-weight: 600;
}

.campo__entrada {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--borda-forte);
  border-radius: 0.625rem;
  background: var(--superficie);
  color: var(--tinta);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo__entrada::placeholder {
  color: #7A8496;
  opacity: 1;
}

.campo__entrada:hover {
  border-color: var(--texto-2);
}

.campo__entrada:focus-visible {
  border-color: var(--primaria);
  border-radius: 0.625rem;
  outline: 3px solid var(--foco);
  outline-offset: 1px;
}

.campo__entrada:disabled,
.campo__entrada[readonly] {
  border-color: var(--borda-media);
  background: var(--superficie-2);
  color: var(--texto);
}

.campo__entrada:disabled {
  cursor: not-allowed;
}

textarea.campo__entrada {
  min-height: 7rem;
  resize: vertical;
}

select.campo__entrada {
  padding-right: 2.5rem;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235B6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
}

.campo__ajuda,
.campo__erro {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.campo__ajuda {
  color: var(--texto-2);
}

.campo__erro {
  color: var(--perigo-texto);
  font-weight: 500;
}

.campo--erro .campo__entrada {
  border-color: var(--perigo);
  box-shadow: 0 0 0 1px var(--perigo);
}

.opcao {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  color: var(--tinta);
  cursor: pointer;
}

.opcao input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.25rem 0 0;
  accent-color: var(--primaria);
}

/* ---------- Tabela ---------- */

.tabela-rolagem {
  margin: 0 0 var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  overflow-x: auto;
}

.tabela {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.tabela th,
.tabela td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--borda);
  text-align: left;
  vertical-align: middle;
}

/* Em texto longo as células têm vários parágrafos de tamanhos diferentes: alinhadas pelo topo */
.prosa .tabela th,
.prosa .tabela td {
  vertical-align: top;
}

.tabela thead th {
  background: var(--superficie-2);
  color: var(--texto-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabela tbody th {
  color: var(--tinta);
  font-weight: 600;
}

.tabela tbody tr:last-child > * {
  border-bottom: 0;
}

.tabela tbody tr:hover > * {
  background: #FAFBFD;
}

.tabela .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tabela--compacta th,
.tabela--compacta td {
  padding: 0.5rem 0.75rem;
}

/* ---------- Selo e aviso ---------- */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--neutro-borda);
  border-radius: 999px;
  background: var(--neutro-fundo);
  color: var(--neutro-texto);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.selo::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
}

/* O selo neutro é a aparência padrão: a classe existe para o HTML dizer a intenção */
.selo--neutro {
  border-color: var(--neutro-borda);
  background: var(--neutro-fundo);
  color: var(--neutro-texto);
}

.selo--ok {
  border-color: var(--sucesso-borda);
  background: var(--sucesso-fundo);
  color: var(--sucesso-texto);
}

.selo--alerta {
  border-color: var(--alerta-borda);
  background: var(--alerta-fundo);
  color: var(--alerta-texto);
}

.selo--erro {
  border-color: var(--perigo-borda);
  background: var(--perigo-fundo);
  color: var(--perigo-texto);
}

.selo--info {
  border-color: var(--primaria-borda);
  background: var(--primaria-suave);
  color: var(--primaria-texto);
}

.aviso {
  margin: 0 0 var(--e5);
  padding: 0.875rem 1rem;
  border: 1px solid var(--neutro-borda);
  border-left-width: 4px;
  border-radius: var(--raio);
  background: var(--neutro-fundo);
  color: var(--neutro-texto);
}

.aviso > :last-child {
  margin-bottom: 0;
}

.aviso strong,
.aviso a {
  color: inherit;
}

.aviso__titulo {
  display: block;
  margin-bottom: 0.125rem;
  font-weight: 700;
}

.aviso--info {
  border-color: var(--primaria-borda);
  border-left-color: var(--primaria);
  background: var(--primaria-suave);
  color: var(--primaria-texto);
}

.aviso--sucesso {
  border-color: var(--sucesso-borda);
  border-left-color: var(--sucesso);
  background: var(--sucesso-fundo);
  color: var(--sucesso-texto);
}

.aviso--alerta {
  border-color: var(--alerta-borda);
  border-left-color: var(--alerta);
  background: var(--alerta-fundo);
  color: var(--alerta-texto);
}

.aviso--erro {
  border-color: var(--perigo-borda);
  border-left-color: var(--perigo);
  background: var(--perigo-fundo);
  color: var(--perigo-texto);
}

/* ---------- Passos ---------- */

.passos {
  display: grid;
  gap: var(--e5);
  margin: 0 0 var(--e5);
  padding: 0;
  counter-reset: passo;
  list-style: none;
}

.passos > li {
  position: relative;
  min-height: 2.25rem;
  margin: 0;
  padding-left: 3.25rem;
  counter-increment: passo;
}

.passos > li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--primaria-borda);
  border-radius: 50%;
  background: var(--primaria-suave);
  color: var(--primaria);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
}

/* Linha que liga uma etapa à seguinte */
.passos > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.125rem - 1px);
  top: 2.625rem;
  bottom: -1.125rem;
  width: 2px;
  border-radius: 1px;
  background: var(--borda);
}

.passos > li[aria-current="step"]::before {
  border-color: var(--primaria);
  background: var(--primaria);
  color: #FFFFFF;
}

.passos > li[data-estado="feito"]::before {
  content: "\2713";
  border-color: var(--sucesso-borda);
  background: var(--sucesso-fundo);
  color: var(--sucesso-texto);
}

.passos__titulo {
  display: block;
  padding-top: 0.25rem;
  color: var(--tinta);
  font-weight: 600;
  line-height: 1.4;
}

.passos p {
  margin: 0.125rem 0 0;
  color: var(--texto-2);
}

/* ---------- Dados, código e estado vazio ---------- */

.dados {
  margin: 0 0 var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  overflow: hidden;
}

.dados > div {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
  gap: var(--e1) var(--e4);
  padding: 0.75rem 1rem;
}

.dados > div + div {
  border-top: 1px solid var(--borda);
}

.dados dt {
  color: var(--texto-2);
  font-size: 0.9375rem;
}

.dados dd {
  margin: 0;
  color: var(--tinta);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.codigo {
  padding: 0.0625rem 0.375rem;
  border: 1px solid var(--borda);
  border-radius: 0.375rem;
  background: var(--neutro-fundo);
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 0.875em;
  overflow-wrap: anywhere;
}

.codigo--bloco {
  display: block;
  margin: 0 0 var(--e4);
  padding: 0.75rem 0.875rem;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre-wrap;
}

.vazio {
  margin: 0 0 var(--e5);
  padding: var(--e7) var(--e5);
  border: 1px dashed var(--borda-media);
  border-radius: var(--raio-g);
  background: rgba(255, 255, 255, 0.6);
  color: var(--texto-2);
  text-align: center;
}

.vazio > :last-child {
  margin-bottom: 0;
}

.vazio__titulo {
  display: block;
  margin-bottom: var(--e1);
  color: var(--tinta);
  font-size: 1.0625rem;
  font-weight: 600;
}

/* ---------- Painel: abas, resumo, idiomas ---------- */

/* A linha de base é uma sombra interna: a borda da aba atual fica por cima dela sem precisar de margem
   negativa, que faria aparecer uma barra de rolagem vertical. */
.abas {
  display: flex;
  align-items: flex-end;
  gap: var(--e1);
  margin: 0 0 var(--e5);
  box-shadow: inset 0 -1px 0 var(--borda);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.abas__item {
  flex: none;
  padding: 0.625rem 0.875rem;
  border-bottom: 2px solid transparent;
  border-radius: var(--raio-p) var(--raio-p) 0 0;
  color: var(--texto-2);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.abas__item:hover {
  background: var(--neutro-fundo);
  color: var(--tinta);
}

.abas__item[aria-current="page"] {
  border-bottom-color: var(--primaria);
  color: var(--primaria);
}

/* A faixa das abas corta o que passa dela: o contorno do foco fica por dentro */
.abas__item:focus-visible {
  outline-offset: -3px;
}

.abas__fim {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--e2);
  margin-left: auto;
  padding: 0 0 var(--e2) var(--e4);
}

.resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--e4);
  margin: 0 0 var(--e5);
}

.resumo__item {
  padding: var(--e4) var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
}

.resumo__rotulo {
  color: var(--texto-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.resumo__valor {
  margin: var(--e1) 0 0;
  color: var(--tinta);
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.resumo__nota {
  margin: var(--e1) 0 0;
  color: var(--texto-2);
  font-size: 0.875rem;
}

.idiomas {
  display: inline-flex;
  padding: 0.1875rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--fundo);
}

.idiomas a {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  color: var(--texto-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-decoration: none;
}

.idiomas a:hover {
  color: var(--tinta);
}

.idiomas a[aria-current="true"] {
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  color: var(--primaria);
}

/* ---------- Indicador de espera ---------- */

.carregando {
  display: inline-block;
  flex: none;
  width: 1.125em;
  height: 1.125em;
  border: 2px solid rgba(31, 79, 216, 0.25);
  border-top-color: var(--primaria);
  border-radius: 50%;
  vertical-align: -0.2em;
  animation: girar 0.8s linear infinite;
}

/* Dentro de um botão colorido, o indicador acompanha a cor do texto */
.botao--primario .carregando,
.botao--perigo .carregando {
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: #FFFFFF;
}

.carregando--grande {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 3px;
}

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

/* ---------- Texto longo: documento, sumário e prosa ---------- */

.documento {
  display: grid;
  gap: var(--e5);
}

.sumario {
  padding: var(--e4) var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: var(--superficie);
  font-size: 0.9375rem;
}

.sumario__titulo {
  margin: 0 0 var(--e2);
  color: var(--texto-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sumario ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sumario li {
  margin: 0;
}

.sumario a {
  display: block;
  padding: 0.3125rem 0;
  color: var(--texto-2);
  line-height: 1.4;
  text-decoration: none;
}

.sumario a:hover {
  color: var(--primaria);
}

/* No computador o sumário tem rolagem própria, que cortaria um contorno de foco para fora */
.sumario a:focus-visible {
  outline-offset: -2px;
}

.prosa {
  padding: clamp(1.25rem, 4vw, 3rem);
}

.prosa section + section {
  margin-top: var(--e6);
  padding-top: var(--e6);
  border-top: 1px solid var(--borda);
}

.prosa h2,
.prosa--versao h3 {
  margin: 0 0 var(--e3);
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.prosa h3,
.prosa--versao h4 {
  margin: var(--e5) 0 var(--e2);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.prosa section > :last-child {
  margin-bottom: 0;
}

.prosa .tabela-rolagem,
.prosa .dados,
.prosa .aviso {
  margin-top: var(--e4);
}

.nota {
  color: var(--texto-2);
  font-size: 0.875rem;
}

@media (min-width: 36rem) and (max-width: 61.99rem) {
  .sumario ol {
    columns: 2;
    column-gap: var(--e6);
  }

  .sumario li {
    break-inside: avoid;
  }
}

@media (min-width: 62rem) {
  .documento {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--e7);
    align-items: start;
  }

  /* No computador o sumário acompanha a leitura, ao lado do texto */
  .sumario {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow-y: auto;
    scrollbar-color: var(--borda-media) transparent;
    scrollbar-width: thin;
  }

  .sumario ol {
    border-left: 1px solid var(--borda-media);
  }

  .sumario a {
    margin-left: -1px;
    padding: 0.3125rem 0 0.3125rem 0.875rem;
    border-left: 2px solid transparent;
  }

  .sumario a:hover {
    border-left-color: var(--primaria);
  }
}

/* ---------- Utilitários ---------- */

.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.texto-2 {
  color: var(--texto-2);
}

.pendente {
  color: var(--texto-2);
  font-style: italic;
  font-weight: 400;
}

.centro {
  text-align: center;
}

.pilha {
  display: grid;
  gap: var(--e4);
}

.pilha > * {
  margin-bottom: 0;
}

.linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
}

.sem-margem {
  margin: 0;
}

/* ---------- Telas ---------- */

@media (min-width: 48rem) {
  /* Cabeçalho sempre à vista no computador. No celular ele quebra em duas linhas e tomaria a tela. */
  .topo {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
  }

  .rodape__dentro {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .rodape__links {
    justify-content: flex-end;
  }

  .rodape__direitos {
    grid-column: 1 / -1;
  }
}

@media (max-width: 35.99rem) {
  .dados > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .destaque .acoes .botao {
    width: 100%;
  }

  .topo__nav {
    margin: 0 -0.5rem;
  }

  .topo__nav a {
    padding: 0.375rem 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .cartao--link:hover,
  .botao:active {
    transform: none;
  }

  /* O indicador de espera continua girando (é ele que diz "aguarde"), só mais devagar */
  .carregando {
    animation-duration: 2.4s;
  }
}

@media print {
  body {
    background: #FFFFFF;
  }

  .pular,
  .topo__nav,
  .topo__lado,
  .sumario,
  .rodape__links,
  .botao {
    display: none !important;
  }

  .topo {
    position: static;
  }

  .cartao,
  .destaque {
    border: 0;
    box-shadow: none;
  }

  .prosa {
    padding: 0;
  }

  .documento {
    display: block;
  }
}