/* Sofia Pro é a fonte da Véli. Os arquivos vêm do próprio site (veli.com.br), baixados com
   autorização do Jackson em 17/08/2026, e ficam servidos daqui: assim a tela não depende de
   internet para ter a cara certa, o que importa numa ferramenta que roda na rede local.
   `font-display: swap` mostra o texto na hora com a fonte de sistema e troca quando a Sofia
   carrega, em vez de deixar a tela em branco. */
@font-face {
  font-family: "Sofia Pro";
  src: url("/static/fontes/SofiaPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sofia Pro";
  src: url("/static/fontes/SofiaPro-Bold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* Identidade visual da Véli, aplicada a um formulário interno.
 *
 * As decisões abaixo saíram de MEDIÇÃO do site veli.com.br (estilos computados da página), não de
 * memória nem de gosto:
 *
 *   fundo da página .... #e6edf2   (cinza-azulado frio)
 *   botão .............. #f4ad50, texto branco, CAIXA ALTA, peso 600, cantos totalmente
 *                        arredondados (o site usa 80px, que a essa altura já é pílula)
 *   cartão ............. cantos de 24px e NENHUMA sombra
 *   títulos ............ peso 600, grandes
 *   fonte .............. Sofia Pro, pesos 400 e 600
 *
 * As cores da marca vieram do arquivo do logo, amostradas pixel a pixel: navy #001529,
 * azul #004883, âmbar #d78732. O âmbar dos botões do site (#f4ad50) é mais claro que o do logo, e
 * é o dos botões que vale aqui, porque é o que a equipe reconhece como "o botão da Véli".
 *
 * Sobre a fonte: a Sofia Pro é proprietária e não está embutida aqui. A pilha abaixo começa por
 * ela (caso um dia seja instalada na máquina) e cai para geométricas que existem no Windows —
 * Century Gothic é a mais próxima. Segoe UI, que estava aqui antes, é humanista e destoa bastante.
 */

:root {
  --azul-profundo: #001529;
  --azul-escuro: #000c17;
  --ciano: #004883;
  --azul-claro: #8ecae6;
  --azul-palido: #d0f0ff;
  --ambar: #f4ad50;
  --ambar-escuro: #9c6021;

  --fundo: #e6edf2;
  --superficie: #ffffff;
  --borda: #d3dee7;
  --borda-forte: #b0c2d0;

  --texto: #001529;
  --texto-suave: #4d6070;
  --texto-fraco: #7b8d9c;

  --verde: #1c7c54;
  --verde-fundo: #e6f4ee;
  --vermelho: #b3261e;
  --vermelho-fundo: #fdecea;
  --ambar-fundo: #fdf3e3;

  /* Cantos generosos e nenhuma sombra: é o que separa o visual da Véli de um painel genérico. */
  --raio: 16px;
  --raio-cartao: 24px;
  --sombra: none;

  --fonte: "Sofia Pro", "Century Gothic", "Questrial", "Avenir Next", "Avenir",
           "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte);
  background: var(--fundo);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ cabeçalho */

/* Barra CLARA, e não o azul de antes: a palavra "véli" do logo é navy quase preto (#001529) e
   desapareceria sobre azul escuro. Logo de marca se apresenta sobre fundo claro; a cor forte
   passou para a barra de progresso e para os botões. */
.topo {
  background: var(--superficie);
  color: var(--texto);
  padding: 14px 0;
  border-bottom: 1px solid var(--borda);
  position: relative;
  z-index: 5;
}

.topo-interno,
.conteudo {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 24px;
}

.topo-interno {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.marca img {
  display: block;
  height: 32px;
  width: auto;
}

.marca-divisor {
  width: 1px;
  height: 24px;
  background: var(--borda-forte);
}

.topo h1 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--texto);
}

.topo .passo {
  font-size: 13px;
  color: var(--texto-fraco);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ estrutura */

.conteudo { padding-top: 28px; padding-bottom: 120px; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 24px;
  margin-bottom: 20px;
}

.cartao > h2 {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--azul-profundo);
}

.sub {
  color: var(--texto-suave);
  margin: 0 0 20px;
  font-size: 14px;
}

/* Medida de leitura, não largura do contêiner.
 *
 * Antes esta linha tinha `max-width: 68ch`, que com a Sofia Pro resolvia para 617px e dava
 * OITENTA caracteres por linha. O confortável fica entre 45 e 75: acima disso o olho erra a linha
 * ao voltar para a esquerda, e o parágrafo parece bagunçado mesmo estando alinhado.
 *
 * `text-wrap: pretty` evita que a última linha fique com uma palavra sozinha, que é o que mais
 * faz um parágrafo parecer mal acabado. Onde o navegador não conhecer a propriedade, ele ignora
 * e nada quebra.
 */
.intro {
  margin: 0 0 24px;
  color: var(--texto-suave);
  font-size: 15px;
  line-height: 1.6;
  max-width: 56ch;
  text-align: justify;
  /* Justificar sem hifenização abre buracos entre as palavras, e em português, que tem palavras
     longas, fica pior ainda. Com `hyphens: auto` (a página declara lang="pt-BR", então o
     navegador sabe onde separar) as linhas fecham parelhas sem os vãos. */
  hyphens: auto;
  -webkit-hyphens: auto;
}
.intro strong { color: var(--texto); font-weight: 600; }

/* ------------------------------------------------------------------ status */

.faixa-status {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: 13px;
}

.pilula {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-suave);
}
.pilula::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--texto-fraco);
}
.pilula.ok { color: var(--verde); border-color: #bfe0d0; background: var(--verde-fundo); }
.pilula.ok::before { background: var(--verde); }
.pilula.ruim { color: var(--vermelho); border-color: #f2c6c2; background: var(--vermelho-fundo); }
.pilula.ruim::before { background: var(--vermelho); }
.pilula.alerta { color: var(--ambar-escuro); border-color: #eed9b4; background: var(--ambar-fundo); }
.pilula.alerta::before { background: var(--ambar); }

/* ------------------------------------------------------------------ upload */

/* Área de soltar arquivos. Sem gradiente e com tracejado fino: o tracejado grosso sobre degradê
   é o visual padrão de widget de upload, e destoa do resto, que é chapado. O que muda no hover é
   a cor da borda, não o fundo inteiro piscando. */
.area-arquivos {
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
  background: #fafcfe;
  padding: 44px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.area-arquivos:hover,
.area-arquivos.sobre {
  border-color: var(--ciano);
  border-style: solid;
  background: #f4f9fd;
}
.area-arquivos .icone { font-size: 26px; line-height: 1; opacity: .55; }
.area-arquivos .principal {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--texto);
  margin: 12px 0 3px;
}
.area-arquivos .secundario { color: var(--texto-fraco); font-size: 13px; }

.lista-arquivos { list-style: none; padding: 0; margin: 16px 0 0; }
.lista-arquivos li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: #fbfdff;
  margin-bottom: 8px;
  font-size: 14px;
}
.lista-arquivos .nome { flex: 1; word-break: break-all; }
.lista-arquivos .tamanho { color: var(--texto-fraco); font-size: 12.5px; white-space: nowrap; }
.lista-arquivos button {
  border: none;
  background: none;
  color: var(--texto-fraco);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 5px;
}
.lista-arquivos button:hover { color: var(--vermelho); background: var(--vermelho-fundo); }

/* ------------------------------------------------------------------ formulário */

.grupo { margin-bottom: 26px; }

.grupo > h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--ciano);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--borda);
  font-weight: 700;
}

