/* SEGGUI — folha base.

   A identidade desta folha vem do arquivo `SEGGUI-LOGO.jpeg`, medido pixel a
   pixel: as cores abaixo são as da própria logo, não aproximações de memória.
   A logo é um logotipo horizontal de 1718 × 296 px úteis (proporção 5,804:1)
   dentro de uma moldura branca — as duas medidas aparecem de novo no bloco
   `.marca-logo`, que recorta essa moldura.

   Três traços da logo governam tudo o que vem depois:

   1. A sequência verde → amarelo → ciano → azul, na ordem em que as letras a
      apresentam. Ela reaparece como um filete de 3 px (`--faixa-marca`) nos
      poucos lugares que precisam assinar a página.
   2. O corte a 45° dos terminais. Nenhuma letra tem canto arredondado: por
      isso os selos e as pílulas deste site deixaram de ser cápsulas de raio
      999px e passaram a ter cantos curtos, e o chanfro aparece literalmente
      em `--chanfro`, nos blocos que abrem uma leitura.
   3. Peso alto com espaço apertado no logotipo, contra rótulos pequenos e bem
      espaçados no corpo — a mesma tensão que a hierarquia tipográfica usa.

   Tipografia de sistema, sem fonte remota: `font-src 'self'` na política de
   conteúdo recusaria uma, e nada deve bloquear a primeira pintura. */

:root {
  /* --- Cores medidas na logo -------------------------------------- */
  /* Amostradas por família de matiz sobre o arquivo original. O verde é o
     mesmo do "S" e do "E" (vai de #02563e a #0b9150 dentro da letra), o ciano
     e o azul saem dos dois "G" e do "I" (#007ac8 a #002fa2), e o ouro é a
     cauda que atravessa o "S" e o "U". Só os tons que a interface usa estão
     declarados aqui. */
  --verde-700: #046a3c;
  --verde-600: #037e45;
  --verde-500: #0b9150;
  --verde-100: #e4f3ea;

  --ciano-500: #01a2ea;
  --azul-900: #002fa2;
  --azul-800: #08468e;
  --azul-700: #0b5fbb;
  --azul-100: #e6f1fc;

  --ouro-600: #8a5a00;
  --ouro-400: #fcc800;
  --ouro-100: #fff4d6;

  /* A assinatura da marca em uma linha. Usada com parcimônia: topo da página,
     aba escolhida e o bloco que abre um registro. Três lugares, sempre a
     mesma ordem de leitura da logo. */
  --faixa-marca: linear-gradient(
    90deg,
    var(--verde-700) 0%,
    var(--verde-500) 20%,
    var(--ouro-400) 40%,
    var(--ciano-500) 64%,
    var(--azul-700) 88%,
    var(--azul-900) 100%
  );

  /* --- Neutros ----------------------------------------------------- */
  /* Puxados para o azul-esverdeado da logo: sobre eles o verde e o azul da
     marca parecem da mesma família, e não duas cores coladas num cinza neutro. */
  --fundo: #f5f8fa;
  --superficie: #ffffff;
  --superficie-2: #eff4f8;
  --borda: #dfe7ee;
  --borda-forte: #c6d3de;
  --texto: #10202b;
  --texto-suave: #51677a;
  --texto-tenue: #5d7286;

  /* --- Papéis --------------------------------------------------------- */
  /* Cada cor da logo recebe uma função e não sai dela:
       azul  → ação, navegação, foco e seleção;
       verde → marca, confirmação e o lado público de um vínculo;
       ouro  → atenção e cobertura parcial;
       o vermelho de falha não vem da logo e continua sendo só o de falha. */
  --acento: var(--azul-700);
  --acento-forte: var(--azul-800);
  --acento-fundo: var(--azul-100);

  --marca: var(--verde-700);
  /* O verde cheio do logotipo, para o que é desenho e não texto: ali a cor
     não precisa do contraste de leitura e fica mais perto do arquivo. */
  --marca-grafica: var(--verde-600);

  --ok: var(--verde-700);
  --ok-fundo: var(--verde-100);
  --aviso: var(--ouro-600);
  --aviso-fundo: var(--ouro-100);
  --erro: #b42318;
  --erro-fundo: #fdeceb;
  --neutro: #44586b;
  --neutro-fundo: #edf1f5;

  /* --- Forma -------------------------------------------------------- */
  /* Raios curtos: a logo não tem canto redondo, e uma cápsula de 999px ao
     lado dela denunciava duas origens diferentes. */
  --raio: 10px;
  --raio-pequeno: 6px;
  --raio-selo: 4px;
  /* O corte a 45° dos terminais das letras. Entra como medida do chanfro do
     marcador de seção — o único lugar em que a forma da logo aparece
     literalmente, e por isso não vira enfeite. */
  --chanfro: 3px;

  --sombra: 0 1px 2px rgba(16, 32, 43, .05);
  --sombra-media: 0 1px 3px rgba(16, 32, 43, .08), 0 4px 12px rgba(16, 32, 43, .05);

  /* Uma escala só de espaço, para que cabeçalho, conteúdo e rodapé fiquem no
     mesmo grid: a margem lateral é sempre `--margem`, em qualquer largura. */
  --largura: 1180px;
  --margem: 1.5rem;

  --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: light;
}

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

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

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

/* Títulos com espaço apertado, como o logotipo; o corpo mantém o espaço
   normal, porque quem lê um dado precisa de ar entre os caracteres. */
h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.2; letter-spacing: -.015em; }

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

/* O anel de foco é da cor de ação e tem um halo branco por fora, para
   continuar visível sobre superfície escura, sobre linha selecionada e sobre
   as faixas coloridas da marca. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--raio-pequeno);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9);
}

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

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--superficie); color: var(--texto);
  padding: .6rem 1rem; border: 1px solid var(--borda);
  border-radius: 0 0 var(--raio) 0;
  box-shadow: var(--sombra-media);
}
.pular:focus { left: 0; }

/* ------------------------------------------------------------------ */
/* A marca                                                             */
/* ------------------------------------------------------------------ */

/* O logotipo é usado em todo o site a partir do arquivo original, sem cópia
   nem redesenho. O arquivo tem 1983 × 793 px, dos quais o logotipo ocupa
   1718 × 296 a partir de (131, 231) — o resto é moldura branca. As três
   medidas abaixo saem dessa conta e recortam a moldura:

     largura da imagem  1983 / 1718 = 115,425 %
     deslocamento em x   131 / 1718 =   7,625 %
     deslocamento em y   231 /  296 =  78,041 %

   Com o recorte, a caixa do logotipo é o próprio logotipo: ele alinha com o
   texto ao lado e com a margem da página, em vez de flutuar dentro de uma
   moldura invisível. */
