/* ==========================================================================
   TJ-Viagens · Sala — painel do gestor
   Linguagem visual: Google Workspace / Material Design 3.

   Fundo branco calmo, cartões de cantos muito arredondados, botões e busca
   em pílula, sombras quase imperceptíveis e as cores do Google usadas com
   parcimônia sobre neutros. A fonte tenta "Google Sans" (quem tiver, usa)
   e cai para Roboto Flex / Roboto.

   Os nomes de classe são os mesmos do app.jsx; só a pele mudou.
   ========================================================================== */


/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.5;
  color: var(--texto);
  background: var(--carta);
  -webkit-font-smoothing: antialiased;
}

button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

h1, h2, h3 { color: var(--grafite); font-weight: var(--peso-titulo); letter-spacing: -.01em; }

/* Foco visível — anel azul em tudo que é interativo */
:focus-visible {
  outline: var(--foco-largura) solid var(--foco-cor);
  outline-offset: var(--foco-folga);
  border-radius: var(--raio-campo);
}

::selection { background: var(--indigo-aro); }

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

.pula {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--indigo); color: var(--carta);
  padding: var(--e-2) var(--e-4); border-radius: var(--raio-pilula);
  font-weight: var(--peso-titulo); text-decoration: none;
  transition: top var(--dur-1) var(--mola);
}
.pula:focus-visible { top: 12px; }

/* Rótulo pequeno estilo Google (overline) */
.etq {
  font-size: var(--t-micro); font-weight: var(--peso-titulo);
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--texto-2);
}

/* ------------------------------------------------------------------ topo */

.topo {
  position: sticky; top: 0; z-index: 40;
  background: var(--carta);
  border-bottom: 1px solid var(--neutro-luz);
}

.barra {
  display: flex; align-items: center; gap: var(--e-2);
  max-width: 1440px; margin: 0 auto;
  padding: var(--e-2) var(--e-5);
  min-height: var(--alt-topo);
}

.selo-marca {
  display: inline-flex; align-items: center; gap: var(--e-2);
  flex-shrink: 0;
}
/* O selo era um quadrado azul com as iniciais TJ e o nome do programa ao
   lado. Com a plataforma passando a se chamar UIRAJARR, a marca entra em
   tela — e marca não mora dentro de container de UI. O imagotipo fica nu,
   na sua própria cor, e o nome vira palavra em caixa alta: um nome de oito
   letras iguais não pede o truque de destacar a primeira. */
.selo-imago { display: block; flex-shrink: 0; }
.selo-nome {
  font-size: var(--t-realce); font-weight: var(--peso-forte); color: var(--grafite);
  letter-spacing: .1em;
}

/* Navegação em pílulas, estilo tabs do Workspace */
.segmento {
  display: flex; align-items: center; gap: var(--e-1);
  margin-left: 16px;
}
.seg {
  display: inline-flex; align-items: center; gap: var(--e-2);
  height: var(--alt-controle); padding: 0 var(--e-4);
  border-radius: var(--raio-pilula);
  font-size: var(--t-corpo); font-weight: var(--peso-titulo);
  color: var(--texto-2); text-decoration: none;
  transition: background var(--dur-1) var(--mola), color var(--dur-1) var(--mola);
}
.seg:hover { background: var(--neutro-luz); color: var(--grafite); }
.seg[aria-current="page"] {
  background: var(--indigo-luz);
  color: var(--indigo-vivo);
}
.seg-conta {
  min-width: 20px; height: 20px; padding: 0 var(--e-1);
  border-radius: var(--raio-pilula);
  background: var(--indigo); color: var(--carta);
  font-size: var(--t-micro); font-weight: var(--peso-forte);
  display: inline-flex; align-items: center; justify-content: center;
}
.seg[aria-current="page"] .seg-conta { background: var(--indigo-vivo); }

.topo-dir {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--e-1);
  /* Sem o mínimo zero a busca de largura fixa empurra a barra para fora da
     janela entre 1040 e 1140px, e a página inteira rola na horizontal. */
  min-width: 0;
}

/* Busca em pílula cinza-clara, como no Gmail/Meet. Largura máxima, não
   fixa: entre a navegação e a conta, ela é a única peça que pode ceder. */
.busca { position: relative; width: 300px; max-width: 100%; flex: 0 1 300px; min-width: 132px; }
.busca input {
  width: 100%; height: var(--alt-controle);
  border: 0; border-radius: var(--raio-pilula);
  background: var(--neutro-luz);
  padding: 0 var(--e-6) 0 var(--e-7);
  font-size: var(--t-realce); color: var(--grafite);
  transition: background var(--dur-2) var(--mola), box-shadow var(--dur-2) var(--mola);
}
.busca input::placeholder { color: var(--texto-2); }
.busca input:hover { background: var(--neutro-hover); }
.busca input:focus {
  background: var(--carta);
  box-shadow: var(--suave);
}
.busca input:focus-visible {
  outline: var(--foco-largura) solid var(--foco-cor);
  outline-offset: 0;
}
.busca input::-webkit-search-cancel-button { display: none; }
.busca-lupa {
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--texto-2); pointer-events: none;
  display: flex;
}
.busca-x {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: var(--raio-circulo);
  display: flex; align-items: center; justify-content: center;
  color: var(--texto-2);
}
.busca-x:hover { background: var(--tinta-08); color: var(--grafite); }

/* Botões redondos de ícone (sino, hambúrguer, fechar) */
.redondo {
  width: var(--alt-controle); height: var(--alt-controle); border-radius: var(--raio-circulo);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--texto-2); position: relative;
  transition: background var(--dur-1) var(--mola);
  flex-shrink: 0;
}
.redondo:hover { background: var(--neutro-luz); color: var(--grafite); }
.redondo:active { background: var(--neutro-press); }

.pingo {
  position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px; border-radius: var(--raio-circulo);
  background: var(--quente-cheio);
  border: 2px solid var(--carta);
}

/* Avatar circular */
.eu-bt {
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: var(--e-1); border-radius: var(--raio-pilula);
  transition: background var(--dur-1) var(--mola);
}
.eu-bt:hover { background: var(--neutro-luz); }
.eu-bt > svg { color: var(--texto-2); }
.eu-bola {
  width: 34px; height: 34px; border-radius: var(--raio-circulo);
  background: var(--indigo); color: var(--carta);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-mini); font-weight: var(--peso-forte); letter-spacing: .02em;
}

.so-fino { display: none; }

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

   Uma família só, com cinco variantes e dois tamanhos. Botão é sempre
   pílula, e a altura vem de --alt-controle: campo e botão na mesma linha
   têm de bater.

     .bt              secundário — contorno, o padrão
     .bt .bt-forte    primário — a única pílula azul cheia da tela
     .bt .bt-nu       sutil — sem borda, para ações de terceira ordem
     .bt .bt-branco   sobre superfície tonal, herda o acento do cartão
     .bt .bt-perigo   destrutivo
     :disabled, [aria-disabled="true"]   desabilitado

   Tamanhos: padrão (40px) e .bt-mini (34px). .bt-quadrado é o padrão sem
   rótulo, para o botão de cadastro rápido ao lado de um campo.

   Os três órfãos antigos foram absorvidos: .bt-elo e .bt-link viraram
   `bt bt-nu bt-mini`, .bt-mais virou `bt bt-quadrado`, e .bt-morto
   deixou de existir — desabilitado é estado, não variante.
   -------------------------------------------------------------------------- */

.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  height: var(--alt-controle); padding: 0 var(--e-4);
  border-radius: var(--raio-acao);
  border: 1px solid var(--claro);
  background: var(--carta);
  font-size: var(--t-corpo); font-weight: var(--peso-titulo);
  color: var(--indigo-vivo);
  white-space: nowrap;
  transition: background var(--dur-1) var(--mola), box-shadow var(--dur-1) var(--mola),
              border-color var(--dur-1) var(--mola), color var(--dur-1) var(--mola);
}
.bt:hover { background: var(--indigo-veu); border-color: var(--indigo-aro); }
.bt:active { background: var(--indigo-luz); }

.bt-forte {
  background: var(--indigo); border-color: transparent;
  color: var(--carta);
}
.bt-forte:hover { background: var(--indigo-hover); border-color: transparent; box-shadow: var(--suave); }
.bt-forte:active { background: var(--indigo-press); box-shadow: none; }

.bt-nu { border-color: transparent; background: transparent; }
.bt-nu:hover { background: var(--indigo-luz); border-color: transparent; }
.bt-nu:active { background: var(--indigo-aro); }

.bt-branco {
  background: var(--carta); border-color: transparent;
  color: var(--acento-txt, var(--indigo-vivo));
  box-shadow: var(--suave);
}
.bt-branco:hover { background: var(--carta); box-shadow: var(--funda); border-color: transparent; }
.bt-branco:active { box-shadow: var(--suave); }

.bt-perigo { color: var(--quente); }
.bt-perigo:hover { background: var(--quente-luz); border-color: var(--quente-aro); }
.bt-perigo:active { background: var(--quente-aro); }

/* Desabilitado é estado, e vale para as cinco variantes. O aria-disabled
   cobre o caso do elemento que precisa continuar focável para explicar por
   que não dá para clicar (a proposta única acima da referência). */
.bt:disabled,
.bt[aria-disabled="true"] {
  background: var(--neutro-luz);
  border-color: transparent;
  color: var(--texto-2);
  box-shadow: none;
  cursor: not-allowed;
}
.bt:disabled:hover,
.bt[aria-disabled="true"]:hover { background: var(--neutro-luz); border-color: transparent; box-shadow: none; }

/* tamanhos */
.bt-mini { height: var(--alt-mini); padding: 0 var(--e-3); font-size: var(--t-apoio); }
.bt-quadrado {
  width: var(--alt-controle); padding: 0;
  border-radius: var(--raio-acao);
  color: var(--indigo);
}
.bt-quadrado[aria-expanded="true"] {
  background: var(--indigo); border-color: var(--indigo); color: var(--carta);
}

/* ----------------------------------------------------------------- palco */

.palco {
  max-width: 1440px; margin: 0 auto;
  padding: var(--e-5) var(--e-5) 72px;
}
.palco:focus { outline: none; }

.titulo-pag {
  display: flex; align-items: center; gap: var(--e-4);
  flex-wrap: wrap;
  margin-bottom: var(--e-5);
}
.titulo-pag h1 {
  font-size: var(--t-display); font-weight: 400;
  letter-spacing: -.02em;
}
.titulo-pag p { font-size: var(--t-corpo); color: var(--texto-2); }

/* --------------------------------------------------------------- ao vivo */

/* O RESPIRO DIZ O NÍVEL.

   O painel tem três alturas de leitura — o que exige ato agora, a saúde da
   operação, e o detalhe que se confere depois — e as três estavam separadas
   por 16px, o mesmo respiro que separa dois irmãos dentro de um bloco. Com
   afastamento igual, hierarquia igual: a tela lia como sete peças numa
   pilha.

   Entre níveis, `--e-6`. Dentro de um nível, `--e-4`. É o afastamento que
   agrupa, e ele custa menos que qualquer moldura. */
.vivo-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, .9fr);
  gap: var(--e-4);
  /* Com a faixa de contexto no topo, esta virou a última peça da tela: o
     respiro que separava do que vinha abaixo seria vão morto contra o
     rodapé do palco. */
  margin-bottom: 0;
  /* OS DOIS CARTÕES TÊM A MESMA ALTURA, E O AZUL DISTRIBUI O QUE SOBRA.

     O `stretch` do grid já tinha causado problema uma vez: com a fila em
     668px e 306 de conteúdo no herói, sobravam 362px de fundo tonal vazio
     no pé — e como o tonal é a cor mais forte da tela, o vazio pesava mais
     que qualquer coisa cheia. A saída na época foi `align-items: start`,
     que resolveu o vão e deixou os dois cartões desalinhados embaixo.

     Depois que a fila encolheu para dois itens por grupo, a diferença caiu
     para 41px — perto demais para ler como decisão, longe demais para ler
     como alinhamento. Os dois voltam a esticar juntos, e agora o herói sabe
     o que fazer com a sobra: `.vivo-pe` desce para a base (`margin-top:
     auto`) e o vão vira respiro entre as propostas e os números, em vez de
     vazio depois deles. */
  align-items: stretch;
}
.vivo-pe { margin-top: auto; }

/* Cartão-herói. O fundo é tonal e ele MUDA COM O ESTADO: azul enquanto a
   janela corre, âmbar dos trinta minutos em diante, neutro depois de
   encerrada. É a única peça do produto que se anuncia pela cor da
   superfície inteira, e ela merece: quem abre o painel precisa saber, do
   outro lado da sala, se há uma sessão correndo agora.

   O que o tonal exige em troca é inversão de hierarquia lá dentro: o que
   era tonal sobre branco passa a ser BRANCO sobre tonal — o chip de estado,
   a caixa das propostas seladas, o fundo do anel. Sem isso o chip
   desaparece dentro do próprio cartão, porque os dois usavam o mesmo
   --acento-fundo. É o branco por dentro que impede o bloco tonal de virar
   painel achatado de console administrativo. */
.vivo {
  --acento: var(--indigo);
  --acento-txt: var(--indigo-vivo);
  --acento-fundo: var(--indigo-luz);
  --acento-aro: var(--indigo-aro);
  --pulso: var(--pulso-calmo); /* @kind other */
  position: relative; overflow: hidden;
  background: var(--acento-fundo);
  border: 1px solid var(--acento-aro);
  border-radius: var(--raio-cartao);
  /* 24px de respiro e 24px entre os três blocos davam 96px de ar num cartão
     de resumo. Ele não é a tela da disputa — é o aviso de que ela existe. */
  padding: var(--e-4);
  display: flex; flex-direction: column; gap: var(--e-4);
  transition: background var(--dur-4) var(--mola), border-color var(--dur-3) var(--mola);
}

/* A inversão. Cada uma destas peças era tonal sobre branco; sobre o tonal
   do cartão, todas viram branco. */
.vivo .pisca { background: var(--carta); }
.vivo .anel-tras { stroke: var(--carta); }
.vivo .vivo-dado { border-right-color: var(--acento-aro); }
.vivo .vivo-trilho { background: var(--acento-aro); }

/* Trilho da janela: o quanto já correu, derivado do relógio. É a única peça
   da tela que mede tempo sem escrever número. */
.vivo-trilho {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--fio-2);
}
.vivo-trilho i {
  display: block; height: 100%;
  background: var(--acento);
  transition: width 1s linear, background var(--dur-3) var(--mola);
}

/* Grau de urgência. Âmbar entra aos trinta minutos e NÃO sai: dos dez
   minutos em diante o que muda é o ritmo do pulso e a densidade, nunca a
   cor — vermelho é descumprimento, e encerrar no horário não é
   descumprimento nenhum. */
.vivo-morno,
.vivo-quente,
.vivo-critico {
  --acento: var(--morno-cheio); --acento-txt: var(--morno);
  --acento-fundo: var(--morno-luz); --acento-aro: var(--morno-aro);
}
.vivo-morno { --pulso: var(--pulso-tenso); /* @kind other */ }
.vivo-quente { --pulso: var(--pulso-tenso); /* @kind other */ border-color: var(--morno-aro); }
.vivo-critico {
  --pulso: var(--pulso-urgente); /* @kind other */
  border-color: var(--morno-cheio);
  gap: var(--e-4);
}
.vivo-critico .vivo-trilho { height: 3px; }
.vivo-frio {
  --acento: var(--texto-2); --acento-txt: var(--texto);
  --acento-fundo: var(--neutro-luz); --acento-aro: var(--claro);
  --pulso: 0s; /* @kind other */
}

.vivo-vazio {
  gap: var(--e-2); justify-content: center;
  background: var(--ceu);
  border: 1px dashed var(--claro);
}

.vivo-topo { display: flex; gap: var(--e-5); align-items: flex-start; }

.pisca {
  display: inline-flex; align-items: center; gap: var(--e-2);
  white-space: nowrap;
  height: var(--alt-chip); padding: 0 var(--e-2) 0 var(--e-2);
  border-radius: var(--raio-campo);
  background: var(--acento-fundo, var(--indigo-luz));
  font-size: var(--t-micro); font-weight: var(--peso-forte);
  letter-spacing: var(--entreletra-etq); text-transform: uppercase;
  color: var(--acento-txt, var(--indigo-vivo));
  width: fit-content;
}
/* O pulso é o que diz a pressa. A duração vem de --pulso, que o grau de
   urgência troca: 2.6s folgado, 1.1s nos últimos dez minutos, 0.62s no
   último minuto. A cor não muda com a pressa. */
.pisca-luz {
  width: 7px; height: 7px; border-radius: var(--raio-circulo);
  background: var(--acento, var(--indigo));
  animation: pulsar var(--pulso, 1.6s) var(--mola) infinite;
}
@keyframes pulsar {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.8); }
}

.vivo-rota {
  font-size: var(--t-numero); font-weight: var(--peso-titulo);
  letter-spacing: -.02em;
  margin-top: var(--e-2);
  color: var(--grafite);
}
.vivo-vazio .vivo-rota { margin-top: var(--e-1); font-size: var(--t-titulo); }

.vivo-proto {
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  margin-top: var(--e-1);
  font-size: var(--t-apoio); color: var(--texto-2);
}
.vivo-proto b { color: var(--grafite); font-weight: var(--peso-forte); }

/* Anel do cronômetro */
/* 🔒 O ANEL TEM LARGURA PRÓPRIA.

   `.anel-txt` é absoluto com `inset: 0`, então ele se centraliza sobre a
   CAIXA do `.anel` — e o `.anel` não tinha largura. Dentro de um flex
   (`.vivo-topo`, `.cron`) ele encolhia até os 154px do SVG e tudo casava;
   dentro de um bloco comum (`.caixa-respiro`, na Ordem de Serviço) ele
   esticava até os 352px do cartão. O círculo ficava à esquerda e o relógio
   centralizado no cartão: 99px de desencontro, o número fora do anel.

   `max-content` dá a ele o tamanho do SVG em qualquer contexto; a margem
   automática o centraliza no bloco e não mexe no flex, onde o vizinho já
   toma a sobra. */
.anel {
  position: relative; flex-shrink: 0;
  width: max-content; margin-inline: auto;
}
.anel svg { transform: rotate(-90deg); display: block; }
.anel-tras { stroke: var(--fio-2); }
.anel-frente {
  stroke: var(--acento, var(--indigo));
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke var(--dur-3) var(--mola);
}
.anel-txt {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0;
}
.anel-num {
  display: inline-flex;
  font-size: var(--t-display); font-weight: 400;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--grafite);
}
/* Tempo com unidade no anel: número grande, unidade pequena ao lado. */
.tempo-un { display: inline-flex; align-items: baseline; }
.tempo-un .tempo-u {
  margin: 0 6px 0 2px; font-size: var(--t-apoio); font-weight: var(--peso-titulo);
  color: var(--texto-2); letter-spacing: 0;
}
.tempo-un .tempo-u:last-child { margin-right: 0; }
.anel-num:has(.tempo-un) { font-size: 28px; }
.anel-leg {
  font-size: var(--t-micro); font-weight: var(--peso-titulo);
  letter-spacing: var(--entreletra-etq); text-transform: uppercase;
  color: var(--texto-2);
}

/* Cada dígito é um elemento próprio, e só o que muda remonta — é o que faz o
   número PARECER correndo em vez de ser reescrito. O separador não anima:
   dois-pontos pulando dá impressão de defeito. */
.anel-dig { display: inline-block; animation: rola var(--dur-2) var(--mola) both; }
.anel-sep { display: inline-block; opacity: .4; }
@keyframes rola {
  from { transform: translateY(-42%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.vivo-critico .anel-num { color: var(--morno); }

/* Propostas seladas */
/* Os lacres viviam numa caixa translúcida dentro do herói tonal. Sem o
   fundo tonal a caixa perdeu função: ficam sobre a própria superfície,
   separados por um fio. */
.seladas {
  background: var(--carta);
  border-radius: var(--raio-controle);
  padding: var(--e-3);
}
.seladas-top {
  display: flex; align-items: baseline; gap: var(--e-2);
  margin-bottom: var(--e-2);
}
.seladas-tit { font-size: var(--t-apoio); font-weight: var(--peso-forte); color: var(--grafite); white-space: nowrap; }
.seladas-conta { margin-left: auto; font-size: var(--t-apoio); color: var(--texto-2); white-space: nowrap; }

.pecas { display: flex; gap: var(--e-1); flex-wrap: wrap; }
.peca {
  width: 26px; height: 30px; border-radius: var(--raio-campo);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--carta);
  border: 1px dashed var(--acento-aro, var(--claro));
  color: var(--texto-3);
}
.peca-cheia {
  background: var(--acento, var(--indigo));
  border: 1px solid transparent;
  color: var(--carta);
  animation: chegar var(--dur-3) var(--mola) backwards;
}
/* Os lacres chegam em leva, um a cada 90ms. O atraso saía de um style inline
   no JSX; agora sai daqui, e catorze convocados cobrem a sessão maior. */
.peca-cheia:nth-child(1) { animation-delay: calc(var(--passo) * 0); }
.peca-cheia:nth-child(2) { animation-delay: calc(var(--passo) * 1); }
.peca-cheia:nth-child(3) { animation-delay: calc(var(--passo) * 2); }
.peca-cheia:nth-child(4) { animation-delay: calc(var(--passo) * 3); }
.peca-cheia:nth-child(5) { animation-delay: calc(var(--passo) * 4); }
.peca-cheia:nth-child(6) { animation-delay: calc(var(--passo) * 5); }
.peca-cheia:nth-child(7) { animation-delay: calc(var(--passo) * 6); }
.peca-cheia:nth-child(8) { animation-delay: calc(var(--passo) * 7); }
.peca-cheia:nth-child(9) { animation-delay: calc(var(--passo) * 8); }
.peca-cheia:nth-child(10) { animation-delay: calc(var(--passo) * 9); }
.peca-cheia:nth-child(n+11) { animation-delay: calc(var(--passo) * 10); }
/* Sobre âmbar, ícone escuro; branco sumiria */
.vivo-morno .peca-cheia,
.vivo-quente .peca-cheia,
.vivo-critico .peca-cheia { color: var(--grafite); }
@keyframes chegar {
  from { transform: scale(.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.vivo-pe { display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; }
.vivo-nums { display: flex; }
.vivo-dado {
  display: flex; flex-direction: column;
  padding-right: var(--e-5); margin-right: var(--e-5);
  border-right: 1px solid var(--fio);
}
.vivo-nums .vivo-dado:last-child { border-right: 0; margin-right: 0; }
/* Os três números do pé são apoio, não manchete: o número que manda no
   cartão é o do anel. A 26px eles disputavam com ele; a 20px acompanham. */
.vivo-dado b {
  font-size: var(--t-titulo); font-weight: 400;
  letter-spacing: var(--entreletra-display);
  color: var(--grafite);
  font-variant-numeric: tabular-nums;
}
.vivo-dado span:last-child { font-size: var(--t-mini); color: var(--texto-2); }

/* -------------------------------------------------------- precisa de você */

.fila {
  background: var(--carta);
  border: 1px solid var(--fio);
  border-radius: var(--raio-cartao);
  padding: var(--e-4) var(--e-1) var(--e-2);
  display: flex; flex-direction: column;
}
.fila-topo {
  display: flex; align-items: center; gap: var(--e-2);
  padding: 0 var(--e-4) var(--e-3);
}
.fila-topo h2 { font-size: var(--t-realce); font-weight: var(--peso-titulo); }
/* O contador conta a fila INTEIRA, então o vermelho dele era uma afirmação
   que o número não sustentava: seis itens, três críticos, e a etiqueta
   pintava os seis de descumprimento. Vermelho é descumprimento — se ele
   aparece sem que haja um, a próxima vez que houver não vai significar
   nada. Neutro por padrão; vermelho só quando existe crítico na fila. */
.fila-conta {
  min-width: 24px; height: 24px; padding: 0 var(--e-2);
  border-radius: var(--raio-pilula);
  background: var(--neutro-luz); color: var(--texto);
  font-size: var(--t-mini); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.fila-conta-grave { background: var(--quente-luz); color: var(--quente); }

/* AS DUAS METADES DA FILA.

   "Precisa de você" listava seis itens de peso idêntico — mesma altura,
   mesmo botão de contorno — e a única diferença entre "SLA de emissão
   descumprido" e "2 pedidos aguardam análise" era a cor de uma bola de
   40px. De relance a peça lia como uma lista qualquer, e não como a fila de
   decisão que o título promete.

   A divisa nomeia as duas metades e dá ao olho onde parar. É o mesmo
   recurso que a agenda já usa para separar hoje de amanhã: uma etiqueta sob
   um fio, sem moldura nenhuma. */
.fila-grupo + .fila-grupo .fila-divisa {
  margin-top: var(--e-2);
  padding-top: var(--e-3);
  border-top: 1px solid var(--fio);
}
.fila-divisa {
  display: block;
  padding: 0 var(--e-4) var(--e-2);
}
/* Na tela de Atividades a divisa acompanha o respiro do painel. */
.painel .fila-divisa { padding: 0 var(--e-5) var(--e-2); }
.painel .fila-grupo + .fila-grupo .fila-divisa { margin-top: var(--e-3); padding-top: var(--e-4); }

/* OS ITENS PRECISAM DE UM FIO DE AR ENTRE ELES.

   A lista era uma coluna sem folga, e enquanto os itens eram brancos isso
   não aparecia. Com o crítico ganhando fundo e faixa vermelha, dois
   seguidos passaram a se encostar: os dois fundos viram um bloco só e as
   duas faixas viram uma barra com um entalhe no meio, que lê como defeito
   de desenho. Quatro pixels bastam — cada item volta a ser um item, e o
   respiro é o mesmo entre críticos e entre os de acompanhar. */
.fila-lista { list-style: none; display: flex; flex-direction: column; gap: var(--e-1); }

/* A mesma lista dentro de um `.painel`, que tem 24px de respiro lateral
   contra os 4px da fila. Sem isto os itens começam colados na moldura,
   fora da vertical do título e da barra de ferramentas acima deles. */
.atv-lista { padding: 0 var(--e-3); }
.atv-lista .acao { padding: var(--e-3) var(--e-3); }
.acao {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--raio-controle);
  transition: background var(--dur-1) var(--mola);
}
.acao:hover { background: var(--ceu); }
.acao-mancha {
  width: 32px; height: 32px; border-radius: var(--raio-circulo);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--morno-luz); color: var(--morno);
}
.acao-critica .acao-mancha { background: var(--quente-luz); color: var(--quente); }

/* O item crítico ganha a MESMA marca da linha em exceção da tabela: faixa
   vermelha à esquerda e o fundo mais leve do sistema. Um vocabulário só
   para "isto descumpriu alguma coisa", na tabela e aqui — e a faixa é o que
   se enxerga com o olho de lado, que é como uma fila de decisão é lida.
   A cor não trabalha sozinha: o ícone é outro (`grito`, não `relógio`) e o
   grupo tem nome. */
.acao-critica {
  background: var(--quente-veu);
  box-shadow: inset 3px 0 0 var(--quente-cheio);
}
.acao-critica:hover { background: var(--quente-veu-2); }
.acao-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.acao-tit { font-size: var(--t-corpo); font-weight: var(--peso-titulo); color: var(--grafite); }
/* UMA LINHA, PORQUE O PAINEL É RESUMO.

   Duas linhas de metadado por item empurravam a fila a 715px contra os
   350px do cartão-herói ao lado — o resumo ficava maior que o assunto. Aqui
   a linha é a pista que identifica o item; o texto inteiro vive na tela de
   Atividades, onde a coluna é larga e a pessoa foi ler. */
.acao-meta {
  font-size: var(--t-mini); color: var(--texto-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* O mesmo item na tela de Atividades, onde a coluna é a página inteira: a
   reticência sai, porque ler o detalhe é o que a pessoa veio fazer. */
.acao-meta-longa { overflow: visible; text-overflow: clip; white-space: normal; }

/* ---------------------------------------------------------------- pílulas */
/* Na faixa a faísca é apoio, não protagonista: encolhe e recua. */

/* Eram quatro cartões grandes ocupando a primeira dobra inteira. Viraram uma
   faixa: mesma informação, um quarto da altura, e a tabela sobe. */
/* Faixa, e não quatro cartões. Um fio separa os indicadores em vez de quatro
   contornos, e o conjunto virou uma peça só: quatro cartões desenhados
   iguais competiam entre si e ocupavam a primeira dobra inteira. */
/* CARTÕES, NÃO UMA FAIXA COM FIOS.

   A faixa era uma caixa só, dividida por fios de 1px, com `overflow: hidden`.
   Três consequências: a pílula ativa recebia um anel azul que o overflow
   cortava e virava um traço à esquerda; `align-items: flex-end` desalinhava
   os números quando um cartão tinha faísca e o vizinho não; e o padding de
   12px deixava tudo comprimido contra os fios.

   Cada indicador passa a ser um cartão com moldura própria e respiro entre
   eles. O estado ativo então tem borda inteira onde se apoiar. */
.pilulas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}

.pilula {
  display: flex; align-items: flex-start; gap: var(--e-2);
  background: var(--carta);
  border: 1px solid var(--fio);
  border-radius: var(--raio-cartao);
  padding: var(--e-4);
  text-align: left;
}

.pilulas-dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* O resumo de Atividades tem três grupos, não quatro: "Concluídas" não
   existe no modelo — nenhuma atividade tem estado de encerrada, e inventar
   um contador para ela seria número digitado (regra 2). Três colunas, e a
   faixa fecha na largura da página em vez de deixar um quarto vazio. */
.pilulas-tripla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pilula-bt {
  cursor: pointer;
  transition: background var(--dur-1) var(--mola);
}
.pilula-bt:hover { background: var(--ceu); }
.pilula-bt:hover .pilula-rot { color: var(--indigo-vivo); }

.pilula-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.pilula-rot { display: inline-flex; align-items: center; gap: var(--e-1); }
.pilula-alerta {
  display: inline-flex; vertical-align: middle;
  margin-left: 8px; color: var(--quente);
}
.pilula-num {
  font-size: var(--t-numero); font-weight: var(--peso-titulo);
  letter-spacing: var(--entreletra-titulo);
  color: var(--grafite);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.pilula-nota {
  display: flex; align-items: center; gap: var(--e-1); flex-wrap: wrap;
  font-size: var(--t-mini); color: var(--texto-2);
}

.rumo { display: inline-flex; align-items: center; gap: var(--e-1); font-weight: var(--peso-titulo); }
.rumo-bom { color: var(--vivo); }
.rumo-mau { color: var(--quente); font-weight: var(--peso-forte); }
.rumo-liso { color: var(--texto-2); }

.faisca { flex-shrink: 0; margin-bottom: var(--e-1); }

/* Bolinha de ajuda "?" */
.pista {
  width: 18px; height: 18px; border-radius: var(--raio-circulo);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-micro); font-weight: var(--peso-forte);
  color: var(--texto-2);
  border: 1px solid var(--claro);
  text-transform: none; letter-spacing: 0;
}
.pista:hover { background: var(--neutro-luz); color: var(--grafite); }

/* A ajuda do rótulo como ícone de informação, no lugar do "?" solto — que
   lia como parte do texto ("E-mail ?"). Mesmo desenho do "i" da pergunta
   do passo 1. */
.ajuda-icone {
  display: inline-flex; margin-left: var(--e-1);
  color: var(--texto-2); cursor: help; border-radius: var(--raio-circulo);
}
.ajuda-icone:hover { color: var(--grafite); }
/* O rótulo é flex alinhado pela linha de base, e um ícone sem texto se
   alinha pelo pé — esticava o rótulo e empurrava o campo 2px abaixo dos
   vizinhos da mesma faixa. Centrado e com a altura da linha, não estica. */
label .dica-envelope:has(> .ajuda-icone) { align-self: center; height: 18px; align-items: center; }

/* ------------------------------------------------------ saúde da operação
   UMA PEÇA, E NÃO SEIS CARTÕES.

   Os seis indicadores desciam em duas fileiras logo abaixo do herói, cada um
   com a moldura completa: mesma superfície, mesmo fio, mesmo raio que o
   cartão-herói e que a fila de ações do nível acima. Seis molduras de peso
   idêntico fazem a segunda dobra disputar a atenção com a primeira, e o
   painel inteiro passa a ler como uma grade de caixas — que é exatamente o
   ar de console administrativo que o resto do sistema evita.

   Agora são uma peça só: a saúde da operação. Uma moldura, e dentro dela o
   fio DIVIDE em vez de contornar. As duas notícias em cima, os quatro
   indicadores de contexto embaixo, todos os seis com o mesmo respiro interno
   e a mesma sarjeta — as bordas se alinham e a grade aparece sozinha.
   Mesma informação, mesma ordem, mesmos componentes; o que muda é quantas
   molduras a tela desenha.

   🔒 O escopo é `.saude`, e isso não é zelo excessivo: `.pilulas` aparece em
   mais oito telas, e em sete delas a pílula FILTRA a lista abaixo. Lá ela
   precisa da moldura própria para o estado ativo (`.pilula-on`) ter onde se
   apoiar — foi o que motivou a volta aos cartões da última vez. No painel
   ela não filtra nada, então aqui a moldura não paga o que custa. */

.saude {
  background: var(--carta);
  border: 1px solid var(--fio);
  border-radius: var(--raio-cartao);
  margin-bottom: var(--e-6);
  /* Sem `overflow: hidden`: foi ele que, na primeira tentativa de faixa,
     recortou o anel de foco e o transformou num traço à esquerda. O fio
     interno é desenhado pelos filhos, então não há o que recortar. */
}

.saude .noticias,
.saude .pilulas { margin-bottom: 0; gap: 0; }

/* Dentro da peça nada é cartão: a moldura vira fio. */
.saude .eco,
.saude .prazo-cx,
.saude .pilula {
  border: 0;
  border-radius: 0;
  background: none;
}

/* Um respiro só para os seis, e o mesmo do painel: é o que faz "Referência
   e pago" começar na mesma vertical de "Credenciados ativos". */
.saude .eco,
.saude .prazo-cx { padding: var(--e-4) var(--e-5) var(--e-5); }
.saude .pilula { padding: var(--e-4) var(--e-5); }

/* O fio que divide: vertical entre irmãos da fileira, horizontal entre as
   duas fileiras. */
.saude .prazo-cx { border-left: 1px solid var(--fio); }
/* O fio entre as fileiras só existe quando há DUAS fileiras: no painel a
   peça carrega apenas o contexto, e um fio no topo dele desenharia a divisa
   de uma fileira que não está ali. */
.saude .noticias + .pilulas { border-top: 1px solid var(--fio); }
.saude .pilula + .pilula { border-left: 1px solid var(--fio); }

/* O fio acompanha a grade. Quando a fileira quebra, o que dividia de lado
   passa a dividir por cima — senão sobra um fio pendurado no meio do nada e
   falta o que separa as duas linhas novas. As larguras são as mesmas em que
   `.noticias` e `.pilulas` já quebram; a peça só segue a quebra delas. */
@media (max-width: 1240px) {
  .saude .pilula { padding: var(--e-3) var(--e-4); }
  .saude .eco,
  .saude .prazo-cx { padding: var(--e-4); }
}
@media (max-width: 1080px) {
  .saude .prazo-cx { border-left: 0; border-top: 1px solid var(--fio); }
}
@media (max-width: 1024px) {
  .saude .pilula:nth-child(2n+1) { border-left: 0; }
  .saude .pilula:nth-child(n+3) { border-top: 1px solid var(--fio); }
}
@media (max-width: 460px) {
  .saude .pilula + .pilula { border-left: 0; border-top: 1px solid var(--fio); }
}

/* ---------------------------------------------------------------- painéis */

/* O TETO DA AGENDA ERA ALTO DEMAIS, E A TABELA PAGAVA.

   O teto existe porque proporção pura dava largura demais à agenda. Só que
   400px continuava sendo demais: a agenda os tomava sempre, e a única coluna
   elástica da tabela — Solicitante — ficava com 101px. Descontados o avatar
   e o respiro da célula, sobravam 41px para o nome, e a tabela exibia "Ana
   ...", "Marc...", "Cláu..." em cinco linhas seguidas. Uma tabela que corta o
   nome no quarto caractere não é densa; é ilegível.

   344px é o que a agenda precisa para "RR-2026-00841 · 14 convocados" caber
   sem quebrar, e devolve 56px ao nome. */
.dupla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 344px);
  gap: var(--e-4);
  align-items: start;
}

/* Sem borda: o bloco já se separa do fundo pela elevação mínima. Card,
   container, filtro, botão e linha todos com contorno davam à tela um ar
   de wireframe. */
/* O painel deixou de ser cartão: é seção. Fio no lugar da sombra, e o
   conteúdo respira contra a página em vez de flutuar sobre ela. */
.painel {
  background: var(--carta);
  border-radius: var(--raio-cartao);
  box-shadow: var(--suave);
  padding: var(--e-4) 0 var(--e-2);
  overflow: hidden;
  /* Sem âncora, os textos de leitor de tela (`.oculto`, absolutos) se
     posicionam contra a página e escapam deste recorte, criando rolagem
     horizontal de alguns pixels que ninguém encontra olhando. */
  position: relative;
}
.painel-topo {
  display: flex; align-items: center; gap: var(--e-3);
  padding: 0 var(--e-5) var(--e-3);
}
.painel-topo h2 { font-size: var(--t-titulo); font-weight: var(--peso-titulo); }
.painel-dir { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); }

/* ----------------------------------------------------- filtros e crachás */

/* Três grupos, não uma fileira contínua de pílulas: busca, filtros, ações.
   22px entre grupos e 8px dentro de cada um. É o afastamento que diz o que
   pertence a quê, e sem ele os cinco controles competem entre si. */
.ferramentas {
  display: flex; align-items: center; gap: var(--e-5); flex-wrap: wrap;
  padding: 0 var(--e-5) var(--e-3);
}
/* ================================================ a seção como peça única
   UMA MOLDURA, E UM FIO POR DENTRO.

   O bloco era branco sobre o tonal da página, separado só por `--suave` —
   uma sombra de 1px a 4%. Contra o `--ceu` do fundo isso quase se enxerga,
   e por isso título, barra e tabela pareciam três coisas soltas no branco:
   não havia nada dizendo onde a seção começa e onde termina.

   Duas linhas resolvem, e são a mesma ideia da folha do pedido:

   · a MOLDURA em `--claro` fecha a seção — título, busca e tabela passam a
     estar visivelmente dentro da mesma caixa;
   · o FIO em `--fio`, mais leve que a moldura, divide a barra da tabela por
     dentro. Divisão, e não separação: hierarquia de peso é o que faz duas
     partes se lerem como uma peça em vez de duas.

   A elevação sai. É a regra dos fundamentos — o que separa é o fio, não a
   sombra —, e uma sombra sob uma moldura só borra a moldura. */
.painel-unido {
  border: 1px solid var(--claro);
  box-shadow: none;
}
/* O fio nasce da própria barra, então acompanha a largura do bloco inteiro
   em vez de parar no respiro lateral. */
.painel-unido .ferramentas {
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--fio);
}
/* O cabeçalho da tabela encosta no fio quando a barra o desenha: sem este
   respiro, "SESSÃO" fica colado na divisória. */
.painel-unido .rolo { padding-top: var(--e-3); }
/* Os crachás de filtro ficam ENTRE a barra e o fio, e não abaixo dele —
   eles são estado da barra, não da tabela. */
.painel-unido .ferramentas:has(+ .crachas) { border-bottom: 0; padding-bottom: var(--e-2); }
.painel-unido .crachas { padding-bottom: var(--e-3); border-bottom: 1px solid var(--fio); }

/* A BUSCA NÃO PRECISA DE MEIA TELA.

   `.busca-tela` cresce até 420px porque nas telas do Tribunal ela é o
   controle principal da seção. Em Convocações a agência chega com cinco
   linhas na frente — ela procura raramente, e filtra menos ainda. O campo
   passa a ser etiqueta em vez de convite: 280px fixos, e a folga vai para a
   tabela, que é o que a tela tem a dizer. */
.ferramentas-compacta .busca-tela { flex: 0 0 280px; max-width: none; }
/* Grupos mais juntos: com três controles curtos e "Exportar" no fim, 24px
   entre grupos abria um vão no meio da faixa. */
.ferramentas-compacta { gap: var(--e-3); }

.ferr-filtros { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.ferr-acoes { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); }

.crachas {
  display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
  padding: 0 var(--e-5) var(--e-3);
}
.cracha-de { color: var(--texto-2); font-weight: var(--peso-titulo); margin-right: 4px; }
.cracha {
  display: inline-flex; align-items: center; gap: var(--e-1);
  height: 32px; padding: 0 var(--e-1) 0 var(--e-3);
  border-radius: var(--raio-pilula);
  background: var(--indigo-luz);
  color: var(--indigo-vivo);
  font-size: var(--t-apoio); font-weight: var(--peso-titulo);
}
.cracha-x {
  width: 24px; height: 24px; border-radius: var(--raio-circulo);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--indigo-vivo);
}
.cracha-x:hover { background: var(--indigo-aro); }

