/* Aurora — a identidade visual do produto.
 *
 * Registro: INSTRUMENTO que se deixa olhar. O desenho de produto da Aurora
 * (Adendo 2, 2026-10-08) entra aqui inteiro — violeta como cor primária, painel
 * em gradiente no login, fundo claro levemente lilás, cantos arredondados e
 * sombra suave —, mas o que a tela AFIRMA continua sendo o que era: cada preço
 * com o caminho para a fonte, cada preço suspeito com o motivo escrito, cada
 * condição de fonte com o seu próprio nome. Identidade não apaga auditoria.
 *
 * Sem webfont e sem CDN: a demonstração tem de rodar offline, e o CSS é servido
 * pelo próprio FastAPI. Pilha de fontes do SISTEMA.
 *
 * Duas fontes, e a divisão tem razão de ser. Grotesca de sistema para a
 * interface. Monoespaçada com `tabular-nums` para TODO valor numérico e
 * identificador — preço, data, código, UF, hash —, porque número que não alinha
 * na vertical destrói a leitura de uma coluna de preços. Os cartões de
 * estatística seguem a mesma regra, e nisso esta tela se afasta do desenho: lá o
 * número é decorativo, aqui ele é a afirmação.
 *
 * Elemento assinatura: o FIO DE PROCEDÊNCIA. Um fio de cabelo desce da célula do
 * preço até o distintivo da fonte, e o distintivo É o link. O olho segue o fio do
 * número até a prova.
 *
 * Paleta: dez valores, e só eles. Oito são a identidade (o violeta primário, o
 * violeta claro do gradiente, os dois lilases de fundo, o branco da superfície,
 * a tinta, o apoio e o fio). Dois são SEMÂNTICOS e não podem ser absorvidos pelo
 * violeta: `verificado` marca a fonte que respondeu e o link conferido, e
 * `suspeito` marca o preço que não pode ser somado. Tingir qualquer um dos dois
 * de violeta apagaria a distinção que a tela existe para fazer.
 *
 * A sombra é o violeta primário em alfa baixo (não é matiz nova), e o brilho do
 * painel de destaque é branco em alfa baixo sobre o gradiente.
 */

:root {
  --violeta: #6d28d9;         /* cor primária: botão, item ativo, destaque */
  --violeta-claro: #a855f7;   /* fim do gradiente do painel de login */
  --lilas: #ede9fe;           /* fundo do item ativo da navegação */
  --lilas-fundo: #f7f5ff;     /* fundo da tela */
  --superficie: #ffffff;      /* cartões e coluna de navegação */
  --tinta: #171226;           /* texto */
  --apoio: #6b6480;           /* rótulos e metadados */
  --fio: #e6e1f5;             /* bordas e o fio de procedência */
  --verificado: #0b6e5f;      /* fonte respondida, link conferido */
  --suspeito: #a85b00;        /* preço <= 0, sem preço, desacordo */

  --brilho: rgba(109, 40, 217, 0.18);
  --brilho-forte: rgba(109, 40, 217, 0.32);
  --veu: rgba(255, 255, 255, 0.16);

  /* Escala de tipos: 4 degraus, e nada entre eles. */
  --t1: 0.75rem;    /* rótulos, metadados, distintivo, selo */
  --t2: 0.875rem;   /* corpo */
  --t3: 1.0625rem;  /* preço, título de seção */
  --t4: 1.5rem;     /* título da tela */

  --raio: 0.75rem;      /* cartões e painéis */
  --raio-pilula: 999px; /* botões, campos e filtros */

  --ui: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Consolas, monospace;
  --borda: 1px solid var(--fio);
}

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

body {
  margin: 0;
  background: var(--lilas-fundo);
  color: var(--tinta);
  font: 400 var(--t2) / 1.5 var(--ui);
}

h1,
h2,
p,
ol,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a {
  color: var(--violeta);
}

/* O foco de teclado é visível em cima do gradiente E em cima do branco: o anel
 * violeta com um halo claro sobrevive aos dois fundos. Perder o foco aqui é
 * perder quem navega por teclado. */