/* O estado do campo (veio da leitura / falta responder / respondido) NÃO é indicado por barra
   colorida na lateral esquerda. Aquilo vira uma escada de listras quando há trinta campos, e é
   um maneirismo que grita "template". Aqui o sinal está onde o olho já está: no fundo do campo e
   na etiqueta acima do rótulo, que também diz em palavras o que a cor significa. */
.campo {
  padding: 18px 20px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  margin-bottom: 12px;
  transition: border-color .15s, background .15s;
}

/* Veio da leitura dos arquivos: fundo neutro, é só conferir. */
.campo.da-ia { background: var(--superficie); }

/* Ninguém respondeu: fundo âmbar suave. É o único estado que precisa puxar o olho, porque é o
   trabalho que resta. */
.campo.falta {
  background: #fdf6ea;
  border-color: #ecd9b8;
}

/* Respondido: sai do caminho. */
.campo.respondido { background: var(--superficie); }

.campo.erro { background: var(--vermelho-fundo); border-color: #e8b4b0; }

.campo > label.rotulo {
  display: block;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 3px;
  font-size: 14.5px;
}

.ajuda {
  color: var(--texto-suave);
  font-size: 13px;
  margin: 0 0 10px;
  max-width: 78ch;
}

.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

.etiqueta {
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .2px;
}
.etiqueta.origem { background: var(--azul-palido); color: var(--azul-profundo); }
.etiqueta.pendente { background: var(--ambar-fundo); color: var(--ambar-escuro); }
.etiqueta.corrigido { background: var(--verde-fundo); color: var(--verde); }

input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: 7px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--texto);
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ciano);
}
input:disabled, select:disabled, textarea:disabled {
  background: #f4f7f9;
  color: var(--texto-fraco);
  cursor: not-allowed;
}
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%), linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }

.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  background: #fff;
}
.opcoes label:hover { border-color: var(--ciano); }
.opcoes input { margin: 0; accent-color: var(--ciano); }
.opcoes label.marcada { background: var(--azul-palido); border-color: var(--ciano); color: var(--azul-profundo); font-weight: 600; }

.sem-restricao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--texto-suave);
  cursor: pointer;
}
.sem-restricao input { accent-color: var(--ciano); margin: 0; }

/* ------------------------------------------------------------------ botões */

/* Pílula âmbar em caixa alta: é assim que o botão da Véli se parece no site, e é o elemento que
   mais rápido faz a tela ser reconhecida como "da casa". O âmbar é o de ação; o navy fica para
   texto e estrutura. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  background: var(--ambar);
  /* Navy e não branco: sobre o âmbar #f4ad50, texto branco dá contraste 1,92 — menos da metade
     do mínimo legível. O site da Véli usa branco; copiar isso importaria o problema junto com a
     marca. O navy sobe para 9,60 e continua sendo, à distância, a mesma pílula âmbar da casa. */
  color: var(--azul-profundo);
  transition: background .15s, opacity .15s, border-color .15s;
}
.botao:hover:not(:disabled) { background: #e79c37; }
.botao:disabled { opacity: .45; cursor: not-allowed; }

/* Secundário: contorno, sem preenchimento. Some quando o primário está por perto, que é o que
   se espera de uma ação de apoio. */
.botao.secundario {
  background: transparent;
  color: var(--azul-profundo);
  border-color: var(--borda-forte);
}
.botao.secundario:hover:not(:disabled) {
  background: var(--superficie);
  border-color: var(--azul-profundo);
}

.botao.destaque { background: var(--ambar); color: var(--azul-profundo); }


.acoes { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 20px; }

/* ------------------------------------------------------------------ rodapé fixo */

.rodape-fixo {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--borda);
  padding: 12px 0;
  z-index: 10;
}
.rodape-interno {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.progresso { flex: 1; min-width: 220px; }
.progresso .texto { font-size: 13px; color: var(--texto-suave); margin-bottom: 5px; }
.progresso .barra { height: 7px; background: var(--borda); border-radius: 999px; overflow: hidden; }
.progresso .barra span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--ciano), var(--azul-claro));
  border-radius: 999px;
  transition: width .25s;
}

/* ------------------------------------------------------------------ avisos */