/* ----------------------------------------------------------------- balões */

.balao {
  position: absolute; left: 0; z-index: 60;
  min-width: 236px;
  background: var(--carta);
  border-radius: var(--raio-controle);
  box-shadow: var(--funda);
  padding: var(--e-2);
  animation: brotar var(--dur-2) var(--mola) backwards;
}
.balao-dir { left: auto; right: 0; }
@keyframes brotar {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.balao-rot { padding: var(--e-2) var(--e-3) var(--e-1); }

.opc {
  display: flex; align-items: center; gap: var(--e-3);
  width: 100%; min-height: var(--alt-controle);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--raio-campo);
  font-size: var(--t-corpo); text-align: left;
  color: var(--texto);
  transition: background var(--dur-1) var(--mola);
}
.opc:hover { background: var(--neutro-luz); }
.opc svg { color: var(--texto-2); }
.opc-on { background: var(--indigo-luz); color: var(--indigo-vivo); font-weight: var(--peso-titulo); }
.opc-on:hover { background: var(--indigo-luz); }
.opc-on svg, .opc-ok { color: var(--indigo-vivo); }
.opc-conta { font-size: var(--t-mini); color: var(--texto-2); }
.opc-on .opc-conta { color: var(--indigo-vivo); }
.opc-ok { display: inline-flex; }

/* ----------------------------------------------------------------- tabela */

.rolo { overflow-x: auto; }

.lista {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 880px;
}
/* O cabeçalho perdeu o fundo tonal: o que o separa dos dados é um fio mais
   escuro e a caixa alta. Fundo cinza em faixa horizontal é a assinatura
   visual de tabela de sistema administrativo. */
.lista thead { background: var(--carta); }
.lista th {
  padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--claro);
  text-align: left;
  white-space: nowrap;
}
/* Caixa alta engordou "Valor homologado" e "Atualização" além da coluna.
   A distinção entre cabeçalho e dados fica no fundo tonal e no peso, que
   não custam largura. */
.lista th .fixo, .lista th .ord {
  font-weight: var(--peso-forte); color: var(--texto-2);
  font-size: var(--t-micro); letter-spacing: var(--entreletra-etq);
  text-transform: uppercase;
}
.lista th.dir, .lista td.dir { text-align: right; }
.lista th:first-child, .lista td:first-child { padding-left: var(--e-5); }
.lista th:last-child, .lista td:last-child { padding-right: var(--e-5); }

.fixo {
  display: inline-block; padding: var(--e-2) 0;
  font-size: var(--t-mini); font-weight: var(--peso-titulo);
  letter-spacing: .3px;
  color: var(--texto-2);
}

.ord {
  display: inline-flex; align-items: center; gap: var(--e-1);
  min-height: var(--alt-mini); padding: 0 var(--e-2);
  margin-left: -10px;
  border-radius: var(--raio-pilula);
  font-size: var(--t-mini); font-weight: var(--peso-titulo);
  letter-spacing: .3px;
  color: var(--texto-2);
}
th.dir .ord { margin-left: 0; margin-right: -10px; }
.ord:hover { background: var(--neutro-luz); color: var(--grafite); }
/* --texto-3 não entra aqui: o token diz "só ícone decorativo, nunca texto",
   e o glifo de ordenação é a única marca visível de que a coluna ordena. */
.seta { font-size: var(--t-glifo); color: var(--texto-2); }
[aria-sort="ascending"] .ord, [aria-sort="descending"] .ord { color: var(--indigo-vivo); }
[aria-sort="ascending"] .seta, [aria-sort="descending"] .seta { color: var(--indigo-vivo); }

.lista td {
  padding: var(--e-2) var(--e-3);
  height: var(--alt-linha);
  border-bottom: 1px solid var(--fio-2);
  border-bottom: 1px solid var(--neutro-luz);
  font-size: var(--t-apoio);
  vertical-align: middle;
}
.lista tbody tr {
  cursor: pointer;
  transition: background var(--dur-1) var(--mola);
}
.lista tbody tr:hover { background: var(--neutro-luz); }
.lista tbody tr:last-child td { border-bottom: 0; }

/* SLA descumprido: fio vermelho + o chip textual já diz o motivo */
/* Exceção chama atenção por ser exceção: faixa, e um fundo tão leve que
   só se percebe ao lado das linhas brancas vizinhas. */
tr.grave { background: var(--quente-veu); }
tr.grave:hover { background: var(--quente-veu-2); }
tr.grave td:first-child { box-shadow: inset 3px 0 0 var(--quente-cheio); }

.id {
  font-weight: var(--peso-forte); font-size: var(--t-apoio);
  color: var(--indigo-vivo); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.id:hover { text-decoration: underline; }

.par { font-weight: var(--peso-titulo); color: var(--grafite); white-space: nowrap; }
.dia { font-variant-numeric: tabular-nums; color: var(--texto-2); white-space: nowrap; }
.din {
  font-weight: var(--peso-titulo); color: var(--grafite);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.frouxo { color: var(--texto-2); }
.sem { color: var(--texto-2); font-weight: var(--peso-titulo); padding: var(--e-1) var(--e-1); border-radius: var(--raio-campo); }
.soma { font-size: var(--t-titulo); font-weight: var(--peso-forte); color: var(--vivo); font-variant-numeric: tabular-nums; }

/* Sem o overflow hidden, o nome comprido vazava por cima do chip de
   situação da coluna ao lado ("Juliana SáPropostas abertas"). */
.apara { max-width: 0; overflow: hidden; }
.apara-txt {
  display: block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.quem { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.quem > span:last-child { flex: 1; min-width: 0; }
.quem-bola {
  width: 28px; height: 28px; border-radius: var(--raio-circulo);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--indigo-luz); color: var(--indigo-vivo);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .02em;
}

.cel-id { white-space: nowrap; }
.cel-mais { display: inline-flex; position: relative; }

/* larguras */
/* Larguras deliberadas: data e chip nunca quebram; a folga vai ao nome. */
.c-id { width: 128px; } .c-par { width: 100px; } .c-dia { width: 104px; }
/* "Valor homologado" e "Atualização" não cabiam em 138 e 92: o rótulo
   estourava a coluna. A folga sai de Solicitante, que é a coluna elástica. */
/* 🔒 Nenhuma coluna fica sem largura: `c-que` era `auto` e, sob
   `table-layout: fixed`, engolia toda a sobra da tabela — 307px para um
   nome de pessoa, contra 104 do trecho. */
.c-que { width: 200px; } .c-sit { width: 226px; } .c-val { width: 104px; }
/* "ATUALIZAÇÃO" tem 11px em caixa alta mais a seta de ordenar: 96px
   cortavam o cabeçalho no meio da palavra. */
/* A coluna de ações passa a ter cabeçalho visível, e 44px não comportam
   "AÇÕES" mais a seta. Também é o que dá respiro entre "há 1 d" e o botão:
   antes o menu encostava na borda do bloco. */
.c-att { width: 108px; } .c-mais { width: 88px; }

/* ------------------------------------------------- tabela densa (agência)
   A tabela de Convocações é a tela, e não um bloco dela: a agência abre aqui
   para ver o que precisa responder e sai. Com o topo enxuto ela subiu; com a
   linha mais baixa, cabe a lista inteira sem rolar.

   54px de altura mínima e 8px de respiro davam 59px por linha para duas
   linhas de texto que ocupam 40. Quarenta e oito de piso e quatro de
   respiro chegam a 51 sem que nada encoste em nada.

   🔒 O contraste do secundário NÃO baixa junto. `.frouxo` usa `--texto-2`,
   que é o token mais fraco que ainda passa em AA sobre branco (5,9:1) —
   `--texto-3` daria 3,68:1 e o próprio `tokens.css` diz, na linha em que o
   declara, "só ícone decorativo, nunca texto". O que separa primário de
   secundário aqui é tamanho e peso, que não custam legibilidade. */
.lista-densa td { height: 48px; padding-top: var(--e-1); padding-bottom: var(--e-1); }
/* A data não quebra: era ela, sozinha, que fazia uma linha destoar das
   outras quatro. */
.lista-densa .quando span { white-space: nowrap; }

/* Chips de situação — tonais M3, texto sempre junto da cor */
.marca-viva {
  display: inline-flex; align-items: center; gap: var(--e-1);
  height: var(--alt-chip); padding: 0 var(--e-3);
  border-radius: var(--raio-campo);
  background: var(--neutro-luz);
  font-size: var(--t-mini); font-weight: var(--peso-titulo);
  color: var(--texto);
  white-space: nowrap;
}
.mv-ok { background: var(--vivo-luz); color: var(--vivo); }
.mv-morno { background: var(--morno-luz); color: var(--morno); }
.mv-quente { background: var(--quente-luz); color: var(--quente); }
.mv-indigo { background: var(--indigo-luz); color: var(--indigo-vivo); }

/* --------------------------------------------------------------- cartões
   (a mesma lista, no celular) */

.cartoes { display: none; flex-direction: column; gap: var(--e-2); padding: var(--e-1) var(--e-4) var(--e-3); }
.cartao {
  display: flex; align-items: center; gap: var(--e-3);
  background: var(--carta);
  border: 1px solid var(--claro);
  border-radius: var(--raio-cartao);
  padding: var(--e-3) var(--e-4);
  cursor: pointer;
  transition: background var(--dur-1) var(--mola);
}
.cartao:hover { background: var(--ceu); }
.cartao-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.cartao-lin { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.cartao-meta {
  display: flex; gap: var(--e-3); flex-wrap: wrap;
  font-size: var(--t-mini); color: var(--texto-2);
}

/* -------------------------------------------------------------- paginação */

.paginas {
  display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap;
  padding: var(--e-3) var(--e-5) var(--e-2);
  border-top: 1px solid var(--neutro-luz);
}
.paginas-info { font-size: var(--t-apoio); color: var(--texto-2); }
.paginas-nav { margin-left: auto; display: flex; align-items: center; gap: var(--e-1); }

.pg {
  min-width: var(--alt-mini); height: var(--alt-mini); padding: 0 var(--e-1);
  border-radius: var(--raio-circulo);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-apoio); font-weight: var(--peso-titulo);
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-1) var(--mola);
}
.pg:hover:not(:disabled) { background: var(--neutro-luz); color: var(--grafite); }
.pg[aria-current="true"] { background: var(--indigo-luz); color: var(--indigo-vivo); }
.pg:disabled { color: var(--claro); cursor: default; }
.pg-corte { color: var(--texto-2); padding: 0 var(--e-1); }

.escolha {
  height: var(--alt-mini); padding: 0 var(--e-6) 0 var(--e-3);
  border: 1px solid var(--claro); border-radius: var(--raio-pilula);
  background: var(--carta) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-size: var(--t-apoio); color: var(--grafite);
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.escolha:hover { background-color: var(--ceu); }

/* ------------------------------------------------------------------ hoje */

.hoje-dia { padding: var(--e-2) var(--e-5) var(--e-1); }
.hoje-lista { list-style: none; display: flex; flex-direction: column; padding: 0 var(--e-2); }

.hora {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--raio-controle);
  transition: background var(--dur-1) var(--mola);
}
.hora:hover { background: var(--ceu); }
.hora-viva { background: var(--indigo-luz); }
.hora-viva:hover { background: var(--indigo-luz); }

.hora-sel {
  min-width: 52px; height: 32px; padding: 0 var(--e-2);
  border-radius: var(--raio-pilula);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--carta); border: 1px solid var(--claro);
  font-size: var(--t-apoio); font-weight: var(--peso-forte);
  color: var(--grafite);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.hora-viva .hora-sel { background: var(--indigo); border-color: transparent; color: var(--carta); }

.hora-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.hora-tit {
  font-size: var(--t-corpo); font-weight: var(--peso-titulo);
  color: var(--grafite); text-decoration: none;
}
.hora-tit:hover { text-decoration: underline; }
/* RETICÊNCIAS ESCONDEM; DUAS LINHAS, NÃO.

   A linha era `nowrap` com reticências, e numa coluna de 344px isso
   entregava "RR-2026-00841 · 14…" — o protocolo inteiro e mais nada. O que
   estava sendo cortado é justamente o que a agenda tem a dizer: quantos
   foram convocados e quantas propostas entraram.

   Três linhas aqui, e duas nas irmãs: esta é a coluna mais estreita do
   painel e ainda divide a linha com o chip de estado, então a sessão em
   curso — a que tem convocados E propostas — sobra da segunda linha. O teto
   existe para o ritmo da lista não desandar; ele não serve se cortar
   justamente a linha mais cheia da agenda. */
.hora-meta {
  font-size: var(--t-mini); color: var(--texto-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}

.grupo {
  display: flex; align-items: baseline; gap: var(--e-2);
  padding: var(--e-4) var(--e-5) var(--e-2);
  border-top: 1px solid var(--neutro-luz);
  margin-top: var(--e-2);
}
.grupo-conta { font-size: var(--t-mini); font-weight: var(--peso-forte); }
.recado { padding: 0 var(--e-5) var(--e-3); font-size: var(--t-apoio); color: var(--texto-2); }

.prazo {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--raio-controle);
  transition: background var(--dur-1) var(--mola);
}
.prazo:hover { background: var(--ceu); }
.prazo-grave { background: var(--quente-luz); }
.prazo-grave:hover { background: var(--quente-luz); }

.prazo-quando {
  min-width: 60px;
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0;
}
.prazo-quando b { font-size: var(--t-mini); font-weight: 700; color: var(--grafite); white-space: nowrap; }
.prazo-quando span {
  font-size: var(--t-mini); color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.prazo-grave .prazo-quando b { color: var(--quente); }

.prazo-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.prazo-tit {
  font-size: var(--t-corpo); font-weight: var(--peso-titulo);
  color: var(--grafite); text-decoration: none;
}
.prazo-tit:hover { text-decoration: underline; }
/* Mesma razão da agenda: o que a reticência comia era o nome da agência,
   que é metade do assunto de um prazo descumprido. */
.prazo-meta {
  font-size: var(--t-mini); color: var(--texto-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ----------------------------------------------------------------- folha */

.veu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--veu);
  display: flex; align-items: center; justify-content: center;
  padding: var(--e-5);
  animation: velar var(--dur-2) var(--mola) backwards;
}
@keyframes velar { from { opacity: 0; } to { opacity: 1; } }

.folha {
  width: min(880px, 100%);
  max-height: min(720px, 100%);
  background: var(--carta);
  border-radius: var(--raio-cartao);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--funda);
  animation: subir var(--dur-3) var(--mola) backwards;
}
@keyframes subir {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.folha-topo {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-5) var(--e-5) var(--e-4);
}
.folha-topo h2 { font-size: var(--t-titulo); font-weight: var(--peso-titulo); }
.folha-sub { margin-top: var(--e-1); font-size: var(--t-apoio); color: var(--texto-2); }
.folha-corpo { overflow-y: auto; padding: 0 var(--e-5) var(--e-4); }
.folha-pe {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-5);
  border-top: 1px solid var(--neutro-luz);
  background: var(--ceu);
}

/* ---------------------------------------------------------------- gaveta */

.gaveta-veu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--veu);
  animation: velar var(--dur-2) var(--mola) backwards;
}
.gaveta {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 110;
  width: min(300px, 84vw);
  background: var(--carta);
  border-radius: 0 var(--raio-cartao) var(--raio-cartao) 0;
  padding: var(--e-5) var(--e-3);
  display: flex; flex-direction: column; gap: var(--e-4);
  box-shadow: var(--funda);
  animation: deslizar var(--dur-3) var(--mola) backwards;
}
@keyframes deslizar {
  from { transform: translateX(-24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.gaveta .selo-marca { padding: 0 var(--e-2); }
.gaveta .segmento {
  flex-direction: column; align-items: stretch;
  margin-left: 0; gap: var(--e-1);
  display: flex;
}
.gaveta .seg { height: 46px; border-radius: var(--raio-pilula); padding: 0 var(--e-4); }
.gaveta .seg-conta { margin-left: auto; }

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

.avisos {
  position: fixed; left: 24px; bottom: 24px; z-index: 150;
  display: flex; flex-direction: column;
  max-width: min(420px, calc(100vw - 48px));
}
.avisos > div { display: flex; flex-direction: column; gap: var(--e-2); }

/* Snackbar Google: pílula grafite */
.aviso {
  display: flex; align-items: flex-start; gap: var(--e-3);
  background: var(--grafite);
  color: var(--carta);
  border-radius: var(--raio-controle);
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4);
  box-shadow: var(--funda);
  animation: subir var(--dur-3) var(--mola) backwards;
}
.aviso-bola {
  width: 26px; height: 26px; border-radius: var(--raio-circulo);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--branco-16);
  color: var(--indigo-inv);
}
.aviso-ok .aviso-bola { color: var(--vivo-inv); }
.aviso-erro .aviso-bola { color: var(--quente-inv); }
.aviso-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.aviso-tit { font-size: var(--t-corpo); font-weight: var(--peso-titulo); }
.aviso-txt { font-size: var(--t-apoio); color: var(--branco-78); }
.aviso-x {
  width: 30px; height: 30px; border-radius: var(--raio-circulo);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--branco-78);
}
.aviso-x:hover { background: var(--branco-12); color: var(--carta); }
.aviso-x:focus-visible { outline-color: var(--indigo-inv); }

/* ------------------------------------------------------------------ dica */

.dica {
  position: absolute; z-index: 90;
  bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: var(--grafite); color: var(--carta);
  font-size: var(--t-mini); font-weight: 400; line-height: 1.45;
  letter-spacing: 0; text-transform: none;
  padding: var(--e-2) var(--e-3); border-radius: var(--raio-campo);
  white-space: normal; width: max-content; max-width: 250px;
  box-shadow: var(--suave);
  pointer-events: none;
  animation: velar var(--dur-1) var(--mola) backwards;
}

/* --------------------------------------------------------------- estados */

.estado {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: var(--e-7) var(--e-5) var(--e-6);
  gap: var(--e-1);
}
.estado-curto { padding: var(--e-5) var(--e-5) var(--e-5); }

/* "Ilustração" doodle: círculo tonal com aro tracejado, traço fino */
.estado-bola {
  width: 64px; height: 64px; border-radius: var(--raio-circulo);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--indigo-luz); color: var(--indigo-vivo);
  outline: 1.5px dashed var(--indigo-aro);
  outline-offset: 5px;
  margin-bottom: var(--e-3);
}
.estado-curto .estado-bola { width: 52px; height: 52px; }
.estado h3 { font-size: var(--t-realce); font-weight: var(--peso-titulo); }
.estado p { font-size: var(--t-apoio); color: var(--texto-2); max-width: 400px; }
.estado-acoes { display: flex; gap: var(--e-2); margin-top: var(--e-3); flex-wrap: wrap; justify-content: center; }

/* Esqueleto */
.osso {
  display: inline-block;
  background: linear-gradient(90deg, var(--neutro-2) 25%, var(--neutro-luz) 45%, var(--neutro-2) 65%);
  background-size: 220% 100%;
  border-radius: var(--raio-pilula);
  animation: cintilar 1.3s linear infinite;
}
@keyframes cintilar {
  from { background-position: 130% 0; }
  to { background-position: -90% 0; }
}

/* ------------------------------------------------------------- responsivo */

/* Os quatro indicadores são uma leitura só: quebrados em duas linhas, a
   pessoa compara de cima para baixo e de lado, e a comparação se perde.
   Então em vez de quebrar cedo, o cartão encolhe — some a faísca, que é
   apoio, e apertam-se respiro e corpo, que é o que sobra. A quebra em dois
   fica para quando quatro deixam de caber de verdade. */
@media (max-width: 1240px) {
  /* minmax(0, …): sem o mínimo zero, o conteúdo mínimo do cartão
     estoura o grid e a página rola na horizontal no celular */
  .pilula { padding: var(--e-3) var(--e-4); }
  .pilula .faisca { display: none; }
  .pilula-num { font-size: var(--t-numero); }
  .pilula-nota { font-size: var(--t-micro); }
}

/* A AGENDA DESCE QUANDO A TABELA DEIXA DE CABER, E NÃO ANTES.

   A quebra estava em 1240px, medida pela agenda: abaixo disso ela ficava
   estreita demais. Mas quem aperta primeiro é a tabela — oito colunas, sete
   de largura fixa somando 842px, e só Solicitante elástica. Para o nome
   caber inteiro a tabela precisa de ~1012px, o que com a agenda e as
   sarjetas dá 1420px de janela.

   Entre 1240 e 1420 a tela mantinha as duas colunas e espremia a tabela até
   o nome virar reticências — pior do que empilhar, porque some com o dado
   em vez de mover a peça. Empilhada, a tabela recebe a largura inteira e a
   agenda vai para baixo: a página fica mais longa e nada é cortado. */
@media (max-width: 1420px) {
  .dupla { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .pilulas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilula { padding: var(--e-3) var(--e-4); }
  .pilula:nth-child(2n+1) { border-left: 0; }
  .pilula:nth-child(2n) { border-left: 1px solid var(--fio); }
  .pilula:nth-child(n+3) { border-top: 1px solid var(--fio); }
  .pilula .faisca { display: block; }
  .pilula-num { font-size: var(--t-display); }
  .pilula-nota { font-size: var(--t-mini); }
}

@media (max-width: 1040px) {
  .vivo-grade { grid-template-columns: minmax(0, 1fr); }
  .busca { flex-basis: 220px; }
}

@media (max-width: 860px) {
  .segmento { display: none; }
  .gaveta .segmento { display: flex; }
  .so-fino { display: inline-flex; }
  .barra { gap: var(--e-1); padding: var(--e-2) var(--e-3); }
  .palco { padding: var(--e-4) var(--e-4) 64px; }
}

@media (max-width: 720px) {
  .rolo, .paginas-info { display: none; }
  .cartoes { display: flex; }
  .paginas { justify-content: center; }
  .paginas-nav { margin-left: 0; }
  .vivo { padding: var(--e-4) var(--e-4) var(--e-4); border-radius: var(--raio-cartao); }
  .vivo-topo { flex-direction: column-reverse; align-items: center; text-align: center; gap: var(--e-3); }
  .vivo-topo > div:first-child { display: flex; flex-direction: column; align-items: center; }
  .vivo-nums { gap: var(--e-4); }
  .titulo-pag h1 { font-size: var(--t-numero); }
  .avisos { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

@media (max-width: 460px) {
  .pilulas { grid-template-columns: 1fr; }
  .pilula { border-left: 0; }
  .pilula:nth-child(n+2) { border-top: 1px solid var(--fio); }
  .busca { width: 150px; }
  .busca input { padding-right: var(--e-6); }
  .selo-nome { display: none; }
  .vivo-rota { font-size: var(--t-titulo); }
}

/* --------------------------------------------------------- menos movimento */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Sem movimento, a sequência inteira aterrissa junto: zerar a duração
     sem zerar o atraso deixaria as linhas aparecendo em degraus mudos. */
  *, *::before, *::after { animation-delay: 0s !important; }
  .pisca-luz { animation: none; }
  .vivo-trilho i { transition: none; }
  .osso { animation: none; background: var(--neutro-2); }
  .anel-frente { transition: none; }
}

/* ==========================================================================
   TELA 03 · NOVA COTAÇÃO
   Formulário em cinco blocos, com trilho fixo à direita carregando o resumo
   derivado (F-7) e a lista do que ainda falta para convocar.
   ========================================================================== */

.form-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 372px);
  gap: var(--e-5);
  align-items: start;
}

.blocos { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }

/* --- bloco ---------------------------------------------------------------- */

.bloco {
  background: var(--carta);
  border-radius: var(--raio-cartao);
  box-shadow: var(--suave);
  /* Sem overflow:hidden — ele recortava calendário, seletor de hora e lista
     de seleção abertos perto do rodapé do bloco. Quem precisa de canto
     arredondado aqui é o próprio bloco, e o raio já resolve. */
}
.bloco-topo {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-4) var(--e-5) 0;
}
.bloco-n {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-circulo);
  background: var(--indigo-luz); color: var(--indigo-vivo);
  font-size: var(--t-mini); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bloco-tit { flex: 1; min-width: 0; }
.bloco-tit h2 { font-size: var(--t-realce); font-weight: var(--peso-forte); letter-spacing: -.2px; }
.bloco-tit p { margin: 3px 0 0; font-size: var(--t-apoio); color: var(--texto-2); }
.bloco-corpo { padding: var(--e-4) var(--e-5) var(--e-5); }

/* --- campos --------------------------------------------------------------- */

.linha-campos {
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.linha-campos.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.linha-campos + .linha-campos { margin-top: var(--e-3); }

.campo { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.campo-largo { grid-column: 1 / -1; }

/* A ficha da Receita, no credenciamento: campos travados, em fundo cinza,
   para ler como dado que veio de fora e não como lacuna a preencher. A
   grade de quatro acompanha as metades das linhas de cima. */
.linha-campos.rf-quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rf-dois { grid-column: span 2; }
/* Texto em cinza e cursor de bloqueio: parecendo campo comum, a pessoa
   tentava clicar e digitar. */
.receita .entrada[readonly] {
  background: var(--neutro-luz); border-color: var(--claro);
  color: var(--texto-2); cursor: not-allowed;
}
.receita-fonte .receita-info {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; border-radius: var(--raio-circulo); background: none;
  color: var(--indigo); cursor: help;
}
.receita-fonte .receita-info svg { color: var(--indigo); }
.receita-fonte .receita-info:hover { background: var(--indigo-luz); }
.receita-fonte .receita-info:focus-visible { outline: none; box-shadow: var(--foco-halo); }
.receita .entrada[readonly]:hover { border-color: var(--claro); }
.receita-fonte {
  display: flex; align-items: center; gap: var(--e-2);
  min-height: 20px; margin-top: var(--e-3);
  font-size: var(--t-apoio); color: var(--texto-2);
}
.receita-fonte svg { color: var(--morno); }
/* O que a agência escolhe fica abaixo da ficha, separado por um fio: acima
   é o que veio da Receita, abaixo é o que é dela. */
.rf-modalidade {
  margin-top: var(--e-5); padding-top: var(--e-4);
  border-top: 1px solid var(--claro);
}
.receita-fonte b { color: var(--grafite); font-weight: var(--peso-forte); }
.receita-fonte .rp-giro {
  width: 14px; height: 14px; flex: 0 0 auto; border-radius: var(--raio-circulo);
  border: 2px solid var(--indigo-aro); border-top-color: var(--indigo);
  animation: rp-gira .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .receita-fonte .rp-giro { animation: none; } }

/* O rótulo pode passar de uma linha, e o asterisco de obrigatório acompanha a
   última: alinhado ao centro e sem permissão de quebra, um rótulo de duas
   linhas subia por cima da própria dica. */
.campo > label, .grupo-rot {
  font-size: var(--t-mini); font-weight: var(--peso-forte); color: var(--grafite);
  display: flex; align-items: baseline; gap: var(--e-1); flex-wrap: wrap;
}
.campo-obr { color: var(--quente); font-weight: 700; }
.campo-dica { font-size: var(--t-mini); color: var(--texto-2); }

.entrada {
  width: 100%; min-height: var(--alt-controle);
  padding: 0 var(--e-3);
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-campo);
  background: var(--carta);
  font: inherit; font-size: var(--t-corpo); color: var(--grafite);
  transition: border-color var(--dur-1) var(--mola), box-shadow var(--dur-1) var(--mola);
}
textarea.entrada { padding: var(--e-2) var(--e-3); min-height: 76px; resize: vertical; line-height: 1.5; }
.entrada::placeholder { color: var(--texto-2); }
.entrada:hover { border-color: var(--texto-2); }
.entrada:focus-visible {
  outline: none; border-color: var(--indigo);
  box-shadow: var(--foco-halo);
}
.entrada[aria-invalid="true"] { border-color: var(--quente); }
.entrada[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px var(--quente-luz); }
.entrada:disabled { background: var(--neutro-luz); color: var(--texto-2); cursor: not-allowed; }

.erro-campo {
  display: flex; align-items: center; gap: var(--e-1);
  font-size: var(--t-mini); font-weight: var(--peso-titulo); color: var(--quente);
}

/* --- escolhas em pílula --------------------------------------------------- */

.opcoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.opcao-pil {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--alt-controle); padding: 0 var(--e-3);
  border: 1px solid var(--claro);
  border-radius: var(--raio-pilula);
  background: var(--carta);
  font-size: var(--t-apoio); font-weight: var(--peso-titulo); color: var(--texto);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--mola), background var(--dur-1) var(--mola), color var(--dur-1) var(--mola);
}
.opcao-pil:hover { border-color: var(--texto-3); }
.opcao-pil input { position: absolute; opacity: 0; pointer-events: none; }
.opcao-pil:has(input:checked) {
  border-color: var(--indigo); background: var(--indigo-luz); color: var(--indigo-vivo); font-weight: var(--peso-forte);
}
.opcao-pil:has(input:focus-visible) { box-shadow: var(--foco-halo); }
.opcao-marca {
  width: 15px; height: 15px; border-radius: var(--raio-circulo);
  border: 1.5px solid var(--texto-3);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.opcao-pil:has(input:checked) .opcao-marca { border-color: var(--indigo); background: var(--indigo); color: var(--carta); }

/* --- caixa de marcar ------------------------------------------------------ */

.marcar {
  display: flex; align-items: flex-start; gap: var(--e-2);
  padding: var(--e-3) var(--e-3);
  border: 1px solid var(--claro);
  border-radius: var(--raio-controle);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--mola), background var(--dur-1) var(--mola);
}
.marcar:hover { border-color: var(--texto-3); }
/* Marcado é seleção, e seleção é azul, como toda ação do sistema. */
.marcar:has(input:checked) { border-color: var(--indigo); background: var(--indigo-luz); }
.marcar input { position: absolute; opacity: 0; pointer-events: none; }
.marcar-quad {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 0;
  border: 1.5px solid var(--texto-3); border-radius: var(--raio-campo);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
}
.marcar:has(input:checked) .marcar-quad { background: var(--indigo); border-color: var(--indigo); color: var(--carta); }
.marcar:has(input:focus-visible) .marcar-quad { box-shadow: var(--foco-halo); }

/* Âmbar só onde marcar a caixa é abrir exceção: dispensar o processo
   administrativo e declarar viagem inadiável mudam o rito e ficam
   expostos em relatório. Aí a cor é a advertência, não a decoração. */
.marcar-excecao:has(input:checked) { border-color: var(--morno); background: var(--morno-luz); }
.marcar-excecao:has(input:checked) .marcar-quad { background: var(--morno); border-color: var(--morno); }
.marcar-excecao:has(input:focus-visible) .marcar-quad { box-shadow: 0 0 0 3px var(--morno-luz); }
.marcar-txt { font-size: var(--t-apoio); font-weight: var(--peso-titulo); color: var(--grafite); }
.marcar-sub { display: block; font-size: var(--t-mini); font-weight: 400; color: var(--texto-2); }

/* --- avisos dentro do formulário ------------------------------------------ */

/* Regra que o sistema garante, não escolha do usuário. Sem interruptor. */
.nota {
  display: flex; align-items: flex-start; gap: var(--e-2);
  padding: var(--e-3) var(--e-3);
  border-radius: var(--raio-controle);
  background: var(--neutro-luz);
  font-size: var(--t-apoio); color: var(--texto);
  line-height: 1.5;
}
.nota-icone { flex-shrink: 0; margin-top: 0; color: var(--texto-2); }
/* Aviso de uma linha, com a ação no fim dela em vez de emendada no texto.
   O botão dentro do parágrafo quebrava junto com a frase e ficava onde a
   linha terminasse; alinhado à direita, ele está sempre no mesmo lugar. */
.nota-linha { align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-3); }
.nota-linha .bt { white-space: nowrap; }
.nota-selo { background: var(--indigo-luz); color: var(--indigo-vivo); }
.nota-selo .nota-icone { color: var(--indigo); }
.nota b { font-weight: var(--peso-forte); }

/* --- passageiros ---------------------------------------------------------- */

.pax-lista { display: flex; flex-direction: column; gap: var(--e-2); }

.pax {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-3);
  border: 1px solid var(--claro);
  border-radius: var(--raio-controle);
  background: var(--carta);
}
.pax-bola {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--raio-circulo);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--indigo-luz); color: var(--indigo-vivo);
  font-size: var(--t-micro); font-weight: 700;
}
.pax-corpo { flex: 1; min-width: 0; }
.pax-nome { font-size: var(--t-apoio); font-weight: var(--peso-forte); color: var(--grafite); }
.pax-meta {
  display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-1);
  font-size: var(--t-mini); color: var(--texto-2);
}
/* Dado pessoal nasce mascarado (NF-01) — revelar é ato registrado */
.pax-mask { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
/* Ordem de Serviço, J-2: o dado revelado.
   Contraparte de `.pax-mask` — o valor em claro só existe depois do ato
   registrado, e pesa mais que a máscara de propósito: quem está lendo um
   CPF de verdade precisa perceber que está. */
/* Campo de dinheiro: o R$ fica dentro do campo, fixo, para o valor não
   precisar carregar o símbolo e o alinhamento não dançar a cada dígito. */
/* Senha com o olho dentro do campo, à direita. O botão fica fora do fluxo
   para o campo manter a mesma largura dos vizinhos. */
.entrada-senha { position: relative; display: block; }
.entrada-senha .entrada { padding-right: 44px; }
.entrada-senha-olho {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--raio-campo);
  background: transparent; color: var(--texto-2); cursor: pointer;
  transition: background var(--dur-1) var(--mola), color var(--dur-1) var(--mola);
}
.entrada-senha-olho:hover { background: var(--neutro-luz); color: var(--grafite); }
.entrada-senha-olho:focus-visible { outline: none; box-shadow: var(--foco-halo); color: var(--grafite); }
.entrada-senha-olho[aria-pressed="true"] { color: var(--indigo); }