:focus-visible {
  outline: 2px solid var(--violeta);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* --- a marca -------------------------------------------------------------- */
/* `marca-aurora` e `.marca` são coisas DIFERENTES e já colidiram uma vez: `.marca`
 * é o rótulo "suspeito" da tabela (monoespaçado, caixa alta). Enquanto o bloco da
 * marca usou `class="marca"`, o nome "Aurora" herdou a caixa alta e a
 * monoespaçada e saiu "AURORA" na tela — visto nas capturas. A marca do desenho é
 * grotesca e em caixa mista. Daí o nome próprio. */

.marca-aurora {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* O selo é o quadrado arredondado do desenho, com o brilho violeta em volta. */
.marca-aurora__selo {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: linear-gradient(150deg, var(--violeta), var(--violeta-claro));
  box-shadow: 0 4px 14px var(--brilho-forte);
}

.marca-aurora__nome {
  font-size: var(--t3);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- o botão -------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.35rem;
  border: 1px solid var(--violeta);
  border-radius: var(--raio-pilula);
  background: var(--violeta);
  color: var(--superficie);
  font: 600 var(--t2) / 1.2 var(--ui);
  cursor: pointer;
  box-shadow: 0 6px 18px var(--brilho);
}

.botao:hover {
  border-color: var(--violeta-claro);
  background: var(--violeta-claro);
}

.botao--largo {
  width: 100%;
}

/* O botão que ainda não tem tela: desabilitado de verdade (`disabled`), com o
 * selo VISÍVEL ao lado. Um botão apagado sem explicação lê como defeito. */
.botao--indisponivel,
.botao:disabled {
  border-color: var(--fio);
  background: var(--lilas);
  color: var(--apoio);
  box-shadow: none;
  cursor: not-allowed;
}

.botao__selo,
.selo,
.nav__selo {
  padding: 0.1rem 0.4rem;
  border-radius: var(--raio-pilula);
  background: var(--lilas);
  color: var(--violeta);
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.botao--indisponivel .botao__selo,
.botao:disabled .botao__selo {
  background: var(--superficie);
}

/* O que existe no desenho mas ainda não tem tela: marcado, nunca link. */
.indisponivel {
  color: var(--apoio);
  text-decoration: line-through;
  cursor: not-allowed;
}

/* --- o campo -------------------------------------------------------------- */

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.campo label {
  color: var(--tinta);
  font-size: var(--t2);
  font-weight: 600;
}

.campo input,
.campo select {
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: var(--borda);
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  color: var(--tinta);
  font: 400 var(--t2) / 1.4 var(--ui);
}

.campo input:focus-visible,
.campo select:focus-visible {
  border-color: var(--violeta);
}

/* --- a tela de login ------------------------------------------------------ */

.pagina-login {
  background: var(--superficie);
}

.login {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
}

.login__painel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.login__painel--formulario {
  gap: 1.5rem;
  padding: 2.5rem clamp(1.25rem, 6vw, 5rem) 1.5rem;
}

.login__corpo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  max-width: 26rem;
  width: 100%;
}

.login__titulo {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.login__linha {
  color: var(--apoio);
  font-size: var(--t3);
}

.login__formulario {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 0.5rem;
}

.login__apoio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t1);
}

.login__rodape {
  color: var(--apoio);
  font-size: var(--t1);
}

/* O painel de destaque: o gradiente violeta do desenho, com o brilho claro no
 * alto à direita e o cartão de referência por cima.
 *
 * O SENTIDO do gradiente é o inverso do desenho, e a captura de 375 px mostrou
 * por quê: no desenho o claro fica embaixo, e é exatamente embaixo que mora a
 * frase de apoio. Branco sobre `--violeta-claro` dá 3,9:1, abaixo do mínimo de
 * 4,5:1 para texto normal — e a 375 px o parágrafo saiu lavado na captura. Aqui o
 * claro fica no ALTO (onde está o cartão branco, que tem superfície própria e
 * sombra e por isso não depende do fundo) e o fundo chega ao violeta pleno em
 * 70%, onde o texto mora: branco sobre `--violeta` dá 7,1:1. */
.login__painel--destaque {
  position: relative;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.5rem;
  background:
    radial-gradient(circle at 88% 8%, var(--veu), transparent 42%),
    linear-gradient(180deg, var(--violeta-claro) 0%, var(--violeta) 70%);
  color: var(--superficie);
  overflow: hidden;
}

.destaque__cartao {
  align-self: flex-end;
  width: 100%;
  max-width: 14rem;
  padding: 1rem 1.1rem;
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: 0 18px 40px var(--brilho-forte);
}

.destaque__rotulo {
  color: var(--apoio);
  font-size: var(--t1);
}

.destaque__valor {
  color: var(--violeta);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.destaque__nota {
  color: var(--apoio);
  font-size: var(--t1);
}

.destaque__frase {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.destaque__apoio {
  margin-top: 0.5rem;
  font-size: var(--t3);
  color: var(--superficie);
}

/* --- o casco: navegação lateral + conteúdo -------------------------------- */

/* O FUNDO das duas colunas fica no casco e no conteúdo, e não na navegação: com
 * `align-items: start` a navegação tem a altura do próprio conteúdo (é o que
 * deixa o `sticky` funcionar), então o branco dela terminava no meio de uma
 * página longa — visto na captura de 1280 px, onde a coluna branca parava e o
 * lilás aparecia embaixo. Assim o casco pinta a superfície por toda a altura e o
 * conteúdo pinta o lilás por cima, com a divisória no lugar da borda. */
.casco {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  align-items: start;
  background: var(--superficie);
}

.nav {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 100vh;
  padding: 1.5rem 1rem;
}

.nav__lista {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav__linha {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.nav__item {
  flex: 1 1 auto;
  padding: 0.5rem 0.75rem;
  border-radius: 0.6rem;
  color: var(--apoio);
  font-weight: 500;
  text-decoration: none;
  min-width: 0;
}

.nav__item--ativo {
  background: var(--lilas);
  color: var(--violeta);
  font-weight: 700;
}

.nav__item--indisponivel {
  cursor: not-allowed;
}

.nav__usuario {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: var(--borda);
  color: var(--apoio);
  font-size: var(--t1);
  overflow-wrap: anywhere;
}

/* A PORTA DE SAIR (F3-4). Ela fica ao lado da identidade do usuário, e NÃO é um
   dos cinco itens de menu do desenho — por isso não usa `.nav__item`: as provas
   de identidade contam os itens do menu por essa classe, e a navegação tem de ter
   exatamente os cinco. */
.nav__saida {
  padding-top: 0.5rem;
}

.nav__sair {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border-radius: 0.6rem;
  color: var(--apoio);
  font-size: var(--t1);
  text-decoration: none;
}

.nav__sair:hover,
.nav__sair--ativo {
  background: var(--lilas);
  color: var(--violeta);
}

#conteudo {
  min-width: 0;
  padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 4rem;
  background: var(--lilas-fundo);
  border-left: var(--borda);
  min-height: 100vh;
}

.cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cabecalho__identidade {
  min-width: 0;
}

.cabecalho__titulo {
  font-size: var(--t4);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cabecalho__prefeitura {
  color: var(--apoio);
  font-size: var(--t1);
}

/* --- o formulário de busca ------------------------------------------------ */

.busca {
  margin-top: 1.5rem;
}

.busca__rotulo {
  display: block;
  color: var(--apoio);
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.3rem;
}

.busca__principal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.busca__principal input {
  flex: 1 1 18rem;
  min-width: 0;
  padding: 0.7rem 1.1rem;
  border: var(--borda);
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  color: var(--tinta);
  font: 400 var(--t3) / 1.4 var(--ui);
  box-shadow: 0 4px 14px var(--brilho);
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
}

.filtros__titulo {
  padding: 0;
  color: var(--apoio);
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Os filtros em pílula do desenho. Os campos são os que o produto TEM — período,
   fonte, faixa de preço, órgão e UF —, e não atalhos inventados. */
.filtros .campo {
  flex: 0 1 11rem;
  padding: 0.35rem 0.75rem 0.5rem;
  border: var(--borda);
  border-radius: 1rem;
  background: var(--superficie);
}

.filtros .campo input,
.filtros .campo select {
  padding: 0.3rem 0.4rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--lilas-fundo);
}

/* --- os cartões de estatística ------------------------------------------- */

.estatisticas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.estatistica {
  padding: 1rem 1.1rem;
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: 0 6px 18px var(--brilho);
}

.estatistica--destaque {
  background: var(--violeta);
  color: var(--superficie);
}

.estatistica__rotulo {
  color: var(--apoio);
  font-size: var(--t1);
}

.estatistica--destaque .estatistica__rotulo {
  color: var(--superficie);
}

.estatistica__valor {
  margin-top: 0.15rem;
  font-size: 1.35rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* --- estado das fontes: a superfície da honestidade ---------------------- */

.secao {
  margin-top: 1.75rem;
}

.secao__titulo {
  color: var(--apoio);
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.estado {
  margin-top: 0.5rem;
  border: var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
}

.estado__item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  padding: 0.6rem 1rem;
  border-bottom: var(--borda);
}

.estado__item:last-child {
  border-bottom: 0;
}

.estado__rotulo {
  flex: 0 0 12rem;
  color: var(--apoio);
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.estado__valor {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.estado__item--ok .estado__valor {
  color: var(--verificado);
}

.estado__item--atencao .estado__valor {
  color: var(--suspeito);
}

.estado__detalhe {
  flex: 1 1 16rem;
  min-width: 0;
  color: var(--apoio);
}

.aviso {
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--suspeito);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--suspeito);
}

.nota {
  margin-top: 0.4rem;
  color: var(--apoio);
  font-size: var(--t1);
}

/* --- cobertura da varredura e caminhos determinísticos (B3-ARB) ---------- */

/* A cobertura é a memória de cálculo da busca: o número tem de ser lido, não
   decorado do resto da tela. Cada fonte que varreu ocupa a sua linha. */
.cobertura__lista,
.caminhos__lista {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding: 0;
  list-style: none;
}

.cobertura__item,
.caminhos__item {
  padding: 0.8rem 1rem;
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: 0 6px 18px var(--brilho);
}

/* Resposta servida do cache VENCIDO: a mesma marca lateral do preço suspeito,
   porque é a mesma classe de aviso — este número pode não ser o de agora. */
.cobertura__item--vencido {
  box-shadow: inset 3px 0 0 var(--suspeito);
}

.cobertura__item--vencido .cobertura__texto {
  color: var(--suspeito);
}

.cobertura__fonte {
  display: block;
  color: var(--apoio);
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cobertura__texto {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--t2);
}

.caminhos__titulo {
  font-weight: 600;
}

.caminhos__porque,
.caminhos__como {
  margin-top: 0.3rem;
  color: var(--apoio);
  font-size: var(--t1);
}

.caminhos__como {
  color: var(--tinta);
}

/* --- resumo -------------------------------------------------------------- */

.resumo {
  margin-top: 1.5rem;
  color: var(--apoio);
}

.resumo strong {
  color: var(--tinta);
  font-weight: 600;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* --- a lista de preços --------------------------------------------------- */

/* A legenda de colunas é visual (`aria-hidden` no HTML): a lista não é uma
   tabela de verdade, e anunciar uma grade que não existe seria mentir para o
   leitor de tela. As três faixas são as três áreas reais da linha. */
.precos__cabecalho {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr) 16rem;
  gap: 0 1.5rem;
  margin-top: 1.75rem;
  padding: 0.6rem 1rem;
  border-radius: var(--raio) var(--raio) 0 0;
  background: var(--superficie);
  color: var(--apoio);
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.precos {
  border-radius: 0 0 var(--raio) var(--raio);
  background: var(--superficie);
  box-shadow: 0 6px 18px var(--brilho);
}

.linha {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr) 16rem;
  gap: 0 1.5rem;
  padding: 0.9rem 1rem;
  border-top: var(--borda);
}

.linha:hover {
  background: var(--lilas-fundo);
}

.linha--suspeito {
  box-shadow: inset 3px 0 0 var(--suspeito);
}

/* o fio de procedência: preço -> prova */
.procedencia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.preco {
  font-size: var(--t3);
  font-weight: 700;
}

.fio {
  width: 1px;
  height: 0.75rem;
  margin-left: 0.35rem;
  background: var(--fio);
}

.fonte {
  padding: 0.15rem 0.55rem;
  border: var(--borda);
  border-radius: var(--raio-pilula);
  background: var(--lilas-fundo);
  color: var(--verificado);
  font-family: var(--mono);
  font-size: var(--t1);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.fonte:hover {
  border-color: var(--verificado);
  text-decoration: underline;
}

.documento {
  min-width: 0;
}

.descricao {
  overflow-wrap: anywhere;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  margin-top: 0.25rem;
  color: var(--apoio);
  font-size: var(--t1);
}

.ocorrencia {
  color: var(--verificado);
  font-weight: 600;
}

.ocorrencia--unica {
  color: var(--apoio);
  font-weight: 400;
}

.origem {
  min-width: 0;
}

.data {
  font-size: var(--t2);
  font-weight: 600;
}

.orgao {
  margin-top: 0.2rem;
  color: var(--apoio);
  font-size: var(--t1);
  overflow-wrap: anywhere;
}

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

.suspeito {
  margin-top: 0.3rem;
  color: var(--suspeito);
  font-size: var(--t1);
}

.marca {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vazio {
  margin-top: 1.5rem;
  padding: 1.1rem 1rem;
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: 0 6px 18px var(--brilho);
  font-size: var(--t3);
}

.paginacao {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
  font-size: var(--t1);
}

.paginacao__atual {
  color: var(--apoio);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* --- responsivo até 375px ------------------------------------------------ */

@media (max-width: 1100px) {
  .estatisticas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .login__painel--formulario {
    padding: 1.75rem 1.25rem 1.25rem;
  }

  .login__painel--destaque {
    padding: 1.75rem 1.25rem;
    gap: 1.5rem;
  }

  .destaque__cartao {
    align-self: flex-start;
  }

  /* O casco vira uma coluna: a navegação deixa de ser coluna lateral e passa a
     ser uma faixa no topo, com os itens quebrando linha. Nada de rolagem
     horizontal. */
  .casco {
    grid-template-columns: minmax(0, 1fr);
  }

  .nav {
    position: static;
    min-height: 0;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: var(--borda);
  }

  /* Numa coluna só a divisória é horizontal (na navegação) e não vertical. */
  #conteudo {
    border-left: 0;
    min-height: 0;
  }

  .nav__lista {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .nav__linha {
    flex: 0 1 auto;
  }

  .nav__item {
    flex: 0 0 auto;
  }

  .nav__usuario {
    margin-top: 0;
  }

  #conteudo {
    padding: 1.25rem 1rem 3rem;
  }

  .linha,
  .precos__cabecalho {
    grid-template-columns: 9rem minmax(0, 1fr);
  }

  .origem {
    grid-column: 2;
    margin-top: 0.5rem;
  }
}

@media (max-width: 560px) {
  .estatisticas {
    grid-template-columns: minmax(0, 1fr);
  }

  .login__titulo {
    font-size: 1.9rem;
  }

  .destaque__frase {
    font-size: 1.6rem;
  }

  .filtros .campo {
    flex: 1 1 100%;
  }

  /* O cabeçalho de colunas some: a 375px as três faixas não cabem lado a lado, e
     uma legenda que não corresponde ao que está abaixo é pior do que nenhuma. */
  .precos__cabecalho {
    display: none;
  }

  .linha {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .origem {
    grid-column: 1;
  }

  .estado__rotulo {
    flex: 1 1 auto;
  }
}

/* Quem pediu menos movimento no sistema operacional não recebe animação — e a
 * identidade não introduz nenhuma que seja essencial à leitura. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --- O JUIZ SEMÂNTICO (rodada JEV) -------------------------------------------
 * A marca do juiz na linha de preço e o bloco de estado/custo do juiz. Só
 * variáveis da paleta: nenhuma cor nova entra na folha — o conjunto de cores do
 * arquivo é FECHADO pela guarda de `provas/test_b3_busca.py`, e uma matiz nova
 * escrita aqui derrubaria aquela prova (é para isso que ela existe). */
.juiz {
  margin-top: 0.25rem;
  color: var(--apoio);
  font-size: var(--t1);
}

.juiz--confirmado {
  color: var(--verificado);
}

.jev {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--superficie);
  border: var(--borda);
  border-radius: var(--raio);
}

.jev--ligado {
  border-color: var(--violeta);
}

.jev__lista,
.jev__trilha {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.jev__item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.jev__rotulo {
  color: var(--apoio);
  font-size: var(--t1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.jev__valor {
  font-weight: 600;
}

.jev__detalhe {
  color: var(--apoio);
  font-size: var(--t1);
}

.jev__juizo {
  border: var(--borda);
  border-radius: var(--raio);
  padding: 0.75rem;
}

.jev__cabeca,
.jev__linha {
  margin: 0.15rem 0;
  font-size: var(--t2);
}

.jev__cru {
  margin-top: 0.5rem;
}

.jev__cru pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--lilas-fundo);
  padding: 0.5rem;
  border-radius: var(--raio);
}

.jev__porta {
  margin: 0.75rem 0 0;
}