.marca-logo {
  position: relative;
  display: block;
  height: 1.7rem;
  aspect-ratio: 1718 / 296;
  overflow: hidden;
}

.marca-logo img {
  position: absolute;
  top: -78.041%;
  left: -7.625%;
  width: 115.425%;
  max-width: none;
  height: auto;
}

/* O fundo do JPEG é #fefefe e não tem canal de transparência. Sobre a
   superfície branca do cabeçalho isso é invisível — um ponto em 255 — e ali o
   logotipo é desenhado sem nenhum truque de composição.
   Só a página inicial precisa de `multiply`: lá o fundo é o cinza-azulado da
   página, e sem a mistura o logotipo apareceria dentro de um retângulo claro.
   Restringir o modo de mistura a este caso mantém o cabeçalho — que existe em
   todas as telas de resultado — fora de qualquer camada de composição. */
.pagina-inicial .marca-logo img { mix-blend-mode: multiply; }

/* Filete de identidade: a ordem de cores da logo, em 3 px, no alto da página.
   É o que faz o cabeçalho pertencer à marca sem repetir o logotipo. */
.faixa-marca {
  height: 3px;
  background: var(--faixa-marca);
}

/* ------------------------------------------------------------------ */
/* Página inicial                                                      */
/* ------------------------------------------------------------------ */

.pagina-inicial { display: flex; flex-direction: column; min-height: 100vh; }

/* Uma coluna só, com eixo único: logotipo, frase, campo e informações
   partilham a mesma largura e o mesmo alinhamento à esquerda. O ritmo
   vertical vem de uma escala curta, não de margens avulsas. */
.inicio {
  width: 100%; max-width: 37rem;
  margin: auto; padding: 4.5rem var(--margem) 3.5rem;
}

/* O logotipo é o título da página: o `alt` da imagem carrega o texto SEGGUI,
   então o `h1` continua tendo conteúdo para quem lê por leitor de tela. */
.inicio-marca { margin: 0 0 1.4rem; }

.inicio-marca .marca-logo {
  height: clamp(2.6rem, 7.5vw, 3.4rem);
}

.inicio-subtitulo {
  margin: 0 0 2.25rem;
  color: var(--texto-suave);
  font-size: 1.15rem;
  max-width: 34ch;
  text-wrap: balance;
}

/* ------------------------------------------------------------------ */
/* Campo de pesquisa da página inicial                                 */
/* ------------------------------------------------------------------ */

/* Tudo aqui é restrito a `.pagina-inicial`: o mesmo `.pesquisa-linha` serve à
   barra do topo da página de resultado, que tem outra escala. */

.pagina-inicial .pesquisa-linha { position: relative; display: block; }

.pagina-inicial .pesquisa-campo {
  width: 100%;
  /* Espaço à direita reservado para a seta, que fica por cima. */
  padding: 1.05rem 3.6rem 1.05rem 1.1rem;
  font-size: 1.05rem;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  transition: border-color .14s ease, box-shadow .14s ease;
}

.pagina-inicial .pesquisa-campo:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-media); }

.pagina-inicial .pesquisa-campo:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-fundo), var(--sombra-media);
}

/* Seta de envio: a ação do campo, dentro dele, com área de toque de 40 px.
   Ganha peso de botão quando o campo tem foco — antes disso não compete com
   o marcador. */
.pesquisa-enviar {
  position: absolute; top: 50%; right: .5rem;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; padding: 0;
  border: 0; border-radius: var(--raio-pequeno);
  background: none; color: var(--texto-suave);
  cursor: pointer;
  transition: color .14s ease, background-color .14s ease;
}

.pesquisa-enviar svg { width: 1.3rem; height: 1.3rem; display: block; }

.pesquisa-enviar:hover { color: #fff; background: var(--acento); }

.pesquisa-enviar:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  color: var(--acento-forte);
}

.pagina-inicial .pesquisa-campo:focus-visible ~ .pesquisa-enviar {
  color: #fff; background: var(--acento);
}

/* ------------------------------------------------------------------ */
/* Informações, em segundo plano                                       */
/* ------------------------------------------------------------------ */

.inicio-informacoes {
  margin-top: 2.75rem;
  border-top: 1px solid var(--borda);
}

/* Quando a dica aparece, ela empurraria o bloco de informações para baixo. A
   margem encolhe exatamente o que a dica passa a ocupar (.45rem + ~1.15rem),
   então a distância total não muda e nada salta enquanto se digita. Sem
   suporte a `:has()` o comportamento é o de sempre: um deslocamento pequeno. */
.inicio:has(.pesquisa-dica:not(:empty)) .inicio-informacoes { margin-top: .975rem; }

/* ------------------------------------------------------------------ */
/* Pesquisa                                                            */
/* ------------------------------------------------------------------ */

.pesquisa { margin: 0; }

.pesquisa-linha { display: flex; gap: .5rem; }

.pesquisa-campo {
  flex: 1 1 auto; min-width: 0;
  padding: .7rem .85rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  transition: border-color .14s ease, box-shadow .14s ease;
}
/* Monoespaçada só quando o conteúdo é um identificador: alinha os dígitos do
   CNPJ sem deixar um nome de empresa com aparência de código. */
.pesquisa-campo.identificador { font-family: var(--fonte-mono); letter-spacing: .02em; }
.pesquisa-campo::placeholder { color: var(--texto-tenue); letter-spacing: normal; }
.pesquisa-campo[aria-invalid="true"] { border-color: var(--erro); }
.pesquisa-campo[aria-invalid="true"]:focus-visible {
  border-color: var(--erro);
  box-shadow: 0 0 0 3px var(--erro-fundo);
}

/* O erro não depende só da cor: tem moldura própria, peso maior e um sinal
   antes do texto. */
.erro-entrada {
  display: flex; align-items: baseline; gap: .45rem;
  margin: .55rem 0 0; padding: .55rem .75rem;
  font-size: .9rem; font-weight: 500; color: var(--erro);
  background: var(--erro-fundo);
  border: 1px solid currentColor;
  border-left-width: 3px;
  border-radius: var(--raio-pequeno);
}
.erro-entrada::before { content: '!'; font-weight: 700; flex: none; }

/* A dica só existe depois que o usuário digita. Enquanto está vazia não ocupa
   nada: reservar altura para ela deixava um vão em branco logo abaixo do campo,
   visível já na primeira pintura. */
.pesquisa-dica { margin: .45rem 0 0; }
.pesquisa-dica:empty { margin: 0; }

.dica-tipo {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: var(--raio-selo);
  font-size: .76rem; font-weight: 600; letter-spacing: .02em;
  background: var(--acento-fundo); color: var(--acento-forte);
}