.entrada-moeda { position: relative; display: block; }
.entrada-moeda .entrada { padding-left: var(--e-6); }
.entrada-prefixo {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: var(--t-apoio); font-weight: var(--peso-forte); color: var(--texto-2);
  pointer-events: none;
}

.pax-claro {
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  color: var(--grafite); font-weight: var(--peso-forte);
}
.pax-acoes { display: flex; gap: var(--e-1); flex-shrink: 0; }


.pax-form {
  padding: var(--e-4);
  border: 1px solid var(--indigo-aro);
  border-radius: var(--raio-controle);
  background: var(--indigo-luz);
  display: flex; flex-direction: column; gap: var(--e-3);
}
.pax-form-pe { display: flex; gap: var(--e-2); flex-wrap: wrap; }

/* --- régua ---------------------------------------------------------------- */

.anexo {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3);
  border: 1px dashed var(--texto-3);
  border-radius: var(--raio-controle);
  background: var(--ceu);
}
.anexo-ok { border-style: solid; border-color: var(--vivo-cheio); background: var(--vivo-luz); }
.anexo-icone {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--raio-campo);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--carta); color: var(--texto-2);
  box-shadow: var(--suave);
}
.anexo-ok .anexo-icone { color: var(--vivo); }
.anexo-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.anexo-nome { font-size: var(--t-apoio); font-weight: var(--peso-forte); color: var(--grafite); }
.anexo-sub { font-size: var(--t-mini); color: var(--texto-2); }

.carimbo {
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: var(--e-1) var(--e-2); border-radius: var(--raio-pilula);
  background: var(--neutro-luz); color: var(--texto-2);
  font-size: var(--t-mini); font-weight: var(--peso-titulo);
  font-variant-numeric: tabular-nums;
}

/* --- credenciados --------------------------------------------------------- */

.cred-lista { display: flex; flex-direction: column; gap: var(--e-1); }
.cred {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--raio-campo);
  background: var(--ceu);
  font-size: var(--t-apoio);
}
.cred-fora { opacity: .72; }
.cred-nome { flex: 1; min-width: 0; color: var(--grafite); font-weight: var(--peso-titulo); }
.cred-ponto {
  width: 8px; height: 8px; border-radius: var(--raio-circulo); flex-shrink: 0;
  background: var(--vivo);
}
.cred-fora .cred-ponto { background: var(--texto-3); }

/* --- trilho lateral ------------------------------------------------------- */

.trilho { position: sticky; top: 84px; display: flex; flex-direction: column; gap: var(--e-4); }

.resumo {
  background: var(--carta);
  border-radius: var(--raio-cartao);
  box-shadow: var(--suave);
  overflow: hidden;
}
.resumo-topo {
  padding: var(--e-4) var(--e-4) var(--e-3);
  border-bottom: 1px solid var(--neutro-luz);
}
.resumo-topo h2 { font-size: var(--t-realce); font-weight: var(--peso-forte); }
.resumo-topo p { margin: 3px 0 0; font-size: var(--t-mini); color: var(--texto-2); }

/* Texto derivado dos campos acima (F-7) — nunca fixo */
.passos { margin: 0; padding: var(--e-4) var(--e-4); list-style: none; display: flex; flex-direction: column; gap: var(--e-3); }
.passo { display: flex; gap: var(--e-3); position: relative; }
.passo:not(:last-child)::before {
  content: ""; position: absolute; left: 11px; top: 26px; bottom: -14px;
  width: 1.5px; background: var(--neutro-luz);
}
.passo-bola {
  width: 23px; height: 23px; flex-shrink: 0; border-radius: var(--raio-circulo);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--indigo-luz); color: var(--indigo-vivo);
  font-size: var(--t-micro); font-weight: 700; z-index: 1;
  font-variant-numeric: tabular-nums;
}
.passo-txt { font-size: var(--t-apoio); color: var(--texto); line-height: 1.5; padding-top: 0; }
.passo-txt b { color: var(--grafite); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }

.falta {
  padding: var(--e-4) var(--e-4);
  border-top: 1px solid var(--neutro-luz);
  background: var(--morno-luz);
}
.falta-tit {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-mini); font-weight: var(--peso-forte); color: var(--morno);
  margin-bottom: var(--e-2);
}
.falta-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--e-2); }
.falta-item {
  display: flex; align-items: flex-start; gap: var(--e-2);
  font-size: var(--t-apoio); color: var(--texto);
}
.falta-item svg { flex-shrink: 0; margin-top: 0; color: var(--morno); }

.pronto-cx {
  padding: var(--e-4) var(--e-4);
  border-top: 1px solid var(--neutro-luz);
  background: var(--vivo-luz);
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-apoio); color: var(--vivo);
  font-weight: var(--peso-titulo);
}

.acoes-form {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-4) var(--e-4);
  border-top: 1px solid var(--neutro-luz);
}
.acoes-form .bt { width: 100%; }

/* --- confirmação ---------------------------------------------------------- */

.enviado { text-align: center; padding: var(--e-7) var(--e-5); }
.enviado-bola {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: var(--raio-circulo);
  display: flex; align-items: center; justify-content: center;
  background: var(--vivo-luz); color: var(--vivo);
}
.enviado h2 { font-size: var(--t-numero); margin-bottom: var(--e-2); }
.enviado p { font-size: var(--t-corpo); color: var(--texto-2); max-width: 460px; margin: 0 auto; }
.enviado-proto {
  display: inline-flex; align-items: center; gap: var(--e-2);
  margin: 20px 0 24px; padding: var(--e-2) var(--e-4);
  border-radius: var(--raio-pilula); background: var(--neutro-luz);
  font-size: var(--t-realce); font-weight: var(--peso-forte); color: var(--grafite);
  font-variant-numeric: tabular-nums;
}
.enviado-acoes { display: flex; gap: var(--e-2); justify-content: center; flex-wrap: wrap; }

/* --- volta ---------------------------------------------------------------- */

.migalha {
  display: inline-flex; align-items: center; gap: var(--e-1);
  margin-bottom: var(--e-1);
  padding: var(--e-1) var(--e-2) var(--e-1) var(--e-1); border-radius: var(--raio-pilula);
  background: transparent; border: 0;
  font-size: var(--t-apoio); font-weight: var(--peso-titulo); color: var(--texto-2);
  cursor: pointer;
}
.migalha:hover { background: var(--neutro-luz); color: var(--grafite); }

@media (max-width: 1120px) {
  .form-grade { grid-template-columns: minmax(0, 1fr); }
  .trilho { position: static; }
}
@media (max-width: 620px) {
  .linha-campos, .linha-campos.duas, .linha-campos.rf-quatro { grid-template-columns: minmax(0, 1fr); }
  .rf-dois { grid-column: auto; }
  .bloco-topo { padding: var(--e-4) var(--e-4) 0; }
  .bloco-corpo { padding: var(--e-3) var(--e-4) var(--e-4); }
}

/* --- correções pós-verificação ------------------------------------------- */


/* Campos de uma mesma linha alinham pelo topo do rótulo, e as dicas ficam
   abaixo do campo, sem empurrar nada. */
.linha-campos { align-items: start; }
.campo-dica { margin-top: 0; line-height: 1.45; }

/* --- campo com cadastro rápido -------------------------------------------- */

/* O campo divide a linha com um botão quadrado do mesmo pé de altura. */
.campo-acao { display: flex; align-items: flex-start; gap: var(--e-2); }
.campo-acao > *:first-child { flex: 1; min-width: 0; }


.cadastro {
  margin-top: var(--e-2);
  padding: var(--e-3);
  border: 1px solid var(--indigo-aro);
  border-radius: var(--raio-controle);
  background: var(--indigo-luz);
  display: flex; flex-direction: column; gap: var(--e-3);
}
.cadastro-tit {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-apoio); font-weight: var(--peso-forte); color: var(--indigo-vivo);
}
.cadastro-pe { display: flex; gap: var(--e-2); flex-wrap: wrap; }

/* --- select com seta própria ---------------------------------------------- */

/* A seta nativa do Chrome encosta na borda e some contra o arredondamento.
   Desenhamos a nossa, com folga de 14px e a mesma forma do ícone do app.
   A cor vai literal porque não se usa var() dentro de url(). */
select.entrada {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--e-6);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  cursor: pointer;
}
select.entrada:disabled {
  cursor: not-allowed;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2380868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
select.entrada::-ms-expand { display: none; }

/* --- título da página ------------------------------------------------------ */

/* Um padrão só para as duas telas: título e linha de contexto empilhados num
   bloco, e a ação primária (quando existe) empurrada para a direita. */
.titulo-txt {
  display: flex; flex-direction: column; gap: 0;
  min-width: 0;
}
.titulo-txt p { max-width: 68ch; }

/* --- campo de data --------------------------------------------------------- */

.data-campo { position: relative; }
.data-campo .entrada { padding-right: var(--e-7); }

.data-bt {
  position: absolute; right: 5px; top: 5px;
  width: 32px; height: 32px; border-radius: var(--raio-campo);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--texto-2);
  transition: background var(--dur-1) var(--mola), color var(--dur-1) var(--mola);
}
.data-bt:hover { background: var(--neutro-luz); color: var(--grafite); }
.data-bt[aria-expanded="true"] { background: var(--indigo-luz); color: var(--indigo-vivo); }

.calendario {
  position: absolute; z-index: 120; top: calc(100% + 6px); left: 0;
  width: 296px; padding: var(--e-3);
  background: var(--carta);
  border-radius: var(--raio-controle);
  box-shadow: var(--funda);
}
/* Perto da borda direita o calendário ancora pelo outro lado */
.calendario.a-direita { left: auto; right: 0; }

.cal-topo {
  display: flex; align-items: center; gap: var(--e-1);
  margin-bottom: var(--e-2);
}
.cal-seletores { display: flex; gap: var(--e-1); flex: 1; min-width: 0; }
.cal-sel {
  flex: 1; min-width: 0; height: 34px;
  padding: 0 var(--e-5) 0 var(--e-2);
  border: 0; border-radius: var(--raio-campo);
  background: var(--neutro-luz); color: var(--grafite);
  font-size: var(--t-apoio); font-weight: var(--peso-titulo); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; background-size: 16px;
}
.cal-sel:hover { background-color: var(--neutro-hover); }

.cal-passo {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--raio-circulo);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--texto-2);
}
.cal-passo:hover { background: var(--neutro-luz); color: var(--grafite); }
.cal-passo:disabled { color: var(--texto-3); cursor: not-allowed; background: none; }

.cal-semana {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 0;
}
.cal-semana span {
  text-align: center; font-size: var(--t-micro); font-weight: var(--peso-forte);
  color: var(--texto-2); padding: var(--e-1) 0;
}

.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; }

.cal-dia {
  height: 36px; border-radius: var(--raio-circulo);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-apoio); font-weight: var(--peso-titulo); color: var(--texto);
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-1) var(--mola), color var(--dur-1) var(--mola);
}
.cal-dia:hover:not(:disabled) { background: var(--neutro-luz); }
.cal-dia-fora { color: var(--texto-2); }
.cal-dia:disabled { color: var(--claro-2); cursor: not-allowed; }
/* Hoje: aro. Selecionado: preenchimento. Nunca só cor — há também o aro. */
.cal-dia-hoje { box-shadow: inset 0 0 0 1.5px var(--indigo-aro); font-weight: 700; }
.cal-dia-sel {
  background: var(--indigo); color: var(--carta); font-weight: 700;
  box-shadow: none;
}
.cal-dia-sel:hover:not(:disabled) { background: var(--indigo-vivo); }

.cal-pe {
  display: flex; align-items: center; gap: var(--e-2);
  margin-top: var(--e-2); padding-top: var(--e-2);
  border-top: 1px solid var(--neutro-luz);
}
.cal-pe .bt-nu { margin-left: auto; }

/* --- seleção, hora e número: componentes próprios -------------------------- */

/* Substitui o <select> nativo, cuja lista o navegador desenha com o tema do
   sistema operacional e que não aceita estilo nenhum. */
.sel-campo { position: relative; }

.sel-bt {
  width: 100%; min-height: var(--alt-controle);
  display: flex; align-items: center; gap: var(--e-2);
  padding: 0 var(--e-3);
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-campo);
  background: var(--carta);
  font-size: var(--t-corpo); color: var(--grafite);
  text-align: left;
  transition: border-color var(--dur-1) var(--mola), box-shadow var(--dur-1) var(--mola);
}
.sel-bt:hover { border-color: var(--texto-2); }
.sel-bt[aria-expanded="true"] {
  border-color: var(--indigo);
  box-shadow: var(--foco-halo);
}
.sel-vazio { color: var(--texto-2); }
.sel-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-seta { color: var(--texto-2); flex-shrink: 0; transition: transform var(--dur-1) var(--mola); }
.sel-bt[aria-expanded="true"] .sel-seta { transform: rotate(180deg); }

.sel-lista {
  position: absolute; z-index: 130; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: var(--e-1); list-style: none;
  max-height: 268px; overflow-y: auto;
  background: var(--carta);
  border-radius: var(--raio-controle);
  box-shadow: var(--funda);
}
.sel-opc {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-2); border-radius: var(--raio-campo);
  font-size: var(--t-corpo); color: var(--texto); cursor: pointer;
}
.sel-opc:hover, .sel-opc-foco { background: var(--neutro-luz); }
.sel-opc[aria-selected="true"] { background: var(--indigo-luz); color: var(--indigo-vivo); font-weight: var(--peso-forte); }
.sel-marca { margin-left: auto; flex-shrink: 0; color: var(--indigo); }
/* Ícone opcional da opção (ex.: o sentido da viagem). Só aparece na lista:
   no gatilho fica o texto, que é o que se confere de relance. */
.sel-ic { display: inline-flex; flex-shrink: 0; color: var(--texto-2); }
.sel-opc[aria-selected="true"] .sel-ic { color: currentColor; }

/* Hora: duas colunas, 24h, sem AM/PM */
.hora-campo { position: relative; }
.hora-campo .entrada { padding-right: var(--e-7); }
.hora-bt {
  position: absolute; right: 5px; top: 5px;
  width: 32px; height: 32px; border-radius: var(--raio-campo);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--texto-2);
  transition: background var(--dur-1) var(--mola), color var(--dur-1) var(--mola);
}
.hora-bt:hover { background: var(--neutro-luz); color: var(--grafite); }
.hora-bt[aria-expanded="true"] { background: var(--indigo-luz); color: var(--indigo-vivo); }

.hora-caixa {
  position: absolute; z-index: 130; top: calc(100% + 6px); left: 0;
  width: 184px; padding: var(--e-2);
  background: var(--carta); border-radius: var(--raio-controle);
  box-shadow: var(--funda);
  display: flex; gap: var(--e-1);
}
.hora-caixa.a-direita { left: auto; right: 0; }
.hora-coluna { flex: 1; min-width: 0; }
.hora-rot {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texto-2);
  text-align: center; padding: 0 0 var(--e-1);
}
.hora-rolo {
  margin: 0; padding: 0; list-style: none;
  max-height: 196px; overflow-y: auto; scrollbar-width: thin;
}
.hora-opc {
  width: 100%; padding: var(--e-2) 0; border-radius: var(--raio-campo);
  font-size: var(--t-corpo); font-weight: var(--peso-titulo); color: var(--texto);
  font-variant-numeric: tabular-nums; text-align: center; display: block;
}
.hora-opc:hover { background: var(--neutro-luz); }
.hora-opc[aria-selected="true"] { background: var(--indigo); color: var(--carta); font-weight: 700; }

/* Número: passo próprio, sem a seta nativa que muda de forma em cada navegador */
/* Uma caixa só: os passos e a unidade vivem dentro do campo, não soltos ao
   lado dele. O foco acende a caixa inteira. */
.num-campo {
  display: flex; align-items: center;
  height: var(--alt-controle);
  border: 1px solid var(--claro);
  border-radius: var(--raio-campo);
  background: var(--carta);
  transition: border-color var(--dur-1) var(--mola), box-shadow var(--dur-1) var(--mola);
}
.num-campo:hover { border-color: var(--texto-3); }
.num-campo:focus-within { border-color: var(--indigo); box-shadow: var(--foco-halo); }

.num-meio {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; justify-content: center; gap: var(--e-1);
}
.num-campo .entrada {
  width: 100%; max-width: 62px; height: auto;
  padding: 0; border: 0; border-radius: 0; background: none;
  text-align: right; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.num-campo .entrada:focus { box-shadow: none; border: 0; }
.num-campo .entrada::-webkit-outer-spin-button,
.num-campo .entrada::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.num-passo {
  width: var(--alt-controle); height: var(--alt-controle); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--raio-campo);
  background: transparent; color: var(--texto-2);
  transition: background var(--dur-1) var(--mola), color var(--dur-1) var(--mola);
}
.num-passo:hover:not(:disabled) { background: var(--neutro-luz); color: var(--grafite); }
.num-passo:disabled { color: var(--claro-2); cursor: not-allowed; }

.num-sufixo { font-size: var(--t-apoio); color: var(--texto-2); white-space: nowrap; }

/* Resumo do que as três regras produzem juntas, no espaço que sobrava */
.regra-resumo {
  margin-top: var(--e-4);
  display: flex; align-items: flex-start; gap: var(--e-2);
  padding: var(--e-3) var(--e-3);
  border-radius: var(--raio-controle);
  background: var(--indigo-luz);
  font-size: var(--t-apoio); color: var(--indigo-vivo);
}
.regra-resumo b { font-weight: 700; }
.regra-resumo svg { flex-shrink: 0; margin-top: 0; }

/* Seleção compacta, para dentro de barras e rodapés */
.paginas .sel-bt { min-height: var(--alt-mini); padding: 0 var(--e-2); font-size: var(--t-apoio); }

/* Menu que não cabe abaixo do campo sobe */
.sel-lista.para-cima,
.hora-caixa.para-cima,
.calendario.para-cima { top: auto; bottom: calc(100% + 6px); }

/* ==========================================================================
   COTAÇÃO · SESSÃO DE DISPUTA (spec 01)

   A tela tem um centro de gravidade: o tempo. Enquanto a janela corre, o
   cronômetro e os cofres selados mandam; quando ela fecha, o ranque assume
   e o cronômetro vira coadjuvante. O trilho da direita não muda de lugar
   nessa virada, porque é onde o gestor procura a régua e as ações.
   ========================================================================== */

/* --- selo de estado ------------------------------------------------------- */

.selo-est {
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: var(--e-1) var(--e-2) var(--e-1) var(--e-2);
  border-radius: var(--raio-pilula);
  font-size: var(--t-mini); font-weight: var(--peso-forte); line-height: 1.6;
  white-space: nowrap;
  background: var(--neutro-luz); color: var(--texto-2);
}
.selo-info  { background: var(--indigo-luz); color: var(--indigo-vivo); }
.selo-ok    { background: var(--vivo-luz);   color: var(--vivo); }
.selo-aviso { background: var(--morno-luz);  color: var(--morno); }
.selo-erro  { background: var(--quente-luz); color: var(--quente); }