.aviso {
  padding: 13px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
  border: 1px solid;
}
.aviso.info { background: var(--azul-palido); border-color: var(--azul-claro); color: var(--azul-profundo); }
.aviso.erro { background: var(--vermelho-fundo); border-color: #f2c6c2; color: var(--vermelho); }
.aviso.alerta { background: var(--ambar-fundo); border-color: #eed9b4; color: var(--ambar-escuro); }
.aviso.sucesso { background: var(--verde-fundo); border-color: #bfe0d0; color: var(--verde); }
.aviso ul { margin: 8px 0 0; padding-left: 20px; }
.aviso li { margin-bottom: 3px; }
.aviso strong { display: block; margin-bottom: 2px; }

.escondido { display: none !important; }

/* ------------------------------------------------------------------ carregando */

.carregando { text-align: center; padding: 48px 24px; }
.girando {
  width: 34px; height: 34px;
  border: 3px solid var(--borda);
  border-top-color: var(--ciano);
  border-radius: 50%;
  margin: 0 auto 18px;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.carregando p { color: var(--texto-suave); margin: 0; }
.carregando .titulo { color: var(--azul-profundo); font-weight: 600; font-size: 16px; margin-bottom: 4px; }

/* ------------------------------------------------------------------ sucesso */

/* Sem círculo verde com ✓ centralizado. Aquilo é decoração que não informa nada: comemora o
   envio e some. Aqui o protagonista é o NÚMERO do briefing, que é o que o consultor vai usar
   para falar desta vaga depois, e logo abaixo o cliente e o cargo, que confirmam que foi esta
   vaga que chegou. Alinhado à esquerda, como o resto da ferramenta. */
.sucesso-final {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 4px 72px 4px 4px;
  padding: 40px 44px 34px;
  max-width: 560px;
}

.sucesso-etiqueta {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verde);
}

.sucesso-numero {
  margin: 0;
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.sucesso-vaga {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--texto);
}

.sucesso-detalhe {
  margin: 22px 0 26px;
  padding-top: 20px;
  border-top: 1px solid var(--borda);
}
.sucesso-detalhe p {
  margin: 0;
  color: var(--texto-suave);
  font-size: 14px;
  line-height: 1.55;
  max-width: 52ch;
}

@media (max-width: 560px) {
  .sucesso-final { padding: 30px 22px 26px; border-radius: 4px 48px 4px 4px; }
  .sucesso-numero { font-size: 36px; }
}

/* ------------------------------------------------------------------ telas estreitas */

@media (max-width: 640px) {
  .topo .passo { margin-left: 0; width: 100%; }
  .cartao { padding: 18px 16px; }
  .conteudo, .topo-interno, .rodape-interno { padding: 0 14px; }
  .conteudo { padding-top: 20px; padding-bottom: 150px; }
  .acoes .botao { width: 100%; }
}

/* ------------------------------------------------------------------ login */

/* Entrada. Fundo chapado, e não gradiente: gradiente de tela cheia é linguagem de página
   comercial, e isto é uma ferramenta de trabalho que a pessoa abre todo dia. O sinal da marca
   vem do canto assimétrico do cartão, que é um gesto do próprio site da Véli (lá aparece como
   `border-radius: 0 120px` numa seção inteira). */
.tela-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--fundo);
}

.caixa-login {
  width: 100%;
  max-width: 420px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 4px 72px 4px 4px;
  padding: 40px 40px 30px;
}

.marca-login img {
  display: block;
  height: 30px;
  width: auto;
  margin-bottom: 32px;
}

.caixa-login h1 {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0 0 6px;
  color: var(--texto);
}

.caixa-login .explica {
  margin: 0 0 26px;
  color: var(--texto-suave);
  font-size: 14px;
  line-height: 1.5;
}

.caixa-login .rotulo {
  display: block;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--texto-suave);
  margin-bottom: 6px;
}

.caixa-login input {
  width: 100%;
  margin-bottom: 18px;
  border-radius: 10px;
  border: 1px solid var(--borda-forte);
  padding: 11px 13px;
  font-size: 15px;
}

@media (max-width: 480px) {
  .caixa-login { padding: 30px 22px 24px; border-radius: 4px 48px 4px 4px; }
}