/* ------------------------------------------------------------------ */
/* Resultados da pesquisa por nome                                     */
/* ------------------------------------------------------------------ */

.grupo-resultados { margin-top: 1.5rem; }
.grupo-resultados:first-of-type { margin-top: .75rem; }
.grupo-resultados > .subtitulo { margin-top: 0; }
.grupo-resultados > .nota { margin: 0 0 .75rem; }

.lista-resultados { list-style: none; margin: .75rem 0 0; padding: 0; }

.resultado-item {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.05rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  box-shadow: var(--sombra);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.resultado-item:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-media); }
.resultado-item + .resultado-item { margin-top: .5rem; }

.resultado-dados { min-width: 0; flex: 1 1 auto; }
.resultado-dados > p { margin: 0; }

.resultado-nome { font-weight: 600; overflow-wrap: anywhere; }

.resultado-cnpj {
  margin-top: .1rem !important;
  font-family: var(--fonte-mono); font-size: .9rem;
  color: var(--texto-suave);
}

.resultado-detalhe { margin-top: .2rem !important; font-size: .9rem; color: var(--texto-suave); }
.resultado-marcadores { margin-top: .45rem !important; display: flex; flex-wrap: wrap; gap: .35rem; }
.resultado-dados > .nota { margin-top: .35rem !important; }

.resultado-acao { flex: none; }

.identificacao-progresso {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-top: 1rem;
  padding: .55rem .95rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--superficie-2);
}
.identificacao-progresso .carregando { padding: 0; }

.acoes-entrada { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ------------------------------------------------------------------ */
/* Botões e links                                                      */
/* ------------------------------------------------------------------ */

/* Uma só altura, um só raio, três pesos de hierarquia: cheio para a ação
   principal, contornado para as de apoio, e discreto para o que apenas
   completa uma linha de texto. */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem;
  min-height: 2.5rem;
  padding: .55rem 1.05rem;
  font: inherit; font-size: .93rem; font-weight: 550;
  color: var(--texto); text-decoration: none;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.botao:hover:not(:disabled) { background: var(--superficie-2); border-color: var(--texto-tenue); }
.botao:active:not(:disabled) { background: var(--borda); }
.botao:disabled { opacity: .5; cursor: not-allowed; }

/* Em carregamento o botão fica sem cursor de mão e com o texto atenuado,
   porque `aria-busy` sozinho não é visível. */
.botao[aria-busy="true"] { cursor: progress; opacity: .75; }

.botao-principal {
  color: #fff; background: var(--acento); border-color: var(--acento);
  font-weight: 600;
  box-shadow: var(--sombra);
}
.botao-principal:hover:not(:disabled) { background: var(--acento-forte); border-color: var(--acento-forte); }
.botao-principal:active:not(:disabled) { background: var(--azul-900); border-color: var(--azul-900); }

.botao-discreto { font-size: .88rem; min-height: 2.25rem; padding: .4rem .8rem; }
.botao-pequeno { min-height: 1.9rem; padding: .25rem .6rem; font-size: .83rem; }

.link { color: var(--acento); text-decoration: none; }
.link:hover { text-decoration: underline; }
.link-externo { font-size: .8em; opacity: .7; margin-left: .15em; }
.link-destaque { font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Estrutura da consulta                                               */
/* ------------------------------------------------------------------ */

.pagina-consulta { display: flex; flex-direction: column; min-height: 100vh; }

/* Cabeçalho horizontal, sem barra lateral: logotipo à esquerda, campo de
   consulta à direita, e o filete da marca fechando o bloco por cima. A altura
   é a mesma em toda a navegação. */
.topo {
  position: sticky; top: 0; z-index: 10;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  box-shadow: 0 1px 2px rgba(16, 32, 43, .04);
}

.topo-conteudo {
  display: flex; align-items: center; gap: 1.5rem;
  width: 100%; max-width: var(--largura);
  min-height: 3.75rem;
  margin: 0 auto; padding: .6rem var(--margem);
}

/* O logotipo é o único elemento à esquerda; nada o espreme, porque a linha
   inteira é uma caixa flexível com o campo empurrado para a direita. */
.marca {
  display: flex; align-items: center;
  flex: none;
  color: var(--texto); text-decoration: none; white-space: nowrap;
  border-radius: var(--raio-pequeno);
}
.marca:hover .marca-logo { opacity: .82; }
.marca .marca-logo { transition: opacity .14s ease; }

.pesquisa-topo { flex: 1 1 auto; max-width: 460px; margin-left: auto; }
.pesquisa-topo .pesquisa-campo { padding: .45rem .7rem; font-size: .95rem; }
.pesquisa-topo .botao { min-height: 2.25rem; padding: .4rem .95rem; }

.resultado {
  flex: 1 0 auto;
  width: 100%; max-width: var(--largura);
  margin: 0 auto; padding: 1.75rem var(--margem) 3.5rem;
}

/* Rodapé único da aplicação. Centralizado pelo próprio fluxo: o bloco ocupa a
   largura disponível e o texto é centralizado dentro dele, sem largura fixa,
   sem posicionamento e sem tirar o rodapé do fluxo vertical da página. */
.rodape {
  border-top: 1px solid var(--borda);
  padding: 1.75rem var(--margem);
  color: var(--texto-tenue); font-size: .85rem;
  text-align: center;
}
.rodape p {
  max-width: var(--largura);
  margin: 0 auto;
  /* Em tela estreita a linha quebra naturalmente, sem estourar a largura. */
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ */
/* Cabeçalho do resultado                                              */
/* ------------------------------------------------------------------ */

/* O contexto da consulta — quem é a entidade — ocupa a faixa mais alta do
   conteúdo, sobre superfície branca e acima de tudo o que dela decorre. */
.resultado-cabecalho {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.ident-linha { min-width: 0; flex: 1 1 22rem; }

.ident-nome {
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
  letter-spacing: -.02em;
}

.ident-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin: .6rem 0 0; color: var(--texto-suave); font-size: .93rem;
}

.ident-cnpj { font-family: var(--fonte-mono); letter-spacing: .01em; }

.situacao {
  padding: .12rem .5rem; border-radius: var(--raio-selo);
  font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  background: var(--neutro-fundo); color: var(--neutro);
}
/* A situação cadastral não se distingue só por cor: a ativa é a única com
   moldura cheia, e cada variante mantém o texto da fonte. */
.situacao-ativa { background: var(--ok-fundo); color: var(--ok); box-shadow: inset 0 0 0 1px currentColor; }
.situacao-outra { background: var(--aviso-fundo); color: var(--aviso); box-shadow: inset 0 0 0 1px currentColor; }

.cabecalho-acoes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------ */
/* Seções                                                              */
/* ------------------------------------------------------------------ */

.secao {
  margin-top: 2.5rem;
  scroll-margin-top: 5.5rem;
}

/* O título de seção carrega um corte diagonal de 3 px à esquerda: é o
   terminal a 45° das letras da logo, reduzido a um sinal de parágrafo. */
.secao-titulo {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.2rem;
  padding-bottom: .55rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--borda);
}
.secao-titulo::before {
  content: '';
  flex: none;
  width: 3px; height: 1.1em;
  background: var(--marca-grafica);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chanfro)), 0 100%);
}