.titulo-pag h1 { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
/* Duas ações no título não cabem lado a lado no celular: sem quebrar, a
   segunda empurra a página 2px para fora e cria rolagem horizontal. */
.titulo-acoes { display: flex; gap: var(--e-2); margin-left: auto; flex-shrink: 0; flex-wrap: wrap; }

/* --- faixa de metadados (D-6) --------------------------------------------
   Dois grupos, e a separação é deliberada: em cima quem pediu e quem viaja;
   embaixo, com fundo, as condições que tornam as propostas comparáveis. */

/* BRANCA SOBRE BRANCA, SEM BORDA, COM SOMBRA DE 4%.

   A faixa se separava do fundo por `--suave` — uma sombra de 1px a 4% de
   opacidade. Dentro de uma folha, que também é branca, isso é literalmente
   nada: o cartão existia no DOM e não existia na tela, e os campos flutuavam
   soltos sem que nada dissesse onde um grupo começa e o outro acaba.

   O `DESIGN.md` já mandava o contrário, na seção de fundamentos: "o que
   separa é o fio, não a sombra; `--funda` é só para o que flutua de verdade".
   A faixa não flutua — ela é superfície de página. Fio de 1px, elevação
   nenhuma. Sobre a folha branca o fio aparece; sobre o tonal da página, o
   branco do fundo continua fazendo o contraste que sempre fez. */
/* `--claro`, e não `--fio`: dentro da folha o cartão é branco sobre branco, e
   #e9ecef sobre #fff dá 1,15:1 — um fio que existe no arquivo e some na tela,
   que é a queixa que trouxe esta correção. `--claro` é o token cujo papel
   declarado em `tokens.css` é justamente "bordas". Nos blocos que já se
   apoiam num fundo tonal, `--fio` continua bastando; aqui não bastava. */
.faixa {
  margin-top: var(--e-4);
  background: var(--carta);
  border: 1px solid var(--claro);
  border-radius: var(--raio-cartao);
  overflow: hidden;
}
.faixa-grupo {
  display: grid; gap: var(--e-1) var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  padding: var(--e-4) var(--e-5);
}

/* QUATRO COLUNAS DE 174px NÃO CABEM UM NOME COM CARGO.

   `auto-fit` com mínimo de 158px enfia quatro colunas numa faixa de 817px, e
   aí "Cláudia Menezes · Diretora de Secretaria" quebra em duas linhas
   enquanto os vizinhos ocupam uma — a fileira sai desalinhada e o olho não
   encontra o par rótulo/valor.

   Duas colunas largas em vez de quatro estreitas: cada campo cabe inteiro, e
   os pares se leem de dois em dois em vez de espremidos numa fileira só.
   Não vale para `.faixa-grupo-fino`, que carrega CPF, data e sexo — valores
   curtos, onde quatro colunas são densidade e não aperto. */
.faixa-grupo-dupla { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ============================================================ folha do pedido
   UM SISTEMA DE SEÇÃO SÓ.

   A folha misturava três tratamentos para a mesma coisa. Havia bloco em
   cartão com moldura (`.faixa`), havia rótulo solto sobre caixa cinza de
   aviso (`.grupo` + `.nota`) e havia bloco sem rótulo nenhum. O resultado é
   que o "Motivo da viagem" — o campo que justifica a viagem inteira — lia
   como recado de rodapé, e o bloco da viagem, sem nome, parecia pertencer ao
   rótulo do vizinho de cima.

   Agora toda seção tem a mesma forma: rótulo, e o conteúdo numa faixa. O
   aviso segue sendo `.nota`, e é justamente por ser o único diferente que
   ele volta a chamar atenção quando aparece.

   🔒 Tudo escopado em `.folha-pedido`: `.faixa`, `.nota`, `.grupo` e `.etq`
   vivem em dezenas de telas, e nada aqui pode chegar a elas. */

.folha-pedido .faixa { margin-top: 0; }

/* O rótulo da seção. Alinhado com o CONTEÚDO da faixa, não com a borda dela:
   é a vertical em que todos os valores da folha começam, e é ela que o olho
   segue de cima a baixo. */
.folha-pedido .secao {
  display: flex; align-items: baseline; gap: var(--e-2);
  margin: var(--e-5) 0 var(--e-2);
  padding-left: var(--e-5);
}
.folha-pedido .secao:first-child { margin-top: 0; }
.folha-pedido .secao-nota { font-size: var(--t-mini); color: var(--texto-2); }

/* O motivo, agora conteúdo de faixa. Mesma tipografia dos outros valores e
   mesmo respiro — é o que o põe na mesma vertical de "PD-2026-0117". */
.folha-pedido .faixa-texto {
  margin: 0;
  padding: var(--e-4) var(--e-5);
  font-size: var(--t-corpo);
  color: var(--texto);
}

/* Aviso e anexo continuam fora da faixa, e por isso precisam recuar junto:
   soltos, eles começavam numa vertical própria e eram a segunda coisa que
   fazia a folha parecer desalinhada. */
.folha-pedido > .nota,
.folha-pedido > .anexo,
.folha-pedido > .rota-hist { margin-left: 0; margin-right: 0; }
.faixa-vinc {
  background: var(--ceu);
  border-top: 1px solid var(--neutro-luz);
}
.faixa-item { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.faixa-val {
  font-size: var(--t-corpo); font-weight: var(--peso-titulo); color: var(--grafite);
  display: flex; align-items: center; gap: var(--e-1);
}
.faixa-marca {
  font-size: var(--t-micro); color: var(--texto-2); font-style: italic;
}

/* --- grade da disputa ----------------------------------------------------- */

.disputa {
  margin-top: var(--e-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: var(--e-4); align-items: start;
}
.disputa-corpo {
  min-width: 0;
  background: var(--carta);
  border-radius: var(--raio-cartao);
  box-shadow: var(--suave);
  padding: var(--e-2) var(--e-5) var(--e-5);
}
.disputa-trilho {
  position: sticky; top: 84px;
  display: flex; flex-direction: column; gap: var(--e-3);
}

/* --- abas ----------------------------------------------------------------- */

.abas {
  display: flex; gap: var(--e-1);
  border-bottom: 1px solid var(--neutro-luz);
  margin: 0 -24px 20px;
  padding: 0 var(--e-5);
}
.aba {
  display: inline-flex; align-items: center; gap: var(--e-2);
  height: 48px; padding: 0 var(--e-1); margin-right: 20px;
  font-size: var(--t-corpo); font-weight: var(--peso-titulo); color: var(--texto-2);
  border-bottom: 3px solid transparent;
  transition: color var(--dur-1) var(--mola), border-color var(--dur-1) var(--mola);
}
.aba:hover { color: var(--grafite); }
.aba-ativa { color: var(--indigo-vivo); border-bottom-color: var(--indigo); }
.aba-conta {
  min-width: 20px; padding: 0 var(--e-1); height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-pilula); background: var(--neutro-luz);
  font-size: var(--t-micro); font-weight: 700; font-variant-numeric: tabular-nums;
}
.aba-ativa .aba-conta { background: var(--indigo-luz); color: var(--indigo-vivo); }

/* --- propostas seladas ---------------------------------------------------- */

.seladas-cx { }
.seladas-cab {
  display: flex; align-items: flex-start; gap: var(--e-4);
  margin-bottom: var(--e-4);
}
.seladas-cab h3 { font-size: var(--t-realce); font-weight: var(--peso-forte); }
.seladas-cab p { margin-top: var(--e-1); font-size: var(--t-apoio); color: var(--texto-2); max-width: 46ch; }
.seladas-placar {
  margin-left: auto; flex-shrink: 0; text-align: right;
  display: flex; align-items: baseline; gap: var(--e-1);
}
.seladas-placar b {
  font-size: var(--t-display); font-weight: var(--peso-titulo); color: var(--grafite);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.seladas-placar span { font-size: var(--t-apoio); color: var(--texto-2); }

.cofres {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e-2);
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.cofre {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--raio-controle);
  background: var(--ceu);
  border: 1px solid transparent;
}
.cofre-icone { color: var(--texto-3); display: flex; }
.cofre-nome {
  flex: 1; min-width: 0; font-size: var(--t-apoio); color: var(--texto-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cofre-val {
  font-size: var(--t-corpo); letter-spacing: .12em; color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.cofre-cheio {
  background: var(--indigo-luz); border-color: var(--indigo-aro);
  animation: chega var(--dur-3) var(--mola) both;
}
.cofre-cheio .cofre-icone { color: var(--indigo); }
.cofre-cheio .cofre-nome { color: var(--grafite); font-weight: var(--peso-titulo); }
.cofre-cheio .cofre-val { color: var(--indigo-vivo); }

@keyframes chega { from { opacity: 0; transform: translateY(4px); } }

/* ===================================================================== *
   A PASSAGEM · de selado para aberto

   É o momento mais forte do produto: a promessa do desenho se cumprindo
   diante de quem assiste. Antes, o ranque simplesmente aparecia — pronto,
   sem que ninguém visse cumprir-se.

   O que acontece, em ordem: o cofre de cada credenciada que ofertou se
   abre, de --passo em --passo e na ordem em que as propostas chegaram; os
   pontinhos do valor selado se espalham e apagam; o painel inteiro recua um
   pouco e cede lugar ao ranque, que então aterrissa com a coreografia de
   .rk-revela. Ao todo 1.7s, e nem um instante mais.

   Sob prefers-reduced-motion a passagem não existe: o estado dura zero e o
   ranque entra direto. Uma espera muda de um segundo e meio seria pior que
   a troca instantânea que havia antes.
   ===================================================================== */

/* O cofre se abre: a borda acende, o fundo esvazia, o ícone gira. */
.seladas-rompendo .cofre-cheio {
  animation: abre var(--dur-3) var(--mola) both;
  background: var(--carta);
  border-color: var(--vivo-cheio);
}
.seladas-rompendo .cofre-cheio .cofre-icone { color: var(--vivo-cheio); }
.seladas-rompendo .cofre-cheio .cofre-nome { color: var(--grafite); }
@keyframes abre {
  0% { transform: scale(1); }
  45% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

/* Os pontinhos se espalham e apagam: o selo deixando de existir. */
.seladas-rompendo .cofre-cheio .cofre-val {
  animation: solta var(--dur-3) var(--mola) both;
}
@keyframes solta {
  0% { letter-spacing: .12em; opacity: 1; }
  100% { letter-spacing: .62em; opacity: 0; }
}

/* A ordem é a de chegada, e ela sai do nth-child para não precisar de estilo
   inline. Catorze convocadas cobrem a sessão maior. */
.seladas-rompendo .cofre-cheio:nth-child(1) { animation-delay: calc(var(--passo) * 0); }
.seladas-rompendo .cofre-cheio:nth-child(2) { animation-delay: calc(var(--passo) * 1); }
.seladas-rompendo .cofre-cheio:nth-child(3) { animation-delay: calc(var(--passo) * 2); }
.seladas-rompendo .cofre-cheio:nth-child(4) { animation-delay: calc(var(--passo) * 3); }
.seladas-rompendo .cofre-cheio:nth-child(5) { animation-delay: calc(var(--passo) * 4); }
.seladas-rompendo .cofre-cheio:nth-child(6) { animation-delay: calc(var(--passo) * 5); }
.seladas-rompendo .cofre-cheio:nth-child(7) { animation-delay: calc(var(--passo) * 6); }
.seladas-rompendo .cofre-cheio:nth-child(8) { animation-delay: calc(var(--passo) * 7); }
.seladas-rompendo .cofre-cheio:nth-child(9) { animation-delay: calc(var(--passo) * 8); }
.seladas-rompendo .cofre-cheio:nth-child(10) { animation-delay: calc(var(--passo) * 9); }
.seladas-rompendo .cofre-cheio:nth-child(n+11) { animation-delay: calc(var(--passo) * 10); }
.seladas-rompendo .cofre-cheio:nth-child(1) .cofre-val { animation-delay: calc(var(--passo) * 0); }
.seladas-rompendo .cofre-cheio:nth-child(2) .cofre-val { animation-delay: calc(var(--passo) * 1); }
.seladas-rompendo .cofre-cheio:nth-child(3) .cofre-val { animation-delay: calc(var(--passo) * 2); }
.seladas-rompendo .cofre-cheio:nth-child(4) .cofre-val { animation-delay: calc(var(--passo) * 3); }
.seladas-rompendo .cofre-cheio:nth-child(5) .cofre-val { animation-delay: calc(var(--passo) * 4); }
.seladas-rompendo .cofre-cheio:nth-child(6) .cofre-val { animation-delay: calc(var(--passo) * 5); }
.seladas-rompendo .cofre-cheio:nth-child(7) .cofre-val { animation-delay: calc(var(--passo) * 6); }
.seladas-rompendo .cofre-cheio:nth-child(8) .cofre-val { animation-delay: calc(var(--passo) * 7); }
.seladas-rompendo .cofre-cheio:nth-child(9) .cofre-val { animation-delay: calc(var(--passo) * 8); }
.seladas-rompendo .cofre-cheio:nth-child(10) .cofre-val { animation-delay: calc(var(--passo) * 9); }
.seladas-rompendo .cofre-cheio:nth-child(n+11) .cofre-val { animation-delay: calc(var(--passo) * 10); }

/* O título muda junto, e a mudança é visível. */
.seladas-rompendo .seladas-cab h3 { color: var(--vivo); }

/* A participação entra sob o cabeçalho: é a peça do catálogo para "quanto de
   um todo", e responde à pergunta da janela sem revelar valor nenhum. */
.seladas-part { margin-bottom: var(--e-4); max-width: 320px; }

/* --- ranque --------------------------------------------------------------- */

.rk-rolo { overflow-x: auto; margin: 0 -24px; padding: 0 var(--e-5); }
.rk { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 720px; }
.rk th {
  text-align: left; padding: 0 var(--e-3) var(--e-2);
  font-size: var(--t-micro); font-weight: var(--peso-forte); letter-spacing: .8px;
  text-transform: uppercase; color: var(--texto-2);
  border-bottom: 1px solid var(--neutro-luz);
}
.rk td { padding: var(--e-3) var(--e-3); border-bottom: 1px solid var(--neutro-luz); vertical-align: top; }
.rk tr:last-child td { border-bottom: 0; }
.rk-dir { text-align: right; }
.rk-pos { width: 56px; }

.rk-med {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: var(--alt-chip); padding: 0 var(--e-2);
  border-radius: var(--raio-pilula); background: var(--neutro-luz);
  font-size: var(--t-mini); font-weight: 700; color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.rk-med-1 { background: var(--vivo-luz); color: var(--vivo); }

.rk-nome { display: block; font-size: var(--t-corpo); font-weight: var(--peso-titulo); color: var(--grafite); }
.rk-selos { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: var(--e-1); }

.rk-hora {
  display: block; font-size: var(--t-apoio); color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.rk-pref {
  display: inline-flex; align-items: center; gap: var(--e-1);
  margin-top: var(--e-1); font-size: var(--t-micro); color: var(--morno);
}
.rk-pref-ok { color: var(--vivo); }

.rk-valor {
  display: block; font-size: var(--t-realce); font-weight: var(--peso-forte); color: var(--grafite);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.rk-barra {
  display: block; height: 4px; margin-top: var(--e-2); margin-left: auto;
  width: 100%; border-radius: var(--raio-pilula); background: var(--neutro-luz);
  overflow: hidden;
}
.rk-barra-tinta {
  display: block; height: 100%; border-radius: var(--raio-pilula);
  background: var(--vivo-cheio);
  transition: width var(--dur-3) var(--mola);
}
.rk-barra-alta { background: var(--morno-cheio); }

.rk-dif {
  display: block; font-size: var(--t-corpo); font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
}
.rk-abaixo { color: var(--vivo); }
.rk-acima  { color: var(--morno); }
.rk-dif-pct { display: block; margin-top: var(--e-1); font-size: var(--t-mini); color: var(--texto-2); }

/* A REVELAÇÃO. Encerrada a janela, os valores não aparecem de uma vez: cada
   linha aterrissa em ordem de preço, de 90ms em 90ms, e a vencedora assenta
   por último. O escalonamento sai de nth-child para não precisar de estilo
   inline; doze linhas cobrem qualquer sessão real.
   Sob prefers-reduced-motion todas aterrissam juntas (ver o bloco no fim). */
.rk-revela tbody tr { animation: aterrissa var(--dur-4) var(--mola) both; }
.rk-revela tbody tr:nth-child(1) { animation-delay: calc(var(--passo) * 0); }
.rk-revela tbody tr:nth-child(2) { animation-delay: calc(var(--passo) * 1); }
.rk-revela tbody tr:nth-child(3) { animation-delay: calc(var(--passo) * 2); }
.rk-revela tbody tr:nth-child(4) { animation-delay: calc(var(--passo) * 3); }
.rk-revela tbody tr:nth-child(5) { animation-delay: calc(var(--passo) * 4); }
.rk-revela tbody tr:nth-child(6) { animation-delay: calc(var(--passo) * 5); }
.rk-revela tbody tr:nth-child(7) { animation-delay: calc(var(--passo) * 6); }
.rk-revela tbody tr:nth-child(8) { animation-delay: calc(var(--passo) * 7); }
.rk-revela tbody tr:nth-child(9) { animation-delay: calc(var(--passo) * 8); }
.rk-revela tbody tr:nth-child(10) { animation-delay: calc(var(--passo) * 9); }
.rk-revela tbody tr:nth-child(11) { animation-delay: calc(var(--passo) * 10); }
.rk-revela tbody tr:nth-child(12) { animation-delay: calc(var(--passo) * 11); }
@keyframes aterrissa {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dentro da linha há uma segunda ordem, e ela importa: primeiro o nome,
   depois o valor, e só então a diferença contra a referência. O contrário
   — saber que economizou R$ 540 antes de saber quanto foi a proposta —
   entrega o placar antes do jogo. A barra cresce no compasso da diferença. */
.rk-revela .rk-valor { animation: revela var(--dur-4) var(--mola) both; animation-delay: calc(var(--passo) * 4); }
.rk-revela .rk-dif,
.rk-revela .rk-dif-pct { animation: revela var(--dur-4) var(--mola) both; animation-delay: calc(var(--passo) * 6); }
.rk-revela .rk-barra-tinta {
  animation: cresce var(--dur-4) var(--mola) both;
  animation-delay: calc(var(--passo) * 6);
  transform-origin: left center;
}
@keyframes revela {
  from { opacity: 0; filter: blur(5px); transform: scale(.96); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}
@keyframes cresce {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.rk-vencedora { background: var(--vivo-luz); }
.rk-vencedora td:first-child { border-radius: var(--raio-controle) 0 0 var(--raio-controle); }
.rk-vencedora td:last-child { border-radius: 0 var(--raio-controle) var(--raio-controle) 0; }


/* --- vencedora ------------------------------------------------------------ */

/* A vencedora declarada entra uma vez, e a entrada é o fim da disputa: por
   isso ela anima na montagem, e não a cada renderização do cronômetro. */
/* TRÊS BLOCOS EMPILHADOS SEM UM PIXEL ENTRE ELES.

   O aviso de proposta única e o aviso da vencedora ficavam encostados —
   folga medida: ZERO. Dois blocos tonais de largura inteira, um âmbar e um
   verde, colados: o olho lê uma mancha só e não dois recados, e logo abaixo
   vinha a linha verde da vencedora no ranque. Três superfícies tingidas em
   duzentos pixels.

   Duas correções, e nenhuma delas mexe no que a tela diz:

   1. Respiro entre os avisos, porque são recados diferentes — um é a regra
      que limita a compra, o outro é o desfecho.
   2. A moldura sai. `--vivo-cheio` é cor de PREENCHIMENTO, e um contorno de
      1px nela era a borda mais saturada do sistema inteiro — num bloco que
      já é tonal, ela só repete o que o fundo diz. É como as notas do resto
      do produto se comportam: fundo tonal, sem contorno. */
.venceu {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-4);
  margin-bottom: var(--e-5);
  border-radius: var(--raio-controle);
  background: var(--vivo-luz);
  animation: chega var(--dur-4) var(--mola) both;
}
/* O respiro só existe quando há um aviso em cima: sozinho, o bloco já
   começa colado ao topo do painel, onde a folga é do painel. */
.nota + .venceu { margin-top: var(--e-3); }
.venceu-bola { animation: abre var(--dur-3) var(--mola) both; animation-delay: var(--passo); }
.venceu-bola {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-circulo); background: var(--vivo-cheio); color: var(--carta);
}
.venceu-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.venceu-txt h3 { font-size: var(--t-realce); font-weight: var(--peso-forte); color: var(--vivo); }
.venceu-txt p { font-size: var(--t-apoio); color: var(--texto); }

/* --- convocados ----------------------------------------------------------- */

.conv-lista { display: flex; flex-direction: column; gap: 0; }
.conv {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-3); border-radius: var(--raio-controle);
}
.conv:hover { background: var(--ceu); }
.conv-ini {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-circulo); background: var(--neutro-luz);
  font-size: var(--t-micro); font-weight: 700; color: var(--texto-2);
}
.conv-nome {
  flex: 1; min-width: 0; font-size: var(--t-corpo); font-weight: var(--peso-titulo); color: var(--grafite);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-hora { font-size: var(--t-mini); color: var(--texto-2); white-space: nowrap; }

/* --- trilha --------------------------------------------------------------- */

.trilha { list-style: none; margin: 0; padding: 0; }
.tr-item {
  position: relative;
  display: flex; gap: var(--e-3);
  padding: 0 0 var(--e-4) 0;
}
/* A linha do tempo é um traço só, desenhado pelo próprio item */
.tr-item::before {
  content: ""; position: absolute;
  left: 13px; top: 28px; bottom: 0;
  width: 2px; background: var(--neutro-luz);
}
.tr-item:last-child { padding-bottom: 0; }
.tr-item:last-child::before { display: none; }

.tr-marco {
  width: 28px; height: 28px; flex-shrink: 0; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-circulo);
  background: var(--neutro-luz); color: var(--texto-2);
}
.tr-sistema .tr-marco { background: var(--indigo-luz); color: var(--indigo); }
.tr-atencao .tr-marco { background: var(--morno-luz); color: var(--morno); }
.tr-erro .tr-marco { background: var(--quente-luz); color: var(--quente); }

.tr-corpo { flex: 1; min-width: 0; padding-top: var(--e-1); display: flex; flex-direction: column; gap: var(--e-1); }
.tr-tit { font-size: var(--t-corpo); font-weight: var(--peso-forte); color: var(--grafite); }
.tr-det { font-size: var(--t-apoio); color: var(--texto); }
.tr-pe {
  margin-top: var(--e-1);
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3);
  font-size: var(--t-micro); color: var(--texto-2);
}
.tr-cod {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-micro); padding: 0 var(--e-2); border-radius: var(--raio-campo);
  background: var(--neutro-luz); color: var(--texto-2);
}

/* --- cronômetro ----------------------------------------------------------- */

.cron {
  --pulso: var(--pulso-calmo); /* @kind other */
  background: var(--carta);
  border: 1px solid var(--fio);
  border-radius: var(--raio-cartao);
  padding: var(--e-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--e-3);
  text-align: center;
  transition: border-color var(--dur-3) var(--mola);
}
/* Grau de urgência, na mesma escala do herói do painel: âmbar entra aos trinta
   minutos e NÃO sai. Dos dez minutos em diante o que muda é o ritmo do pulso e
   o peso da borda — vermelho continua reservado a descumprimento. */
.cron-morno,
.cron-quente,
.cron-critico { --acento: var(--morno-cheio); --acento-txt: var(--morno); }
.cron-morno .anel-frente,
.cron-quente .anel-frente,
.cron-critico .anel-frente { stroke: var(--morno-cheio); }
.cron-morno { --pulso: var(--pulso-tenso); /* @kind other */ }
.cron-quente { --pulso: var(--pulso-tenso); /* @kind other */ border-color: var(--morno-aro); }
.cron-critico {
  --pulso: var(--pulso-urgente); /* @kind other */
  border-color: var(--morno-cheio);
}
.cron-critico .anel-num { color: var(--morno); }

/* Qual relógio está correndo. A declaração da vencedora troca a janela pelo
   prazo de emissão, e sem este rótulo o número do anel muda de significado
   sem avisar ninguém. */
.cron-qual {
  display: inline-flex; align-items: center; gap: var(--e-2);
  align-self: center;
  height: var(--alt-chip); padding: 0 var(--e-2);
  border-radius: var(--raio-campo);
  background: var(--acento-fundo, var(--indigo-luz));
  color: var(--acento-txt, var(--indigo-vivo));
  font-size: var(--t-micro); font-weight: var(--peso-forte);
  letter-spacing: var(--entreletra-etq); text-transform: uppercase;
  white-space: nowrap;
}
.cron-morno .cron-qual,
.cron-quente .cron-qual,
.cron-critico .cron-qual { background: var(--morno-luz); }
.cron-luz {
  width: 7px; height: 7px; border-radius: var(--raio-circulo);
  background: var(--acento, var(--indigo));
  animation: pulsar var(--pulso, var(--pulso-calmo)) var(--mola) infinite;
}

/* O relógio que acabou, acima do que começou: a troca fica legível como
   troca, e não como um número que mudou de valor. */
.cron-troca {
  display: inline-flex; align-items: center; gap: var(--e-1);
  align-self: center;
  font-size: var(--t-micro); color: var(--vivo);
}

.cron-nota { font-size: var(--t-mini); color: var(--texto-2); max-width: 34ch; }

.cron-espera { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); }
.cron-bola {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-circulo); background: var(--neutro-luz); color: var(--texto-2);
}
.cron-num {
  font-size: var(--t-display); font-weight: var(--peso-titulo); color: var(--grafite);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* --- régua sigilosa (D-2) -------------------------------------------------
   Fechada, a caixa não tem um único elemento acionável. A ausência de botão
   é o desenho: é ela que prova que o sistema não exibe a referência durante
   a janela, e não a boa vontade de quem opera. */

.regua {
  display: flex; gap: var(--e-3); align-items: flex-start;
  background: var(--carta);
  border: 1px solid var(--fio);
  border-radius: var(--raio-cartao);
  box-shadow: var(--suave);
  padding: var(--e-4) var(--e-4);
}
/* Fechada é tracejada de propósito: a borda diz que ali existe algo que ainda
   não está à mostra, e não que o bloco está vazio. */
.regua-fechada { background: var(--ceu); box-shadow: none; border: 1px dashed var(--claro); }
.regua-cofre {
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-controle); background: var(--neutro-luz); color: var(--texto-2);
}
.regua-cofre-aberto { background: var(--vivo-luz); color: var(--vivo); }
.regua-txt { margin-top: var(--e-1); font-size: var(--t-corpo); font-weight: var(--peso-titulo); color: var(--grafite); }
.regua-num {
  margin-top: var(--e-1); font-size: var(--t-titulo); font-weight: var(--peso-forte); color: var(--grafite);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.regua-sub { margin-top: var(--e-1); font-size: var(--t-mini); color: var(--texto-2); }

/* A linha que torna o sigilo VERIFICÁVEL em vez de declarado. Ela existe nos
   três estados da régua e diz, de dentro de cada tela, o que a outra vê:
   fechada para o Tribunal durante a janela, aberta só para ele depois, e
   nunca para a agência. É a comparação entre os dois trilhos que prova a
   promessa — uma frase de marketing não prova nada. */
.regua-espelho {
  display: flex; align-items: flex-start; gap: var(--e-1);
  margin-top: var(--e-3); padding-top: var(--e-3);
  border-top: 1px solid var(--fio);
  font-size: var(--t-micro); color: var(--texto-2);
  line-height: 1.45;
}
.regua-espelho svg { flex-shrink: 0; margin-top: 2px; }
/* .regua-nunca saiu com o bloco da agência: a régua agora só existe
   do lado de quem conduz a disputa. */
.regua-abriu .regua-espelho { color: var(--vivo); }

/* A régua abrindo: o cofre acende e o número chega depois dele, no compasso
   dos lacres. Abrir a régua é ato do Sistema, não do gestor — por isso ela
   abre sozinha e a entrada é a mesma dos valores no ranque. */
.regua-abriu { animation: chega var(--dur-3) var(--mola) both; }
.regua-abriu .regua-cofre-aberto { animation: abre var(--dur-3) var(--mola) both; }
.regua-abriu .regua-num {
  animation: revela var(--dur-4) var(--mola) both;
  animation-delay: calc(var(--passo) * 2);
}

/* --- a minha proposta selada ---------------------------------------------
   Peça nova, e legítima pelo mesmo critério do cofre da sessão: ela mostra
   que existe uma proposta sem mostrar quanto ela é. A diferença é o dono.
   O cofre da sala do gestor conta os lacres dos outros; este é o meu, e
   por isso carrega a ação de substituir enquanto a janela corre.
   O azul aqui é informação, não sucesso: enviar não é vencer. */

.selada-minha {
  display: flex; gap: var(--e-4); align-items: center; flex-wrap: wrap;
  background: var(--indigo-luz);
  border-radius: var(--raio-cartao);
  padding: var(--e-4) var(--e-5);
}
.selada-cofre {
  width: 46px; height: 46px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-controle); background: var(--carta); color: var(--indigo-vivo);
  box-shadow: var(--suave);
}
.selada-txt { flex: 1; min-width: 200px; }
.selada-num {
  margin-top: var(--e-1);
  font-size: var(--t-numero); font-weight: var(--peso-forte); letter-spacing: .12em;
  color: var(--indigo-vivo);
}
.selada-nota { margin-top: var(--e-1); font-size: var(--t-apoio); color: var(--texto); max-width: 62ch; }

@media (max-width: 640px) {
  .selada-minha { padding: var(--e-4); }
  .selada-minha .bt { width: 100%; justify-content: center; }
}

/* --- ações do gestor ------------------------------------------------------ */

.acoes-gestor {
  background: var(--carta);
  border-radius: var(--raio-cartao);
  box-shadow: var(--suave);
  padding: var(--e-4) var(--e-4);
  display: flex; flex-direction: column; gap: var(--e-2);
}
.acoes-gestor .bt { width: 100%; }
.acoes-dica { font-size: var(--t-mini); color: var(--texto-2); }
.acoes-rodape {
  margin-top: 0; padding-top: var(--e-3);
  border-top: 1px solid var(--neutro-luz);
  font-size: var(--t-micro); color: var(--texto-2);
}

/* --- nota de atenção ------------------------------------------------------ */

.nota-atencao { background: var(--morno-luz); color: var(--morno); }
.nota-atencao .nota-icone { color: var(--morno); }

/* --- ajuste da demonstração (D-5) ----------------------------------------- */

.ajuste-lista { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-2); }
.ajuste-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px;
  gap: var(--e-3); align-items: center;
}
.ajuste-nome { font-size: var(--t-apoio); color: var(--texto); min-width: 0; }

/* --- responsivo ----------------------------------------------------------- */

@media (max-width: 1180px) {
  .disputa { grid-template-columns: minmax(0, 1fr); }
  .disputa-trilho {
    position: static;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
  }
}
@media (max-width: 760px) {
  .titulo-acoes { width: 100%; margin-left: 0; }
  .titulo-acoes .bt { flex: 1 1 auto; justify-content: center; }
  .ajuste-linha { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------- pílula como filtro
   Mesma pílula do painel. O único acréscimo é o estado pressionado, para
   quando ela filtra a lista logo abaixo em vez de abrir um extrato. */

/* Ativa é a mesma pílula, mesma borda, mesmo fundo. Só a cor da borda muda,
   e ela usa o azul de ação do sistema — preto e fundo cinza faziam a ativa
   parecer outra peça, mais pesada que as vizinhas. */
.pilula-on {
  border-color: var(--indigo);
  box-shadow: 0 0 0 1px var(--indigo);
  background: var(--indigo-luz);
}
.pilula-on .pilula-rot { color: var(--indigo-vivo); }

/* Subtítulo do bloco, na mesma escala do resto do cabeçalho */
.painel-sub { margin-top: var(--e-1); font-size: var(--t-apoio); color: var(--texto-2); }

/* O contador é a resposta da tela: fica sob o título, não no fim da barra */
.painel-conta { margin-top: var(--e-1); font-size: var(--t-apoio); color: var(--texto-2); }
.painel-conta b {
  font-weight: var(--peso-forte); color: var(--grafite);
  font-variant-numeric: tabular-nums;
}
.painel-conta-de { color: var(--texto-2); }

/* A segunda marca da célula de situação é a próxima ação. Chip abaixo do
   estado, mesma família, nunca ao lado: são dois fatos diferentes. */
.marca-viva + .marca-viva { margin-top: var(--e-1); gap: var(--e-1); }
td .marca-viva, .cartao-lin .marca-viva { display: inline-flex; }

/* A SITUAÇÃO NÃO CABE NUMA LINHA SÓ.
   O selo nasceu com `white-space: nowrap`, que serve à barra e ao cartão —
   ali há largura de sobra. Na tabela a coluna é fixa, e "Suspensa por
   vencimento" transbordava por cima da coluna vizinha. Aqui ele quebra:
   duas linhas curtas cabem, uma linha longa não. */
.lista td .marca-viva {
  white-space: normal;
  height: auto;
  min-height: var(--alt-chip);
  padding-top: 2px; padding-bottom: 2px;
  text-align: left;
}
td .marca-viva + .marca-viva { display: flex; width: fit-content; }

/* Chip de ação: contorno em vez de preenchimento. Mesma família do chip de
   situação, peso menor, para não disputar a leitura com o estado. */
/* A próxima ação pesa mais que a situação: contorno cheio, texto forte e
   fundo branco fazem a coluna se ler de cima a baixo, que é como o gestor
   procura o que fazer. A situação, ao lado, fica tonal e mais leve. */
.mv-acao {
  background: var(--carta);
  box-shadow: inset 0 0 0 1.5px currentColor;
  font-weight: var(--peso-forte);
  height: var(--alt-chip);
}
tr:hover .mv-acao { background: var(--carta); }
.mv-acao svg { opacity: .85; }

/* ------------------------------------------------------------- sessões
   Duas peças que só a seção Sessões usa, ambas na escala do catálogo:
   a célula de quando e a barra de participação. */

.quando { display: flex; flex-direction: column; gap: 0; }
.quando b {
  font-size: var(--t-realce); font-weight: var(--peso-forte); color: var(--grafite);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.quando span { font-size: var(--t-mini); color: var(--texto-2); }

.part { display: inline-flex; flex-direction: column; align-items: flex-end; gap: var(--e-1); }
.part-num { font-size: var(--t-apoio); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.part-num b { font-size: var(--t-realce); font-weight: var(--peso-forte); color: var(--grafite); }
.part-trilho {
  width: 110px; height: 5px; border-radius: var(--raio-pilula);
  background: var(--neutro-luz); overflow: hidden;
}
.part-tinta { display: block; height: 100%; border-radius: var(--raio-pilula); transition: width var(--dur-3) var(--mola); }
.part-vivo { background: var(--vivo-cheio); }
.part-morno { background: var(--morno-cheio); }
.part-quente { background: var(--quente-cheio); }

/* A sessão em disputa é a única linha que se destaca sozinha na tabela.
   O destaque é uma marca na borda, não fundo tonal azul: com fundo azul o
   chip "Janela aberta", que é azul tonal, sumia dentro da própria linha. */
.lista tbody tr.viva { background: var(--ceu); }
.lista tbody tr.viva td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.lista tbody tr.viva:hover { background: var(--neutro-luz); }

@media (max-width: 900px) {
  .part { align-items: flex-start; }
}

/* Coluna de próxima ação, só nas telas cuja pergunta é "o que eu faço" */
/* Situação e próxima ação carregam frases inteiras — "SLA de emissão
   descumprido", "Passar à próxima colocada" — e eram as duas colunas mais
   apertadas da tabela: os chips quebravam em duas linhas e a linha crescia
   3px. O valor, a atualização e o menu de ações pediam menos do que tinham
   ("R$ 4.590,00" em 162px, "há 48 min" em 116, um botão de 32 em 48), e é
   de lá que vêm os 54px que faltavam. */
.c-acao { width: 234px; }
.cartao-acao { margin-top: var(--e-2); }

/* O balão do chip de ação abre para baixo. Aberto para cima, ele saía pelo
   topo de `.rolo`, que rola na horizontal e por isso também recorta na
   vertical: a explicação da regra ficava cortada justo na primeira linha. */
.mv-acao + .dica,
td .dica { bottom: auto; top: calc(100% + 8px); }

/* ---------------------------------------------------------- credenciados
   Duas peças novas, ambas na escala do catálogo: o relógio de validade e a
   linha de documento da ficha. A participação reusa `.part` das sessões. */

.relogio { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.relogio-quando {
  display: inline-flex; align-items: center; gap: var(--e-1);
  font-size: var(--t-apoio); font-weight: var(--peso-titulo); color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.relogio-atencao { color: var(--morno); font-weight: var(--peso-forte); }
.relogio-erro { color: var(--quente); font-weight: var(--peso-forte); }
.relogio .frouxo { font-size: var(--t-mini); }

.cred-nome-elo {
  font-size: var(--t-corpo); font-weight: var(--peso-titulo); color: var(--grafite); text-decoration: none;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cred-nome-elo:hover { color: var(--indigo-vivo); text-decoration: underline; }

/* Ficha da credenciada */
/* ------------------------------------------------------- lista de pedidos
   A LINHA DE TRABALHO, QUE NÃO É A LINHA DE DOCUMENTO.

   A tela de Pedidos desenhava as suas linhas com `.doc`, que é a linha da
   conferência documento a documento — nome do arquivo, validade, e nada
   mais. Emprestada aqui, ela entregava o pedido inteiro como uma frase
   corrida: "BVB → BSB · Vara Cível de Rorainópolis" numa linha e
   "PD-2026-0117 · Cláudia Menezes · 18/03 08:12 · 1 passageiro" na outra,
   tudo no mesmo peso, sem fio entre um pedido e o vizinho. Duas linhas de
   texto solto no meio do branco não se escaneiam: para achar um pedido era
   preciso LER os dois.

   `.ped` é a mesma informação em grade fixa — marca, identidade, estado,
   ação —, e as quatro colunas caem na mesma vertical em toda a lista. É o
   que permite correr o olho por uma coluna só. O fio de 1px entre linhas faz
   o trabalho que o cartão faria, sem o peso do cartão: esta é uma lista
   operacional, não uma coleção de fichas.

   🔒 Peça própria, e não um `.doc` com modificador, porque o conceito é
   outro e `.doc` vive em treze lugares — mexer nele para acertar esta tela
   é o caminho conhecido para quebrar as outras doze. */

/* A CONTAGEM QUE PEDE ATO, TIRADA DO MEIO DA FRASE.

   "5 esperam um ato seu" vinha no fim do subtítulo, no mesmo tamanho e na
   mesma cor do resto — a informação mais operacional da tela, escondida
   dentro de uma linha de descrição. Como marca ela é lida antes da frase, e
   é o que responde "por que eu abri esta tela".

   Discreta de propósito: fundo tonal claro e texto de ação, sem o vermelho
   nem o âmbar. Não há descumprimento aqui — há trabalho esperando, que é
   outra coisa. O ponto à esquerda não pisca: a fila não é um cronômetro. */
.titulo-marca {
  display: inline-flex; align-items: center; gap: var(--e-2);
  height: var(--alt-chip); padding: 0 var(--e-3);
  border-radius: var(--raio-campo);
  background: var(--indigo-luz); color: var(--indigo-vivo);
  font-size: var(--t-mini); font-weight: var(--peso-forte);
  white-space: nowrap;
}
.titulo-marca i {
  width: 6px; height: 6px; border-radius: var(--raio-circulo);
  background: var(--indigo); flex-shrink: 0;
}
.titulo-txt .titulo-marca { margin-top: var(--e-2); }

/* O ESTADO ATIVO ERA UM ARO DUPLO.

   `.pilula-on` desenha borda azul E um `box-shadow` de 1px na mesma cor: o
   contorno sai com 2px de azul saturado em volta do cartão inteiro, e o
   filtro ativo passa a pesar mais que o número que ele mostra. O fundo
   tonal claro já diz "este é o recorte em cena"; a borda só precisa
   confirmar.

   Escopo em `.pilulas-suave` para não mexer nas outras quatro telas que
   usam a mesma pílula como filtro — a mudança serve a elas também, mas
   trocar o estado ativo do sistema inteiro não é o que esta tela pediu. */
.pilulas-suave .pilula-on { box-shadow: none; border-color: var(--indigo-aro); }

/* ------------------------------------------------- cabeçalho em uma linha
   TRÊS FAIXAS VIRAM UMA.

   O bloco empilhava título, contador e barra de ferramentas em três faixas
   próprias, e a busca acabava sozinha numa linha inteira — 400px de campo
   com mil de branco à direita. Três faixas para dizer "esta é a lista, este
   é o tamanho dela, e é assim que você a filtra", que é uma informação só.

   Uma grade de duas colunas: à esquerda quem a lista é, à direita como se
   mexe nela. As duas se alinham pela base, então o contador e o campo de
   busca ficam na mesma linha de leitura.

   O fio embaixo é o que separa o cabeçalho da lista — o mesmo fio que
   separa uma linha da outra, então a primeira linha não precisa do dela e o
   conjunto lê como uma grade só, do topo ao pé.

   🔒 Escopo, e não regra nova: a regra 3 continua valendo para o resto do
   sistema — barra de ferramentas entre o cabeçalho e a lista. Aqui ela é a
   mesma barra, com o mesmo componente, na mesma ordem de leitura; o que
   muda é que ela divide a faixa com o título em vez de ocupar a própria. */
.painel-cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--e-5);
  padding: 0 var(--e-5) var(--e-3);
  border-bottom: 1px solid var(--fio);
}
/* A barra perde o respiro próprio: quem o dá agora é a grade. */
.painel-cabeca .ferramentas { padding: 0; gap: var(--e-3); }
/* Os crachás de filtro ativo não cabem na faixa: descem, ocupando as duas
   colunas, e continuam sendo a única forma de desfazer o filtro. */
.painel-cabeca .crachas { grid-column: 1 / -1; padding: var(--e-3) 0 0; }
/* Largura fixa: no `flex` da barra antiga ela esticava até 420 e encolhia
   até 200 conforme o vizinho. Numa coluna `auto` isso faz o campo mudar de
   tamanho quando um filtro entra ou sai, e a barra parece instável. */
.painel-cabeca .busca-tela { flex: 0 0 360px; max-width: none; }

/* O balão abre para a ESQUERDA aqui, e isso não é gosto: `.balao` ancora em
   `left: 0` porque nas outras telas o filtro fica no começo da barra, com a
   página inteira à direita para crescer. Nesta, a barra encosta na margem
   direita do bloco — ancorado à esquerda, o balão saía pela borda da janela
   e os nomes das unidades ficavam cortados pela metade. */
.painel-cabeca .balao { left: auto; right: 0; }

@media (max-width: 900px) {
  /* Empilha, e a barra volta a ser uma faixa própria. */
  .painel-cabeca { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); align-items: stretch; }
  .painel-cabeca .busca-tela { flex: 1 1 auto; }
}

.peds { display: flex; flex-direction: column; }

.ped {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--e-4);
  /* 8px em cima e embaixo, e não 12: a linha tem 36px de marca e duas
     linhas de texto, então o piso é a marca, não o respiro. Doze davam 68px
     de linha e oito dão 60 — uma linha a mais por tela cheia, sem que nada
     encoste em nada. */
  padding: var(--e-2) var(--e-5);
  border-top: 1px solid var(--fio-2);
  cursor: pointer;
  transition: background var(--dur-1) var(--mola);
}
.peds .ped:first-child { border-top: 0; }
.ped:hover { background: var(--ceu); }

/* A marca do pedido. 36px porque é o que basta para o ícone se ler ao lado
   de duas linhas de texto — maior que isso e ela vira o elemento mais
   pesado de uma linha em que ela é o dado menos importante. */
.ped-marca {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-campo);
  background: var(--neutro-luz); color: var(--texto-2);
}

.ped-corpo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* Rota e unidade dividem a primeira linha, e a hierarquia entre elas é o
   que diz o que identifica o pedido: a rota é o assunto, a unidade é de
   quem ele é. */
.ped-linha1 { display: flex; align-items: baseline; gap: var(--e-2); min-width: 0; }
.ped-rota {
  border: 0; background: none; padding: 0; font: inherit; text-align: left;
  font-size: var(--t-realce); font-weight: var(--peso-titulo);
  color: var(--grafite); white-space: nowrap; cursor: pointer;
}
.ped-rota:hover { text-decoration: underline; }
.ped-unidade {
  font-size: var(--t-apoio); color: var(--texto-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Terceiro nível: o que identifica sem ser o que se procura. */
.ped-meta {
  font-size: var(--t-mini); color: var(--texto-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ped-meta b { font-weight: var(--peso-forte); color: var(--texto); font-variant-numeric: tabular-nums; }

/* Os estados numa coluna só, alinhados à direita: com um, dois ou três
   chips por linha, é o alinhamento que mantém a coluna legível de cima a
   baixo em vez de fazer o botão dançar de linha para linha. */
.ped-estados {
  display: flex; align-items: center; gap: var(--e-2);
  justify-content: flex-end; flex-wrap: wrap;
}

@media (max-width: 900px) {
  /* Empilha na ordem da leitura: rota, unidade, metadados, estado, ação. */
  .ped {
    grid-template-columns: 36px minmax(0, 1fr);
    row-gap: var(--e-2);
  }
  .ped-estados, .ped .bt { grid-column: 2; justify-content: flex-start; }
  .ped .bt { justify-self: start; }
}

.docs { display: flex; flex-direction: column; gap: 0; }
.doc {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3); border-radius: var(--raio-controle);
}
.doc:hover { background: var(--ceu); }
.doc-icone {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-campo); background: var(--neutro-luz); color: var(--texto-2);
}
.doc-corpo { flex: 1; min-width: 0; }
.doc-nome { display: block; font-size: var(--t-apoio); font-weight: var(--peso-titulo); color: var(--grafite); }
.doc .relogio { align-items: flex-end; text-align: right; flex-shrink: 0; }

/* O cartão de ciclo da auditoria: um protocolo, uma história. Aberto, ele
   ganha moldura para que os atos de dentro não se confundam com os cartões
   irmãos de fora. */
.doc-aberto {
  background: var(--ceu);
  border: 1px solid var(--claro);
  align-items: stretch;
}
.doc-aberto .docs { border-top: 1px solid var(--claro); padding-top: var(--e-1); }
.doc-elo {
  width: 100%; text-align: left; border: 0; background: transparent;
  font: inherit; color: inherit; cursor: pointer;
}
.doc-elo:hover { background: var(--carta); }
.doc-elo:focus-visible { outline: var(--foco-largura) solid var(--foco-cor); outline-offset: calc(var(--foco-folga) * -1); }
.mono { font-variant-numeric: tabular-nums; font-size: var(--t-micro); letter-spacing: .02em; }

.ficha-nums {
  display: grid; gap: var(--e-2);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.ficha-num {
  display: flex; flex-direction: column; gap: 0;
  padding: var(--e-3) var(--e-4); border-radius: var(--raio-controle); background: var(--ceu);
}
.ficha-num b {
  font-size: var(--t-titulo); font-weight: var(--peso-titulo); color: var(--grafite);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.ficha-num span { font-size: var(--t-mini); color: var(--texto-2); }

@media (max-width: 900px) {
  .doc { padding: var(--e-3) 0; }
  .doc .relogio { align-items: flex-start; text-align: left; }
}

/* ------------------------------------------------------------- auditoria
   Quatro peças novas, todas na escala do catálogo: o nome do ato com o
   código técnico embaixo, a alteração, a marca de dado pessoal e o elo. */

.ato-nome { display: block; font-size: var(--t-apoio); font-weight: var(--peso-titulo); color: var(--grafite); }
.ato-cod {
  display: inline-block; margin-top: var(--e-1);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-micro); color: var(--texto-2);
  background: var(--neutro-luz); padding: 0 var(--e-2); border-radius: var(--raio-campo);
}

/* O que mudou. A seta é o dado, não enfeite: sem ela a coluna vira texto. */
.mudou {
  display: inline-block;
  font-size: var(--t-apoio); color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.pii {
  display: inline-flex; align-items: center; gap: var(--e-1);
  margin-top: var(--e-1);
  font-size: var(--t-micro); color: var(--indigo-vivo);
}
/* O marcador sozinho, fechando um bloco em vez de acompanhar um campo: é onde
   a regra desceu quando a caixa de nota que a explicava saiu. */
.pii-solto { display: flex; width: fit-content; margin-top: var(--e-4); }

.elo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-mini); color: var(--texto-2);
  background: var(--ceu); padding: var(--e-1) var(--e-2); border-radius: var(--raio-campo);
  border: 1px solid var(--neutro-luz);
}
.elo-forte { color: var(--indigo-vivo); background: var(--indigo-luz); border-color: var(--indigo-aro); }

/* Ficha do ato */
.ficha-linhas { display: flex; flex-direction: column; }
.ficha-linha {
  display: grid; grid-template-columns: 158px minmax(0, 1fr);
  gap: var(--e-4); align-items: baseline;
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--neutro-luz);
  font-size: var(--t-apoio); color: var(--texto);
}
.ficha-linha:last-child { border-bottom: 0; }

.cadeia {
  display: flex; flex-direction: column; gap: var(--e-1);
  padding: var(--e-3) var(--e-4); border-radius: var(--raio-controle); background: var(--ceu);
}
.cadeia-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.cadeia-seta { color: var(--texto-3); display: flex; justify-content: center; }
.cadeia-nota { margin-top: var(--e-2); font-size: var(--t-mini); color: var(--texto-2); }

@media (max-width: 900px) {
  .ficha-linha { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ------------------------------------------------- busca dentro da tela
   A mesma pílula da busca do topo, na altura dos filtros ao lado. As duas
   escrevem no mesmo estado: são a mesma busca vista de dois lugares, e não
   duas buscas. O campo da tela é o que a pessoa encontra, porque está onde
   ela já está olhando; o do topo continua para quem usa a tecla "/". */

.busca-tela { flex: 1 1 300px; max-width: 420px; min-width: 200px; }
/* 34px é a altura dos filtros ao lado. Campo mais alto que os vizinhos
   desalinha a barra inteira, e a barra é uma linha só de leitura. */
/* 🔒 A BUSCA E O FILTRO SÃO A MESMA BARRA.
   Lado a lado, a 12px um do outro, os dois não pareciam do mesmo sistema: o
   campo era pílula cinza sem contorno, o filtro era caixa branca de canto 8
   com aro — dois desenhos de controle encostados. O campo assume o desenho
   do vizinho: fundo `--carta`, aro em `--claro`, canto `--raio-acao`. A
   altura já era a mesma (`--alt-mini`), então a barra inteira se lê como uma
   linha só de ferramentas.

   Vale para `.busca-tela`, que é a busca DENTRO da tela — a do topo continua
   pílula, porque lá ela não divide barra com filtro nenhum. */
.busca-tela input {
  height: var(--alt-mini);
  padding: 0 var(--e-6) 0 var(--e-6);
  font-size: var(--t-apoio);
  background: var(--carta);
  border: 1px solid var(--claro);
  border-radius: var(--raio-acao);
}
/* O hover é o do botão: o aro responde, o fundo fica. Sem isto, `.busca
   input:hover` pinta o campo de cinza e ele volta a destoar do vizinho. */
.busca-tela input:hover {
  background: var(--carta);
  border-color: var(--indigo-aro);
}
.busca-tela input:focus {
  background: var(--carta);
  border-color: var(--indigo);
  box-shadow: var(--foco-halo);
}
.busca-tela .busca-lupa { left: 12px; }
.busca-tela .busca-x { right: 4px; width: 26px; height: 26px; }

@media (max-width: 720px) {
  .busca-tela { flex-basis: 100%; max-width: none; }
}


/* ------------------------------------------------- filtros secundários
   Um popover só, com os grupos separados. Painel lateral ou modal para
   escolher um filtro é peso demais para uma ação de um clique. */
.mais-filtros { max-height: 340px; overflow-y: auto; }
.mais-grupo + .mais-grupo {
  margin-top: var(--e-1); padding-top: var(--e-1);
  border-top: 1px solid var(--neutro-luz);
}

/* Cartão do celular: o mesmo conteúdo da linha, na ordem em que se lê */
.cartao-rota { font-size: var(--t-realce); font-weight: var(--peso-titulo); color: var(--grafite); }
.cartao-grave { box-shadow: inset 3px 0 0 var(--quente-cheio); background: var(--quente-veu); }
.cartao-acao {
  margin-top: var(--e-2); padding-top: var(--e-2);
  border-top: 1px dashed var(--claro);
  display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
}

/* Alvo de toque confortável no celular, nos controles da barra */
@media (max-width: 720px) {
  .ferramentas { gap: var(--e-3); }
  .ferr-filtros { width: 100%; }
  .ferr-filtros .bt-mini, .ferr-acoes .bt-mini { height: var(--alt-toque); padding: 0 var(--e-4); }
  .busca-tela input { height: var(--alt-toque); }
  .ferr-acoes { margin-left: 0; width: 100%; }
  .ferr-acoes .bt { width: 100%; justify-content: center; }
}

/* Alvo de toque: 32px basta com mouse, não com o polegar. No celular os
   controles pequenos sobem para 44, que é o mínimo da WCAG 2.2 AA. */
.redondo-mini { width: 32px; height: 32px; }
@media (max-width: 720px) {
  .redondo-mini { width: var(--alt-toque); height: var(--alt-toque); }
  .cracha { height: var(--alt-mini); }
  .cracha-x { width: 28px; height: 28px; }
  /* O cartão das convocações é o primeiro a levar a ação principal para
     dentro da lista, e no polegar ela é a coisa mais tocada da tela. */
  .cartao-acao .bt-mini { height: var(--alt-toque); padding: 0 var(--e-4); width: 100%; justify-content: center; }
}

/* Tablet: a tabela com a coluna de próxima ação não cabe em 1024. Sai
   Solicitante, que é a única informação daqui repetida no cartão e na
   ficha da cotação. Esconder é melhor que rolar na horizontal. */
@media (max-width: 1200px) {
  /* 🔒 A COLUNA SOME SEM SAIR DO FLUXO.
     Solicitante é o único dado desta tabela repetido no cartão e na ficha,
     e abaixo de 1200px não há largura para ele — esconder é melhor que
     rolar na horizontal. Mas `display: none` tira a célula do fluxo, e aí
     os `<col>` deixam de corresponder às colunas: o `colgroup` inteiro
     desliza uma casa e a tabela desalinha.

     A saída anterior era trocar o layout para `auto`, e ela cobrava caro:
     em automático a folga se reparte pelas larguras naturais, e a coluna
     do valor ficava com 186px para exibir "R$ 4.590,00", que ocupa 70 —
     116px de vão entre a próxima ação e o valor, o maior buraco da tabela
     —, enquanto "SLA de emissão descumprido" se espremia em 176.

     `visibility: hidden` com largura e respiro zerados apaga a coluna e a
     mantém no fluxo: o layout continua fixo e a folga se reparte pelas
     larguras que o sistema declarou. */
  .lista-acao { table-layout: fixed; width: 100%; }
  .lista-acao .c-que { width: 0; }
  .lista-acao th:nth-child(4),
  .lista-acao td:nth-child(4) {
    width: 0; padding: 0; overflow: hidden; visibility: hidden;
  }
}

/* Abaixo de 1100 sai também o valor homologado: ele está no cartão, na
   ficha e no relatório de economia, e aqui é o dado menos usado para
   decidir o que fazer agora. Some pelo mesmo mecanismo do solicitante —
   `visibility` e não `display` —, porque tirar a célula do fluxo desloca o
   `colgroup` e a tabela transborda 81px. */
@media (max-width: 1100px) {
  .lista-acao .c-val { width: 0; }
  .lista-acao th:nth-child(7), .lista-acao td:nth-child(7) {
    width: 0; padding: 0; overflow: hidden; visibility: hidden;
  }
}

/* --------------------------------------------- busca de agência e cadastro
   O resultado da busca é uma linha por agência, com a ação à direita: o
   objetivo é decidir num relance se ela já existe, não navegar. */

/* Busca da folha: é o único campo, então é ela que ocupa a linha inteira
   e a altura de um controle principal. O anel de foco é mais leve que o da
   barra de ferramentas, porque aqui não há vizinhos disputando atenção. */
/* 8px acima: o campo nascia colado no rodapé do cabeçalho da folha, e o
   anel de foco, que é desenhado por fora, pintava por cima do separador. */
.busca-folha { flex-basis: auto; width: 100%; max-width: none; margin-top: var(--e-2); }
.busca-folha input { height: var(--alt-controle); font-size: var(--t-realce); padding: 0 var(--e-6) 0 var(--e-7); }
.busca-folha input:focus { box-shadow: var(--foco-halo); }
.busca-folha .busca-lupa { left: 16px; }
.busca-folha .busca-x { right: 8px; }

/* Área de resultado com altura mínima: sem ela a folha muda de tamanho a
   cada tecla, e o rodapé sobe e desce debaixo do cursor. */
.achadas-area { min-height: 268px; margin-top: var(--e-4); }
.achadas-rot { display: block; margin-bottom: var(--e-1); }

.achadas { display: flex; flex-direction: column; gap: 0; }
.achada {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-3); border-radius: var(--raio-controle);
}
.achada:hover { background: var(--ceu); }
.achada-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.achada-nome {
  font-size: var(--t-corpo); font-weight: var(--peso-titulo); color: var(--grafite);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.achada .frouxo { font-size: var(--t-mini); }

/* Documento no formulário: anexo em cima, validade embaixo */
.doc-form { border: 1px solid var(--claro); border-radius: var(--raio-controle); padding: var(--e-3) var(--e-3); }
.doc-form-topo { display: flex; align-items: center; gap: var(--e-3); }
.doc-form-data {
  margin-top: var(--e-3); padding-top: var(--e-3);
  border-top: 1px dashed var(--claro);
  display: flex; align-items: flex-end; gap: var(--e-3); flex-wrap: wrap;
}
.doc-form-data .campo { width: 200px; }
.doc-form-data .relogio-quando { padding-bottom: var(--e-2); }

@media (max-width: 720px) {
  .achada { flex-wrap: wrap; }
  .achada .bt-mini { width: 100%; justify-content: center; }
  .doc-form-data .campo { width: 100%; }
}

/* ==========================================================================
   PEÇAS NOMEADAS — o que antes era estilo inline no app.jsx

   Cada uma destas classes existe porque havia um style={{…}} no JSX que não
   era espaçamento nem cor de token: era uma peça com papel próprio e sem
   nome. Nomeá-la é o que impede que ela reapareça diferente na próxima tela.
   ========================================================================== */

/* Estado de erro: a mesma bola do vazio, na família do vermelho */
.estado-bola-erro { background: var(--quente-luz); color: var(--quente); }

/* Esqueleto de carregamento: a silhueta da tabela, não um bloco cinza */
.ossos { padding: 0 var(--e-5) var(--e-3); display: flex; flex-direction: column; gap: var(--e-2); }
.ossos-linha {
  display: grid;
  grid-template-columns: 138px 112px 108px minmax(0, 1fr) 206px 136px 100px 52px;
  gap: var(--e-3); align-items: center;
  height: 58px; padding: 0 var(--e-3);
  background: var(--ceu); border-radius: var(--raio-controle);
}
.ossos-linha .osso { height: 11px; width: 76%; }
.ossos-linha .osso:nth-child(4) { width: 58%; }

/* Envelope da dica: só existe para ancorar o balão ao alvo */
.dica-envelope { position: relative; display: inline-flex; max-width: 100%; }

/* Rótulo do bloco de demonstração, no menu da conta */
.demo-rot {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-2);
}

/* Total à direita do cabeçalho, alinhado pela linha de base do número */
.mais-tot { margin-left: auto; display: flex; align-items: baseline; gap: var(--e-3); }

/* Tabela solta, fora do painel: sem largura fixa por coluna */
.lista-solta { table-layout: auto; min-width: 640px; }

/* O protocolo dentro de uma célula que já não é link */
.id-estatico { position: static; }

/* Lista de opções que pode passar da altura da tela */
.rolo-alto { max-height: 300px; overflow-y: auto; }

/* Dica colada ao grupo de campos acima dela */
.campo-dica-grupo { margin-top: calc(var(--e-1) * -1); margin-bottom: var(--e-2); }

/* Seletor de ano do calendário: não pode empurrar o de mês */
.cal-sel-ano { max-width: 92px; }

/* Nota sobre superfície tonal: inverte o fundo para não sumir */
.nota-clara { background: var(--carta); }
.nota-colada { margin-top: calc(var(--e-2) * -1); margin-bottom: var(--e-4); }

/* Caixa de respiro dentro de uma folha ou de um trilho */
.caixa-respiro { padding: var(--e-4) var(--e-5); }

/* Ficha da credenciada: cabeçalho da linha de documento aberta */
.doc-topo { display: flex; align-items: center; gap: var(--e-3); width: 100%; }

/* Faixa fina, quando o grupo é uma linha só */
.faixa-grupo-fino { padding: var(--e-1) 0; }

/* ==========================================================================
   AS DUAS NOTÍCIAS DO PAINEL

   A economia é o argumento do produto perante o Tribunal, e estava numa
   pílula do mesmo tamanho de "cotações no mês" — quer dizer, o que o produto
   tem de mais forte pesava igual ao contexto. Aqui ela é cartão-herói, com a
   régua que mostra o TAMANHO da diferença: número solto não tem tamanho,
   comparação tem.
   ========================================================================== */

.noticias {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--e-4);
  margin-bottom: var(--e-4);
}

.eco, .prazo-cx {
  background: var(--carta);
  border: 1px solid var(--fio);
  border-radius: var(--raio-cartao);
  padding: var(--e-4) var(--e-5) var(--e-5);
  display: flex; flex-direction: column;
  min-width: 0;
}

.eco-topo { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-3); }
.eco-rot {
  font-size: var(--t-mini); font-weight: var(--peso-forte);
  letter-spacing: var(--entreletra-etq); text-transform: uppercase;
  color: var(--texto-2); white-space: nowrap;
}
.eco-mes { margin-left: auto; font-size: var(--t-mini); color: var(--texto-2); white-space: nowrap; }

.eco-cifra { display: flex; align-items: baseline; gap: var(--e-4); flex-wrap: wrap; }
.eco-num {
  font-size: var(--t-heroi); font-weight: 400;
  letter-spacing: var(--entreletra-display);
  font-variant-numeric: tabular-nums;
  color: var(--grafite); line-height: 1.05;
  /* Cifra não quebra: "R$ 10.595,00" partido em duas linhas some com a
     leitura do número e atropela a régua logo abaixo. */
  white-space: nowrap;
}
/* Verde é economia, e é TEXTO: --vivo escreve, --vivo-cheio preenche. */
.eco-pct {
  display: inline-flex; align-items: center; gap: var(--e-1);
  font-size: var(--t-corpo); font-weight: var(--peso-forte);
  color: var(--vivo);
  font-variant-numeric: tabular-nums;
}
.eco-pct-leg { font-weight: 400; color: var(--texto-2); }

/* --- a régua da economia -------------------------------------------------- */

.eco-regua {
  margin-top: var(--e-4);
  display: flex; flex-direction: column; gap: var(--e-2);
}
.eco-barra { display: flex; align-items: center; gap: var(--e-3); }
.eco-barra-rot {
  width: 74px; flex-shrink: 0;
  font-size: var(--t-mini); color: var(--texto-2);
}
.eco-trilho {
  flex: 1; min-width: 0; height: 10px;
  border-radius: var(--raio-pilula);
  background: var(--neutro-luz);
  overflow: hidden;
}
.eco-tinta {
  display: block; height: 100%;
  border-radius: var(--raio-pilula);
  transition: width var(--dur-3) var(--mola);
}
/* A largura das duas barras passou a vir do dado, ancorada no maior dos
   dois. Antes a da referência era 100% fixo e a do pago se media contra
   ela — o que tornava impossível desenhar o caso em que se pagou MAIS que
   a referência, justamente o caso que o indicador precisa mostrar. */
.eco-tinta-ref { background: var(--claro); }
/* Pagou acima da referência: a barra troca de cor, e o cartão inteiro
   passa a ler como alerta em vez de conquista. */
.eco-tinta-acima { background: var(--quente-cheio); }
.eco-num-acima { color: var(--quente-cheio); }
.eco-pct-acima { color: var(--quente-cheio); }
.eco-tinta-pago { background: var(--vivo-cheio); }
.eco-barra-val {
  width: 74px; flex-shrink: 0; text-align: right;
  font-size: var(--t-apoio); font-weight: var(--peso-titulo);
  color: var(--grafite); font-variant-numeric: tabular-nums;
}

.eco-pe {
  margin-top: auto; padding-top: var(--e-4);
  display: flex; align-items: center; gap: var(--e-3);
}
.eco-origem { font-size: var(--t-mini); color: var(--texto-2); white-space: nowrap; }
.eco-pe .bt { white-space: nowrap; }

/* --- emissão no prazo ----------------------------------------------------- */

.prazo-num {
  font-size: var(--t-display); font-weight: 400;
  letter-spacing: var(--entreletra-display);
  font-variant-numeric: tabular-nums;
  color: var(--grafite); line-height: 1.05;
}
.prazo-leg { margin-top: var(--e-1); font-size: var(--t-apoio); color: var(--texto-2); }

/* Um traço por bilhete. A porcentagem arredonda e esconde o descumprimento;
   os traços deixam ele contável no olho. */
.prazo-tracos { display: flex; gap: 3px; margin-top: var(--e-3); flex-wrap: wrap; }
.traco { width: 10px; height: 4px; border-radius: var(--raio-pilula); }
.traco-ok { background: var(--vivo-cheio); }
.traco-fora { background: var(--quente-cheio); }

.prazo-fora, .prazo-limpo {
  margin-top: auto; padding-top: var(--e-3);
  display: inline-flex; align-items: center; gap: var(--e-1);
  font-size: var(--t-mini); font-weight: var(--peso-titulo);
}
.prazo-fora { color: var(--quente); }
.prazo-limpo { color: var(--vivo); }
.prazo-fora, .prazo-limpo { white-space: nowrap; }

/* --- tons da faísca ------------------------------------------------------- */

.faisca { flex-shrink: 0; }
.fai-bom { color: var(--vivo-cheio); }
.fai-acao { color: var(--indigo); }
/* Contexto não é sinal de nada, então não tem tom. */
.fai-neutro { color: var(--claro-2); }

@media (max-width: 1080px) {
  .noticias { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .eco-num { font-size: var(--t-display); }
  .eco-barra-rot { width: 62px; }
  .eco-barra-val { width: 62px; }
}

/* --- o cartão da sessão respira ------------------------------------------
   O contador de propostas é um retrato: muda de hora em hora. O "há quanto
   tempo" muda a cada segundo, e é ele que faz a peça parecer viva sem
   inventar chegada nenhuma — o número de propostas continua sendo o mesmo
   fato, lido no mesmo lugar. */

.seladas-desde {
  display: inline-flex; align-items: center; gap: var(--e-2);
  margin-left: var(--e-3);
  font-size: var(--t-mini); color: var(--texto-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.seladas-ponto {
  width: 6px; height: 6px; flex-shrink: 0;
  border-radius: var(--raio-circulo);
  background: var(--acento, var(--indigo));
  animation: respira var(--pulso-calmo) var(--mola) infinite;
}
@keyframes respira { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

/* O último lacre a chegar continua se anunciando: um aro que respira no
   ritmo do herói, e que acelera junto com ele na reta final. */
.peca-ultima::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: inherit;
  border: 1.5px solid var(--acento, var(--indigo));
  opacity: 0;
  animation: aro var(--pulso-calmo) var(--mola) infinite;
}
.peca { position: relative; }
.vivo-morno .peca-ultima::after { animation-duration: var(--pulso-tenso); }
.vivo-quente .peca-ultima::after,
.vivo-critico .peca-ultima::after { animation-duration: var(--pulso-urgente); }
@keyframes aro {
  0% { opacity: .55; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.32); }
}

/* ======================================================================
   A JORNADA DO CREDENCIAMENTO

   Quatro telas encadeadas que começam FORA da aplicação: a porta, a
   adesão, a confirmação e — do outro lado — a fila da Comissão.
   ====================================================================== */

/* ----------------------------------------------------------------- porta

   Uma tela de login, e só. Nada de landing page: quem chega aqui ou tem
   conta, ou vem se credenciar. As duas saídas cabem num cartão. */

.porta {
  min-height: 100vh; max-width: none; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: var(--e-5); background: var(--neutro-luz);
}
/* Duas colunas de um cartão só: a marca à esquerda, a porta à direita.
   O cartão tem sombra funda porque é a única peça do produto que flutua
   sobre nada — não há página por baixo dele. */
.porta-cartao {
  width: 100%; max-width: 68rem;
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--carta); border-radius: var(--raio-cartao);
  box-shadow: var(--funda); overflow: hidden;
}

/* O painel da marca. O azul é a base do imagotipo, não o azul de ação:
   ação é botão, e não pode competir com meio metro de fundo. */
.porta-marca {
  position: relative; isolation: isolate;
  background: #0d3f5e; color: #fff;
  min-height: 34rem; display: flex;
}
.porta-foto { position: absolute; inset: 0; z-index: 0; }

/* O carrossel: as três empilhadas no mesmo lugar, e só a da vez opaca.
   Dissolvência de 1,2s — longa de propósito, para a troca ser percebida
   pelo canto do olho e não puxar a atenção de quem veio digitar a senha. */
.porta-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s var(--mola);
}
.porta-img-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .porta-img { transition: none; }
}
/* O véu existe para o texto passar contraste com QUALQUER foto que caia
   ali. Sem foto ele é quase invisível sobre o azul; com foto, ele é o que
   segura a legibilidade. */
.porta-veu {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* As fotos escolhidas já são escuras (média de luminância entre 13 e 76).
     O véu antigo, em .82, as apagava; aqui ele só garante o contraste do
     texto na metade de baixo, onde o bloco da marca fica. */
  background: linear-gradient(185deg, rgba(13, 63, 94, .38) 0%, rgba(13, 63, 94, .32) 38%, rgba(9, 42, 63, .88) 100%);
}
/* O corpo era `space-between`: imagotipo colado no topo, lema colado na
   base e meio painel de vazio no meio. Centralizado, a marca vira um bloco
   só — que é o que ela é. */
.porta-marca-corpo {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--e-6); padding: var(--e-7) var(--e-6);
}
.porta-selo { display: flex; align-items: center; gap: var(--e-3); }
.porta-selo img { display: block; }
.porta-selo-nome {
  display: block; font-size: var(--t-titulo); font-weight: var(--peso-forte);
  letter-spacing: .12em; line-height: 1.1; white-space: nowrap;
}
.porta-selo-nome span {
  display: block; white-space: nowrap; font-size: var(--t-mini); font-weight: 400;
  letter-spacing: var(--entreletra-etq); color: var(--branco-78);
  text-transform: uppercase; margin-top: 3px;
}
.porta-dizer { display: flex; flex-direction: column; gap: var(--e-3); }
/* O lema é a frase da documentação, não uma citação inventada: o produto
   não tem depoimento de cliente, tem nome com significado. */
/* O lema é a voz da marca: em 16px ele competia com o parágrafo logo
   abaixo, e o painel inteiro lia como um bloco de texto só. */
.porta-lema {
  margin: 0; font-size: var(--t-numero); font-weight: var(--peso-titulo);
  line-height: 1.28; letter-spacing: var(--entreletra-titulo); text-wrap: pretty;
}
.porta-nota {
  margin: 0; font-size: var(--t-apoio); line-height: 1.55;
  color: var(--branco-78); max-width: 38ch; text-wrap: pretty;
}

/* A coluna da direita acompanha: o formulário fica no meio da altura em
   vez de começar no topo e deixar sobra embaixo. */
.porta-forma {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--e-4);
  padding: var(--e-7) var(--e-6);
}
.porta-cabeca { margin-bottom: var(--e-1); }
.porta-cabeca h1 {
  margin: 0; font-size: var(--t-display); font-weight: var(--peso-titulo);
  letter-spacing: var(--entreletra-display); color: var(--grafite);
}
.porta-cabeca p { margin: var(--e-1) 0 0; font-size: var(--t-apoio); color: var(--texto-2); }

/* O convite às agências. Cartão, não elo: quanto mais agências disputam,
   menor o preço, e como o Tribunal não pode convidar ninguém, a única
   alavanca que resta é esta porta ser vista. Um link de 13px ao lado de
   "Por que o UIRAJARR é assim" tratava as duas coisas como iguais. */
.convite {
  display: flex; gap: var(--e-3); align-items: flex-start;
  margin-top: var(--e-2); padding: var(--e-4);
  background: var(--indigo-veu);
  border: 1px solid var(--indigo-aro);
  border-radius: var(--raio-cartao);
}
.convite-icone {
  flex: 0 0 auto; width: 34px; height: 34px; margin-top: 1px;
  display: grid; place-items: center; border-radius: var(--raio-controle);
  background: var(--indigo-luz); color: var(--indigo-vivo);
}
.convite h2 {
  margin: 0; font-size: var(--t-corpo); font-weight: var(--peso-forte);
  color: var(--grafite);
}
.convite p { margin: var(--e-1) 0 0; font-size: var(--t-apoio); color: var(--texto-2); }
.entrar-bt { width: 100%; margin-top: var(--e-1); }

/* As duas saídas de quem ainda não tem conta. Ficam sob um fio porque são
   outra coisa que entrar — e a de credenciar pesa mais que a de ler. */
.entrar-pe {
  display: flex; justify-content: center; gap: var(--e-1);
  padding-top: var(--e-4);
  border-top: 1px solid var(--fio);
}
.entrar-elo { font-size: var(--t-apoio); }
/* O elo da documentação é <a> e não <button>: sem isto o navegador o
   sublinha e ele deixa de pertencer à família de ação. */
a.bt { text-decoration: none; }

/* --------------------------------------------------- progresso da adesão

   O formulário é longo por necessidade: cinco blocos, quinze campos e
   oito anexos. O que ele não pode ser é um paredão com uma lista de
   pendências ao lado — uma lista de oito itens não é progresso, é dívida.

   A jornada é a mesma informação lida ao contrário: cinco degraus, o que
   já está de pé e o que falta, com o degrau corrente marcado. Tudo deriva
   do mesmo cálculo que libera o botão (regra 15). */

.jornada { display: flex; flex-direction: column; gap: 0; }
.jornada-deg {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--e-3);
  width: 100%; text-align: left;
  padding: var(--e-2) 0;
  border: 0; background: none; cursor: pointer;
  border-radius: var(--raio-campo);
  transition: background var(--dur-1) var(--mola);
}
.jornada-deg:hover { background: var(--ceu); }
/* o fio que liga um degrau ao seguinte */
.jornada-deg::before {
  content: ""; position: absolute;
  left: 11px; top: 30px; bottom: -2px; width: 2px;
  background: var(--fio);
}
.jornada-deg:last-child::before { display: none; }

.jornada-bola {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: var(--raio-circulo);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--carta);
  box-shadow: inset 0 0 0 2px var(--claro);
  color: var(--texto-2);
  font-size: var(--t-micro); font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-2) var(--mola), box-shadow var(--dur-2) var(--mola),
              color var(--dur-2) var(--mola);
}
.jornada-corpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 2px; }
.jornada-rot {
  font-size: var(--t-apoio); font-weight: var(--peso-titulo);
  color: var(--texto-2);
}
.jornada-cont { font-size: var(--t-mini); color: var(--texto-2); font-variant-numeric: tabular-nums; }