.botao.largo { width: 100%; justify-content: center; margin-top: 4px; }

.rodape-login {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
  font-size: 12.5px;
  color: var(--texto-fraco);
  line-height: 1.5;
}

/* ------------------------------------------------------------------ quem está logado */

.quem-sou {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-size: 13px;
  color: var(--texto-suave);
}

.quem-sou strong { color: var(--texto); font-weight: 600; }

.quem-sou button {
  background: none;
  border: 1px solid var(--borda-forte);
  color: var(--texto-suave);
  border-radius: 6px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.quem-sou button:hover { border-color: var(--ciano); color: var(--ciano); }

/* Campo que veio do login: preenchido e travado, com o motivo visível. */
.campo.do-login input { background: var(--fundo); color: var(--texto-suave); }
.etiqueta.login { background: var(--azul-palido); color: var(--azul-profundo); }

/* Troca entre entrar / criar acesso / nova senha */
.troca-painel {
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--borda);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--texto-fraco);
}

.troca-painel button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ciano);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.troca-painel button:hover { color: var(--azul-profundo); }

.dica-campo {
  margin: -12px 0 16px;
  font-size: 12px;
  color: var(--texto-fraco);
}

.caixa-login .aviso { margin: 16px 0 0; }

/* ------------------------------------------------------------------ etiquetas */

.etiquetas-campo {
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  padding: 8px;
  background: var(--superficie);
}
.etiquetas-campo:focus-within { border-color: var(--ciano); box-shadow: 0 0 0 3px var(--azul-palido); }

.etiquetas-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquetas-lista:not(:empty) { margin-bottom: 8px; }

.etiqueta-valor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--azul-palido);
  color: var(--azul-profundo);
  border-radius: 6px;
  padding: 4px 6px 4px 10px;
  font-size: 13.5px;
  font-weight: 600;
}
.etiqueta-valor button {
  background: none;
  border: none;
  color: var(--azul-profundo);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  opacity: .6;
}
.etiqueta-valor button:hover { opacity: 1; }

.etiquetas-entrada {
  border: none !important;
  padding: 4px 2px !important;
  width: 100%;
}

.marcar-todos {
  background: none;
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  padding: 3px 10px;
  font: inherit;
  font-size: 12.5px;
  color: var(--texto-suave);
  cursor: pointer;
  margin-bottom: 8px;
}
.marcar-todos:hover { border-color: var(--ciano); color: var(--azul-profundo); }

/* ------------------------------------------------------------------ blocos repetíveis */

.bloco-repetivel {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--fundo);
}

.bloco-cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.bloco-numero {
  font-weight: 700;
  color: var(--azul-profundo);
  font-size: 13px;
}
.bloco-remover {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--texto-fraco);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
}
.bloco-remover:hover { color: var(--vermelho); }

.sub-rotulo {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 10px;
}
.sub-rotulo:last-child { margin-bottom: 0; }
.sub-rotulo input, .sub-rotulo select { margin-top: 4px; }

.bloco-mais {
  background: none;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
  padding: 8px 14px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ciano);
  cursor: pointer;
  width: 100%;
}
.bloco-mais:hover { border-color: var(--ciano); background: var(--azul-palido); }

/* As duas cores citadas no texto da tela de conferência saem dos mesmos tokens dos campos —
   escritas à mão no HTML, elas se desatualizariam caladas na próxima troca de paleta. */
.cor-ia { color: var(--ciano); }
.cor-falta { color: var(--ambar-escuro); }

/* ------------------------------------------------------------------ densidade de ferramenta */

/* Trinta campos numa coluna só, cada um ocupando a largura toda, dá uma página que não acaba —
   e desperdiça metade da tela num monitor. Campo curto (número, data, escolha) ocupa meia
   largura; o que precisa de espaço (texto longo, etiquetas, blocos) continua inteiro.
   A partir de 760px, que é onde deixa de ser celular. */
@media (min-width: 760px) {
  .grupo > .lista-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }
  .grupo > .lista-campos > .campo { margin-bottom: 0; }
  .grupo > .lista-campos > .campo.largo { grid-column: 1 / -1; }
}