.subtitulo {
  font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-suave);
  margin: 1.5rem 0 .6rem;
}

.secao-nota { margin: 0 0 1rem; color: var(--texto-suave); font-size: .92rem; max-width: 92ch; }
.nota { color: var(--texto-tenue); font-size: .86rem; }
.tecnico { font-family: var(--fonte-mono); font-size: .82rem; color: var(--texto-suave); word-break: break-word; }

/* ------------------------------------------------------------------ */
/* Campos                                                              */
/* ------------------------------------------------------------------ */

.campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .1rem 2rem;
  margin: 0;
}

.campo {
  display: flex; flex-direction: column;
  padding: .6rem 0;
  border-bottom: 1px solid var(--borda);
  min-width: 0;
}

.campo dt {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-tenue);
}

.campo dd {
  margin: .2rem 0 0;
  overflow-wrap: anywhere;
}

.ausente { color: var(--texto-tenue); font-style: italic; }

.campo-nota { margin: .2rem 0 0; font-size: .76rem; color: var(--texto-tenue); }

/* ------------------------------------------------------------------ */
/* Indicadores do consolidado                                          */
/* ------------------------------------------------------------------ */

/* Uma faixa de números, não uma parede de cartões: moldura única, divisores
   finos e o rótulo dizendo exatamente o que cada número é. O filete da marca
   assina o topo do bloco. */
.indicadores {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  margin: 0 0 1.25rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.indicadores::before {
  content: '';
  position: absolute; inset: 0 0 auto;
  height: 3px;
  background: var(--faixa-marca);
}

.indicador {
  padding: 1.15rem 1.15rem 1rem;
  border-left: 1px solid var(--borda);
  min-width: 0;
}
.indicador:first-child { border-left: 0; }

.indicador-valor {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  font-weight: 650;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.indicador-rotulo {
  margin: .3rem 0 0;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-tenue);
}

.indicador-nota { margin: .3rem 0 0; font-size: .82rem; color: var(--texto-suave); }

.bloco-secundario {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borda);
}
.bloco-secundario > .subtitulo { margin-top: 0; }
.bloco-secundario > .nota { margin-top: .7rem; }

/* Bloco que carrega a resposta principal de uma tela — hoje, as empresas que a
   pesquisa identificou. Mesmos tokens do resto; o que muda é a superfície, para
   que a pergunta "qual empresa é esta?" não fique com o mesmo peso visual das
   contagens que vêm depois dela. */
.bloco-principal {
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio-pequeno);
  box-shadow: var(--sombra);
}
.bloco-principal > .subtitulo { margin-top: 0; }
.bloco-principal > .nota { margin-top: .7rem; }

/* Em que recorte os números abaixo estão sendo lidos: visão geral de várias
   empresas, ou de uma escolhida. */
.aviso-contexto {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem;
  margin: 0 0 1.25rem;
  padding: .7rem .9rem;
  background: var(--acento-fundo);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio-pequeno);
  font-size: .9rem;
}

/* ------------------------------------------------------------------ */
/* Selos                                                               */
/* ------------------------------------------------------------------ */

/* Retangulares de canto curto, como os terminais da logo. Cada um tem
   moldura da própria cor: o estado continua legível sem enxergar cor. */
.selo {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: var(--raio-selo);
  font-size: .76rem; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
  background: var(--neutro-fundo); color: var(--neutro);
}

/* O selo que diz apenas o que é um registro — "Contrato", "Licitação" — fica
   liso: repetido em cinquenta linhas de tabela, uma moldura vira ruído.
   Quem recebe moldura é o selo que comunica ESTADO de leitura, e por um
   motivo de acessibilidade: o estado não pode depender só da cor. */
.selo-ok,
.selo-falha,
.selo-aviso,
.selo-externo { box-shadow: inset 0 0 0 1px currentColor; }

.selo-ok { background: var(--ok-fundo); color: var(--ok); }
.selo-vazio { background: var(--neutro-fundo); color: var(--neutro); }
.selo-falha { background: var(--erro-fundo); color: var(--erro); }
.selo-aviso { background: var(--aviso-fundo); color: var(--aviso); }
.selo-externo { background: var(--acento-fundo); color: var(--acento-forte); }
.selo-neutro { background: var(--neutro-fundo); color: var(--neutro); }

.nivel-confirmacao { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }

/* ------------------------------------------------------------------ */
/* Avisos                                                              */
/* ------------------------------------------------------------------ */

.aviso {
  padding: .9rem 1rem;
  margin: 0 0 1rem;
  border: 1px solid var(--borda);
  border-left-width: 3px;
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  font-size: .93rem;
}
.aviso p { margin: 0 0 .4rem; }
.aviso p:last-child { margin-bottom: 0; }
.aviso .botao { margin-top: .6rem; }

.aviso-titulo { font-weight: 600; }

.aviso-erro { background: var(--erro-fundo); border-color: var(--erro); color: var(--erro); }
.aviso-erro .nota, .aviso-erro .tecnico { color: inherit; opacity: .85; }
.aviso-atencao { background: var(--aviso-fundo); border-color: var(--aviso); color: var(--aviso); }
.aviso-neutro { background: var(--superficie-2); border-color: var(--borda-forte); color: var(--texto-suave); }

/* ------------------------------------------------------------------ */
/* Tabelas                                                             */
/* ------------------------------------------------------------------ */

.tabela-envolve {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

.tabela caption {
  caption-side: top;
  padding: .75rem .8rem;
  text-align: left;
  font-size: .86rem;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borda);
}

/* O cabeçalho da tabela é a linha mais densa da página: caixa-alta pequena,
   fundo próprio e uma borda de 2 px que a separa dos dados. */
.tabela th {
  position: sticky; top: 0;
  text-align: left;
  padding: .65rem .8rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-suave);
  background: var(--superficie-2);
  border-bottom: 2px solid var(--borda-forte);
  white-space: nowrap;
}

.tabela td {
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}

.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--superficie-2); }