/* Concluído: verde é conclusão, e aqui ele é literal. O fio abaixo do
   degrau também fecha, para a coluna mostrar até onde se chegou. */
.jornada-ok .jornada-bola {
  background: var(--vivo-cheio); box-shadow: none; color: var(--carta);
}
.jornada-ok .jornada-rot { color: var(--grafite); }
.jornada-ok::before { background: var(--vivo-cheio); }

/* Corrente: é onde a pessoa está, e é o único degrau em azul. */
.jornada-agora .jornada-bola {
  box-shadow: inset 0 0 0 2px var(--indigo);
  color: var(--indigo-vivo);
}
.jornada-agora .jornada-rot { color: var(--grafite); }

.jornada-barra {
  height: 4px; border-radius: var(--raio-pilula);
  background: var(--neutro-luz);
  overflow: hidden;
  margin-bottom: var(--e-3);
}
.jornada-tinta {
  height: 100%; border-radius: var(--raio-pilula);
  background: var(--vivo-cheio);
  transition: width var(--dur-3) var(--mola);
}
.jornada-conta {
  display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap;
  margin-bottom: var(--e-2);
}
/* "1 de 5" é um número só: quebrado entre o "de" e o "5" deixa de ser
   legível como contagem. */
.jornada-conta b {
  font-size: var(--t-titulo); font-weight: var(--peso-titulo);
  color: var(--grafite); font-variant-numeric: tabular-nums;
  letter-spacing: var(--entreletra-titulo);
  white-space: nowrap;
}
.jornada-conta span { font-size: var(--t-mini); color: var(--texto-2); }

/* O bloco que já está de pé ganha a marca no próprio número: o progresso
   se vê onde o trabalho acontece, e não só no trilho ao lado. */
.bloco-n-ok {
  background: var(--vivo-luz); color: var(--vivo);
  box-shadow: inset 0 0 0 1px var(--vivo-cheio);
}

/* ------------------------------------------------- conferência documento

   O ato de conferir precisa ser visível no lugar onde a mão está. Antes
   ele acontecia só como aviso no canto da tela: o documento mudava de
   estado sem que nada na linha se mexesse. */

@keyframes doc-conferido {
  0% { background: var(--vivo-luz); box-shadow: inset 3px 0 0 var(--vivo-cheio); }
  100% { background: transparent; box-shadow: inset 3px 0 0 transparent; }
}
@keyframes doc-recusado {
  0% { background: var(--quente-luz); box-shadow: inset 3px 0 0 var(--quente-cheio); }
  100% { background: transparent; box-shadow: inset 3px 0 0 transparent; }
}
.doc-mudou { animation: doc-conferido 1.4s var(--mola) both; }
.doc-mudou-mal { animation: doc-recusado 1.4s var(--mola) both; }

/* -------------------------------------------------------------- a trava

   🔒 Não se homologa com documento vencido, por conferir ou recusado.
   Antes isso era só um botão apagado, e botão apagado não diz por quê.
   A trava conta o que falta, some quando o último documento é aprovado, e
   dá lugar ao botão liberado — que é o momento que o servidor espera. */

.trava-cx {
  display: flex; align-items: center; gap: var(--e-2);
  margin-right: auto;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--raio-campo);
  background: var(--morno-luz);
  color: var(--morno);
  font-size: var(--t-apoio);
  max-width: 46ch;
}
.trava-cx b { font-weight: var(--peso-forte); }
.trava-cx svg { flex-shrink: 0; }
.trava-ruim { background: var(--quente-luz); color: var(--quente); }

@keyframes trava-solta {
  0% { transform: scale(.94); opacity: 0; }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}
.trava-solta { animation: trava-solta var(--dur-3) var(--mola) both; }

/* ------------------------------------------------------------- o alívio

   A confirmação vem depois de quinze campos e oito anexos. Ela não é um
   aviso: é o fim de um trabalho, e o protocolo é o que a pessoa veio
   buscar. Por isso ele é o maior elemento da tela. */