/* Cabeçalho de grupo: o número diz onde a pessoa está sem precisar contar. */
.grupo > h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--texto);
  margin: 0 0 4px;
}
.grupo > h2 .contagem {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--texto-fraco);
  letter-spacing: 0;
}
.grupo > p.sub-grupo {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--texto-fraco);
}

/* Rótulo maior e ajuda menor: a pergunta é o que se lê, o porquê é apoio. */
.campo > label.rotulo { font-size: 15px; line-height: 1.35; margin-bottom: 4px; }
.campo .ajuda { font-size: 12.5px; line-height: 1.45; margin: 0 0 10px; color: var(--texto-suave); }

/* Campos de digitação: altura confortável, foco visível sem sombra. */
.campo input, .campo select, .campo textarea {
  border-radius: 10px;
  border: 1px solid var(--borda-forte);
  padding: 10px 12px;
  font-size: 14.5px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus,
.caixa-login input:focus {
  outline: none;
  border-color: var(--ciano);
  background: #fbfdff;
}

/* No celular tudo empilha e o rodapé fixo não pode cobrir o último campo. */
@media (max-width: 759px) {
  /* Propriedades separadas, NUNCA o atalho `padding`: o atalho zera o `padding-bottom` que
     reserva espaço para o rodapé fixo, e o último campo do formulário fica embaixo dele, sem
     como ser tocado. Aconteceu de verdade, e some justamente na última pergunta, que é onde
     ninguém procura defeito. */
  .conteudo { padding-left: 16px; padding-right: 16px; }
  .campo { padding: 15px 16px; }
  .topo-interno { gap: 10px; }
  .topo h1 { font-size: 15px; }
  .topo .passo { display: none; }
  .botao { padding: 12px 22px; font-size: 13px; }
}

/* ------------------------------------------------------------------ etapas do envio */

/* Numeração à esquerda, conteúdo à direita. O número é informação de verdade (a ordem em que se
   faz), não decoração: é a diferença entre uma marca que orienta e uma que só enfeita. */
.etapa {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 0 16px;
  align-items: start;
}
.etapa + .etapa {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--borda);
}

.etapa-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--azul-profundo);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.etapa-corpo > h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 3px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--texto);
}

.opcional {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  padding: 2px 9px;
}

.etapa-corpo .sub { margin-bottom: 14px; font-size: 13.5px; }
.etapa-corpo textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--borda-forte);
  padding: 11px 13px;
  font-family: inherit;
  font-size: 14.5px;
  resize: vertical;
}

/* Pílulas de status: menores e discretas. São diagnóstico, não manchete. */
.faixa-status { margin-bottom: 22px; font-size: 12.5px; }
.pilula { padding: 4px 11px; border-radius: 999px; }

@media (max-width: 560px) {
  .etapa { grid-template-columns: 1fr; gap: 10px; }
  .etapa-num { margin-bottom: 2px; }
}

/* ------------------------------------------------------------------ olho da senha */

.campo-senha { position: relative; margin-bottom: 18px; }
/* A margem passou para o envolucro; no campo ela empurraria o olho para fora do lugar. */
.campo-senha input { margin-bottom: 0 !important; padding-right: 46px; }

.olho-senha {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 8px;
  color: var(--texto-fraco);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.olho-senha:hover { color: var(--azul-profundo); background: var(--fundo); }
.olho-senha:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 1px;
  color: var(--azul-profundo);
}
/* Quando a senha está visível, o ícone fica em destaque: é um estado que a pessoa precisa
   perceber sem olhar o campo, porque a senha está exposta na tela. */
.olho-senha[aria-pressed="true"] { color: var(--ciano); }

/* A dica de tamanho mínimo vinha logo abaixo do campo e agora do envolucro. */
.campo-senha + .dica-campo { margin-top: -12px; }

/* Segunda linha do aviso: contexto, não alarme. */
.aviso-secundario {
  margin: 8px 0 0;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--texto-suave);
}