.tabela .numerica { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Ação dentro de uma célula: recortar por aquele valor, ou abrir a linha.
   Herda a tipografia da célula para não virar um botão dentro da tabela. */
.celula-acao {
  padding: 0; border: 0; background: none;
  font: inherit; color: var(--acento); cursor: pointer;
  text-align: inherit;
}
.celula-acao:hover { text-decoration: underline; }
.celula-acao.atual { color: var(--texto); font-weight: 650; text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Descoberta de mercado                                               */
/* ------------------------------------------------------------------ */

/* Trilha de navegação: compacta, quebra em telas estreitas. */
.trilha { margin: 0 0 1rem; }
.trilha-lista {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .1rem;
  list-style: none; margin: 0; padding: 0;
  font-size: .9rem;
}
.trilha-lista > li { display: flex; align-items: center; min-width: 0; }
.trilha-lista > li + li::before {
  content: '\203a'; margin: 0 .45rem; color: var(--texto-tenue); flex: none;
}
.trilha-passo {
  padding: .15rem .4rem; border: 0; border-radius: var(--raio-selo);
  background: none; color: var(--acento); font: inherit; cursor: pointer;
  overflow-wrap: anywhere;
}
.trilha-passo:hover { background: var(--acento-fundo); }
.trilha-passo.atual { color: var(--texto); font-weight: 600; cursor: default; }
.trilha-passo.atual:hover { background: none; }

/* Listas navegáveis: estado, município, instituição. */
.navegavel { list-style: none; margin: 0; padding: 0; }
.navegavel > li + li { margin-top: .35rem; }

.navegavel-item {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  width: 100%; padding: .65rem .85rem;
  border: 1px solid var(--borda); border-radius: var(--raio-pequeno);
  background: var(--superficie); color: inherit;
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.navegavel-item:hover { border-color: var(--acento); background: var(--acento-fundo); }
.navegavel-rotulo { font-weight: 550; overflow-wrap: anywhere; }
.navegavel-detalhe { color: var(--texto-suave); font-size: .85rem; overflow-wrap: anywhere; }
.navegavel-contagem {
  margin-left: auto; flex: none;
  color: var(--texto-suave); font-size: .85rem; font-variant-numeric: tabular-nums;
}

.ordenacao { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .8rem; }
.ordenacao .nota { margin: 0 .2rem 0 0; }

/* Itens da contratação. */
.itens { list-style: none; margin: .6rem 0 0; padding: 0; }
.itens > li + li { margin-top: .5rem; }

.item {
  padding: .8rem .95rem;
  border: 1px solid var(--borda); border-radius: var(--raio-pequeno);
  background: var(--superficie-2);
}
.item-descricao { margin: 0 0 .5rem; font-weight: 550; overflow-wrap: anywhere; }
.item .campos { margin: 0; }
.item .bloco-secundario { margin-top: .7rem; }

/* ------------------------------------------------------------------ */
/* Pesquisa interna                                                    */
/* ------------------------------------------------------------------ */

.busca-linha { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

.busca-campo {
  flex: 1 1 22rem; min-width: 0;
  padding: .6rem .8rem;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno);
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: .98rem;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.busca-campo::placeholder { color: var(--texto-tenue); }
.busca-campo:hover { border-color: var(--texto-tenue); }
.busca-campo:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-fundo);
}

.busca-filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 .2rem; }

/* Filtro é um controle de estado, não um botão de ação: canto curto, moldura
   fina, e o escolhido ganha peso e cor de ação. */
.busca-filtro {
  padding: .3rem .7rem;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-selo);
  background: var(--superficie); color: var(--texto-suave);
  font: inherit; font-size: .85rem; cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
.busca-filtro:hover { border-color: var(--acento); color: var(--texto); }
.busca-filtro.atual {
  background: var(--acento-fundo); border-color: var(--acento); color: var(--acento-forte);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--acento);
}

.busca-resultados { margin-top: 1rem; }

.busca-total { margin: 0 0 .8rem; font-weight: 600; font-size: .95rem; }

.busca-grupo + .busca-grupo { margin-top: 1.1rem; }

.busca-grupo-titulo {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 .45rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-suave);
}
.busca-contagem { font-weight: 400; letter-spacing: 0; text-transform: none; }

.busca-lista { list-style: none; margin: 0; padding: 0; }
.busca-lista > li + li { margin-top: .35rem; }

.busca-item {
  display: flex; flex-direction: column; gap: .15rem;
  width: 100%; padding: .6rem .8rem;
  border: 1px solid var(--borda); border-radius: var(--raio-pequeno);
  background: var(--superficie); color: inherit;
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.busca-item:hover { border-color: var(--acento); background: var(--acento-fundo); }

.busca-item-titulo { font-weight: 550; overflow-wrap: anywhere; }
.busca-item-contexto { color: var(--texto-suave); font-size: .85rem; overflow-wrap: anywhere; }
.busca-item-campos { color: var(--texto-tenue); font-size: .82rem; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ */
/* Obras e registros                                                   */
/* ------------------------------------------------------------------ */

.secao-resumo { margin: 0 0 .5rem; font-weight: 600; }

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

.obra {
  padding: .95rem 1.05rem;
  border: 1px solid var(--borda); border-radius: var(--raio-pequeno);
  background: var(--superficie); box-shadow: var(--sombra);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.obra + .obra { margin-top: .45rem; }
.obra:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-media); }

.obra-objeto { margin: 0 0 .7rem; font-weight: 550; overflow-wrap: anywhere; }
.obra .campos { margin: 0; }
.obra .registro-acoes { margin-top: .8rem; }

/* Registro ao qual a pesquisa interna acabou de levar. */
.registro-destacado {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-fundo);
}

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

.registro {
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  box-shadow: var(--sombra);
  padding: .85rem 1rem;
  overflow-wrap: anywhere;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.registro + .registro { margin-top: .45rem; }
.registro:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-media); }
.registro-aberto { border-color: var(--acento); box-shadow: var(--sombra-media); }

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

.registro-partes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .5rem 1.5rem;
  flex: 1 1 22rem; min-width: 0;
}

.parte-rotulo {
  margin: 0 0 .15rem;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-tenue);
}

/* A hierarquia entre quem presta e quem contrata é marcada por uma barra à
   esquerda, não só por cor: a distinção continua legível sem enxergar cor. As
   cores seguem os papéis da marca — azul para o lado privado do vínculo,
   verde para o lado público. */
.parte {
  min-width: 0;
  padding-left: .65rem;
  border-left: 2px solid var(--borda-forte);
}
.parte-fornecedor { border-left-color: var(--acento); }
.parte-contratante { border-left-color: var(--marca); }