.recibo {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--e-3);
  padding: var(--e-6) var(--e-5) var(--e-5);
}
.recibo-marca {
  width: 56px; height: 56px; border-radius: var(--raio-circulo);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vivo-luz); color: var(--vivo);
  animation: recibo-entra var(--dur-3) var(--mola) both;
}
@keyframes recibo-entra {
  from { transform: scale(.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.recibo h1 {
  font-size: var(--t-titulo); font-weight: var(--peso-titulo);
  color: var(--grafite); letter-spacing: var(--entreletra-titulo);
}
.recibo-quem { font-size: var(--t-corpo); color: var(--texto-2); }
.recibo-proto {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-1);
  margin-top: var(--e-2);
  padding: var(--e-4) var(--e-6);
  border: 1px dashed var(--claro);
  border-radius: var(--raio-controle);
  background: var(--ceu);
}
.recibo-proto b {
  font-family: var(--fonte-mono);
  font-size: var(--t-numero); font-weight: var(--peso-forte);
  color: var(--grafite); letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.recibo-proto span { font-size: var(--t-mini); color: var(--texto-2); white-space: nowrap; }
.recibo-prazo { font-size: var(--t-apoio); color: var(--texto-2); max-width: 52ch; }

@media (prefers-reduced-motion: reduce) {
  .doc-mudou, .doc-mudou-mal, .trava-solta, .recibo-marca { animation: none; }
}

@media (max-width: 860px) {
  /* Abaixo de 860px o painel da marca deixa de ser coluna e passa a ser
     faixa: ele continua dizendo onde a pessoa está, sem roubar a metade
     da tela de quem só quer entrar. */
  .porta { padding: var(--e-4); }
  .porta-cartao { grid-template-columns: 1fr; max-width: 28rem; }
  .porta-marca { min-height: 0; }
  .porta-marca-corpo { gap: var(--e-4); padding: var(--e-5); }
  .porta-lema { font-size: var(--t-realce); }
  .porta-nota { display: none; }
  .porta-forma { padding: var(--e-5); }
}


/* ===================================================================== *
   O PEDIDO — densidade e progresso                            (spec 03)

   O formulário não encolheu: ele tem vinte campos porque a cotação precisa
   de vinte campos. O que mudou é quanto deles está aberto de uma vez. Uma
   etapa concluída recolhe para a sua própria recapitulação — uma linha que
   diz o que ficou decidido — e devolve a tela para a etapa seguinte. Quem
   usa esta tela usa duas vezes por ano: ela tem de dizer, sem ser lida,
   onde a pessoa está e quanto falta.
 * ===================================================================== */

.etapa {
  background: #fff; border: 1px solid var(--fio);
  border-radius: var(--raio-cartao); overflow: hidden;
  transition: border-color var(--dur-2) var(--mola), box-shadow var(--dur-2) var(--mola);
}
.etapa + .etapa { margin-top: var(--e-3); }
.etapa-ativa { border-color: var(--indigo-aro); box-shadow: var(--suave); }

.etapa-cab {
  display: flex; align-items: flex-start; gap: var(--e-3); width: 100%;
  padding: var(--e-4) var(--e-5); background: none; border: 0;
  font: inherit; color: var(--grafite); text-align: left; cursor: pointer;
}
.etapa-cab:hover { background: var(--indigo-veu); }
.etapa-pronta .etapa-cab:hover { background: var(--neutro-hover); }

/* O selo é o progresso: número enquanto falta, tique quando fecha. */
.etapa-selo {
  flex: 0 0 auto; width: 26px; height: 26px; margin-top: 1px;
  display: grid; place-items: center; border-radius: var(--raio-circulo);
  background: var(--neutro-2); color: var(--texto-2);
  font-size: var(--t-mini); font-weight: var(--peso-forte);
  transition: background var(--dur-3) var(--mola), color var(--dur-3) var(--mola);
}
.etapa-ativa .etapa-selo { background: var(--indigo); color: #fff; }
.etapa-pronta .etapa-selo { background: var(--vivo-luz); color: var(--vivo); }
.etapa-pronta .etapa-selo > * { animation: chegar var(--dur-3) var(--mola) both; }

.etapa-tit { display: block; min-width: 0; flex: 1; }
.etapa-h {
  display: block; font-size: var(--t-realce); font-weight: var(--peso-titulo);
  letter-spacing: var(--entreletra-titulo); color: var(--grafite);
}
.etapa-tit p { margin: 2px 0 0; font-size: var(--t-mini); color: var(--texto-2); }

/* A recapitulação: o que a etapa decidiu, em uma linha, sem abrir. */
.etapa-recap {
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); margin-top: var(--e-1);
  font-size: var(--t-apoio); color: var(--texto);
  animation: chega var(--dur-3) var(--mola) both;
}
.etapa-recap > span { display: inline-flex; align-items: center; gap: 5px; }
.etapa-recap > span + span::before {
  content: ""; width: 3px; height: 3px; border-radius: var(--raio-circulo);
  background: var(--claro-2); margin-right: var(--e-2);
}
.etapa-falta { color: var(--morno); font-size: var(--t-mini); margin-top: 3px; display: block; }

.etapa-seta { flex: 0 0 auto; color: var(--texto-3); margin-top: 3px; transition: transform var(--dur-3) var(--mola); }
.etapa-ativa .etapa-seta { transform: rotate(180deg); }

.etapa-corpo {
  padding: 0 var(--e-5) var(--e-5);
  animation: etapa-abre var(--dur-3) var(--mola) both;
}
@keyframes etapa-abre {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
/* A espinha do trilho: onde estou, quanto falta, e por onde pular. */
.espinha { display: flex; flex-direction: column; gap: 2px; padding: var(--e-2) 0 0; }
.espinha-item {
  display: flex; align-items: center; gap: var(--e-3); width: 100%;
  padding: var(--e-2) var(--e-3); border: 0; border-radius: var(--raio-controle);
  background: none; font: inherit; font-size: var(--t-apoio); color: var(--texto);
  text-align: left; cursor: pointer; position: relative;
}
.espinha-item:hover { background: var(--neutro-hover); }
.espinha-on { background: var(--indigo-luz); color: var(--indigo-vivo); font-weight: var(--peso-forte); }
.espinha-on:hover { background: var(--indigo-luz); }
.espinha-bola {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: var(--raio-circulo);
  background: #fff; box-shadow: 0 0 0 2px var(--claro-2) inset;
  transition: background var(--dur-2) var(--mola), box-shadow var(--dur-2) var(--mola);
}
.espinha-feita .espinha-bola { background: var(--vivo-cheio); box-shadow: none; }
.espinha-on .espinha-bola { background: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-aro); }
/* O fio que liga um degrau ao seguinte: a espinha é uma, não cinco pontos. */
.espinha-item + .espinha-item::before {
  content: ""; position: absolute; left: calc(var(--e-3) + 4px); top: -2px; height: 6px;
  width: 1px; background: var(--claro);
}
.espinha-feita + .espinha-feita::before, .espinha-feita + .espinha-on::before { background: var(--vivo-cheio); }
.espinha-nome { display: block; flex: 1; min-width: 0; }
.espinha-nota { font-size: var(--t-micro); color: var(--texto-2); font-weight: 400; }

/* A régua do progresso. Não é decoração: é a resposta a "quanto falta". */
.medidor { height: 4px; border-radius: var(--raio-pilula); background: var(--neutro-2); overflow: hidden; }
.medidor-parte {
  height: 100%; border-radius: var(--raio-pilula); background: var(--indigo);
  transition: width var(--dur-4) var(--mola), background var(--dur-3) var(--mola);
}
.medidor-cheio .medidor-parte { background: var(--vivo-cheio); }

/* ===================================================================== *
   A ORDEM DE SERVIÇO — a revelação                             (spec 07)

   🔒 Do lado do Tribunal o dado nasce e morre mascarado, inclusive para o
   gestor. Do lado de quem emite, revelar é um ato: por isso a máscara não
   troca de conteúdo, ela ROMPE. Os blocos se dissolvem, o caractere real
   aterrissa um a um, e o selo com autor e horário fica na linha — porque o
   acesso não é um estado de tela, é uma entrada na trilha.
 * ===================================================================== */

/* A placa do lacre, no alto da lista. Do lado do Tribunal ela não sai. */
.lacre {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); margin-bottom: var(--e-3);
  border: 1px solid var(--fio); border-radius: var(--raio-controle);
  background: var(--neutro-luz); font-size: var(--t-apoio); color: var(--texto);
}
.lacre-icone { flex: 0 0 auto; color: var(--texto-2); display: grid; place-items: center; }
.lacre b { color: var(--grafite); font-weight: var(--peso-forte); }
.lacre-conta { margin-left: auto; flex: 0 0 auto; font-size: var(--t-mini); color: var(--texto-2); }

/* A linha do passageiro durante a revelação: um clarão que atravessa. */
.pax-selada { position: relative; overflow: hidden; }
.pax-abrindo {
  animation: pax-acorda var(--dur-4) var(--mola) both;
  animation-delay: calc(var(--passo) * var(--ordem, 0));
}
@keyframes pax-acorda {
  0% { background: transparent; }
  30% { background: var(--indigo-luz); }
  100% { background: transparent; }
}
.pax-abrindo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, var(--branco-78) 50%, transparent 62%);
  animation: pax-varre .72s var(--mola) both;
  animation-delay: calc(var(--passo) * var(--ordem, 0));
}
@keyframes pax-varre { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* O campo selado. Bloco cheio enquanto lacrado; caractere quando aberto. */
.sel { display: inline-flex; align-items: baseline; gap: 5px; font-size: var(--t-mini); }
.sel-rot { color: var(--texto-2); }
.sel-val { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.sel-lacrada .sel-val {
  color: var(--texto-3); letter-spacing: .06em;
  font-family: var(--fonte-mono); font-size: var(--t-micro);
}
.sel-aberta .sel-val { color: var(--texto); font-weight: var(--peso-forte); }
/* Cada caractere aterrissa com o seu atraso: o dado chega, não aparece. */
.sel-c { display: inline-block; }
.sel-anima .sel-c {
  animation: sel-cai var(--dur-3) var(--mola) both;
  animation-delay: calc(var(--passo) * var(--ordem, 0) + 300ms + var(--c) * 26ms);
}
@keyframes sel-cai {
  from { opacity: 0; transform: translateY(-5px) scale(.86); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
.sel-anima.sel-lacrada .sel-val {
  animation: sel-rompe var(--dur-3) var(--mola) both;
  animation-delay: calc(var(--passo) * var(--ordem, 0));
}
@keyframes sel-rompe {
  0% { opacity: 1; letter-spacing: .06em; }
  100% { opacity: 0; letter-spacing: .5em; }
}

/* O selo do ato, que fica na linha depois que a animação passa. */
.selo-ato {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px var(--e-2); border-radius: var(--raio-campo);
  background: var(--indigo-luz); color: var(--indigo-vivo);
  font-size: var(--t-micro); font-weight: var(--peso-forte);
  animation: trava-solta var(--dur-4) var(--mola) both;
  animation-delay: calc(var(--passo) * var(--ordem, 0) + 620ms);
}
.selo-ato .mono { font-family: var(--fonte-mono); font-weight: 400; }

/* ===================================================================== *
   A AUDITORIA — o ciclo como linha do tempo                    (spec 05)

   Era um cartão cinza com uma lista dentro. É o que vai para o anexo da
   ata: tem de ler como o andamento de um processo. Abrir o ciclo desenha
   o trilho de cima para baixo e os atos aterrissam na ordem em que
   aconteceram, cada um carregando o elo que prende ao anterior.
 * ===================================================================== */

.ciclo { background: #fff; border: 1px solid var(--fio); border-radius: var(--raio-cartao); }
.ciclo + .ciclo { margin-top: var(--e-2); }
.ciclo-on { border-color: var(--claro); box-shadow: var(--suave); }
.ciclo-cab { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); }
.ciclo-cab > .pax-acoes { flex: 0 0 auto; }

/* O prefixo do protocolo já diz que ciclo é. A placa só o torna visível. */
.ciclo-placa {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--raio-controle);
  display: grid; place-items: center; background: var(--neutro-luz); color: var(--texto-2);
}
.ciclo-CR { background: var(--morno-luz); color: var(--morno); }
.ciclo-PD { background: var(--indigo-luz); color: var(--indigo-vivo); }
.ciclo-RR { background: var(--vivo-luz); color: var(--vivo); }

.ciclo-corpo { display: block; min-width: 0; flex: 1; }
.ciclo-num {
  display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
  font-size: var(--t-corpo); color: var(--grafite); font-weight: var(--peso-titulo);
}
.ciclo-num .mono { font-family: var(--fonte-mono); letter-spacing: -.2px; }
.ciclo-tipo { font-size: var(--t-mini); color: var(--texto-2); font-weight: 400; }
.ciclo-meta {
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3);
  margin-top: 2px; font-size: var(--t-mini); color: var(--texto-2);
}
.ciclo-vao { font-variant-numeric: tabular-nums; }
.ciclo-liga { display: inline-flex; align-items: center; gap: 4px; color: var(--indigo-vivo); }

/* O segundo número do ciclo, colado ao primeiro: a compra tem o protocolo
   da cotação E o do pedido que a abriu, e procurar por qualquer um dos dois
   traz a mesma história. Fica mais discreto que o principal — mostra a
   procedência sem competir com o número pelo qual a compra é chamada. */
.ciclo-de {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--apoio); font-size: var(--t-mini);
}

/* O corpo: trilho vertical que se desenha, atos que aterrissam em ordem. */
.ciclo-atos {
  position: relative; margin: 0; padding: var(--e-2) var(--e-4) var(--e-4) calc(var(--e-4) + 16px);
  list-style: none; border-top: 1px solid var(--fio-2);
}
.ciclo-atos::before {
  content: ""; position: absolute; left: calc(var(--e-4) + 22px); top: var(--e-5); bottom: var(--e-6);
  width: 2px; border-radius: 1px; background: var(--claro);
  transform-origin: top; animation: trilho-desce var(--dur-4) var(--mola) both;
}
@keyframes trilho-desce { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.ato-no {
  position: relative; display: flex; gap: var(--e-4); padding: var(--e-3) 0;
  animation: aterrissa var(--dur-3) var(--mola) both;
  animation-delay: calc(var(--passo) * var(--ordem, 0) + 120ms);
}
.ato-no + .ato-no { border-top: 1px solid var(--fio-2); }
.ato-marco {
  flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px; border-radius: var(--raio-circulo);
  background: #fff; box-shadow: 0 0 0 2px var(--claro) inset, 0 0 0 4px #fff;
  display: grid; place-items: center; position: relative; z-index: 1;
}
.ato-no:last-child .ato-marco { box-shadow: 0 0 0 7px var(--indigo-luz) inset, 0 0 0 4px #fff; }
.ato-hora {
  display: block; flex: 0 0 auto; width: 58px; font-family: var(--fonte-mono); font-size: var(--t-apoio);
  color: var(--grafite); font-variant-numeric: tabular-nums;
}
.ato-hora span { display: block; font-family: var(--fonte); font-size: var(--t-micro); color: var(--texto-2); }
.ato-dizer { display: block; min-width: 0; flex: 1; }
.ato-dizer .ato-nome { font-size: var(--t-corpo); color: var(--grafite); }
.ato-quem {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2);
  margin-top: 2px; font-size: var(--t-mini); color: var(--texto-2);
}
.ato-mudou { margin-top: var(--e-2); }
.ato-elo { display: block; flex: 0 0 auto; align-self: flex-start; margin-top: 2px; }

/* O pé: a cadeia se fecha e o cartão diz quantos elos foram conferidos. */
.ciclo-pe {
  display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
  padding: var(--e-3) var(--e-4); border-top: 1px solid var(--fio-2);
  background: var(--neutro-luz); border-radius: 0 0 var(--raio-cartao) var(--raio-cartao);
  font-size: var(--t-mini); color: var(--texto-2);
}

@media (max-width: 720px) {
  .etapa-cab, .etapa-corpo { padding-left: var(--e-4); padding-right: var(--e-4); }
  .ato-no { flex-wrap: wrap; }
  .ato-hora { width: auto; }
  .ciclo-atos { padding-left: var(--e-4); }
  .ciclo-atos::before { left: calc(var(--e-4) + 6px); }
}
@media (prefers-reduced-motion: reduce) {
  .pax-abrindo::after, .sel-anima .sel-c, .sel-anima.sel-lacrada .sel-val,
  .ciclo-atos::before, .ato-no, .selo-ato, .etapa-corpo { animation: none; }
}

/* O acesso recém-registrado se anuncia uma vez e depois é só mais uma
   linha da lista — como todo ato da trilha. */
.nota-nova { animation: aterrissa var(--dur-4) var(--mola) both; animation-delay: 700ms; }

/* Título de ato clicável dentro da linha do tempo: é um botão, mas não
   parece um — a linha inteira é a peça, o nome é só a maçaneta. */
.bt-texto {
  padding: 0; border: 0; background: none; font: inherit; text-align: left;
  color: inherit; cursor: pointer; border-radius: var(--raio-campo);
}
.bt-texto:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ===================================================================== *
   FITA DA JORNADA — andaime, e tem de parecer andaime

   Ela é grafite e não usa nenhuma cor de estado do sistema: se parecesse
   peça do produto, alguém pediria para mantê-la. O nome da jornada é o
   que se lê de longe; o do setor não aparece em lugar nenhum, porque o
   desenho não sabe como o Tribunal chama cada unidade por dentro.
 * ===================================================================== */

/* Altura FIXA e nada de quebra de linha: a fita é a régua de deslocamento
   da barra do produto, e uma fita que cresce empurra a barra para dentro
   do conteúdo. O que não couber recolhe — nunca embrulha. */
.fita {
  position: sticky; top: 0; z-index: 45;
  display: flex; align-items: center; gap: var(--e-4);
  padding: 0 var(--e-5); height: var(--fita-alt); overflow: hidden;
  background: var(--grafite); color: #fff;
  font-size: var(--t-mini);
}
.fita-marca {
  flex: 0 0 auto; padding: 2px var(--e-2); border-radius: var(--raio-campo);
  background: var(--branco-16); color: var(--branco-78);
  font-size: var(--t-micro); letter-spacing: var(--entreletra-etq); text-transform: uppercase;
}
/* Duas travas, porque uma só falhava numa faixa de largura: a coluna só
   entra em 900px, e até lá o nome da jornada TRUNCA em vez de transbordar
   por cima dos botões. `overflow` no contêiner e `text-overflow` no filho
   — reticências não se aplicam a caixa flex. */
.fita-dizer {
  min-width: 0; display: flex; align-items: baseline; gap: var(--e-2);
  flex-wrap: nowrap; white-space: nowrap; overflow: hidden;
}
.fita-dizer b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fita-dizer b { color: #fff; font-weight: var(--peso-forte); }
.fita-nota { color: var(--branco-65); }

/* O trocador vive na própria fita: percorrer as jornadas é ir e voltar
   entre os quatro lados, e fazer isso pelo menu da conta são três cliques
   por troca. Aqui é um. */
.fita-troca { margin-left: auto; display: flex; gap: var(--e-1); flex-shrink: 0; }
.fita-bt {
  border: 0; background: none; color: var(--branco-78);
  font: inherit; font-size: var(--t-micro); cursor: pointer;
  padding: 3px var(--e-2); border-radius: var(--raio-campo);
}
.fita-bt:hover { background: var(--branco-12); color: #fff; }
.fita-bt-on { background: #fff; color: var(--grafite); font-weight: var(--peso-forte); }
.fita-bt:focus-visible {
  outline: var(--foco-largura) solid var(--indigo-inv); outline-offset: 2px;
}

/* A fita empurra o que era colado ao topo: a barra do produto e o trilho
   lateral. Sem isto os dois deslizam por baixo dela. */
.fita ~ .topo { top: var(--fita-alt); }
.fita ~ * .trilho { top: calc(var(--colado-topo) + var(--fita-alt)); }

@media (max-width: 1240px) { .fita-nota { display: none; } }
@media (max-width: 1000px) { .fita-pre { display: none; } }
@media (max-width: 900px) {
  /* A fita passa a duas faixas: a frase em cima, o trocador embaixo. A
     altura muda com ela, e por isso o token muda no mesmo lugar — senão a
     barra do produto volta a deslizar por baixo. */
  :root { --fita-alt: 64px; }
  .fita { flex-direction: column; align-items: stretch; justify-content: center;
    gap: var(--e-1); padding: var(--e-2) var(--e-4); }
  .fita-marca { display: none; }
  .fita-troca { margin-left: 0; overflow-x: auto; }
}

/* Quando o histórico não existe ainda — agência não liberada —, o par vira
   coluna única em vez de deixar metade da largura vazia. */
.dupla-simples { grid-template-columns: 1fr; }

/* A ficha do passageiro na folha do pedido: o cartão passa a empilhar,
   porque agora carrega CPF, nascimento, sexo e contato além do nome. */
.pax-ficha { align-items: flex-start; }
.pax-ficha .pax-corpo { display: flex; flex-direction: column; }
.pax-ficha .faixa-grupo { display: flex; flex-wrap: wrap; gap: var(--e-4); }

/* ----------------------------------------------------------------------
   OS ATALHOS DE PERFIL, NO LOGIN

   Quatro botões no lugar de uma caixa suspensa. A caixa escondia o que o
   produto precisa mostrar antes de ser usado: que esta história tem quatro
   lados. Clicar preenche os campos acima — o avaliador vê de onde veio o
   acesso, e o Entrar continua sendo um ato dele.
   ---------------------------------------------------------------------- */

.atalhos { margin-top: var(--e-5); }

.atalhos-rot {
  display: block; text-align: center;
  margin-bottom: var(--e-3);
  font-size: var(--t-mini); color: var(--texto-2);
}

.atalhos-grade {
  display: grid; gap: var(--e-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.atalho {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--alt-controle);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--claro); border-radius: var(--raio-acao);
  background: var(--carta); color: var(--texto);
  font-family: inherit; font-size: var(--t-mini); font-weight: var(--peso-titulo);
  text-align: left; cursor: pointer;
  transition: border-color var(--dur-1) var(--mola), background var(--dur-1) var(--mola);
}
.atalho svg { flex-shrink: 0; color: var(--texto-2); }
.atalho span { min-width: 0; }
.atalho:hover { border-color: var(--indigo); background: var(--ceu); }
.atalho:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* O escolhido fica marcado: sem isso, preencher os campos e não mudar nada
   no botão faz o clique parecer que não funcionou. */
.atalho-on {
  border-color: var(--indigo);
  background: var(--indigo-luz);
  color: var(--indigo-vivo);
}
.atalho-on svg { color: var(--indigo-vivo); }

@media (max-width: 420px) {
  .atalhos-grade { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------
   CAMPO DE AEROPORTO

   Digita-se o que se sabe — cidade, nome do aeroporto ou código — e a
   lista devolve o código IATA. Catálogo fixo: dele sai a modalidade do
   trecho, que fixa o prazo de emissão da agência.
   ---------------------------------------------------------------------- */

.aero { position: relative; }

.aero-lista {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 17rem; overflow-y: auto;
  background: var(--carta);
  border: 1px solid var(--claro); border-radius: var(--raio-controle);
  box-shadow: var(--funda);
  padding: var(--e-1);
}

.aero-item {
  display: flex; align-items: center; gap: var(--e-3); width: 100%;
  padding: var(--e-2) var(--e-3);
  border: 0; border-radius: var(--raio-campo);
  background: transparent; color: var(--texto);
  font: inherit; text-align: left; cursor: pointer;
}
.aero-item:hover, .aero-item:focus-visible { background: var(--ceu); outline: none; }
.aero-item[aria-selected="true"] { background: var(--indigo-luz); }

.aero-cod {
  flex-shrink: 0; width: 2.75rem;
  font-weight: var(--peso-forte); color: var(--grafite);
  font-variant-numeric: tabular-nums; letter-spacing: .03em;
}

/* O país só aparece quando NÃO é Brasil: marcar o normal é ruído, e o que
   importa aqui é enxergar de longe que o trecho virou internacional. */
.aero-fora {
  flex-shrink: 0;
  padding: 1px var(--e-2); border-radius: var(--raio-pilula);
  background: var(--morno-luz); color: var(--morno);
  font-size: var(--t-micro); font-weight: var(--peso-forte);
}

.aero-vazio {
  padding: var(--e-3);
  font-size: var(--t-apoio); color: var(--texto-2);
}

/* Diz o que a lista é quando ela não é resultado de busca: sem isso, os
   destinos frequentes se passariam por "os aeroportos que casam". */
.aero-titulo {
  padding: var(--e-2) var(--e-3) var(--e-1);
  font-size: var(--t-micro); font-weight: var(--peso-forte);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-2);
}

/* ------------------------------------------------------------- a minuta */

/* O CONTRATO PRECISA PARECER UM CONTRATO.

   Ele estava reduzido a um nome de arquivo numa lista, ao lado dos oito
   documentos que a agência enviou — e não é um deles: os outros provam que
   ela pode participar, este é o ato do Tribunal que a libera. Aqui ganha
   corpo de documento: coluna estreita, texto corrido, cláusulas numeradas e
   as duas linhas de assinatura no fim.

   Os campos variáveis ficam marcados. O realce não é enfeite: responde à
   pergunta de quem confere, que é "o que a plataforma preencheu sozinha e o
   que alguém digitou". */
.minuta {
  border: 1px solid var(--claro);
  border-radius: var(--raio-cartao);
  background: var(--carta);
  padding: var(--e-5) var(--e-5) var(--e-4);
  max-width: 62ch;
}
.minuta-cabeca {
  margin: 0 0 var(--e-4);
  text-align: center;
  font-size: var(--t-corpo);
  font-weight: var(--peso-titulo);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.minuta-titulo {
  margin: var(--e-4) 0 var(--e-2);
  font-size: var(--t-mini);
  font-weight: var(--peso-titulo);
  letter-spacing: .04em;
  color: var(--apoio);
}
.minuta-p {
  margin: 0 0 var(--e-3);
  font-size: var(--t-corpo);
  line-height: 1.7;
  text-align: justify;
}
.minuta-fecho { margin-top: var(--e-5); text-align: left; color: var(--apoio); }

/* Um campo que a plataforma preenche a partir do cadastro. */
.var {
  background: var(--indigo-luz);
  color: var(--indigo-vivo);
  border-radius: var(--raio-campo);
  padding: 0 4px;
  font-weight: var(--peso-titulo);
  white-space: nowrap;
}
/* Campo sem valor: existe no modelo, mas ainda não há de onde preencher. */
.var-vazio {
  background: var(--neutro-luz);
  color: var(--apoio);
  font-family: var(--fonte-mono, ui-monospace, monospace);
  font-weight: var(--peso-corpo);
}

.minuta-assina {
  display: flex; gap: var(--e-6); flex-wrap: wrap;
  margin-top: var(--e-6); padding-top: var(--e-4);
  border-top: 1px solid var(--claro);
}
.minuta-linha { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.minuta-linha b { font-size: var(--t-corpo); }
.minuta-linha span { font-size: var(--t-mini); color: var(--apoio); }

/* Um botão que se lê como elo dentro de uma frase. */
.elo-txt {
  border: 0; background: none; padding: 0;
  font: inherit; color: var(--indigo-vivo);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.elo-txt:hover { color: var(--indigo-fundo, var(--indigo-vivo)); }

/* ------------------------------------------------------------- a agenda */

/* SESSÕES DEIXOU DE SER TABELA.

   Ela e Cotações mostravam as mesmas vinte e uma linhas em duas tabelas
   quase idênticas — e "duas tabelas iguais" é o que o leitor vê, por mais
   que as colunas difiram. Uma cotação tem exatamente uma sessão, então a
   lista é mesmo a mesma; o que nunca apareceu foi que a pergunta é outra.

   Aqui o tempo organiza. O dia é o título, a hora é a âncora à esquerda, e
   o olho desce pelo horário como desce numa agenda de papel. */
.agenda { display: flex; flex-direction: column; gap: var(--e-5); }

.ag-dia { display: flex; flex-direction: column; gap: var(--e-2); }

.ag-cab {
  display: flex; align-items: baseline; gap: var(--e-3);
  margin: 0; padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--claro);
}
.ag-rot {
  font-size: var(--t-mini); font-weight: var(--peso-titulo);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--apoio);
}
.ag-conta { font-size: var(--t-mini); color: var(--fraco); margin-left: auto; }

/* Hoje é o único dia que se destaca: é onde a pessoa está. */
.ag-dia-hoje .ag-rot { color: var(--indigo-vivo); }
.ag-dia-hoje .ag-cab { border-bottom-color: var(--indigo-aro); }

.ag-lista { list-style: none; margin: 0; padding: 0; }

.ag-hora {
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-3) var(--e-2);
  border-bottom: 1px solid var(--claro);
}
.ag-hora:last-child { border-bottom: 0; }
.ag-hora:hover { background: var(--carta); }

/* A janela aberta agora: fio à esquerda, e só ela o tem. */
.ag-hora-viva {
  background: var(--indigo-luz);
  border-left: 3px solid var(--indigo-vivo);
  padding-left: calc(var(--e-2) - 3px);
  border-radius: var(--raio-controle);
}
.ag-hora-viva:hover { background: var(--indigo-luz); }

/* Coluna fixa: os horários alinham entre si, que é o que faz a lista ler
   como agenda e não como parágrafo. */
.ag-sel {
  flex: 0 0 auto; width: 56px;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-corpo); font-weight: var(--peso-titulo);
  color: var(--texto);
}
.ag-dia:not(.ag-dia-hoje) .ag-sel { color: var(--apoio); }
.ag-hora-viva .ag-sel { color: var(--indigo-vivo); }

.ag-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ag-tit {
  font-size: var(--t-corpo); font-weight: var(--peso-titulo);
  color: var(--texto); text-decoration: none;
}
.ag-tit:hover { text-decoration: underline; text-underline-offset: 2px; }
.ag-meta {
  font-size: var(--t-mini); color: var(--apoio);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ag-num { flex: 0 0 auto; width: 132px; }
.ag-fim { flex: 0 0 auto; }

@media (max-width: 720px) {
  /* No telefone a linha vira DUAS faixas, não quatro colunas espremidas:
     em cima a hora, quantas propostas e o estado; embaixo o trecho e o
     protocolo. Empilhar em três faixas dava 142px por disputa — treze
     dias viravam rolagem sem fim, e agenda que não cabe na tela deixa de
     ser agenda. */
  .ag-hora { flex-wrap: wrap; gap: var(--e-1) var(--e-3); }
  .ag-sel { width: auto; order: 1; }
  .ag-num { width: auto; order: 2; }
  .ag-fim { order: 3; margin-left: auto; }
  .ag-corpo { flex: 1 1 100%; order: 4; }
  /* A barra é leitura comparativa, e comparar exige ver várias lado a
     lado — o que o telefone não dá. O número sozinho basta. */
  .ag-num .part-trilho { display: none; }
}

/* Um "campo" que não é campo: mostra um parâmetro fixo com o mesmo peso
   visual dos vizinhos editáveis, sem fingir que se digita nele. A duração
   da janela é isso — igual para todas as disputas, e por isso não é um
   número que quem conduz escolhe. */
.entrada-fixa {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  background: var(--neutro-luz);
  border-color: transparent;
  cursor: default;
}
.entrada-fixa .frouxo { font-size: var(--t-mini); }

/* ------------------------------------------------- a demanda selada */

/* 🔒 CONVOCAR É DIZER QUANDO, NÃO O QUÊ.

   Antes da abertura a agência sabe a hora e mais nada. Trecho, datas,
   condições e passageiros abrem no mesmo instante para todas.

   Não é preciosismo: com a rota à vista na véspera, dá tempo de combinar
   preço — e dá para escolher a dedo em quais leilões aparecer, somindo das
   rotas magras. Aí "Participação", que mede credenciamento vivo, passaria a
   medir apetite comercial. */
.selado {
  display: flex; gap: var(--e-4); align-items: flex-start;
  padding: var(--e-5);
  border: 1px dashed var(--aro);
  border-radius: var(--raio-cartao);
  background: var(--neutro-luz);
}
.selado-icone {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--raio-circulo);
  background: var(--carta);
  color: var(--apoio);
}
.selado-corpo { min-width: 0; }
.selado-tit {
  margin: 0 0 var(--e-1);
  font-size: var(--t-corpo); font-weight: var(--peso-titulo);
}
.selado-txt { margin: 0; color: var(--apoio); line-height: 1.6; max-width: 62ch; }

/* Na lista, no lugar onde o trecho apareceria. */
.trecho-selado {
  display: inline-flex; align-items: center; gap: var(--e-1);
  color: var(--apoio); font-size: var(--t-mini);
  font-style: italic;
}

/* ------------------------------------------------------------- o pregão */

/* 🔒 UMA TELA, UMA DECISÃO — e ela nem é mais uma escolha.

   "Abrir cotação" tinha cinco blocos numerados e só um pedia decisão. Os
   outros quatro eram leitura com o mesmo peso visual; a lista de credenciados
   comia 40% da altura sem carregar escolha nenhuma; e a ação primária ficava
   no topo, desabilitada, a novecentos pixels do campo que a habilitava. Nove
   textos em cinza explicavam o que a estrutura não deixava claro.

   E o campo que restava — dia e hora da disputa — não devia existir: era a
   alavanca com que quem conduz a disputa poderia marcar um leilão em horário
   combinado com uma agência.

   Este bloco é o que sobrou: quando a disputa acontece, quantas serão
   convocadas, e as duas ações. O resto da página é conferência. */
.pregao {
  border: 1px solid var(--indigo-aro);
  border-radius: var(--raio-cartao);
  background: var(--indigo-luz);
  padding: var(--e-5);
}
/* A extraordinária muda de cor: é exceção, e exceção que parece rotina deixa
   de ser contada por quem a usa. */
.pregao-extra { border-color: var(--morno-aro, var(--aro)); background: var(--morno-luz, var(--carta)); }

.pregao-quando { display: flex; gap: var(--e-4); align-items: flex-start; }
.pregao-selo {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--raio-circulo);
  background: var(--carta); color: var(--indigo-vivo);
}
.pregao-extra .pregao-selo { color: var(--morno-cheio, var(--texto)); }

.pregao-rot {
  margin: 0;
  font-size: var(--t-mini); font-weight: var(--peso-titulo);
  letter-spacing: .06em; text-transform: uppercase; color: var(--apoio);
}
.pregao-dia {
  margin: 2px 0 0;
  font-size: var(--t-titulo); line-height: 1.2;
  text-transform: capitalize;
}
.pregao-dia b { font-variant-numeric: tabular-nums; }
.pregao-nota { margin: var(--e-1) 0 0; font-size: var(--t-mini); color: var(--apoio); }

.pregao-porque {
  display: flex; align-items: flex-start; gap: var(--e-2);
  margin: var(--e-4) 0 0; padding-top: var(--e-3);
  border-top: 1px solid var(--indigo-aro);
  font-size: var(--t-mini); color: var(--apoio); line-height: 1.5;
}
.pregao-extra .pregao-porque { border-top-color: var(--morno-aro, var(--claro)); }
.pregao-porque svg { flex-shrink: 0; margin-top: 2px; }

/* As ações moram no bloco que as explica — não no topo da página, a uma
   rolagem de distância do que as habilita. */
.pregao-acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-4); }

.pregao-falta {
  list-style: none; margin: var(--e-3) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--e-1);
}
.pregao-falta li {
  display: flex; align-items: flex-start; gap: var(--e-2);
  font-size: var(--t-mini); color: var(--quente-cheio);
}
.pregao-falta svg { flex-shrink: 0; margin-top: 2px; }

/* Uma linha de identificação, não o dossiê de novo. Quem chega em "Abrir
   cotação" acabou de ler o pedido inteiro na folha, em Pedidos — o botão que
   traz para cá está dentro dela. Repetir tudo aqui é o mesmo trabalho duas
   vezes, e a segunda sem atenção nenhuma. */
.conferir-volta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--e-2) var(--e-4);
  margin: var(--e-5) 0 0; padding-top: var(--e-4);
  border-top: 1px solid var(--claro);
  font-size: var(--t-mini); color: var(--apoio);
}
.conferir-volta b { color: var(--texto); }
.conferir-volta .elo-txt { margin-left: auto; font-size: var(--t-mini); }

/* O total derivado da régua, colado ao campo que o produz.

   A unidade digita o preço de UMA passagem — é assim que tarifa aérea é
   cotada em qualquer site — e o lance da agência é pela demanda completa.
   Mostrar a conta feita é o que impede que os dois números sejam
   comparados como se fossem a mesma coisa. */
.regua-total {
  display: flex; align-items: flex-start; gap: var(--e-2);
  margin: var(--e-2) 0 0; padding: var(--e-3);
  border-radius: var(--raio-controle);
  background: var(--indigo-luz);
  font-size: var(--t-mini); color: var(--texto);
}
.regua-total svg { flex-shrink: 0; margin-top: 2px; color: var(--indigo-vivo); }
.regua-total b { font-variant-numeric: tabular-nums; }

/* A régua conferida contra o histórico da rota.

   A economia é referência menos pago, e a referência é digitada pela unidade
   que se beneficia de parecer eficiente. Isto não bloqueia nada — é o
   contraponto que faltava para quem confere antes de abrir a cotação. */
.rota-hist {
  display: flex; align-items: flex-start; gap: var(--e-2);
  margin: var(--e-2) 0 0; padding: var(--e-3);
  border-radius: var(--raio-controle);
  background: var(--neutro-luz);
  font-size: var(--t-mini); color: var(--apoio); line-height: 1.5;
}
.rota-hist svg { flex-shrink: 0; margin-top: 2px; }
.rota-hist b { color: var(--texto); font-variant-numeric: tabular-nums; }
/* Fora da faixa: pede atenção, não acusa. */
.rota-hist-alerta { background: var(--morno-luz, var(--carta)); color: var(--texto); }
.rota-hist-alerta svg { color: var(--quente-cheio); }

/* ============================================== meus pedidos: a listagem
   UMA LISTA OPERACIONAL, NÃO QUATRO CARTÕES.

   A tela dizia a mesma coisa duas vezes e ocupava o dobro do espaço para
   isso. Cada linha trazia uma etiqueta de estado ("Cancelado") e, logo ao
   lado, a mesma informação em prosa ("O pedido foi cancelado pela
   unidade") — 65px de altura por linha para um fato só. Somando a conta
   sob cada título e o respiro do topo, três pedidos ocupavam uma tela.

   O que muda aqui é densidade e alinhamento, não função: nenhuma ação sai,
   nenhum dado some. As regras vivem sob `.meus-pedidos` porque `.doc` é o
   cartão genérico de documento, usado também na auditoria e na folha do
   pedido — encolher lá seria mexer em telas que ninguém pediu. */
.meus-pedidos .titulo-pag { margin-bottom: var(--e-3); }
.meus-pedidos .painel + .painel { margin-top: var(--e-3); }

/* 🔒 A LINHA TEM DE APARECER, E A 4% ELA NÃO APARECE.

   O bloco era branco sobre o tonal da página, separado só por `--suave` —
   uma sombra de 1px a 4%. Numa listagem densa isso some: quatro linhas
   brancas coladas, sem nada dizendo onde uma termina e a outra começa, e a
   seção sem contorno nenhum contra o fundo.

   A elevação sai e entra a moldura em `--claro` (#dadce0), a mesma de
   Convocações. Dentro dela, as divisórias também são `--claro` e não
   `--fio` (#e9ecef): `--fio` é o peso certo quando divide DUAS partes de
   uma seção — barra e tabela —, mas aqui ele se repete a cada 50px, e a
   3% de contraste some antes de virar hierarquia. Numa listagem, a
   divisória é o que faz a linha existir. */
.meus-pedidos .painel {
  padding: var(--e-4) 0 var(--e-2);
  border: 1px solid var(--claro);
  box-shadow: none;
}
.meus-pedidos .painel-topo { padding-bottom: var(--e-2); }
.meus-pedidos .painel-cabeca { border-bottom-color: var(--claro); }

/* A LINHA VIRA GRADE, E É ISSO QUE ALINHA.

   Em flex, cada linha media as próprias células: protocolo presente numa,
   ausente na outra, etiquetas de larguras diferentes — e os botões "Ver"
   paravam em quatro `x` distintos. Com colunas fixas, protocolo, etiqueta
   e ação começam no mesmo ponto em todas as linhas, e a ação encosta na
   direita. As medidas são do mesmo grid de 8: 28 / 128 / 160. */
.meus-pedidos .doc {
  display: grid;
  /* A ÚLTIMA COLUNA NÃO PODE SER `auto`. Cada linha é uma grade própria —
     as colunas não são compartilhadas como as de uma tabela —, então uma
     coluna `auto` mede o conteúdo daquela linha só: o cabeçalho ("Ação",
     39px) media diferente do botão "Ver" (69px), e os 30px de diferença
     iam parar na coluna elástica, empurrando "Cotação" e "Situação" para
     fora do prumo das células. Com piso fixo, todas medem igual; o `auto`
     do topo só entra se uma linha ganhar uma segunda ação. */
  grid-template-columns: 28px minmax(0, 1fr) 128px 160px minmax(68px, auto);
  align-items: center;
  gap: var(--e-3);
  /* O respiro lateral é da LINHA, não do bloco que a contém: assim a
     divisória atravessa o cartão de ponta a ponta, como a régua de uma
     tabela, e o ícone nasce alinhado com o `h2` da faixa acima. */
  padding: var(--e-3) var(--e-5);
  border-radius: 0;
}
/* A busca fica compacta mesmo dentro da faixa: `.painel-cabeca` a fixa em
   360px porque em Pedidos ela é o controle principal da seção. Aqui a lista
   tem três linhas — o campo é etiqueta, e 280 bastam. */
.meus-pedidos .painel-cabeca .busca-tela { flex: 0 0 280px; }
/* A coluna `auto` da grade mede o max-content da barra, que ainda conta o
   grupo de filtros ausente: sem isto o campo para 20px antes da borda e não
   se alinha com o botão "Ver" das linhas abaixo. */
.meus-pedidos .painel-cabeca .ferramentas { justify-content: flex-end; }
/* Sem filtros nesta tela, o contêiner deles fica vazio e ainda assim cobra
   o `gap` da barra — 12px de folga entre a busca e a borda do cartão. */