.parte-nome { margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.parte-cnpj { margin: .1rem 0 0; font-family: var(--fonte-mono); font-size: .85rem; color: var(--texto-suave); }
.parte-extra { margin: .1rem 0 0; font-size: .85rem; color: var(--texto-suave); }
.parte-vazio { margin: 0; font-size: .87rem; color: var(--texto-tenue); font-style: italic; }

.registro-selo { flex: none; text-align: right; }
.registro-selo .nota { margin: .3rem 0 0; }

.registro-objeto {
  margin: .7rem 0 0;
  padding-top: .65rem;
  border-top: 1px solid var(--borda);
  font-size: .9rem; line-height: 1.45; color: var(--texto-suave);
  /* O objeto costuma ser longo: duas linhas bastam para reconhecer o registro,
     e o texto completo continua no detalhe, sem nada ser descartado. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Linha única de pares rótulo/valor: o que era coluna de tabela agora cabe
   numa faixa, sem barra horizontal e sem virar uma pilha alta. */
.registro-dados {
  display: flex; flex-wrap: wrap;
  gap: .3rem 1.4rem;
  margin: .6rem 0 0;
}
.registro-dados .campo {
  flex-direction: row; align-items: baseline; gap: .35rem;
  padding: 0; border-bottom: 0;
}
.registro-dados .campo dt { font-size: .68rem; white-space: nowrap; }
.registro-dados .campo dd { margin: 0; font-size: .9rem; font-weight: 600; }

.registro-acoes {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  margin-top: .6rem; padding-top: .6rem;
  border-top: 1px solid var(--borda);
  font-size: .88rem;
}

.registro-detalhe {
  margin: .85rem -1rem -.85rem;
  border-top: 1px solid var(--borda);
  background: var(--superficie-2);
  border-radius: 0 0 var(--raio-pequeno) var(--raio-pequeno);
}
.registro-detalhe .detalhe { border-left: 0; }

/* ------------------------------------------------------------------ */
/* Detalhe do registro                                                 */
/* ------------------------------------------------------------------ */

/* O detalhe é o único bloco que abre a partir de outro: a faixa da marca à
   esquerda diz de onde ele veio. */
.detalhe {
  padding: 1.15rem 1.15rem 1.3rem;
  border-left: 3px solid var(--marca);
}

.detalhe-cabecalho { margin-bottom: .9rem; }
.detalhe-titulo { font-size: 1rem; }
.detalhe-vinculo { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .45rem 0 0; font-size: .88rem; }
.detalhe-vinculo .papel { color: var(--texto-suave); font-weight: 550; }
.detalhe-subtitulo {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-suave);
  margin: 0 0 .5rem;
}

.detalhe .campos { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.detalhe-arquivos { margin-top: 1.1rem; }
.detalhe-rodape {
  margin-top: 1.2rem; padding-top: .9rem;
  border-top: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: .8rem; align-items: flex-start;
}
.detalhe-rodape .campos { width: 100%; }

.lista-arquivos { margin: 0; padding-left: 1.1rem; }
.lista-arquivos li { margin-bottom: .3rem; overflow-wrap: anywhere; }

.lista-simples { margin: 0; padding-left: 1.1rem; }
.lista-simples li { margin-bottom: .25rem; }

/* ------------------------------------------------------------------ */
/* Fontes                                                              */
/* ------------------------------------------------------------------ */

/* Resumo de procedência, numa superfície só. O que estava aqui era uma
   tabela de quatro colunas com classificação, origem e contagem de
   requisições — informação de quem mantém o site, não de quem o consulta.
   O que sobra responde o que o usuário pergunta: de onde veio, e terminou. */
.fontes-resumo {
  padding: .95rem 1.1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

/* Os nomes das fontes que responderam, separados por ponto. A lista quebra
   em telas estreitas em vez de empurrar barra horizontal, e cada nome fica
   inteiro na sua linha. */
.fontes-nomes {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .15rem .7rem;
  margin: 0; padding: 0;
  list-style: none;
  font-weight: 600;
}
.fontes-nomes li { white-space: nowrap; }
/* O separador é desenho, não conteúdo: entra pelo CSS para que a leitura em
   voz alta anuncie os itens da lista, e não uma fila de pontos. */
.fontes-nomes li + li::before {
  content: '·';
  margin-right: .7rem;
  color: var(--borda-forte);
  font-weight: 400;
}

.fontes-nomes-vazio { margin: 0; color: var(--texto-suave); font-size: .93rem; }

.fontes-estado { margin: .45rem 0 0; }
.fontes-resumo > .carregando { padding: .45rem 0 0; }
.fontes-resumo > .recolhivel { margin-top: .8rem; }

/* Uma linha por leitura: o nome à esquerda, o selo de estado à direita. É o
   que impede a simplificação de achatar "indisponível" em "sem registro" —
   o selo continua sendo o mesmo `U.selo` do resto da interface. */
.fontes-leituras { margin: 0; padding: 0; list-style: none; }
.fontes-leituras li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .3rem .9rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--borda);
  font-size: .9rem;
}
.fontes-leituras li:last-child { border-bottom: 0; }
.fontes-leitura-nome { min-width: 0; overflow-wrap: anywhere; }

.fontes-nota { margin: .9rem 0 0; }

.fontes-externa { margin-top: 1.25rem; }
.fontes-externa > .subtitulo { margin-top: 0; }
.fontes-externa-lista {
  display: flex; flex-wrap: wrap;
  gap: .4rem 1.5rem;
  margin: 0; padding: 0;
  list-style: none;
}

/* ------------------------------------------------------------------ */
/* Recolhível                                                          */
/* ------------------------------------------------------------------ */

.recolhivel {
  margin-top: 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
}

.recolhivel > summary {
  padding: .6rem .95rem;
  cursor: pointer;
  font-size: .88rem; font-weight: 550;
  color: var(--texto-suave);
  list-style-position: inside;
}
.recolhivel > summary:hover { color: var(--texto); }
.recolhivel[open] > summary { border-bottom: 1px solid var(--borda); color: var(--texto); }
.recolhivel > *:not(summary) { margin: .85rem .95rem; }
.recolhivel .tabela-envolve { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.recolhivel[open] > .tabela-envolve { margin: 0; }

.sobre { border-bottom: 1px solid var(--borda); }

.sobre > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 0;
  cursor: pointer;
  font-size: .95rem; font-weight: 550; color: var(--texto-suave);
  list-style: none;
  transition: color .14s ease;
}
.sobre > summary::-webkit-details-marker { display: none; }

/* Marcador próprio: um sinal discreto, que vira menos ao abrir. */
.sobre > summary::after {
  content: '+';
  flex: none;
  font-size: 1.15rem; line-height: 1; color: var(--texto-tenue);
}
.sobre[open] > summary { color: var(--texto); }
.sobre[open] > summary::after { content: '\2212'; color: var(--acento); }

.sobre > summary:hover { color: var(--texto); }
.sobre > summary:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--raio-pequeno);
}