.meus-pedidos .ferr-filtros:empty { display: none; }
.meus-pedidos .doc-icone {
  width: 28px; height: 28px;
  background: transparent; border: 1px solid var(--claro);
}
.meus-pedidos .doc-nome { line-height: 1.35; }
.meus-pedidos .doc-sub {
  display: block; font-size: var(--t-mini); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.meus-pedidos .doc-elo-col { min-width: 0; }
.meus-pedidos .doc-elo-col .elo { display: inline-block; }
.meus-pedidos .doc-sit, .meus-pedidos .doc-acoes {
  display: flex; align-items: center; gap: var(--e-2);
}
.meus-pedidos .doc-acoes { justify-content: flex-end; }

/* Fio no lugar do espaço: as linhas ficam coladas e ainda assim separadas,
   que é o que uma listagem quer. O fio recua para o texto e não corta o
   respiro lateral do painel. */
.meus-pedidos .docs { padding: 0; }
.meus-pedidos .doc + .doc { border-top: 1px solid var(--claro); }

/* O cabeçalho da listagem. Mesma grade das linhas, e o mesmo peso do
   `thead` das tabelas do sistema: negrito em `--texto-2`, sem caixa alta —
   caixa alta engorda a palavra além da coluna e não acrescenta hierarquia
   que o peso já não dê. */
.meus-pedidos .doc-cab {
  /* 12px acima e abaixo, não 4: o cabeçalho encostava na faixa do título e
     na primeira linha ao mesmo tempo, e duas divisórias a 26px de distância
     leem como uma listra, não como um cabeçalho. Com 40px de altura ele
     ganha ar dos dois lados e passa a ser uma faixa própria. */
  padding-top: var(--e-3); padding-bottom: var(--e-3);
  font-size: var(--t-apoio); font-weight: var(--peso-forte);
  color: var(--texto-2); white-space: nowrap;
}
/* E ar entre a faixa do título e o cabeçalho: sem isto o fio da grade e o
   fio do cabeçalho ficam a um passo um do outro. */
.meus-pedidos .painel-cabeca + .docs { margin-top: var(--e-2); }
.meus-pedidos .doc-cab:hover { background: transparent; }
/* "Pedido" ocupa a coluna do ícone junto com a do assunto: a coluna do
   ícone não tem cabeçalho próprio, e o rótulo recuado 40px atrás dela
   ficava solto do canto do bloco. */
.meus-pedidos .doc-cab-nome { grid-column: 1 / 3; }
/* "Ação" alinha pela BORDA ESQUERDA do botão, não pela direita da coluna:
   é o botão que o rótulo nomeia, e um rótulo mais curto que ele parecia
   fora do prumo encostado na borda oposta. Por isso a última coluna mede o
   próprio botão (70px) — assim as duas bordas esquerdas coincidem. */
.meus-pedidos .doc-cab .doc-acoes { justify-content: flex-start; }
.meus-pedidos .doc-cab + .doc { border-top: 1px solid var(--claro); }

/* Abaixo de 900px o par protocolo/etiqueta não cabe ao lado do trecho sem
   espremer os dois. As colunas viram linhas e a ação continua à direita —
   é a mesma leitura, empilhada. */
@media (max-width: 900px) {
  .meus-pedidos .doc {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    row-gap: var(--e-2);
  }
  .meus-pedidos .doc-elo-col, .meus-pedidos .doc-sit { grid-column: 2; }
  .meus-pedidos .doc-elo-col:empty { display: none; }
  .meus-pedidos .doc-acoes { grid-column: 3; grid-row: 1 / -1; align-self: center; }
}

/* ============================================= novo pedido: o ritmo da folha
   O CORPO DA ETAPA NÃO TINHA ESPAÇAMENTO NENHUM.

   Medido: os quatro grupos da etapa 1 empilhavam em 319 → 381 → 443 → 505,
   todos com `margin: 0`. Trecho, modalidade, datas e motivo encostavam um
   no outro, e o rótulo de um grupo ficava a 4px do campo do grupo anterior
   — a mesma distância que separa um rótulo do SEU próprio campo. Sem essa
   diferença, não há como ler onde um assunto termina e o outro começa.

   16px entre grupos, contra os 4px de rótulo/campo: a proporção é o que
   agrupa. `.etapa` só existe nesta tela, então as regras não vazam. */
.novo-pedido .etapa-corpo > * + * { margin-top: var(--e-4); }

/* O caminho de pão: origem clicável, separador mudo, página atual. */
.novo-pedido .trilha {
  display: flex; align-items: center; gap: var(--e-1);
  margin-bottom: var(--e-2);
}
.novo-pedido .trilha .migalha { margin-bottom: 0; }
.novo-pedido .trilha-sep { color: var(--claro-2); font-size: var(--t-apoio); }
.novo-pedido .trilha-aqui {
  font-size: var(--t-apoio); font-weight: var(--peso-titulo); color: var(--grafite);
}
/* O título encosta no trilho acima e no cartão abaixo com o mesmo passo:
   trilho, título e primeira etapa leem como um bloco só de abertura. */
.novo-pedido .titulo-pag { margin-bottom: var(--e-4); }

/* O formulário do passageiro é o bloco mais longo do pedido, e pode repetir
   uma vez por pessoa. Os controles descem de 40px para 36 e o respiro entre
   as faixas, de 12 para 8: continua sendo o mesmo formulário, mas para de
   empurrar o resto da etapa para fora da tela. */
.pax-form { gap: var(--e-2); padding: var(--e-3); }
.pax-form .entrada,
.pax-form .opcao-pil { min-height: 36px; height: 36px; }
.pax-form textarea.entrada { height: auto; }
/* 🔒 O botão do calendário NÃO acompanha a altura do campo: ele é um alvo
   de 32px centrado dentro dele. Encolhido o campo para 36, o `top: 5px` do
   padrão passou a sobrar 1px por baixo — 5 + 32 = 37 num campo de 36. */
.pax-form .data-bt { top: 2px; }

/* 🔒 O CALENDÁRIO PRECISA SAIR DO CARTÃO.
   `.etapa` tem `overflow: hidden` para que o fundo do cabeçalho respeite o
   arredondamento. Só que o calendário é `position: absolute` dentro do
   corpo, e mede 296px de largura por quase 300 de altura: aberto no último
   campo da faixa, ele era cortado rente à borda de baixo do cartão e a
   pessoa via meio mês. Só a etapa aberta libera o transbordo — as
   recolhidas não têm nada para transbordar —, e o cabeçalho passa a
   carregar o próprio arredondamento, que era o que o recorte dava. */
.novo-pedido .etapa-ativa { overflow: visible; }
.novo-pedido .etapa-ativa .etapa-cab {
  border-radius: var(--raio-cartao) var(--raio-cartao) 0 0;
}

/* Nome pesa o dobro de CPF e da data; contato divide a faixa de baixo com
   dois grupos de pílulas, que pedem a largura do próprio texto. */
.pax-form .pax-l1 {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}
.pax-form .pax-l2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
}
@media (max-width: 900px) {
  .pax-form .pax-l1, .pax-form .pax-l2 {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* A linha do passageiro, no formulário do pedido. Sem a bola de iniciais,
   o nome nasce na borda do cartão; e o corrido de dados precisa respirar,
   porque "CPF 913.943.413-34 Nasc. 04/09/1985 (85) 3249-0947" com 8px de
   espaço lê como uma frase só.

   O que separa é o espaço, não o ponto: a linha quebra em telas estreitas,
   e um "·" preso ao começo do item deixava a segunda linha abrindo com um
   ponto órfão. 16px separam tão bem quanto e não têm onde sobrar. */
.novo-pedido .pax-meta { gap: var(--e-1) var(--e-4); }
/* Classificação à direita, entre os dados e as ações: é o que a pessoa É,
   e não como se fala com ela. */
.novo-pedido .pax-marcas {
  display: flex; align-items: center; gap: var(--e-2); flex-shrink: 0;
}

/* UMA BORDA ESQUERDA SÓ, DENTRO DA ETAPA.
   O corpo da etapa já dá o respiro lateral (padding em `--e-5`), e as peças
   que moram nele traziam o próprio: `.grupo` com 24px, `.doc` com 12. O
   resultado eram três margens diferentes na mesma coluna — rótulo do campo
   e botão em 49, ícone do anexo em 61, etiqueta do grupo em 73. Dentro da
   etapa as duas peças abrem mão do respiro horizontal e herdam o da etapa;
   o vertical fica, que é o que separa uma da outra. */
.novo-pedido .etapa-corpo .grupo { padding-left: 0; padding-right: 0; }
.novo-pedido .etapa-corpo .docs .doc { padding-left: 0; padding-right: 0; }
/* Um fio por arquivo. Sem ele, dois anexos são dois nomes soltos a 8px um
   do outro, e o de baixo encosta no botão "Anexar documento" com o mesmo
   espaço que o separa do irmão — nada dizia onde a lista acaba. O fio vai
   embaixo de cada linha (e não entre elas) para que o último também feche
   contra o botão. Em `--claro`: a 4% de contraste um fio de listagem some
   antes de virar divisória.

   E o fio só corre reto se a linha não for arredondada: `.doc` nasce com
   `--raio-controle` (8px), pensado para cartão isolado, e a borda de baixo
   subia nas duas pontas em vez de alcançar as bordas do bloco. Numa
   listagem a linha é reta de ponta a ponta. */
.novo-pedido .etapa-corpo .docs .doc {
  border-bottom: 1px solid var(--claro);
  border-radius: 0;
}

/* O contador de bagagens dividia a faixa com a classe, mas `.entrada` é
   100% por padrão: esticado, "−" e "+" paravam nas duas pontas da coluna e
   o número no meio do nada. Ele mede o que precisa medir. */
.novo-pedido .etapa-corpo .num-campo { max-width: 220px; }

/* ================================================ fila de homologação
   A fila herda de Convocações a seção como peça única: moldura em `--claro`
   fechando o bloco, fio em `--fio` dividindo a faixa do título da tabela.
   `.painel-unido` já traz as duas — aqui fica só o que é da fila.

   A busca não precisa de 402px: na fila são poucas agências e o campo é
   etiqueta, não convite. `.ferramentas-compacta` a fixa em 280, e dentro da
   faixa do título ela para na mesma vertical do fim da tabela. */
.fila-homolog .painel-cabeca .busca-tela { flex: 0 0 280px; max-width: none; }
/* Sem filtro ativo o grupo de crachás fica vazio e ainda cobra o `gap` da
   barra, afastando a busca da borda. */
.fila-homolog .ferr-filtros:empty { display: none; }

/* 🔒 A DATA NÃO É O ASSUNTO DA LINHA.
   `.quando b` é `--t-realce` (16px) em peso 600 — mais alta e mais pesada
   que o nome da agência, que está em 14/500. Numa tabela em que a primeira
   coluna diz DE QUEM é a linha, a data virava o primeiro lugar para onde o
   olho ia, e ela é apenas quando o pedido chegou. Aqui ela desce ao corpo
   da célula; o que muda de linha para linha — "há 14 dias" contra "há 1
   dia" — continua logo abaixo, e é esse o dado que a fila pede.
   A cifra tabular fica: é o que mantém as datas em colunas. */
.fila-homolog .quando b {
  font-size: var(--t-apoio); font-weight: var(--peso-forte);
  color: var(--texto); letter-spacing: 0;
}
/* A barra não desenha fio nenhum. Quem separa o cabeçalho da seção da
   tabela é a régua do `thead`, logo abaixo — um traço a mais entre os dois
   só empilhava linhas paralelas a 16px de distância. Fica o respiro: 16px
   sob os botões e 16 acima do cabeçalho da tabela. */
/* O fio que separa o cabeçalho da seção da tabela é do CABEÇALHO, não da
   barra. A diferença é largura: `.painel-cabeca` ocupa o bloco inteiro e o
   traço vai de moldura a moldura (25 → 1132); a barra mede só os controles,
   e ali o fio nascia na busca e morria no "Exportar". */
.fila-homolog .painel-cabeca,
.cadastro-cred .painel-cabeca {
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--claro);
}
/* O fio era desenhado pela PRÓPRIA barra: `.painel-unido .ferramentas` põe
   `border-bottom` nela, e dentro da faixa do título a barra mede só a
   largura dos controles — daí o traço curto, começando na busca e parando
   no "Exportar". Zerar a borda do cabeçalho não o alcançava. */
.fila-homolog .painel-unido .ferramentas,
.fila-homolog .painel-unido .ferramentas:has(+ .crachas),
.cadastro-cred .painel-unido .ferramentas,
.cadastro-cred .painel-unido .ferramentas:has(+ .crachas) {
  border-bottom: 0;
  padding-bottom: 0;
}
.fila-homolog .painel-unido .rolo,
.cadastro-cred .painel-unido .rolo { padding-top: var(--e-4); }

/* No cadastro a barra carrega três grupos e o "Exportar", e a busca some se
   dividir a coluna com eles: ela fica em 240 e a barra quebra para a segunda
   linha da grade quando não couber, com os crachás de filtro ativo. */
.cadastro-cred .painel-cabeca .busca-tela { flex: 0 0 240px; max-width: none; }
.cadastro-cred .painel-cabeca { align-items: end; }
/* A data de credenciamento não é o assunto da linha — quem é a agência é. */
.cadastro-cred .quando b {
  font-size: var(--t-apoio); font-weight: var(--peso-forte);
  color: var(--texto); letter-spacing: 0;
}
/* Com o fio no cabeçalho, o bloco de crachás não desenha o seu: dentro da
   grade ele mede a largura dos crachás, e sairia um segundo traço curto
   logo acima do que atravessa a seção. */
.fila-homolog .painel-unido .crachas,
.cadastro-cred .painel-unido .crachas { border-bottom: 0; padding-bottom: 0; }

/* 🔒 A PARTICIPAÇÃO NÃO É O ASSUNTO DA LINHA — a agência é.
   `.part-num b` é 16px em peso 600, dois degraus acima do nome da
   credenciada (14/500): numa varredura de cima a baixo, o olho parava em
   "9", "12", "10" antes de ler de quem eram. Ele desce ao corpo da célula.
   E o trilho de 110px foi dimensionado para uma coluna que a tabela não
   tem mais: 72 mostram a mesma proporção e devolvem 38px para o nome da
   agência, que era o que estava truncando. */
.cadastro-cred .part-num b { font-size: var(--t-apoio); }
.cadastro-cred .part-trilho { width: 72px; height: 4px; }

/* 🔒 O AZUL PROMETIA UM FILTRO QUE NÃO EXISTIA.
   O primeiro cartão é "Credenciadas", o grupo `todas` — o estado padrão da
   tela, sem filtro nenhum. Ele nascia azul, com moldura de ação e fundo
   tonal, e dizia ao leitor de tela "Filtro ativo. Ativar para ver todas."
   sobre uma lista que já mostrava todas. Os quatro cartões passam a ter a
   mesma cor; quem anuncia filtro ativo continua sendo o crachá da barra,
   que é onde ele também se desfaz. */


/* ============================================ pedidos, no painel
   Mesma peça de Credenciadas: moldura em `--claro`, título e "Ver todos" na
   mesma faixa, fio atravessando a seção. O painel a separa do bloco de cima
   com o mesmo respiro que separa os outros. */
.pedidos-painel { margin-top: var(--e-5); }
.pedidos-painel .painel-cabeca {
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--claro);
  align-items: center;
}
.pedidos-painel .rolo { padding-top: var(--e-4); }
/* A data de envio não é o assunto da linha — o trecho é. */
.pedidos-painel .quando b {
  font-size: var(--t-apoio); font-weight: var(--peso-forte);
  color: var(--texto); letter-spacing: 0;
}
.pedidos-painel tbody tr { cursor: pointer; }
/* O elo do trecho é um botão de verdade (o teclado precisa de alvo), e um
   botão traz fundo, borda e alinhamento de botão — nada disso pertence a um
   nome dentro de célula. */
.pedidos-painel .cred-nome-elo {
  background: none; border: 0; padding: 0; width: 100%;
  font-family: inherit; text-align: left; cursor: pointer;
}

/* ==================================================== cotações: a lista */
.lista-cotacoes .painel-cabeca {
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--claro);
}
.lista-cotacoes .painel-unido .ferramentas,
.lista-cotacoes .ferramentas,
.lista-cotacoes .ferramentas:has(+ .crachas) { border-bottom: 0; padding-bottom: 0; }
.lista-cotacoes .crachas { border-bottom: 0; padding-bottom: 0; }
.lista-cotacoes .rolo { padding-top: var(--e-4); }
/* Quatro grupos de filtro mais o "Exportar" dividem a faixa com o título:
   a busca fica no tamanho de etiqueta para todos caberem. */
.lista-cotacoes .painel-cabeca .busca-tela { flex: 0 0 240px; max-width: none; }

/* 🔒 O azul do cartão prometia um filtro que não existia — o mesmo caso de
   Credenciadas. "Solicitadas no mês" é o grupo `todas`: o estado padrão da
   tela, sem filtro nenhum, anunciando "Filtro ativo. Ativar para ver
   todas." sobre uma lista que já mostrava todas. Os quatro ficam iguais;
   quem anuncia filtro de verdade é o crachá da barra, que é onde ele
   também se desfaz. */
/* 🔒 O CARTÃO ATIVO NÃO SE PINTA DE AZUL ONDE O PADRÃO JÁ É "TODOS".
   Nestas três telas o primeiro cartão é o grupo `todas` — Credenciadas,
   Solicitadas no mês, Sessões no mês —, que é o estado inicial, sem filtro
   nenhum. Ele nascia com moldura de ação, fundo tonal e rótulo azul, e
   anunciava ao leitor de tela "Filtro ativo. Ativar para ver todas." sobre
   uma lista que já mostrava todas: a cor de ação prometia um recorte que
   não existia. Os quatro cartões ficam iguais.

   O filtro de verdade continua anunciado — e desfeito — pelo crachá da
   barra ("Indicador: Com problema ×" mais "Limpar filtros"), que só existe
   quando há filtro. Nas outras telas em que a pílula filtra a partir de um
   estado vazio, o realce fica. */
.cadastro-cred .pilula-on,
.tela-cotacoes .pilula-on,
.tela-sessoes .pilula-on {
  /* `--fio`, e não `--claro`: é a borda das pílulas vizinhas. Com `--claro`
     a ativa continuava um degrau mais escura que as outras — sem cor, mas
     ainda destacada, que é meio caminho e não é lugar nenhum. */
  border-color: var(--fio);
  box-shadow: none;
  background: var(--carta);
}
.cadastro-cred .pilula-on .pilula-rot,
.tela-cotacoes .pilula-on .pilula-rot,
.tela-sessoes .pilula-on .pilula-rot { color: var(--texto-2); }


/* 🔒 TRÊS PONTOS SEM MOLDURA NÃO PARECEM BOTÃO.
   O menu da linha era só o glifo, sem contorno e sem fundo: numa coluna de
   dez linhas, ele lia como pontuação, não como controle — e só descobria
   que clicava quem passasse o mouse por cima. Ganha o mesmo aro de campo
   dos outros controles em repouso, e o fundo tonal continua sendo a
   resposta ao ponteiro. Alinhado à direita, junto com o cabeçalho. */
.lista-cotacoes .cel-mais .redondo {
  width: var(--alt-mini); height: var(--alt-mini);
  border: 1px solid var(--claro); border-radius: var(--raio-campo);
}
.lista-cotacoes .cel-mais .redondo:hover { border-color: var(--claro-2); }


/* ===================================================== sessões: a agenda */
.lista-sessoes .painel-cabeca {
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--claro);
}
.lista-sessoes .ferramentas,
.lista-sessoes .ferramentas:has(+ .crachas) { border-bottom: 0; padding-bottom: 0; }
.lista-sessoes .crachas { border-bottom: 0; padding-bottom: 0; }
.lista-sessoes .painel-cabeca .busca-tela { flex: 0 0 260px; max-width: none; }
/* A agenda VIROU tabela: o respiro contra o fio do cabeçalho é o mesmo das
   outras listas. */
.lista-sessoes .rolo { padding-top: var(--e-4); }

/* O e-mail ocupa duas colunas da faixa e quebra onde precisar: cortar um
   endereço é perder o dado, e nenhum outro campo do cadastro é longo assim. */
.faixa-item-largo { grid-column: span 2; }
.faixa-item-largo .faixa-val { word-break: break-all; }
@media (max-width: 720px) {
  .faixa-item-largo { grid-column: auto; }
}

/* ============================================= a ficha da credenciada
   Página, não gaveta: quatro seções, cada uma com moldura e cabeçalho, e o
   respiro da escala entre elas (24px) em vez de rótulos empilhados. */
.ficha-cred .painel + .painel,
.ficha-cred .trava-cx + .painel,
.ficha-cred .nota + .painel { margin-top: var(--e-5); }
.ficha-cred .painel { padding: var(--e-4) 0 var(--e-4); }
.ficha-cred .painel-topo { padding-bottom: var(--e-3); }
/* O cadastro e a lista herdam o respiro lateral da seção, como na etapa do
   pedido: uma borda esquerda só, e o fio da linha corre de ponta a ponta. */
.ficha-cred .faixa-grupo { padding: 0 var(--e-5); }
.ficha-cred .docs { padding: 0; }
.ficha-cred .docs .doc { padding: var(--e-3) var(--e-5); border-radius: 0; }
.ficha-cred .docs .doc + .doc { border-top: 1px solid var(--claro); }
.ficha-cred .ficha-nums,
.ficha-cred .grupo,
.ficha-cred > section > .nota { margin-left: var(--e-5); margin-right: var(--e-5); }
.ficha-cred .grupo { padding-left: 0; padding-right: 0; }
/* A trava fica entre o título e a primeira seção, com o mesmo respiro. */
.ficha-cred .trava-cx { margin-top: var(--e-3); }

/* A coluna que recebe a folga da fila de homologação, e o chip encostado na
   borda: as três primeiras se leem em sequência, esta responde sozinha. */
.c-falta { width: 520px; }
.fila-homolog .lista th:last-child,
.fila-homolog .lista td:last-child { text-align: right; }

/* ================================================ Pedidos (quem analisa)
   A SEÇÃO NÃO TINHA ONDE COMEÇAR.

   O bloco da lista era branco sobre branco: sem moldura, "Aguardando
   análise", a busca e as linhas flutuavam na página, e só a mudança de
   fundo dos cartões acima dizia que ali começava outra coisa. É a mesma
   correção da fila de homologação e do cadastro — moldura em `--claro`
   fechando a seção, fio mais leve dividindo a barra da lista por dentro. */
.tela-pedidos .painel { border: 1px solid var(--claro); box-shadow: none; }
.tela-pedidos .painel-cabeca {
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--claro);
}
/* O fio de baixo nasce da PRÓPRIA barra em `.painel-unido .ferramentas`, e
   dentro da faixa do título a barra mede só a largura dos controles: sairia
   um traço curto começando na busca e parando no filtro, além do que
   atravessa a seção. Já documentado em `.fila-homolog`; aqui é o mesmo. */
.tela-pedidos .painel-unido .ferramentas,
.tela-pedidos .painel-unido .ferramentas:has(+ .crachas) {
  border-bottom: 0;
  padding-bottom: 0;
}
.tela-pedidos .painel-cabeca .crachas { border-bottom: 0; padding-bottom: 0; }
/* Sem respiro, a primeira linha da lista encosta no fio do cabeçalho. */
.tela-pedidos .peds { padding-top: var(--e-2); }

/* O CARTÃO ATIVO NÃO PRECISA DE COR DE AÇÃO.
   Mesma decisão de `.cadastro-cred`, `.tela-cotacoes` e `.tela-sessoes`: o
   azul saturado fazia o filtro em cena pesar mais que o número que ele
   mostra, e numa fileira de quatro o olho ia ao cartão aceso antes de ler
   os totais. Os quatro ficam iguais; quem diz o recorte em cena é o título
   do bloco logo abaixo, que assume o rótulo da pílula escolhida. */
.tela-pedidos .pilula-on {
  border-color: var(--fio);
  box-shadow: none;
  background: var(--carta);
}
.tela-pedidos .pilula-on .pilula-rot { color: var(--texto-2); }

/* ============================================== Atividades (a fila inteira)
   A LISTA NÃO TINHA ONDE COMEÇAR, E A BUSCA OCUPAVA UMA FAIXA SÓ DELA.

   O bloco era branco sobre branco, e o cabeçalho vinha em duas faixas —
   título com contador em cima, busca e filtros embaixo, atravessando a
   largura toda. Mesmo par de correções das outras telas: moldura em
   `--claro` fechando a seção, e cabeçalho e barra na mesma faixa, com a
   busca à direita. */
.tela-atividades .painel { border: 1px solid var(--claro); box-shadow: none; }
.tela-atividades .painel-cabeca {
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--claro);
}
/* O fio de baixo nasce da PRÓPRIA barra em `.painel-unido .ferramentas`, e
   dentro da faixa do título ela mede só a largura dos controles: sairia um
   traço curto começando na busca. Mesmo caso já documentado em
   `.fila-homolog` e em `.tela-pedidos`. */
.tela-atividades .painel-unido .ferramentas,
.tela-atividades .painel-unido .ferramentas:has(+ .crachas) {
  border-bottom: 0;
  padding-bottom: 0;
}
.tela-atividades .painel-cabeca .crachas { border-bottom: 0; padding-bottom: 0; }

/* UMA VERTICAL SÓ.
   O respiro da lista vinha somado em dois lugares — 12px de `.atv-lista`
   mais 16px do item —, e o ícone do primeiro item nascia 4px à direita do
   título e da busca. A lista assume o respiro do painel (24px) e o item
   volta a começar na moldura; o que separa um do outro continua sendo a
   folga de 4px, não uma segunda margem. */
.tela-atividades .atv-lista { padding: 0 var(--e-3); }
.tela-atividades .atv-lista .acao { padding: var(--e-3); }
.tela-atividades .fila-grupo:first-of-type .fila-divisa { padding-top: var(--e-4); }

/* O CARTÃO EM CENA NÃO USA COR DE AÇÃO — mesma decisão de Credenciadas,
   Cotações, Sessões e Pedidos. Com borda azul, sombra de 1px e fundo tonal,
   o prazo escolhido pesava mais que os números que os três mostram. Quem
   diz o recorte em cena é o crachá "Prazo: Atrasadas ×" na barra, que é
   também por onde se desfaz. */
.tela-atividades .pilula-on {
  border-color: var(--fio);
  box-shadow: none;
  background: var(--carta);
}
.tela-atividades .pilula-on .pilula-rot { color: var(--texto-2); }

/* 🔒 A FOLHA DO PEDIDO TINHA TRÊS VERTICAIS.

   Todos os blocos começam na mesma borda (x=224 na largura da folha), mas
   cada um trazia o respiro que herdou do componente de origem, e o primeiro
   texto de cada bloco nascia num lugar diferente:

   · faixa (Pedido, Trecho, Motivo, Processo) …… 1px de borda + 24 → x=249
   · rótulo da seção (DE ONDE VEIO) …………………… 24 → x=248
   · passageiro, anexo …………………………………………… 1px + 12 → x=237
   · aviso, histórico da rota …………………………… 12 → x=236

   Treze pixels de diferença entre o nome do anexo e o valor logo acima dele
   é o bastante para a coluna parecer torta — e era, porque três verticais
   competindo é o mesmo que nenhuma. Todos passam a nascer em x=249: os
   blocos com borda ganham 24 de respiro, os sem borda ganham 25, e o rótulo
   da seção acompanha a borda da faixa que ele nomeia.

   Escopado em `.folha-pedido`: `.nota`, `.anexo`, `.pax` e `.rota-hist`
   vivem em dezenas de telas, e nada aqui pode chegar a elas. */
.folha-pedido .secao { padding-left: calc(var(--e-5) + 1px); }
.folha-pedido .pax,
.folha-pedido .anexo { padding-left: var(--e-5); padding-right: var(--e-5); }
.folha-pedido .nota,
.folha-pedido .rota-hist {
  padding-left: calc(var(--e-5) + 1px);
  padding-right: calc(var(--e-5) + 1px);
}

/* ==========================================================================
   FAIXA DA VERSÃO — andaime de avaliação, irmã da fita do topo

   A fita diz de que lado do balcão a tela está; esta diz que a tela ainda
   vai mudar. As duas são sobre o PROTÓTIPO, não sobre a compra — e por
   isso nenhuma das duas usa a linguagem visual dos cartões do produto.

   🔒 O vermelho vive no fio e no texto, nunca em bloco cheio: `--quente`
   é a cor de descumprimento neste sistema, e uma tarja vermelha sólida no
   rodapé leria como SLA estourado. Fundo `--quente-veu` é quase branco.
   ========================================================================== */
.aviso-versao {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-3) var(--e-5);
  background: var(--quente-veu);
  border-top: 2px solid var(--quente-cheio);
  box-shadow: 0 -1px 12px var(--tinta-08);
  font-size: var(--t-mini); color: var(--quente);
}
/* Uma linha só enquanto couber; embrulha em vez de truncar, porque aqui a
   frase inteira é a informação — ao contrário da fita, onde o nome da
   jornada é que importa e o resto é cortesia. */
.aviso-versao-txt { min-width: 0; flex: 1; }
.aviso-versao-txt b { font-weight: var(--peso-forte); }
/* O carimbo da versão é referência, não recado: fica um tom atrás da frase e
   não quebra no meio da data. */
.aviso-versao-carimbo { opacity: .72; white-space: nowrap; }

.aviso-versao-bt {
  flex: 0 0 auto;
  border: 1px solid var(--quente-aro); border-radius: var(--raio-campo);
  background: #fff; color: var(--quente);
  font: inherit; font-size: var(--t-mini); font-weight: var(--peso-forte);
  padding: 5px var(--e-4); cursor: pointer;
  transition: background var(--dur-2) var(--mola);
}
.aviso-versao-bt:hover { background: var(--quente-luz); }
.aviso-versao-bt:focus-visible {
  outline: var(--foco-largura) solid var(--quente-cheio); outline-offset: 2px;
}

/* A faixa é fixa e cobriria a última linha da tela. A folga entra no corpo
   enquanto ela existe, e o React a retira ao dispensar. */
body.com-aviso-versao { padding-bottom: 56px; }

/* Em tela estreita a frase ganha a linha inteira e o botão desce — apertar
   os dois lado a lado deixaria o "Ciente" com área de toque de alguns
   pixels, que é o mesmo que não tê-lo. */
@media (max-width: 560px) {
  .aviso-versao { flex-direction: column; align-items: stretch; gap: var(--e-2); }
  .aviso-versao-bt { align-self: flex-end; }
  body.com-aviso-versao { padding-bottom: 96px; }
}
/* ================================================ Sessões: a agenda em tabela
   A DATA ERA TÍTULO, E VIROU COLUNA.

   Os dias vinham como faixas — "HOJE, 12 DE MARÇO", "AMANHÃ, 13 DE MARÇO",
   "9 DE MARÇO" —, cada uma com a própria contagem à direita. Três problemas
   num arranjo só: a data deixava de ser dado comparável, a ordem não se lia
   (o futuro subia e o passado descia, encontrando-se no meio), e o total
   aparecia repetido a cada grupo, competindo com a lista que ele contava.

   Como coluna, a data ordena sozinha, no formato numérico que o resto do
   sistema usa (`12/03/2026`), e o total desce uma vez só para o pé. */
.lista-agenda .s-data { width: 116px; }
.lista-agenda .s-hora { width: 76px; }
.lista-agenda .s-ses { width: auto; }
.lista-agenda .s-prop { width: 190px; }
/* 288, e não 260: a linha extraordinária carrega DOIS chips — o rito e o
   desfecho — e 116+8+107 não cabiam nos 224 úteis. Ela quebrava em duas
   linhas e só aquela linha media 81px contra os 56 das outras. */
.lista-agenda .s-sit { width: 288px; }

/* O trecho e o protocolo dividem a mesma célula, um sobre o outro: é a
   identidade da sessão, e separá-los em duas colunas faria o olho cruzar a
   linha para juntar o que é uma coisa só. */
.lista-agenda .ag-tit { display: block; }
.lista-agenda .ag-meta { display: block; }

/* A sessão em curso é a única linha que se destaca — e o que a destaca é a
   marca à esquerda, não o fundo: a tabela inteira tingida de azul num dia
   com duas sessões abertas viraria bloco, não linha. */
.lista-agenda .ses-viva > td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.lista-agenda .ses-viva { background: var(--indigo-veu); }
.lista-agenda tbody tr { cursor: pointer; }
.lista-agenda tbody tr:hover { background: var(--ceu); }
.lista-agenda .ses-viva:hover { background: var(--indigo-luz); }
/* Extraordinária e desfecho lado a lado, sem empurrar a linha além dos 56px. */
.lista-agenda .ses-sit { display: inline-flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }

/* O total, discreto, no pé da tabela: uma vez, depois da lista, em vez de
   uma vez por dia, antes de cada pedaço dela. */
.lista-pe {
  margin: 0;
  padding: var(--e-3) var(--e-5) var(--e-4);
  font-size: var(--t-mini); color: var(--texto-2);
  border-top: 1px solid var(--fio);
}
.lista-pe b { font-weight: var(--peso-forte); color: var(--texto); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   NOVO PEDIDO EM TRÊS PASSOS

   A sanfona de cinco etapas virou um fluxo: a viagem, quem viaja, a
   autorização. As condições da viagem entraram na própria busca, como em
   qualquer site de passagem, e o preço pesquisado deixou de ser trabalho
   de quem pede — o sistema pesquisa e o resultado aparece no resumo.

   Tudo escopado em `.novo-fluxo`: `.passo`, `.resumo` e `.sel-bt` vivem em
   outras telas e nada aqui chega a elas.
   ========================================================================== */

/* --- os três passos, no topo ------------------------------------------- */
.novo-fluxo .passos-pedido {
  display: flex; align-items: center; gap: var(--e-3);
  margin: 0 0 var(--e-5); padding: 0; list-style: none;
}
.novo-fluxo .pp-item { display: flex; align-items: center; gap: var(--e-3); flex: 0 0 auto; }
/* O fio entre um passo e o próximo: são uma sequência, não três botões. */
.novo-fluxo .pp-item + .pp-item::before {
  content: ""; width: 48px; height: 1px; background: var(--claro);
}
.novo-fluxo .pp-feito + .pp-item::before { background: var(--vivo-cheio); }
.novo-fluxo .pp-bt {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-1) var(--e-2) var(--e-1) var(--e-1);
  border: 0; border-radius: var(--raio-pilula); background: none;
  font: inherit; font-size: var(--t-apoio); color: var(--texto-2);
}
.novo-fluxo .pp-bt:not(:disabled) { cursor: pointer; }
.novo-fluxo .pp-bt:not(:disabled):hover { background: var(--neutro-hover); }
.novo-fluxo .pp-bt:disabled { cursor: default; opacity: 1; }
.novo-fluxo .pp-bola {
  width: 28px; height: 28px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: var(--raio-circulo);
  background: var(--neutro-2); color: var(--texto-2);
  font-size: var(--t-mini); font-weight: var(--peso-forte);
}
.novo-fluxo .pp-atual .pp-bola { background: var(--indigo); color: #fff; }
.novo-fluxo .pp-atual .pp-tit { color: var(--grafite); font-weight: var(--peso-forte); }
.novo-fluxo .pp-feito .pp-bola { background: var(--vivo-luz); color: var(--vivo); }
.novo-fluxo .pp-feito .pp-tit { color: var(--texto); }

/* --- o painel do passo --------------------------------------------------- */
.novo-fluxo .passo-painel {
  background: var(--carta);
  border: 1px solid var(--claro);
  border-radius: var(--raio-cartao);
  padding: var(--e-5);
}
/* O passo 1 no azul bem claro do container tonal — o mesmo tom do
   formulário do passageiro, um pouco mais aberto —, para a busca ler como
   uma peça só, e a barra e os filtros, brancos, saltarem dela. */
.novo-fluxo .passo-busca {
  background: color-mix(in srgb, var(--indigo-luz) 60%, var(--carta));
  border-color: var(--indigo-aro);
}
.novo-fluxo .passo-cab { margin-bottom: var(--e-5); }
/* Passo 1: só a pergunta. "Passo 1 de 3" e "A viagem" já estão nos passos
   do topo; repetir aqui era três linhas dizendo a mesma coisa. */
.novo-fluxo .passo-cab-curto { display: flex; align-items: center; gap: 2px; margin-bottom: var(--e-4); }
/* O "i" da pesquisa automática, ao lado da pergunta: fora da barra e do
   botão, e a explicação só aparece quando pedida (hover ou foco). */
.novo-fluxo .bv-info {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: var(--raio-circulo); background: none;
  color: var(--texto-2); cursor: help;
}
.novo-fluxo .bv-info:hover { background: var(--neutro-hover); color: var(--grafite); }
.novo-fluxo .passo-cab-curto .dica { bottom: auto; top: calc(100% + 6px); }
.novo-fluxo .passo-num {
  display: block; margin-bottom: var(--e-1);
  font-size: var(--t-micro); font-weight: var(--peso-titulo);
  letter-spacing: .8px; text-transform: uppercase; color: var(--texto-2);
}
.novo-fluxo .passo-cab h2 { font-size: var(--t-titulo); font-weight: var(--peso-titulo); color: var(--grafite); }
.novo-fluxo .passo-cab p { margin: var(--e-1) 0 0; font-size: var(--t-apoio); color: var(--texto-2); }
.novo-fluxo .passo-corpo > .campo + .campo,
.novo-fluxo .passo-corpo > .nota-selo,
.novo-fluxo .passo-corpo > .nota-atencao,
.novo-fluxo .passo-corpo > .campo { margin-top: var(--e-4); }
.novo-fluxo .passo-corpo > .campo:first-child { margin-top: 0; }
/* O pé de cada passo: voltar à esquerda, seguir à direita — a direção da
   leitura é a direção do fluxo. */
.novo-fluxo .passo-pe {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-3);
  margin-top: var(--e-5); padding-top: var(--e-4);
  border-top: 1px solid var(--fio);
}

/* --- as condições da viagem, como filtros debaixo da barra ---------------
   O desenho do Google Voos: uma fileira de botões com contorno, cada um com
   o valor escolhido e a seta. Ficam DEPOIS da busca porque refinam a
   pergunta, não a fazem — e com contorno porque são controles de verdade,
   não texto solto. O contorno é o mesmo `--claro` dos campos, e escurece no
   hover como qualquer `.sel-bt`. */
.novo-fluxo .bv-opcoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  margin-top: var(--e-3);
}
.novo-fluxo .bv-opcao .sel-bt {
  width: auto; min-height: var(--alt-mini);
  padding: 0 var(--e-2) 0 var(--e-3); gap: var(--e-1);
  border-radius: var(--raio-acao);
  font-size: var(--t-apoio); font-weight: var(--peso-titulo); color: var(--texto);
}
.novo-fluxo .bv-opcao .sel-seta { color: var(--texto-2); }
/* Mais perceptível: um rótulo que nomeia a fileira, e botões com contorno
   azul, que se leem como controle e não como texto. */
/* O quadro das condições: fundo branco e contorno, como a barra de busca,
   e o título numa linha própria acima dos botões. */
.novo-fluxo .bv-opcoes {
  margin-top: var(--e-3); padding: var(--e-3) var(--e-4) var(--e-4);
  background: var(--carta);
  border: 1px solid var(--claro); border-radius: var(--raio-cartao);
}
.novo-fluxo .bv-opcoes-rot {
  flex: 1 0 100%;
  font-size: var(--t-apoio); font-weight: var(--peso-forte); color: var(--grafite);
}
.novo-fluxo .bv-opcao .sel-bt {
  /* Contorno no azul cheio: 4,9:1, acima dos 3:1 de controle (WCAG 1.4.11). */
  background: var(--carta); border-color: var(--indigo);
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08);
}
.novo-fluxo .bv-opcao .sel-bt:hover { border-color: var(--indigo); background: var(--indigo-luz); }
.novo-fluxo .bv-opcao .sel-bt .sel-seta { color: var(--indigo); }
.novo-fluxo .bv-opcao .sel-lista { min-width: 240px; }

/* --- a barra de busca ----------------------------------------------------
   UMA BARRA, VÁRIOS CAMPOS. O desenho de qualquer site de passagem: os
   campos encostados, separados por fio, e o botão fechando a linha.

   O fio é o fundo da própria grade aparecendo pelo `gap` de 1px — e não uma
   borda em cada segmento —, porque assim ele acompanha a grade quando ela
   quebra em duas linhas, sem regra nova para cada arranjo. */
/* A barra é a pergunta principal do passo: contorno mais forte e sombra
   leve, para ela saltar do fundo azul e não sumir ao lado das condições. */
.novo-fluxo .busca-voo {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 1px;
  background: var(--claro);
  border: 1px solid var(--texto-3);
  border-radius: var(--raio-cartao);
  box-shadow: 0 1px 3px rgba(60, 64, 67, .12);
}
.novo-fluxo .busca-voo.bv-so-ida {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr) auto;
}
.novo-fluxo .bv-seg,
.novo-fluxo .bv-acao { background: var(--carta); position: relative; }
.novo-fluxo .bv-seg { padding: var(--e-3) var(--e-4) var(--e-2); min-width: 0; }
.novo-fluxo .bv-seg:hover { background: var(--ceu); }
.novo-fluxo .busca-voo > :first-child { border-radius: 11px 0 0 11px; }
.novo-fluxo .busca-voo > :last-child { border-radius: 0 11px 11px 0; }
/* O foco é do segmento inteiro: o campo perdeu a moldura, então quem mostra
   onde se está é o segmento. Anel por dentro, para não invadir o vizinho. */
.novo-fluxo .bv-seg:focus-within { box-shadow: inset 0 0 0 2px var(--indigo); z-index: 2; }
.novo-fluxo .bv-rot {
  display: block; margin-bottom: 2px;
  font-size: var(--t-apoio); font-weight: var(--peso-forte); color: var(--grafite);
}
/* O que se digita ainda não foi respondido: o convite em cinza médio,
   legível, e não no cinza claro que sumia. */
.novo-fluxo .bv-rot .campo-obr { margin-left: 3px; }
.novo-fluxo .busca-voo .entrada::placeholder { color: var(--texto-2); font-weight: 400; }
.novo-fluxo .busca-voo .entrada,
.novo-fluxo .busca-voo .sel-bt {
  min-height: 30px; height: 30px; padding-left: 0;
  border: 0; background: transparent; box-shadow: none;
  font-size: var(--t-corpo); font-weight: var(--peso-titulo); color: var(--grafite);
}
.novo-fluxo .busca-voo .entrada:focus,
.novo-fluxo .busca-voo .sel-bt:focus { outline: none; box-shadow: none; }
.novo-fluxo .busca-voo .sel-bt { padding-right: 0; }
.novo-fluxo .busca-voo .data-campo .entrada { padding-right: 30px; }
.novo-fluxo .busca-voo .data-bt { top: -1px; right: -6px; }
.novo-fluxo .bv-acao { display: flex; align-items: stretch; padding: var(--e-2); }
.novo-fluxo .bv-acao .bt { height: auto; min-height: var(--alt-controle); padding: 0 var(--e-4); }

/* Com quatro campos (a classe foi para a faixa de cima) a barra cabe numa
   linha até ~960px sem cortar "Boa Vista/RR · BVB". Abaixo disso ela
   quebra — trecho em cima, datas embaixo, botão numa faixa própria. O fio
   vem junto, porque é o fundo da grade. */
@media (max-width: 960px) {
  .novo-fluxo .busca-voo,
  .novo-fluxo .busca-voo.bv-so-ida { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .novo-fluxo .busca-voo > .bv-seg:nth-child(1),
  .novo-fluxo .busca-voo > .bv-seg:nth-child(2) { grid-column: span 3; }
  .novo-fluxo .busca-voo > .bv-seg:nth-child(n+3) { grid-column: span 3; }
  .novo-fluxo .busca-voo.bv-so-ida > .bv-seg:nth-child(3) { grid-column: 1 / -1; }
  .novo-fluxo .busca-voo > .bv-acao { grid-column: 1 / -1; }
  .novo-fluxo .busca-voo > :first-child { border-radius: 11px 0 0 0; }
  .novo-fluxo .busca-voo > :nth-child(2) { border-radius: 0 11px 0 0; }
  .novo-fluxo .busca-voo > :last-child { border-radius: 0 0 11px 11px; }
  .novo-fluxo .bv-acao .bt { width: 100%; justify-content: center; }
}

.novo-fluxo .bv-obs { margin-top: var(--e-4); padding-left: 0; }

/* --- o resultado da pesquisa, debaixo da busca ---------------------------
   Pesquisar não sai do passo: o resultado aparece aqui, num cartão branco
   sobre o azul do passo. À esquerda o que se decide — quanto, onde, entre
   quais sites —; à direita a prova, a captura da tela (clicar amplia). */
.novo-fluxo .bv-resultado { margin-top: var(--e-4); }
.novo-fluxo .bv-resultado:empty { display: none; }
.novo-fluxo .bv-res-carregando {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-4) var(--e-5);
  background: var(--carta); border: 1px solid var(--claro); border-radius: var(--raio-cartao);
  font-size: var(--t-apoio); color: var(--texto-2);
}
.novo-fluxo .bv-res {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--e-5);
  padding: var(--e-5);
  background: var(--carta); border: 1px solid var(--claro); border-radius: var(--raio-cartao);
}
.novo-fluxo .bv-res-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.novo-fluxo .bv-res-info > .etq { margin-bottom: var(--e-1); }
.novo-fluxo .bv-res-preco {
  font-size: var(--t-numero); font-weight: var(--peso-forte); color: var(--grafite);
  font-variant-numeric: tabular-nums;
}
.novo-fluxo .bv-res-preco span { margin-left: var(--e-1); font-size: var(--t-mini); font-weight: 400; color: var(--texto-2); }
.novo-fluxo .bv-res-aviso {
  display: flex; align-items: center; gap: 6px; margin-bottom: var(--e-3);
  font-size: var(--t-apoio); font-weight: var(--peso-titulo); color: var(--morno);
}
/* Pesquisa vencida: o número fica, mas apagado — não é mais o preço desta
   viagem, e o aviso diz o que fazer. */
.novo-fluxo .bv-res-velho .bv-res-preco,
.novo-fluxo .bv-res-velho .bv-res-sites,
.novo-fluxo .bv-res-velho .bv-res-captura { opacity: .45; }
/* Cada site é uma linha-botão: mostra a captura daquele site à direita.
   A escolhida fica no container tonal, com o olho em azul — é a tela que
   se está vendo. */
.novo-fluxo .bv-res-sites { margin: var(--e-3) 0 var(--e-1); padding: 0; list-style: none; border-top: 1px solid var(--fio); }
.novo-fluxo .bv-res-sites li { border-bottom: 1px solid var(--fio); }
.novo-fluxo .bv-res-site {
  width: 100%; display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-2); margin: 2px 0;
  border: 0; border-radius: var(--raio-campo); background: none;
  font: inherit; font-size: var(--t-apoio); color: var(--texto); text-align: left; cursor: pointer;
}
.novo-fluxo .bv-res-site:hover { background: var(--neutro-luz); }
.novo-fluxo .bv-res-site[aria-pressed="true"] { background: var(--indigo-luz); color: var(--grafite); }
.novo-fluxo .bv-res-nome { flex: 1; min-width: 0; }
.novo-fluxo .bv-res-valor { font-variant-numeric: tabular-nums; }
.novo-fluxo .bv-res-olho { display: inline-flex; color: var(--texto-2); }
.novo-fluxo .bv-res-site[aria-pressed="true"] .bv-res-olho { color: var(--indigo); }
.novo-fluxo .bv-res-menor { font-weight: var(--peso-forte); color: var(--grafite); }
.novo-fluxo .bv-res-captura { min-width: 0; }
.novo-fluxo .bv-res-ampliar {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  text-align: left; font: inherit; color: inherit; cursor: zoom-in;
  border-radius: var(--raio-controle);
}
.novo-fluxo .bv-res-ampliar:hover .captura { border-color: var(--indigo-aro); box-shadow: var(--suave); }
/* No passo 1 o pé só tem o seguir: não há passo antes para voltar. */
.novo-fluxo .passo-pe-fim { justify-content: flex-end; }

/* O credenciamento no mesmo fluxo. À direita do pé ficam as duas saídas
   — guardar e seguir —, e o "Voltar" fica sozinho à esquerda. */
.credenciar-fluxo .passo-pe { flex-wrap: wrap; }
.credenciar-fluxo .passo-pe-dir {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2);
  margin-left: auto;
}
/* --- os documentos do credenciamento -------------------------------------- */
.credenciar-fluxo .docs-cred-conta {
  display: flex; align-items: center; gap: var(--e-2);
  margin-bottom: var(--e-3);
  font-size: var(--t-apoio); color: var(--texto-2);
}
.credenciar-fluxo .docs-cred-conta b { color: var(--grafite); font-weight: var(--peso-forte); }
.credenciar-fluxo .docs-cred-barra {
  flex: 0 1 160px; height: 6px; margin-left: var(--e-2);
  border-radius: var(--raio-pilula); background: var(--neutro-luz); overflow: hidden;
}
.credenciar-fluxo .docs-cred-barra > span {
  display: block; height: 100%; background: var(--vivo-cheio);
  transition: width var(--dur-2) var(--mola);
}
.credenciar-fluxo .docs-cred { display: flex; flex-direction: column; gap: var(--e-2); }

.doc-cred {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--claro); border-radius: var(--raio-controle);
  background: var(--carta);
  transition: background var(--dur-1) var(--mola), border-color var(--dur-1) var(--mola);
}
.doc-cred-icone {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-campo); background: var(--neutro-luz); color: var(--texto-2);
}
.doc-cred-nome { display: block; min-width: 0; }
.doc-cred-nome .doc-nome { display: inline; }
/* O ícone corre junto com a última palavra do nome, mesmo quando ele quebra. */
.doc-cred-nome .dica-envelope { display: inline-block; vertical-align: middle; margin-left: 2px; }
.doc-cred-onde {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: inline-grid; place-items: center; vertical-align: middle;
  border: 0; border-radius: var(--raio-circulo); background: none;
  color: var(--indigo); cursor: pointer;
}
.doc-cred-onde:hover { background: var(--indigo-luz); }
.doc-cred-onde:focus-visible { outline: none; box-shadow: var(--foco-halo); }
.doc-cred-estado { display: block; font-size: var(--t-mini); color: var(--texto-2); overflow-wrap: anywhere; }
/* Anexado: a linha inteira em verde, para ler de relance o que já foi. */
.doc-cred-ok {
  background: var(--vivo-luz);
  border-color: color-mix(in srgb, var(--vivo-cheio) 40%, var(--carta));
}
.doc-cred-ok .doc-cred-icone { background: var(--vivo-cheio); color: #fff; }
.doc-cred-ok .doc-cred-estado { color: var(--vivo); }
.doc-cred-ok .doc-cred-estado b { font-weight: var(--peso-forte); }

/* A janela de anexar: estreita, porque só tem uma coisa a fazer. */
.folha:has(.anexar) { width: min(560px, 100%); }
.anexar { display: flex; flex-direction: column; gap: var(--e-3); }
.anexar-alvo {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2);
  padding: var(--e-6) var(--e-4);
  border: 1.5px dashed var(--claro-2); border-radius: var(--raio-cartao);
  background: var(--ceu); text-align: center; cursor: pointer;
  font-size: var(--t-apoio); color: var(--texto-2);
  transition: border-color var(--dur-1) var(--mola), background var(--dur-1) var(--mola);
}
.anexar-alvo:hover, .anexar-alvo-sobre { border-color: var(--indigo); background: var(--indigo-luz); }
.anexar-alvo:focus-within { box-shadow: var(--foco-halo); border-color: var(--indigo); }
.anexar-alvo b { color: var(--indigo); font-weight: var(--peso-forte); }
.anexar-bola {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--raio-circulo); background: var(--carta); color: var(--indigo);
}
.anexar-regras {
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-5);
  margin: 0; padding: 0; list-style: none;
  font-size: var(--t-apoio); color: var(--texto-2);
}
.anexar-regras li { display: inline-flex; align-items: center; gap: var(--e-1); }
.anexar-regras b { color: var(--grafite); font-weight: var(--peso-forte); }
.anexar-arquivo {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3); border-radius: var(--raio-controle);
  background: var(--vivo-luz);
  border: 1px solid color-mix(in srgb, var(--vivo-cheio) 40%, var(--carta));
}
.anexar-arquivo .doc-cred-icone { background: var(--vivo-cheio); color: #fff; }

/* O que acontece depois, no fim do último passo: um quadro claro, para ler
   como informação e não como mais um documento a anexar. */
.credenciar-fluxo .depois {
  margin-top: var(--e-5); padding: var(--e-4);
  border-radius: var(--raio-controle); background: var(--ceu);
}
.credenciar-fluxo .depois h3 {
  font-size: var(--t-corpo); font-weight: var(--peso-forte); color: var(--grafite);
}
.credenciar-fluxo .depois .passos { padding: var(--e-3) 0 0; }

/* O segundo contato, abaixo do primeiro e separado por um fio. */
.credenciar-fluxo .contato2 {
  margin-top: var(--e-5); padding-top: var(--e-4);
  border-top: 1px solid var(--claro);
}
.credenciar-fluxo .contato2-cab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  margin-bottom: var(--e-3);
}
.credenciar-fluxo .contato2-cab h3 {
  font-size: var(--t-corpo); font-weight: var(--peso-forte); color: var(--grafite);
}
/* No celular os três passos não cabem numa linha com o nome de cada um:
   o fio encurta e só o passo da vez mostra o nome. */
@media (max-width: 620px) {
  .credenciar-fluxo .passos-pedido { gap: var(--e-2); }
  .credenciar-fluxo .pp-item { gap: var(--e-2); }
  .credenciar-fluxo .pp-item + .pp-item::before { width: 20px; }
  /* Escondido só da vista: o leitor de tela continua lendo o nome. */
  .credenciar-fluxo .pp-item:not(.pp-atual) .pp-tit {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .credenciar-fluxo .passo-painel { padding: var(--e-4); }
  /* O botão desce para debaixo do nome: lado a lado, o nome quebrava em
     quatro linhas. */
  .doc-cred { flex-wrap: wrap; }
  .doc-cred .doc-corpo { flex: 1 1 calc(100% - 44px); }
  .doc-cred > .bt { margin-left: 44px; }
}
@media (max-width: 960px) {
  .novo-fluxo .bv-res { grid-template-columns: minmax(0, 1fr); }
}

/* --- a conferência, no fim do passo 3 -----------------------------------
   O resumo deixou de acompanhar o preenchimento pela direita e virou a
   conferência final: rótulo à esquerda, resposta no meio, "Alterar" à
   direita — uma linha por pergunta, lida de cima a baixo. */
.novo-fluxo .conf { margin: 0; border-top: 1px solid var(--fio); }
.novo-fluxo .conf-bloco {
  display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: var(--e-4);
  align-items: start; padding: var(--e-4) 0; border-bottom: 1px solid var(--fio);
}
.novo-fluxo .conf-bloco dt { padding-top: 3px; }
.novo-fluxo .conf-bloco dd { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.novo-fluxo .conf-alterar { justify-self: end; }

/* --- as peças de texto da conferência ------------------------------------ */
.novo-fluxo .resumo-pedido .rp-corpo { display: flex; flex-direction: column; padding: var(--e-4) var(--e-5); }
.novo-fluxo .rp-bloco { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.novo-fluxo .rp-bloco + .rp-bloco { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--fio); }
.novo-fluxo .rp-bloco > .etq { margin-bottom: var(--e-1); }
.novo-fluxo .rp-forte { font-size: var(--t-realce); font-weight: var(--peso-forte); color: var(--grafite); }
.novo-fluxo .rp-linha { font-size: var(--t-apoio); color: var(--texto); }
.novo-fluxo .rp-linha b { font-weight: var(--peso-forte); color: var(--grafite); }
.novo-fluxo .rp-fraca { color: var(--texto-2); }
.novo-fluxo .rp-preco {
  font-size: var(--t-titulo); font-weight: var(--peso-forte); color: var(--grafite);
  font-variant-numeric: tabular-nums;
}
.novo-fluxo .rp-preco span { font-size: var(--t-mini); font-weight: 400; color: var(--texto-2); margin-left: var(--e-1); }
.novo-fluxo .rp-alerta { margin-top: var(--e-1); font-size: var(--t-mini); color: var(--morno); }
.novo-fluxo .rp-acoes { display: flex; flex-wrap: wrap; gap: var(--e-1); margin: var(--e-2) 0 0 calc(-1 * var(--e-2)); }
.novo-fluxo .rp-busca { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-apoio); color: var(--texto-2); }
.novo-fluxo .rp-giro {
  width: 14px; height: 14px; flex: 0 0 auto; border-radius: var(--raio-circulo);
  border: 2px solid var(--indigo-aro); border-top-color: var(--indigo);
  animation: rp-gira .8s linear infinite;
}
@keyframes rp-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .novo-fluxo .rp-giro { animation: none; } }

/* --- a captura, na folha ------------------------------------------------- */
.captura {
  margin: 0; border: 1px solid var(--claro); border-radius: var(--raio-controle); overflow: hidden;
  background: var(--carta);
}
.captura-barra {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-3); background: var(--neutro-luz);
}
.captura-pontos { display: inline-flex; gap: 5px; }
.captura-pontos i { width: 8px; height: 8px; border-radius: var(--raio-circulo); background: var(--claro-2); }
.captura-url {
  flex: 1; padding: 2px var(--e-3); border-radius: var(--raio-pilula);
  background: var(--carta); font-size: var(--t-mini); color: var(--texto-2);
}
.captura-corpo { display: grid; gap: var(--e-1); padding: var(--e-5); }
.captura-site { font-size: var(--t-micro); font-weight: var(--peso-titulo); letter-spacing: .8px; text-transform: uppercase; color: var(--texto-2); }
.captura-trecho { font-size: var(--t-realce); font-weight: var(--peso-forte); color: var(--grafite); }
.captura-trecho span { font-size: var(--t-apoio); font-weight: 400; color: var(--texto-2); }
.captura-preco { margin-top: var(--e-2); font-size: var(--t-numero); font-weight: var(--peso-forte); color: var(--grafite); font-variant-numeric: tabular-nums; }
.captura-preco span { margin-left: var(--e-1); font-size: var(--t-apoio); font-weight: 400; color: var(--texto-2); }
.captura-leg { padding: var(--e-2) var(--e-3); border-top: 1px solid var(--fio); font-size: var(--t-mini); color: var(--texto-2); }
.rp-sites { margin: 0; padding: 0; list-style: none; }
.rp-sites li {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-3);
  padding: var(--e-3) 0; border-bottom: 1px solid var(--fio);
  font-size: var(--t-corpo); color: var(--texto);
}
.rp-site-valor { display: inline-flex; align-items: center; gap: var(--e-2); font-variant-numeric: tabular-nums; }
.rp-site-menor { font-weight: var(--peso-forte); color: var(--grafite); }

/* ==========================================================================
   CONVOCAÇÕES POR ETAPA E PRAZO (perfil da agência)

   A lista se organiza por "o que eu faço e até quando": abas de etapa no
   topo do bloco, o trecho por cidade como coluna principal, e o prazo com
   contagem e estado. Tudo escopado em `.painel-etapas` ou em classes novas:
   "Minhas propostas" usa o mesmo bloco e não muda.
   ========================================================================== */

/* As abas abrem o bloco, no lugar do título: são elas que dizem o recorte.
   Filtros e Exportar ficam na mesma linha, à direita, e o fio de baixo é
   da linha inteira. Os crachás de filtro ativo quebram para a linha de
   baixo, ainda acima do fio. */
.painel-etapas { padding-top: 0; }
.etapas-barra {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--e-4);
  padding-right: var(--e-5);
  border-bottom: 1px solid var(--fio);
}
.painel-etapas .abas-etapa {
  flex: 1 1 auto; min-width: 0;
  margin: 0; padding: 0 var(--e-5);
  border-bottom: 0;
  overflow-x: auto; scrollbar-width: none;
}
.painel-unido .etapas-barra .ferramentas {
  margin-left: auto; padding: 0; border-bottom: 0; gap: var(--e-3);
}
.painel-unido .etapas-barra .crachas { flex: 1 0 100%; padding: 0 0 var(--e-3) var(--e-5); border-bottom: 0; }
/* No celular a barra desce para uma linha própria, abaixo das abas, com
   Filtros à esquerda e Exportar à direita, lado a lado. */
@media (max-width: 720px) {
  .etapas-barra { padding: 0 var(--e-4) var(--e-3); }
  .painel-etapas .abas-etapa { flex-basis: 100%; margin: 0 calc(-1 * var(--e-4)); padding: 0 var(--e-4); }
  .painel-unido .etapas-barra .ferramentas {
    flex: 1 1 100%; margin: var(--e-3) 0 0; flex-wrap: nowrap; justify-content: space-between;
  }
  .etapas-barra .ferr-filtros, .etapas-barra .ferr-acoes { width: auto; }
  .etapas-barra .ferr-acoes .bt { width: auto; }
  .painel-unido .etapas-barra .crachas { padding-left: 0; }
}
.painel-etapas .abas-etapa::-webkit-scrollbar { display: none; }
.painel-etapas .abas-etapa .aba { flex: 0 0 auto; white-space: nowrap; }

/* A participação no pé da tela: observação num quadro `.nota`, em texto
   de apoio. É leitura, não filtro nem ação. */
.participacao { font-size: var(--t-apoio); color: var(--texto-2); }
.participacao b { color: var(--grafite); font-weight: var(--peso-forte); }

/* O trecho em três linhas: cidades, códigos e unidade, protocolo e sessão. */
.trecho-conv { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.trecho-cidades {
  font-size: var(--t-corpo); font-weight: var(--peso-forte); color: var(--grafite);
}
.trecho-apoio { font-size: var(--t-mini); color: var(--texto-2); }
.trecho-conv .trecho-selado { font-style: normal; color: var(--texto); font-size: var(--t-apoio); }

.sit-conv { display: inline-flex; align-items: center; gap: 2px; }
.sit-info {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; border-radius: var(--raio-circulo); background: none;
  color: var(--indigo); cursor: help;
}
.sit-info:hover { background: var(--indigo-luz); }
.sit-info:focus-visible { outline: none; box-shadow: var(--foco-halo); }

/* Proposta selada: um rótulo com cadeado, e não seis pontos. */
.sigilosa {
  display: inline-flex; align-items: center; gap: var(--e-1);
  font-size: var(--t-apoio); font-weight: var(--peso-titulo); color: var(--texto);
}

/* O prazo. Cor nunca sozinha: ícone e contagem dizem o mesmo que o tom. */
.prazo { display: inline-flex; align-items: flex-start; gap: var(--e-2); }
.prazo > svg { margin-top: 2px; }
.prazo-txt { display: flex; flex-direction: column; gap: 1px; }
.prazo-txt b { font-size: var(--t-apoio); font-weight: var(--peso-titulo); color: var(--grafite); }
.prazo-txt > span { font-size: var(--t-mini); }
/* Todo prazo é um quadro, sem ícone: o neutro em azul-claro, para não
   ficar solto como texto ao lado dos coloridos. O tom se lê pela cor e pela
   contagem; o "Urgente." oculto segue dizendo ao leitor de tela. */
.prazo-neutro,
.prazo-atencao,
.prazo-critico { padding: var(--e-1) var(--e-2); border-radius: var(--raio-campo); }
.prazo-neutro { background: var(--indigo-luz); color: var(--indigo-vivo); }
.prazo-neutro .prazo-txt { font-size: var(--t-apoio); }
.prazo-neutro .prazo-txt b { color: var(--indigo-vivo); }
.prazo-atencao { background: var(--morno-luz); color: var(--morno); }
.prazo-atencao .prazo-txt b { color: var(--morno); }
.prazo-critico { background: var(--quente-luz); color: var(--quente); }
.prazo-critico .prazo-txt b { color: var(--quente); }
.prazo-critico .prazo-txt > span { font-weight: var(--peso-forte); }

/* As linhas desta lista carregam três linhas de texto no trecho. */
.painel-etapas .lista-densa td { height: auto; padding-top: var(--e-2); padding-bottom: var(--e-2); vertical-align: middle; }

/* No celular: o trecho em destaque, e cada informação numa linha. */
.cartao-conv .cartao-corpo { gap: var(--e-2); }

/* O aviso da certidão no celular: o texto ficou mais longo (data e
   consequência), e ao lado do botão ele virava uma coluna de uma palavra
   por linha. Abaixo de 720px o botão desce para a linha de baixo. */
@media (max-width: 720px) {
  .aviso-doc { flex-wrap: wrap; }
  .aviso-doc .cresce { flex: 1 1 calc(100% - 32px); }
  .aviso-doc > .bt { margin-left: 28px; }
}

/* O "x" do aviso da certidão: a agência dispensa e resolve depois. */
.aviso-doc-x {
  width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center;
  border: 0; border-radius: var(--raio-circulo); background: none;
  color: var(--morno); cursor: pointer;
}
.aviso-doc-x:hover { background: color-mix(in srgb, var(--morno) 12%, transparent); }
.aviso-doc-x:focus-visible { outline: none; box-shadow: var(--foco-halo); }
@media (max-width: 720px) {
  .aviso-doc { position: relative; padding-right: 40px; }
  .aviso-doc-x { position: absolute; top: 4px; right: 4px; }
}

/* O menu "⋯" das convocações: coluna estreita, botão centrado, com o
   mesmo aro do menu das cotações. Sem moldura, os três pontos liam como
   pontuação, não como controle. */
.painel-etapas .cel-mais .redondo,
.fc-docs .cel-mais .redondo,
.cartao-acao-menu .cel-mais .redondo {
  width: var(--alt-mini); height: var(--alt-mini);
  border: 1px solid var(--claro); border-radius: var(--raio-campo);
  color: var(--texto);
}
.painel-etapas .cel-mais .redondo:hover,
.fc-docs .cel-mais .redondo:hover,
.cartao-acao-menu .cel-mais .redondo:hover { border-color: var(--claro-2); }
/* Os pontos do ícone, com o traço padrão de 1,8, saíam com pouco mais de um
   pixel e sumiam: aqui o traço engrossa para eles se lerem como três pontos. */
.painel-etapas .cel-mais .redondo svg path,
.fc-docs .cel-mais .redondo svg path,
.cartao-acao-menu .cel-mais .redondo svg path { stroke-width: 3.2; }
/* Alinhado à esquerda, como todas as outras colunas. */
.painel-etapas .th-acoes,
.painel-etapas .cel-acoes,
.fc-docs .cel-acoes { text-align: left; }
.cartao-acao-menu { display: flex; justify-content: flex-end; }
/* As janelas do menu (recusar, mensagem): estreitas, uma coisa só a fazer. */
.folha:has(.folha-conv) { width: min(560px, 100%); }
.folha-conv { display: flex; flex-direction: column; gap: var(--e-4); }

/* Detalhe da sessão da agência: emissão em dois passos, e o horário de
   encerramento como texto, não como número grande. */
.passos-emissao { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--e-3); }
.passos-emissao li { display: flex; flex-direction: column; gap: var(--e-1); }
.passos-emissao .bt { width: 100%; justify-content: center; }
.cron-texto { margin: var(--e-2) 0 0; font-size: var(--t-corpo); color: var(--texto); line-height: 1.5; }

/* Minhas propostas: a linha de resumo da aba, o prazo de emissão na
   linha e o link de texto que leva a outra tela. */
.resumo-aba {
  margin: 0; padding: var(--e-2) var(--e-5) var(--e-2);
  font-size: var(--t-apoio); color: var(--texto-2);
  border-bottom: 1px solid var(--fio);
}
/* Minhas propostas: três números do mês, fora do card da lista. */
.resumo-numeros { display: flex; gap: var(--e-3); margin: 0 0 var(--e-4); }
.resumo-numeros > div {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 160px; padding: var(--e-3) var(--e-4);
  background: #fff; border: 1px solid var(--fio); border-radius: 8px;
}
.resumo-numeros dt { font-size: var(--t-apoio); color: var(--texto-2); }
.resumo-numeros dd { margin: 0; font-size: 20px; font-weight: var(--peso-titulo); color: var(--texto); line-height: 1.2; }
.link-bt {
  border: 0; background: none; padding: 0;
  font: inherit; color: var(--indigo-vivo); font-weight: var(--peso-titulo);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.link-bt:hover { color: var(--indigo); }
.link-bt:focus-visible { outline: none; box-shadow: var(--foco-halo); border-radius: 2px; }
.sit-col { flex-direction: column; align-items: flex-start; gap: 3px; }
/* O prazo de emissão como quadro, no mesmo desenho do prazo de
   Convocações: âmbar, e vermelho abaixo de 5 minutos. */
.prazo.resta-emitir {
  align-items: center; gap: var(--e-1); padding: 2px var(--e-2);
  font-size: var(--t-mini); font-weight: var(--peso-titulo);
}

/* Ordem de Serviço (agência): a tarefa em passos à esquerda, a ordem e a
   tarifa para consulta à direita. Só desktop por enquanto. */
.os-grade {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--e-4); align-items: start;
}
.os-apoio { display: flex; flex-direction: column; gap: var(--e-4); }
.os-tit { display: flex; align-items: center; gap: var(--e-1); }
.os-corpo { padding: 0 var(--e-5) var(--e-4); }
.os-rotulo { display: flex; align-items: baseline; gap: var(--e-2); margin-bottom: var(--e-2); }
.os-pnr { max-width: 220px; }
.os-pe { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--fio); }
.os-prazo { font-size: var(--t-apoio); }
.os-dados { margin: 0; padding: 0 var(--e-5) var(--e-3); }
.os-dados > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3);
  padding: var(--e-2) 0; border-top: 1px solid var(--fio);
}
.os-dados > div:first-child { border-top: 0; }
.os-dados dt { font-size: var(--t-apoio); color: var(--texto-2); }
.os-dados dd { margin: 0; font-size: var(--t-apoio); color: var(--grafite); font-weight: var(--peso-forte); text-align: right; }
/* Cards da Ordem de Serviço com borda cinza e fundo branco, como a lista
   de Minhas propostas: a sombra sozinha sumia sobre o fundo branco. */
.os-grade .painel { border: 1px solid var(--claro); box-shadow: none; }
.os-pax-lista { display: flex; flex-direction: column; gap: var(--e-3); }
.os-pax {
  position: relative; overflow: hidden;
  border: 1px solid var(--claro); border-radius: var(--raio-controle);
  background: var(--carta);
}
.os-pax-topo { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); }
.os-pax-quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.os-pax-nome .sel { font-size: var(--t-corpo); }
.os-pax-nome .sel-val { font-weight: var(--peso-titulo); color: var(--grafite); }
.os-pax-vinculo { font-size: var(--t-apoio); color: var(--texto-2); }
.os-pax-dados {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3) var(--e-5);
  margin: 0; padding: var(--e-3) var(--e-4) var(--e-4);
  border-top: 1px solid var(--fio);
}
.os-pax-dados > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.os-pax-dados dt {
  font-size: var(--t-micro); font-weight: var(--peso-titulo);
  letter-spacing: .8px; text-transform: uppercase; color: var(--texto-2);
}
.os-pax-dados dd { margin: 0; }
.os-pax-dados .sel { font-size: var(--t-corpo); }
.os-pax-dados .sel-aberta .sel-val { color: var(--grafite); font-weight: var(--peso-titulo); }
/* O dado protegido passa AA: cinza de texto de apoio, não o cinza de ícone. */
.os-pax .sel-lacrada .sel-val { color: var(--texto-2); font-size: var(--t-apoio); }
.os-pax-ato {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  background: var(--indigo-luz); color: var(--indigo-vivo);
  font-size: var(--t-apoio); font-weight: var(--peso-forte);
}
.os-grade > .coluna { display: flex; flex-direction: column; gap: var(--e-4); }
.anexo-obs { font-size: var(--t-apoio); color: var(--texto); }
.anexo-obs b { font-weight: var(--peso-forte); color: var(--grafite); }

/* Meu credenciamento: as mesmas regras das telas da agência. Cards com
   borda cinza, conteúdo alinhado ao título, números em quadros brancos. */
.mc-tela .painel { border: 1px solid var(--claro); box-shadow: none; }
.mc-aviso + .mc-aviso { margin-top: var(--e-2); }
.mc-tela .rolo { margin-top: var(--e-3); border-top: 1px solid var(--fio); }
.mc-doc { display: flex; flex-direction: column; gap: 2px; }
.mc-doc-nome { font-weight: var(--peso-forte); color: var(--grafite); }
.mc-doc-sub { font-size: var(--t-apoio); color: var(--texto-2); }
.mc-tela .ficha-nums { padding: 0 var(--e-5); }
.mc-tela .ficha-num { background: var(--carta); border: 1px solid var(--claro); }
.mc-tela .ficha-num span { font-size: var(--t-apoio); }
.mc-tela .dupla .nota { margin-left: var(--e-5); margin-right: var(--e-5); }
.mc-tela .faixa-grupo-fino { padding: 0 var(--e-5) var(--e-2); }
.mc-tela .faixa-grupo-fino + .bt { margin-left: var(--e-5); margin-bottom: var(--e-3); }
.mc-tela .painel-dir .ferramentas { padding: 0; }
.mc-tela .painel-dir .busca-tela { width: 280px; flex: 0 0 auto; }
/* O "i" de "Seus documentos": a 16px do título, centrado na linha, e o
   balão abre para baixo. Para cima ele saía do card, que recorta o que
   passa da borda (`overflow: hidden`), e sumia. */
.mc-tela .os-tit { gap: var(--e-4); }
.mc-tela .os-tit h2 { line-height: 1.2; }
.mc-tela .os-tit .dica { bottom: auto; top: calc(100% + 8px); left: 0; transform: none; }
/* O tempo para emitir, na linha: texto simples abaixo do chip de status. */
.resta-emitir-txt { font-size: var(--t-apoio); font-weight: var(--peso-forte); color: var(--morno); }
.resta-emitir-txt.resta-critico { color: var(--quente); }
/* Ficha da credenciada (Tribunal): documentos em tabela. */
.fc-docs { margin-top: var(--e-2); border-top: 1px solid var(--fio); }
/* Visualizar documento (ficha da credenciada): o arquivo, uma prévia da
   página e, embaixo, a conferência. */
.conf-folha { display: flex; flex-direction: column; gap: var(--e-3); }
.conf-arquivo {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3); border: 1px solid var(--claro); border-radius: var(--raio-controle);
}
.conf-arquivo-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conf-arquivo-nome { font-weight: var(--peso-forte); color: var(--grafite); }
.conf-arquivo-sub { font-size: var(--t-apoio); color: var(--texto-2); }
.conf-previa {
  display: flex; justify-content: center; padding: var(--e-4);
  background: var(--neutro-luz); border-radius: var(--raio-controle);
  max-height: 220px; overflow: hidden;
}
.conf-pagina {
  width: 100%; max-width: 360px; min-height: 240px;
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-4); background: var(--carta);
  border: 1px solid var(--claro); border-radius: 4px;
  font-size: var(--t-apoio); color: var(--texto-2);
}
.conf-pagina b { color: var(--grafite); font-size: var(--t-corpo); }
.conf-pagina i { display: block; height: 8px; border-radius: 4px; background: var(--neutro-luz); }
.conf-pagina i.curta { width: 60%; }
.conf-tit {
  margin: var(--e-2) 0 0; padding-top: var(--e-4); border-top: 1px solid var(--fio);
  font-size: var(--t-corpo); font-weight: var(--peso-titulo); color: var(--grafite);
}
.conf-marcar { display: flex; align-items: center; gap: var(--e-2); cursor: pointer; }
.conf-folha .campo { max-width: 260px; }
.conf-nota { margin: 0; font-size: var(--t-apoio); color: var(--texto-2); }
.conf-marcar { position: relative; }
.conf-marcar input { position: absolute; opacity: 0; pointer-events: none; }
.conf-marcar:has(input:checked) .marcar-quad { background: var(--indigo); border-color: var(--indigo); color: var(--carta); }
.conf-marcar:has(input:focus-visible) .marcar-quad { box-shadow: var(--foco-halo); }
/* "i" ao lado do título da página: a 16px dele, e o balão abre para baixo. */
.titulo-pag h1.tit-info { gap: var(--e-4); }
.tit-info .dica { bottom: auto; top: calc(100% + 8px); left: 0; transform: none; font-size: var(--t-mini); font-weight: 400; }
.tit-info .dica-envelope { align-self: center; }
/* Cadastro da ficha: quatro colunas iguais, com respiro entre as linhas. */
.fc-cad {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-5) var(--e-5); padding: var(--e-2) var(--e-5) var(--e-3);
}
.fc-cad .faixa-item { gap: var(--e-1); }
.fc-cad .faixa-val { overflow-wrap: anywhere; }
/* Modelo do contrato: aviso, campos e minuta em blocos separados. */
.ct-folha { display: flex; flex-direction: column; gap: var(--e-6); }
.ct-aviso {
  display: flex; gap: var(--e-2); align-items: flex-start; margin: 0;
  padding: var(--e-3) var(--e-4); border-radius: var(--raio-controle);
  background: var(--neutro-luz); color: var(--texto); font-size: var(--t-apoio); line-height: 1.5;
}
.ct-aviso svg { flex-shrink: 0; margin-top: 2px; color: var(--texto-2); }
.ct-bloco { display: flex; flex-direction: column; gap: var(--e-3); }
.ct-tit {
  display: flex; align-items: baseline; gap: var(--e-2); margin: 0;
  font-size: var(--t-corpo); font-weight: var(--peso-titulo); color: var(--grafite);
}
.ct-conta {
  font-size: var(--t-mini); font-weight: var(--peso-forte); color: var(--texto-2);
  background: var(--neutro-luz); border-radius: 999px; padding: 0 var(--e-2);
}
.ct-sub { font-size: var(--t-apoio); font-weight: 400; color: var(--texto-2); }
.ct-campos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6);
  margin: 0; border: 1px solid var(--claro); border-radius: var(--raio-controle);
  padding: 0 var(--e-4);
}
.ct-campos > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3);
  padding: var(--e-3) 0; border-bottom: 1px solid var(--fio);
}
.ct-campos > div:nth-last-child(-n+2) { border-bottom: 0; }
.ct-campos dt { font-size: var(--t-apoio); color: var(--grafite); font-weight: var(--peso-forte); }
.ct-campos dd { margin: 0; font-size: var(--t-apoio); text-align: right; }
.ct-origem { color: var(--texto-2); }
.ct-folha .minuta { max-width: none; }
/* O que trava a homologação por causa de documento, dentro da seção
   Documentos, logo acima da tabela. */
.fc-aviso { margin: 0 var(--e-5) var(--e-3); }
.nota-erro-luz { background: var(--quente-luz); color: var(--quente); }
.nota-erro-luz .nota-icone { color: var(--quente); }
/* Auditoria · Compras: abas e busca na mesma linha, compras em tabela. */
.aud-busca { display: flex; align-items: center; gap: var(--e-4); margin-left: auto; }
.aud-busca .ferramentas { padding: 0; flex: 0 0 auto; width: auto; }
.aud-busca .busca-tela { width: 360px; flex: 0 0 auto; }
.aud-compras .rolo { border-top: 1px solid var(--fio); }
.aud-compras .mono { font-family: var(--fonte-mono); }
.compra-on td { background: var(--ceu); }
.compra-atos td { background: var(--ceu); padding-top: 0; }
.aud-busca .ferr-filtros:empty { display: none; }
/* Acordeão das compras: a seta abre e fecha, a linha inteira também. */
.compra-linha { cursor: pointer; }
.compra-prot { display: flex; align-items: center; gap: var(--e-2); }
.compra-seta {
  width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center;
  border: 0; border-radius: var(--raio-circulo); background: none; color: var(--texto-2); cursor: pointer;
}
.compra-seta:hover { background: var(--indigo-luz); color: var(--indigo); }
.compra-seta:focus-visible { outline: none; box-shadow: var(--foco-halo); }
.compra-on .compra-seta { color: var(--indigo); }
.compra-atos td { padding: 0 var(--e-5) var(--e-4); }
.compra-atos .ciclo-atos { border-top: 0; }
.compra-atos .ciclo-pe { border-radius: var(--raio-controle); }
.ciclo-mais { font-size: var(--t-apoio); color: var(--texto); }
.ciclo-mais .bt svg { margin-left: var(--e-1); }
/* Página do ciclo */
.ciclo-pagina .fc-cad { margin: 0; }
.ciclo-pagina .ciclo-pe { margin: 0 var(--e-5) var(--e-3); border-radius: var(--raio-controle); }
.titulo-pag h1 .mono { font-family: var(--fonte-mono); font-size: .8em; }
.compra-prot .mc-doc-sub { white-space: nowrap; }