.sobre-corpo { padding-bottom: 1rem; color: var(--texto-suave); font-size: .92rem; }
.sobre-corpo p { margin: 0 0 .8rem; }
.sobre-corpo p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Resumo e agregados                                                  */
/* ------------------------------------------------------------------ */

.resumo-agregados { margin-top: 1.25rem; }
.resumo-agregados .nota { margin: .6rem 0 0; }

.divergencia-origem { margin-top: 1rem; }
.divergencia-origem .nota { margin-top: .7rem; }

/* ------------------------------------------------------------------ */
/* Paginação                                                           */
/* ------------------------------------------------------------------ */

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

.paginacao-faixa { margin: 0; font-size: .88rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.paginacao-controles { display: flex; align-items: center; gap: .4rem; }

.paginacao-numeros {
  display: flex; align-items: center; gap: .2rem;
  list-style: none; margin: 0; padding: 0;
}

.pagina {
  min-width: 2.25rem; min-height: 2.25rem; padding: .35rem .5rem;
  font: inherit; font-size: .88rem;
  font-variant-numeric: tabular-nums;
  color: var(--texto); background: transparent;
  border: 1px solid transparent; border-radius: var(--raio-selo);
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}
.pagina:hover { background: var(--superficie-2); }
.pagina.atual {
  background: var(--acento); border-color: var(--acento);
  color: #fff; font-weight: 600;
}
.elipse { padding: 0 .2rem; color: var(--texto-tenue); }

.carregar-mais { margin-top: 1rem; }

/* O botão que traz o que ainda falta é a ação principal do bloco em que
   está: cor de ação, sem virar o botão cheio reservado ao envio da consulta.
   Vale para "Carregar mais", "Consolidar", "Classificar", "Ler os itens" e
   "Identificar fornecedor" — todos carregam o mesmo tipo de leitura. */
.carregar-mais > .botao,
.completar > .botao,
.acao-completar > .botao {
  color: var(--acento-forte);
  background: var(--acento-fundo);
  border-color: var(--acento);
  font-weight: 600;
}
.carregar-mais > .botao:hover:not(:disabled),
.completar > .botao:hover:not(:disabled),
.acao-completar > .botao:hover:not(:disabled) {
  color: #fff;
  background: var(--acento);
  border-color: var(--acento);
}

/* O bloco solto que acompanha o botão — a frase que explica o que a leitura
   custa — anda junto com ele. */
.acao-completar { margin-top: .9rem; }
.acao-completar > .nota { margin: 0 0 .5rem; }

/* ------------------------------------------------------------------ */
/* Exploração por abas                                                 */
/* ------------------------------------------------------------------ */

/* A barra rola sozinha quando não cabe. O `overflow` fica NELA, nunca no
   documento: uma barra larga não pode arrastar a página inteira para o lado. */
.abas-barra {
  margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--borda);
}

.abas {
  display: flex;
  gap: .15rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  /* Espaço para o anel de foco do primeiro e do último não ser cortado pelo
     recorte da rolagem. */
  padding: 2px 2px 0;
  margin-bottom: -1px;
}

.aba {
  display: inline-flex; align-items: center; gap: .45rem;
  flex: none;
  padding: .6rem .85rem;
  font: inherit; font-size: .92rem;
  color: var(--texto-suave);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: var(--raio-selo) var(--raio-selo) 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color .14s ease, background-color .14s ease;
}

.aba:hover { color: var(--texto); background: var(--superficie-2); }

/* A aba escolhida é sublinhada pelo filete da marca — o mesmo gradiente do
   topo da página, na largura de uma aba. */
.aba.atual {
  color: var(--acento-forte);
  font-weight: 600;
  border-bottom-color: transparent;
  border-image: var(--faixa-marca) 1;
  border-image-width: 0 0 3px 0;
}

.aba-contagem {
  padding: .05rem .4rem;
  font-size: .78rem; font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
  background: var(--superficie-2);
  border-radius: var(--raio-selo);
}

.aba.atual .aba-contagem { color: var(--acento-forte); background: var(--acento-fundo); }

/* Contador de aba sob recorte: mostra "à vista / total". A cor de aviso diz
   que o número não é o conjunto inteiro, e a moldura repete o recado para
   quem não distingue a cor. */
.aba-contagem.recortada {
  color: var(--aviso); background: var(--aviso-fundo);
  box-shadow: inset 0 0 0 1px currentColor;
}

/* Categoria cuja fonte não respondeu: marca em vez de número. Não há o que
   contar, e um zero ali afirmaria ausência. */
.aba-contagem.falhou {
  color: var(--erro); background: var(--erro-fundo);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px currentColor;
}

.resumo-valor.falhou { font-size: .88rem; font-weight: 550; color: var(--erro); }

.painel:focus { outline: none; }

/* --- Resumo por entidade ------------------------------------------- */

.resumo-entidades { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.resumo-entidades > li + li { margin-top: .35rem; }

/* Rótulo e número lado a lado; unidade e cobertura ocupam a linha inteira
   abaixo, para que o número fique legível sem competir com o texto. */
.resumo-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .2rem .8rem;
  width: 100%;
  padding: .7rem .85rem;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}

.resumo-linha:hover { border-color: var(--acento); background: var(--acento-fundo); }

.resumo-rotulo { font-weight: 550; overflow-wrap: anywhere; }

.resumo-valor {
  font-size: 1.15rem; font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--acento-forte);
}

.resumo-unidade,
.resumo-cobertura {
  grid-column: 1 / -1;
  font-size: .84rem;
  color: var(--texto-suave);
  overflow-wrap: anywhere;
}

.resumo-cobertura { color: var(--aviso); font-weight: 550; }

/* --- Filtros -------------------------------------------------------- */

.filtros {
  margin: 0 0 1.25rem;
  padding: .9rem;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.filtros-topo {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .5rem;
  margin-bottom: .7rem;
}

.filtros-topo .nota { margin: 0; flex: 1 1 18rem; }

.filtros-linhas { display: grid; gap: .7rem; }

/* O bloco das demais dimensões: some do caminho quando fechado, e o resumo
   diz o que há dentro em vez de um rótulo genérico. */
.filtros-mais { margin-top: .7rem; }
.filtros-mais > summary { font-size: .88rem; }
.filtros-mais .filtros-linhas { margin-top: .7rem; }

.filtro { display: grid; gap: .3rem; }

.filtro-rotulo {
  font-size: .72rem; font-weight: 700;
  color: var(--texto-tenue);
  text-transform: uppercase; letter-spacing: .06em;
}

.filtro-opcoes { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }

.filtro-contagem {
  font-size: .78rem; font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
}

.busca-filtro.atual .filtro-contagem { color: inherit; }

/* --- Item escolhido na navegação ------------------------------------ */

.navegavel-item.atual {
  border-color: var(--acento);
  background: var(--acento-fundo);
  box-shadow: inset 2px 0 0 var(--acento);
}

/* --- A tabela única ------------------------------------------------- */

/* O título da linha é um botão: abre o detalhe no lugar, sem tirar quem lê da
   lista. Parece texto porque é o nome do registro, não um controle à parte. */
.celula-registro { display: grid; gap: .1rem; }

.celula-titulo {
  padding: 0; margin: 0;
  font: inherit; font-weight: 550; text-align: left;
  color: var(--acento-forte);
  background: none; border: 0;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.celula-titulo:hover { text-decoration: underline; }

/* A nota de uma célula fica em linha própria: colada ao valor, "24/09/2026" e
   "publicação" viram uma palavra só. */
.celula-nota { display: block; line-height: 1.3; color: var(--texto-tenue); }

.tabela tr.linha-aberta > td { background: var(--acento-fundo); }
.tabela tr.linha-destacada > td { box-shadow: inset 3px 0 0 var(--acento); }

/* A linha de detalhe ocupa a largura toda e some do fluxo de colunas: é o
   registro se abrindo, não mais uma linha da lista. */
.tabela-linha-detalhe > td {
  padding: 0;
  background: var(--superficie-2);
  border-top: 0;
}

.linha-detalhe {
  padding: 1.1rem;
  border-left: 3px solid var(--marca);
}

.linha-detalhe .subtitulo { margin-top: .9rem; }
.linha-detalhe > :first-child { margin-top: 0; }
.linha-detalhe .recolhivel { margin-top: .7rem; }

/* --- Carregamento complementar -------------------------------------- */

/* Fica colado ao número que completa, alinhado com ele. O botão é a ação de
   maior peso deste bloco: é ele que traz o que ainda falta. */
.completar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem .6rem;
  margin: .4rem 0 0; padding: 0 .85rem;
}

.completar .nota { margin: 0; }
.completar .carregando { padding: 0; }
.completar .recolhivel { flex-basis: 100%; }

.nota-falha { color: var(--erro); font-weight: 550; }

.completar-tipo { display: grid; gap: .25rem; }
.completar-tipo + .completar-tipo { margin-top: .75rem; }

.completar-rotulo {
  font-size: .72rem; font-weight: 700;
  color: var(--texto-tenue);
  text-transform: uppercase; letter-spacing: .06em;
}

.filtros-ativos {
  margin: 0; flex: 1 1 18rem;
  font-size: .9rem; font-weight: 550;
  color: var(--texto);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* Carregando                                                          */
/* ------------------------------------------------------------------ */

.carregando {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 0;
  color: var(--texto-suave); font-size: .93rem;
}

/* O giro usa as duas cores estruturais da logo: o arco que gira é verde sobre
   a trilha azul-clara, não um cinza qualquer. */
.girando {
  width: 1.05rem; height: 1.05rem; flex: none;
  border: 2px solid var(--acento-fundo);
  border-top-color: var(--marca);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .girando { animation-duration: 2.4s; }
  * { scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ */
/* Privacidade: portão de aceite e escolha de métricas                 */
/* ------------------------------------------------------------------ */

/* Enquanto o portão está aberto a página não rola: o conteúdo continua no
   documento — para leitores de tela e para quem indexa —, mas não é alcançável
   por rolagem nem por teclado. */
.com-portao { overflow: hidden; }

.privacidade-fundo {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--margem);
  background: rgba(16, 32, 43, .55);
}

.privacidade-caixa {
  width: 100%; max-width: 34rem;
  max-height: calc(100vh - 2 * var(--margem));
  overflow-y: auto;
  padding: 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 18px 48px rgba(16, 32, 43, .22);
}

/* A mesma assinatura de cor do topo da aplicação, em 3 px: a caixa pertence
   ao produto, não parece um aviso de terceiro colado por cima. */
.privacidade-caixa::before {
  content: ''; display: block;
  height: 3px; margin: -1.5rem -1.5rem 1.15rem;
  border-radius: var(--raio) var(--raio) 0 0;
  background: var(--faixa-marca);
}

.privacidade-titulo {
  margin: 0 0 .85rem;
  font-size: 1.1rem; font-weight: 650; color: var(--texto);
}

.privacidade-corpo p { margin: 0 0 .7rem; font-size: .92rem; color: var(--texto-suave); }
.privacidade-corpo p:last-child { margin-bottom: 0; }

.privacidade-links { font-size: .88rem; }

.privacidade-aceite {
  display: flex; align-items: flex-start; gap: .55rem;
  margin-top: 1.1rem; padding: .7rem .8rem;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  font-size: .92rem; color: var(--texto); cursor: pointer;
}
.privacidade-aceite input { margin-top: .15rem; flex: none; }

.privacidade-recusa:empty { display: none; }
.privacidade-recusa {
  margin: .8rem 0 0; padding: .55rem .7rem;
  background: var(--erro-fundo); border-left: 3px solid var(--erro);
  border-radius: var(--raio-pequeno);
  font-size: .88rem; color: var(--texto);
}

/* Os botões têm o mesmo tamanho: nenhum caminho é visualmente privilegiado. */
.privacidade-acoes {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem;
  margin-top: 1.25rem;
}

/* Linha de links do rodapé. Fica acima da assinatura, que não muda. */
.rodape-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .1rem .55rem;
  margin: 0 0 .6rem;
}
.rodape-sep { color: var(--texto-tenue); }
/* ------------------------------------------------------------------ */
/* Páginas de documento (Termos e Aviso de Privacidade)                */
/* ------------------------------------------------------------------ */

.documento { max-width: 48rem; margin: 0 auto; padding: 2rem var(--margem) 3rem; }
.documento h1 { margin: 0 0 .35rem; font-size: 1.6rem; color: var(--texto); }
.documento .documento-versao { margin: 0 0 1.75rem; font-size: .85rem; color: var(--texto-tenue); }
.documento h2 {
  margin: 2rem 0 .7rem; padding-top: 1.1rem;
  border-top: 1px solid var(--borda);
  font-size: 1.08rem; font-weight: 650; color: var(--texto);
}
.documento h3 { margin: 1.3rem 0 .5rem; font-size: .97rem; font-weight: 650; color: var(--texto); }
.documento p, .documento li { color: var(--texto-suave); line-height: 1.65; }
.documento p { margin: 0 0 .8rem; }
.documento ul { margin: 0 0 .9rem; padding-left: 1.15rem; }
.documento li { margin-bottom: .35rem; }
.documento .documento-voltar { display: inline-block; margin-bottom: 1.5rem; font-size: .9rem; }