/* =========================================================================
   Investiga PJ — folha de estilo unica
   Interface orientada a leitura de evidencia: hierarquia clara, densidade
   controlada e nenhum elemento decorativo sem funcao.
   ====================================================================== */

:root {
  --azul-900: #072a44;
  --azul-800: #0b3d61;
  --azul-700: #12547f;
  --azul-100: #e3eef6;
  --azul-050: #f2f7fb;

  --tinta: #16202a;
  --tinta-media: #4a5866;
  --tinta-fraca: #6f7d8c;

  --fundo: #f6f8fa;
  --superficie: #ffffff;
  --borda: #d7dee6;
  --borda-forte: #b9c5d1;

  --ok-fundo: #e6f4ea;   --ok-borda: #96ceaa;   --ok-tinta: #1b5e34;
  --alerta-fundo: #fdf3e3; --alerta-borda: #e8c88a; --alerta-tinta: #7a5314;
  --erro-fundo: #fdeceb;  --erro-borda: #edb0ab;  --erro-tinta: #8d2820;
  --info-fundo: #eaf1f8;  --info-borda: #aac4dd;  --info-tinta: #1b4c78;
  --neutro-fundo: #eef1f4; --neutro-borda: #cdd5dd; --neutro-tinta: #4a5866;
  --roxo-fundo: #f0ebf8;  --roxo-borda: #c3b0e0;  --roxo-tinta: #4c3378;

  --raio: 6px;
  --sombra: 0 1px 2px rgba(16, 32, 48, .06), 0 4px 12px rgba(16, 32, 48, .05);
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fundo);
}

h1, h2, h3, h4, h5 { margin: 0 0 .4em; line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
h4 { font-size: .95rem; }
h5 { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-media); }
p { margin: 0 0 .7em; }

code { font-family: var(--mono); font-size: .82em; word-break: break-all; }

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

.pular {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--azul-800); color: #fff; padding: .6rem 1rem;
}
.pular:focus { left: .5rem; top: .5rem; }

/* ---------------------------------------------------------------- Topo */

.topo {
  background: var(--azul-800);
  color: #fff;
  border-bottom: 3px solid var(--azul-900);
}
.topo-interno { max-width: 1200px; margin: 0 auto; padding: 1rem 1.25rem 1.1rem; }

.marca { display: flex; align-items: center; gap: .85rem; margin-bottom: .9rem; }
.marca h1 { color: #fff; margin: 0; }
.marca-sub { margin: .15rem 0 0; font-size: .85rem; color: rgba(255,255,255,.82); }

.busca { display: flex; gap: .5rem; flex-wrap: wrap; }
.busca-campo {
  flex: 1 1 320px; min-width: 0;
  padding: .6rem .75rem;
  font-family: var(--fonte); font-size: .95rem;
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
  background: #fff; color: var(--tinta);
}
.busca-campo:focus { outline: 3px solid #8fc4ee; outline-offset: 1px; }

/* -------------------------------------------------------------- Botoes */

.btn {
  font-family: var(--fonte); font-size: .88rem; font-weight: 550;
  padding: .55rem .85rem; border-radius: var(--raio);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn:focus-visible { outline: 3px solid #8fc4ee; outline-offset: 1px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-pri { background: #1a6fb0; color: #fff; border-color: #155d94; }
.btn-pri:hover:not(:disabled) { background: #155d94; }

.btn-sec { background: var(--superficie); color: var(--azul-800); border-color: var(--borda-forte); }
.btn-sec:hover:not(:disabled) { background: var(--azul-050); border-color: var(--azul-700); }

.btn-link {
  background: none; border: none; color: var(--azul-700);
  text-decoration: underline; padding: .25rem .3rem;
}
.btn-link:hover:not(:disabled) { color: var(--azul-900); }

.btn-sm { font-size: .8rem; padding: .35rem .6rem; }

.link-ext {
  display: inline-flex; align-items: center; gap: .25rem;
  color: var(--azul-700); font-size: .82rem; font-weight: 550; text-decoration: underline;
}
.link-ext:hover { color: var(--azul-900); }
.ext-glifo { font-size: .9em; }

/* ------------------------------------------------------------ Mensagens */

.faixa-mensagem:empty, .faixa-progresso:empty { display: none; }

.mensagem, .faixa-mensagem > p {
  max-width: 1200px; margin: .75rem auto; padding: .6rem .9rem;
  border-radius: var(--raio); border: 1px solid; font-size: .88rem;
}
.msg-ok    { background: var(--ok-fundo);    border-color: var(--ok-borda);    color: var(--ok-tinta); }
.msg-aviso { background: var(--alerta-fundo);border-color: var(--alerta-borda);color: var(--alerta-tinta); }
.msg-erro  { background: var(--erro-fundo);  border-color: var(--erro-borda);  color: var(--erro-tinta); }
.msg-info  { background: var(--info-fundo);  border-color: var(--info-borda);  color: var(--info-tinta); }

.faixa-progresso { max-width: 1200px; margin: .5rem auto 0; padding: 0 1.25rem; }
.progresso { list-style: none; margin: 0; padding: 0; }
.progresso li {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--tinta-media);
  padding: .45rem .6rem; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
}
.spinner {
  width: 13px; height: 13px; flex: 0 0 13px;
  border: 2px solid var(--borda-forte); border-top-color: var(--azul-700);
  border-radius: 50%; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ------------------------------------------------------------ Principal */

.principal { max-width: 1200px; margin: 0 auto; padding: 1rem 1.25rem 3rem; }

.boas-vindas { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.25rem; box-shadow: var(--sombra); }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; margin: 1rem 0; }
.cartao { background: var(--azul-050); border: 1px solid var(--borda); border-radius: var(--raio); padding: .9rem 1rem; }
.cartao h3 { color: var(--azul-800); }
.cartao ul { margin: 0; padding-left: 1.1rem; font-size: .86rem; color: var(--tinta-media); }
.cartao li { margin-bottom: .4rem; }
.cartao strong { color: var(--tinta); }

.nota-destaque {
  background: var(--info-fundo); border: 1px solid var(--info-borda);
  color: var(--info-tinta); padding: .7rem .9rem; border-radius: var(--raio);
  font-size: .86rem; margin: 0;
}

/* ------------------------------------------------------------ Navegacao */

.navegacao {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .6rem .75rem; margin-bottom: .9rem;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
}
.trilha-area { flex: 1 1 100%; min-width: 0; }
.trilha { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; counter-reset: t; }
.trilha li { display: flex; align-items: center; }
.trilha li::after { content: "›"; color: var(--tinta-fraca); margin: 0 .1rem 0 .3rem; }
.trilha li:last-child::after { content: ""; }
.trilha-item {
  background: none; border: none; cursor: pointer;
  font-family: var(--fonte); font-size: .8rem; color: var(--azul-700);
  padding: .2rem .35rem; border-radius: 3px; text-align: left;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trilha-item:hover { background: var(--azul-050); }
.trilha-atual { font-weight: 650; color: var(--tinta); text-decoration: underline; }

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

.entidade-cabecalho {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borda);
  border-left: 4px solid var(--azul-700); border-radius: var(--raio);
  padding: 1rem 1.1rem; margin-bottom: .9rem; box-shadow: var(--sombra);
}
.entidade-id { min-width: 0; flex: 1 1 340px; }
.entidade-titulo { margin: 0; color: var(--azul-900); overflow-wrap: anywhere; }
.entidade-sub { margin: .2rem 0 .5rem; font-size: .86rem; color: var(--tinta-media); overflow-wrap: anywhere; }
.entidade-acoes { display: flex; gap: .4rem; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }

.abas {
  display: flex; gap: .2rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--borda); margin-bottom: .75rem;
}
.aba {
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: .55rem .8rem; margin-bottom: -2px; cursor: pointer;
  font-family: var(--fonte); font-size: .88rem; font-weight: 550; color: var(--tinta-media);
}
.aba:hover { color: var(--azul-800); background: var(--azul-050); }
.aba-ativa { color: var(--azul-900); border-bottom-color: var(--azul-700); }

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

.filtros:empty { display: none; }
.filtros-linha { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; margin-bottom: .9rem; }
.filtro { display: flex; flex-direction: column; gap: .2rem; }
.filtro label { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-fraca); font-weight: 600; }
.filtro-campo {
  padding: .4rem .5rem; font-family: var(--fonte); font-size: .85rem;
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
  background: var(--superficie); color: var(--tinta); min-width: 170px;
}
.filtro-campo:focus { outline: 2px solid #8fc4ee; outline-offset: 1px; }

/* --------------------------------------------------------------- Secoes */

.secao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .9rem 1.05rem; margin-bottom: .9rem;
}
.secao-titulo { color: var(--azul-800); margin-bottom: .3rem; }
.secao-desc { font-size: .82rem; color: var(--tinta-fraca); margin-bottom: .7rem; }

.vazio {
  padding: 1rem; background: var(--neutro-fundo); border: 1px dashed var(--borda-forte);
  border-radius: var(--raio); color: var(--tinta-media); font-size: .88rem; margin: 0;
}

.lista-simples { margin: 0; padding-left: 1.15rem; font-size: .87rem; }
.lista-simples li { margin-bottom: .3rem; }

.nota { font-size: .82rem; color: var(--tinta-media); margin: 0 0 .5rem; }

.aviso {
  font-size: .84rem; padding: .55rem .75rem; border-radius: var(--raio);
  border: 1px solid var(--info-borda); background: var(--info-fundo); color: var(--info-tinta);
  margin: 0 0 .6rem;
}
.aviso-conflito { border-color: var(--alerta-borda); background: var(--alerta-fundo); color: var(--alerta-tinta); }
.aviso-erro { border-color: var(--erro-borda); background: var(--erro-fundo); color: var(--erro-tinta); }
.aviso-ok { border-color: var(--ok-borda); background: var(--ok-fundo); color: var(--ok-tinta); }

/* -------------------------------------------------------------- Badges */

.badge {
  display: inline-block; padding: .13rem .45rem; border-radius: 3px;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  border: 1px solid; white-space: nowrap;
  background: var(--neutro-fundo); border-color: var(--neutro-borda); color: var(--neutro-tinta);
}
.b-confirmado { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok-tinta); }
.b-multiplas  { background: var(--ok-fundo); border-color: var(--ok-tinta); color: var(--ok-tinta); }
.b-correlacao { background: var(--info-fundo); border-color: var(--info-borda); color: var(--info-tinta); }
.b-possivel   { background: var(--roxo-fundo); border-color: var(--roxo-borda); color: var(--roxo-tinta); }
.b-conflito   { background: var(--alerta-fundo); border-color: var(--alerta-borda); color: var(--alerta-tinta); }
.b-nao        { background: var(--neutro-fundo); border-color: var(--neutro-borda); color: var(--neutro-tinta); }
.b-oficial    { background: var(--azul-100); border-color: var(--azul-700); color: var(--azul-800); }
.b-publica    { background: var(--neutro-fundo); border-color: var(--borda-forte); color: var(--tinta-media); }
.b-auto       { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok-tinta); }

.s-ok { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok-tinta); }
.s-vazio { background: var(--neutro-fundo); border-color: var(--neutro-borda); color: var(--neutro-tinta); }
.s-indisponivel { background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro-tinta); }
.s-erro { background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro-tinta); }
.s-timeout { background: var(--alerta-fundo); border-color: var(--alerta-borda); color: var(--alerta-tinta); }
.s-externo { background: var(--roxo-fundo); border-color: var(--roxo-borda); color: var(--roxo-tinta); }
.s-na { background: var(--neutro-fundo); border-color: var(--neutro-borda); color: var(--neutro-tinta); }

.t-empresa { background: var(--azul-100); border-color: var(--azul-700); color: var(--azul-800); }
.t-pessoa { background: var(--roxo-fundo); border-color: var(--roxo-borda); color: var(--roxo-tinta); }
.t-contrato, .t-documento { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok-tinta); }
.t-endereco, .t-municipio { background: var(--alerta-fundo); border-color: var(--alerta-borda); color: var(--alerta-tinta); }
.t-orgao { background: var(--info-fundo); border-color: var(--info-borda); color: var(--info-tinta); }
.t-cnae, .t-busca { background: var(--neutro-fundo); border-color: var(--neutro-borda); color: var(--neutro-tinta); }

/* ---------------------------------------------------------- Evidencias */

.ev-lista { display: flex; flex-direction: column; gap: .35rem; }

.ev-item { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.ev-item-conflito { border-color: var(--alerta-borda); background: #fffdf8; }

.ev-linha {
  display: grid; grid-template-columns: minmax(150px, 220px) 1fr auto auto;
  gap: .6rem; align-items: center; padding: .5rem .7rem;
}
.ev-label { font-size: .8rem; font-weight: 600; color: var(--tinta-media); }
.ev-principal { font-size: .9rem; overflow-wrap: anywhere; }

.ev-detalhe { padding: .1rem .7rem .7rem; border-top: 1px dashed var(--borda); }
.ev-valores { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.ev-valor { border-left: 3px solid var(--borda-forte); padding-left: .6rem; }
.ev-valor-divergente { border-left-color: var(--alerta-borda); }
.ev-valor-texto { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; overflow-wrap: anywhere; }

.ev-fontes { display: flex; flex-direction: column; gap: .4rem; }
.origem { background: var(--azul-050); border: 1px solid var(--borda); border-radius: var(--raio); padding: .5rem .65rem; }
.origem-linha { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .35rem; }
.origem-fonte { font-size: .84rem; font-weight: 650; color: var(--azul-800); }
.origem-grupo { font-size: .72rem; color: var(--tinta-fraca); font-family: var(--mono); }

.origem-dados { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: .15rem .6rem; margin: 0 0 .4rem; font-size: .8rem; }
.origem-dados dt { color: var(--tinta-fraca); font-weight: 600; }
.origem-dados dd { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }

.origem-url { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .76rem; }
.origem-url code { background: var(--superficie); border: 1px solid var(--borda); border-radius: 3px; padding: .1rem .3rem; }

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

.tabela-fontes, .tabela-conflito {
  width: 100%; border-collapse: collapse; font-size: .83rem;
  display: block; overflow-x: auto; white-space: nowrap;
}
.tabela-fontes thead th, .tabela-conflito thead th {
  text-align: left; padding: .45rem .6rem; background: var(--azul-050);
  border-bottom: 2px solid var(--borda-forte); color: var(--azul-800);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
}
.tabela-fontes td, .tabela-conflito td {
  padding: .45rem .6rem; border-bottom: 1px solid var(--borda); vertical-align: top;
}
.tabela-fontes tbody tr:hover, .tabela-conflito tbody tr:hover { background: var(--azul-050); }
.td-detalhe { white-space: normal; max-width: 380px; font-size: .8rem; color: var(--tinta-media); }
.td-url { white-space: normal; max-width: 320px; }
.linha-divergente { background: #fffaf0; }

.conflito-card, .corr-card {
  border: 1px solid var(--alerta-borda); border-radius: var(--raio);
  padding: .8rem .9rem; margin-bottom: .8rem; background: #fffdf8;
}
.corr-card { border-color: var(--info-borda); background: #fafcfe; }
.conflito-cab { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }
.conflito-cab h4 { margin: 0; }

/* ------------------------------------------------------ Relacionamentos */

.rel-lista { display: flex; flex-direction: column; gap: .5rem; }
.rel-card { border: 1px solid var(--borda); border-radius: var(--raio); padding: .65rem .8rem; background: var(--superficie); }
.rel-cab { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; align-items: flex-start; }
.rel-id { display: flex; flex-direction: column; min-width: 0; }
.rel-nome { font-weight: 650; font-size: .92rem; overflow-wrap: anywhere; }
.rel-sub { font-size: .79rem; color: var(--tinta-fraca); overflow-wrap: anywhere; }
.rel-badges { display: flex; gap: .3rem; flex-wrap: wrap; }
.rel-label { font-size: .82rem; color: var(--tinta-media); margin: .35rem 0 .5rem; }
.rel-acoes { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.rel-detalhe { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--borda); }
.rel-evidencias { margin-top: .6rem; }
.rel-extra { display: flex; flex-direction: column; gap: .5rem; }

.contrato-bloco { margin-bottom: .5rem; }
.contrato-dados { display: grid; grid-template-columns: minmax(130px, 190px) 1fr; gap: .15rem .6rem; margin: 0 0 .6rem; font-size: .84rem; }
.contrato-dados dt { color: var(--tinta-fraca); font-weight: 600; }
.contrato-dados dd { margin: 0; overflow-wrap: anywhere; }
.contrato-papel { margin-top: .5rem; }

.ext-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .8rem; }
.ext-card { border: 1px solid var(--roxo-borda); border-radius: var(--raio); padding: .8rem .9rem; background: #fcfaff; }
.ext-cab { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: .3rem; }
.ext-cab h4 { margin: 0; }
.ext-orgao { font-size: .8rem; color: var(--tinta-fraca); margin-bottom: .5rem; }

/* ----------------------------------------------------------------- Grafo */

.grafo-svg {
  width: 100%; height: auto; display: block;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
}
.edge { stroke-width: 1.5; }
.e-confirmado { stroke: #2f7d4e; }
.e-correlacao { stroke: #4a7fae; stroke-dasharray: 5 3; }
.e-possivel   { stroke: #7d5cb0; stroke-dasharray: 2 4; }
.e-conflito   { stroke: #c08a2e; stroke-dasharray: 7 3; }
.setor-label {
  font-size: 11px; font-weight: 700; fill: var(--tinta-fraca);
  font-family: var(--fonte); letter-spacing: .05em;
  paint-order: stroke; stroke: var(--superficie); stroke-width: 4px; stroke-linejoin: round;
}

.node { cursor: pointer; }
.node:focus-visible { outline: none; }
.node:focus-visible .node-circle { stroke: #1a6fb0; stroke-width: 3.5; }
.node-circle { fill: #fff; stroke: var(--borda-forte); stroke-width: 2; transition: stroke-width .1s ease; }
.node:hover .node-circle { stroke-width: 3.5; }
.node-label {
  font-size: 10.5px; fill: var(--tinta); font-family: var(--fonte);
  paint-order: stroke; stroke: var(--superficie); stroke-width: 3px; stroke-linejoin: round;
}
.node-label-focus { font-size: 12px; }
.node-glifo { font-size: 12px; fill: var(--azul-700); }

.node-focus .node-circle { fill: var(--azul-800); stroke: var(--azul-900); }
.node-focus .node-label { font-weight: 700; }
.node-focus .node-glifo { fill: #fff; }

.n-empresa .node-circle { stroke: var(--azul-700); }
.n-pessoa .node-circle { stroke: var(--roxo-tinta); }
.n-contrato .node-circle { stroke: var(--ok-tinta); }
.n-endereco .node-circle, .n-municipio .node-circle { stroke: var(--alerta-tinta); }
.n-orgao .node-circle { stroke: var(--info-tinta); }
.n-cnae .node-circle, .n-busca .node-circle { stroke: var(--borda-forte); }

.grafo-rodape { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.grafo-contagem { font-size: .83rem; color: var(--tinta-media); }

/* --------------------------------------------------------------- Rodape */

.rodape {
  margin-top: 2.5rem;
  border-top: 1px solid var(--borda);
}
.rodape-interno {
  max-width: 1200px; margin: 0 auto;
  padding: 1.2rem 1.25rem 1.6rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.rodape p { margin: 0; }

.rodape-titulo {
  font-size: .84rem; font-weight: 600; color: var(--tinta-media);
}
.rodape-nota {
  font-size: .76rem; line-height: 1.55; color: var(--tinta-fraca);
  max-width: 66ch;
}
.rodape-copy {
  margin-top: .7rem; font-size: .7rem;
  letter-spacing: .06em; color: var(--tinta-fraca);
}

/* ------------------------------------------------------------ Responsivo */

@media (max-width: 860px) {
  .ev-linha { grid-template-columns: 1fr; gap: .25rem; }
  .ev-principal { font-weight: 600; }
  .origem-dados, .contrato-dados { grid-template-columns: 1fr; }
  .origem-dados dt, .contrato-dados dt { margin-top: .3rem; }
  /* Em coluna, flex-basis passa a valer como altura: precisa voltar a auto
     para nao criar um vao vazio dentro do cartao. */
  .entidade-cabecalho { flex-direction: column; }
  .entidade-id { flex: 1 1 auto; }
  .entidade-acoes { width: 100%; }
  .entidade-acoes .btn { flex: 1 1 auto; }
  .busca { flex-direction: column; align-items: stretch; }
  .busca-campo { flex: 1 1 auto; }
}

@media (max-width: 560px) {
  body { font-size: 14px; }
  .principal, .topo-interno, .rodape-interno { padding-left: .8rem; padding-right: .8rem; }
  .abas { gap: 0; }
  .aba { padding: .5rem .55rem; font-size: .82rem; }
  .filtro-campo { min-width: 0; width: 100%; }
  .filtro { flex: 1 1 100%; }
  .trilha-item { max-width: 150px; }
  .secao { padding: .75rem .8rem; }
  .cartoes { grid-template-columns: 1fr; }
}

@media print {
  .topo, .abas, .filtros, .navegacao, .entidade-acoes, .btn, .rel-acoes { display: none !important; }
  body { background: #fff; }
  .secao, .ev-item { break-inside: avoid; }
}

/* Itens presentes em apenas parte das origens */
.item-exclusivo { color: var(--alerta-tinta); font-weight: 600; }
.item-exclusivo .badge { margin-left: .4rem; }

/* Espacamento entre badges empilhados na mesma celula de tabela */
.tabela-fontes td .badge + .badge,
.rel-badges .badge + .badge,
.chips .badge + .badge { margin-left: .25rem; }
.tabela-fontes td .badge { margin-bottom: .15rem; }

/* Fornecedor identificado no detalhe oficial do contrato */
.contrato-fornecedor {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem .75rem; margin-top: .5rem;
  background: var(--ok-fundo); border: 1px solid var(--ok-borda); border-radius: var(--raio);
}
.cf-rotulo {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ok-tinta);
}
.cf-nome { font-size: .88rem; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; flex: 1 1 200px; }

/* Hierarquia de fontes: servico de terceiros nao se confunde com fonte oficial */
.b-terceiros { background: var(--alerta-fundo); border-color: var(--alerta-borda); color: var(--alerta-tinta); }

/* Execucao orcamentaria (SICONFI) */
.fiscal-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; margin-bottom: .7rem; }
.fiscal-cartao {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .7rem .8rem; background: var(--azul-050);
  border: 1px solid var(--borda); border-left: 3px solid var(--azul-700); border-radius: var(--raio);
}
.fc-rotulo { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-fraca); }
.fc-valor { font-size: 1rem; font-weight: 650; color: var(--azul-900); overflow-wrap: anywhere; }

.tabela-fiscal { width: 100%; border-collapse: collapse; font-size: .83rem; display: block; overflow-x: auto; }
.tabela-fiscal thead th {
  text-align: left; padding: .45rem .6rem; background: var(--azul-050);
  border-bottom: 2px solid var(--borda-forte); color: var(--azul-800);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.tabela-fiscal td { padding: .4rem .6rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela-fiscal .td-valor { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fiscal-detalhe { margin-top: .5rem; }
.fiscal-detalhe summary { cursor: pointer; font-size: .84rem; color: var(--azul-700); font-weight: 550; padding: .3rem 0; }

/* Paginacao real */
.paginacao-lista { display: flex; flex-direction: column; gap: .5rem; }
.pag-linha { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pag-status { font-size: .85rem; color: var(--tinta-media); flex: 1 1 260px; }

/* ---------------- PNCP: visao investigativa ---------------- */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-bottom: .7rem; }
.ind-cartao {
  display: flex; flex-direction: column; gap: .1rem; padding: .7rem .8rem;
  background: var(--azul-050); border: 1px solid var(--borda);
  border-left: 3px solid var(--azul-700); border-radius: var(--raio);
}
.ind-valor { font-size: 1.15rem; font-weight: 700; color: var(--azul-900); overflow-wrap: anywhere; }
.ind-rotulo { font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta-fraca); }
.ind-nota { font-size: .7rem; color: var(--tinta-fraca); font-style: italic; }

.grupo-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .55rem; margin-bottom: .8rem; }
.grupo-card { border: 1px solid var(--borda); border-radius: var(--raio); padding: .6rem .75rem; background: var(--superficie); }
.grupo-cab { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: .35rem; }
.grupo-nome { display: block; font-weight: 650; font-size: .9rem; overflow-wrap: anywhere; }
.grupo-id { display: block; font-size: .74rem; color: var(--tinta-fraca); font-family: var(--mono); }
.grupo-num { display: flex; flex-direction: column; gap: .1rem; font-size: .8rem; color: var(--tinta-media); }

/* Documentos */
.docs-area { margin-top: .6rem; }
.doc-lista { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0; }
.doc-item {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .5rem .65rem; background: var(--azul-050); border: 1px solid var(--borda); border-radius: var(--raio);
}
.doc-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 220px; }
.doc-titulo { font-size: .87rem; font-weight: 600; overflow-wrap: anywhere; }
.doc-meta { font-size: .75rem; color: var(--tinta-fraca); }

/* Modo detalhado */
.det-acoes { margin-top: .6rem; }
.detalhado { margin-top: .7rem; border-top: 2px solid var(--azul-100); padding-top: .7rem; }
.det-secao { margin-bottom: .9rem; }
.det-secao h5 { margin-bottom: .35rem; color: var(--azul-800); }

.timeline { list-style: none; margin: 0; padding: 0 0 0 .9rem; border-left: 2px solid var(--azul-100); }
.timeline li { position: relative; padding: .3rem 0 .3rem .8rem; font-size: .85rem; }
.timeline li::before {
  content: ""; position: absolute; left: -1.35rem; top: .65rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--azul-700);
}
.tl-data { font-family: var(--mono); font-size: .8rem; color: var(--tinta-fraca); margin-right: .5rem; }
.tl-evento { font-weight: 550; }

.item-bloco { border: 1px solid var(--borda); border-radius: var(--raio); padding: .55rem .7rem; margin-bottom: .5rem; }
.item-cab { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.item-num { font-weight: 700; font-size: .8rem; color: var(--azul-800); white-space: nowrap; }
.item-desc { flex: 1 1 200px; font-size: .86rem; overflow-wrap: anywhere; }
.item-val { font-size: .78rem; color: var(--tinta-media); font-variant-numeric: tabular-nums; }
.item-res { margin-top: .4rem; }
.res-linha { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding: .4rem .5rem; background: var(--ok-fundo); border: 1px solid var(--ok-borda); border-radius: var(--raio); margin-bottom: .3rem; }
.res-nome { font-weight: 600; font-size: .85rem; overflow-wrap: anywhere; flex: 1 1 180px; }
.res-val { font-size: .78rem; color: var(--ok-tinta); font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .indicadores { grid-template-columns: 1fr 1fr; }
  .grupo-lista { grid-template-columns: 1fr; }
}

/* ---------------- Selecao de localidade ---------------- */
.sel-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .6rem; }
.sel-card {
  display: flex; flex-direction: column; gap: .15rem; text-align: left; cursor: pointer;
  padding: .8rem .9rem; background: var(--superficie);
  border: 1px solid var(--borda-forte); border-left: 4px solid var(--azul-700);
  border-radius: var(--raio); font-family: var(--fonte);
  transition: background-color .12s ease, border-color .12s ease;
}
.sel-card:hover { background: var(--azul-050); border-color: var(--azul-700); }
.sel-card:focus-visible { outline: 3px solid #8fc4ee; outline-offset: 1px; }
.sel-municipio { border-left-color: var(--alerta-tinta); }
.sel-tipo { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-fraca); }
.sel-nome { font-size: 1rem; font-weight: 650; color: var(--azul-900); overflow-wrap: anywhere; }
.sel-meta { font-size: .76rem; color: var(--tinta-media); font-family: var(--mono); }

/* Acao assincrona: botao + estado terminal sempre visivel */
.acao-async { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; margin: .4rem 0; }
.acao-estado {
  margin: 0; font-size: .8rem; line-height: 1.45; max-width: 70ch;
  padding: .45rem .6rem; border-radius: var(--raio); border: 1px solid var(--neutro-borda);
  background: var(--neutro-fundo); color: var(--neutro-tinta);
}
.acao-estado-ok { border-color: var(--ok-borda); background: var(--ok-fundo); color: var(--ok-tinta); }
.acao-estado-aviso { border-color: var(--alerta-borda); background: var(--alerta-fundo); color: var(--alerta-tinta); }
.acao-estado-erro { border-color: var(--erro-borda); background: var(--erro-fundo); color: var(--erro-tinta); }

/* Cartao de entidade identificada por CNPJ a partir do nome */
.sel-entidade { border-left-color: var(--ok-tinta); gap: .22rem; }
.sel-outro { border-left-color: var(--neutro-borda); }
.sel-detalhe { font-size: .78rem; color: var(--tinta-media); overflow-wrap: anywhere; }
.sel-atividade { color: var(--tinta-fraca); font-style: italic; }
.sel-alerta { color: var(--alerta-tinta); }
.sel-corr { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .25rem; }
.sel-corr-origem { font-size: .72rem; color: var(--tinta-fraca); }
.desc-cobertura { margin-top: .7rem; }
.desc-cobertura .nota { margin-bottom: .45rem; }

/* Lista de municipios de um estado */
.mun-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .35rem; margin: .6rem 0; }
.mun-item {
  display: flex; justify-content: space-between; align-items: center; gap: .4rem;
  padding: .45rem .6rem; cursor: pointer; text-align: left;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  font-family: var(--fonte);
}
.mun-item:hover { background: var(--azul-050); border-color: var(--azul-700); }
.mun-nome { font-size: .85rem; overflow-wrap: anywhere; }
.mun-cod { font-size: .72rem; color: var(--tinta-fraca); font-family: var(--mono); white-space: nowrap; }

@media (max-width: 560px) { .sel-lista, .mun-lista { grid-template-columns: 1fr; } }

/* Estagios da despesa: o que existe e o que nao existe */
.estagios { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.estagio-linha {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .5rem .7rem; border-radius: var(--raio); border: 1px solid var(--borda);
  background: var(--superficie);
}
.est-ok { background: var(--ok-fundo); border-color: var(--ok-borda); }
.est-nao { background: var(--neutro-fundo); border-color: var(--borda-forte); }
/* Cobertura parcial de um estagio: nem disponivel, nem ausente. */
.est-parcial { background: var(--alerta-fundo); border-color: var(--alerta-borda); }
.est-parcial .est-valor { color: var(--alerta-tinta); }
.est-rotulo { font-weight: 650; font-size: .88rem; }
.est-valor { font-size: .82rem; color: var(--tinta-media); text-align: right; }
.est-nao .est-valor { font-weight: 600; color: var(--tinta-media); }
.ext-acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .6rem; }

/* =========================================================================
   Analise sobre os registros carregados
   Sem cor de alarme em nenhum lugar: estes blocos apresentam observacao
   estatistica, e um destaque vermelho sugeriria conclusao que eles nao tiram.
   ====================================================================== */

.analise-aviso { margin-bottom: 1rem; }
.analise-aviso .aviso { margin-bottom: .4rem; }

/* Barra proporcional. A largura e definida por style.width no script, a
   partir de numero calculado; nenhum dado externo entra no markup. */
.td-barra { width: 28%; min-width: 90px; }
.barra-trilha {
  height: .55rem; background: var(--neutro-fundo);
  border: 1px solid var(--borda); border-radius: 999px; overflow: hidden;
}
.barra-preenchida { height: 100%; background: var(--azul-700); border-radius: 999px; }

/* Avisos que qualificam uma comparacao desigual */
.comp-avisos {
  margin-top: .8rem; padding: .7rem .85rem;
  background: var(--info-fundo); border: 1px solid var(--info-borda); border-radius: var(--raio);
}
.comp-avisos h5 { margin: 0 0 .4rem; font-size: .82rem; color: var(--info-tinta); }
.comp-avisos .lista-simples li { font-size: .8rem; color: var(--info-tinta); }

/* Permalink */
.permalink-linha { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .6rem 0 .3rem; }
.permalink-campo { flex: 1 1 22rem; min-width: 0; font-family: var(--mono); font-size: .78rem; }

/* Carregamento em andamento dentro de uma secao */
.progresso-inline {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--tinta-media); margin: 0 0 .5rem;
}

/* Hierarquia do CNAE consultada sob demanda */
.cnae-area { margin-top: .3rem; }
.cnae-area .contrato-dados { margin-bottom: .5rem; }

@media (max-width: 560px) {
  .td-barra { display: none; }
  .permalink-campo { flex-basis: 100%; }
}

/* =========================================================================
   Conteudo institucional da pagina inicial
   Estes estilos valem apenas para o texto de apresentacao, que e o conteudo
   estatico da pagina. Nenhum deles alcanca o painel de resultados.
   ====================================================================== */

/* Titulos de secao dentro da apresentacao, para separar os blocos de leitura. */
.boas-vindas h3 {
  margin-top: 1.6rem;
  padding-top: .9rem;
  border-top: 1px solid var(--borda);
  color: var(--azul-800);
  font-size: 1.05rem;
}
.boas-vindas h3:first-of-type { margin-top: 1.2rem; }
.cartao h4 { color: var(--azul-800); margin-bottom: .5rem; }

/* Indice das secoes: navegacao interna da propria pagina. */
.indice {
  background: var(--azul-050);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: .75rem 1rem;
  margin: 1rem 0;
}
.indice ul {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  padding-left: 1.1rem;
  margin: 0;
}
.indice li { margin-bottom: 0; }
.indice a { color: var(--azul-700); }

/* Perguntas frequentes. */
.perguntas { margin: .6rem 0 0; }
.perguntas dt {
  font-weight: 650;
  color: var(--azul-900);
  margin-top: .9rem;
  font-size: .92rem;
}
.perguntas dt:first-child { margin-top: 0; }
.perguntas dd {
  margin: .25rem 0 0;
  padding-left: .9rem;
  border-left: 2px solid var(--borda);
  font-size: .87rem;
  color: var(--tinta-media);
}

/* O indice quebra em coluna unica quando nao ha largura para duas. */
@media (max-width: 560px) {
  .indice ul { flex-direction: column; gap: .35rem; }
}

/* Cobertura do indice: completo e parcial precisam ser distinguiveis de
   relance, porque a diferenca entre os dois muda a leitura de todos os
   agregados da aba. */
.pag-status.pag-completo { color: var(--ok-tinta); }
.pag-status.pag-parcial { color: var(--alerta-tinta, var(--tinta)); font-weight: 600; }

/* =========================================================================
   Apresentacao dos dados: indicadores, rankings, graficos e arvore
   ====================================================================== */

/* -------------------------------------------------------------------------
   Integridade tipografica.

   Um CNPJ, um valor em reais e uma data sao unidades de leitura: partidos ao
   meio por uma quebra de linha, deixam de ser legiveis e passam a ser dois
   fragmentos sem sentido. Nomes proprios longos, ao contrario, precisam
   refluir — cortar o nome de um orgao esconde informacao.
   ---------------------------------------------------------------------- */
.nao-quebrar {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  font-variant-numeric: tabular-nums;
}
.pode-refluir {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
}

/* O valor abreviado so entra em cena quando nao cabe o extenso. */
.valor-curto { display: none; }

/* -------------------------------------------------------------------------
   Painel de indicadores
   ---------------------------------------------------------------------- */
.kpi-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .75rem;
  margin: .5rem 0 .9rem;
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  padding: .8rem .85rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--azul-700);
  border-radius: var(--raio);
  min-width: 0;
}
.kpi-ausente { border-left-color: var(--borda-forte); background: var(--neutro-fundo); }
.kpi-alerta { border-left-color: var(--alerta-borda); background: var(--alerta-fundo); }

.kpi-rotulo {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-media);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.kpi-valor {
  font-size: 1.45rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--azul-900);
  /* O numero nunca quebra no meio: ele encolhe. Um "R$ 7.499.129.562,21"
     partido entre duas linhas deixa de ser um valor e vira dois fragmentos. */
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
/* O tamanho final e definido por medicao, em painelKpi(): a largura do cartao
   depende de quantas colunas couberam na grade, e so o navegador sabe isso. */
.kpi-valor-ausente {
  font-size: .95rem;
  font-weight: 600;
  color: var(--tinta-fraca);
  font-style: italic;
  white-space: normal;
}
.kpi-unidade { font-size: .8rem; color: var(--tinta-media); overflow-wrap: anywhere; }
.kpi-universo { font-size: .74rem; color: var(--tinta-fraca); overflow-wrap: anywhere; }
.kpi-ajuda {
  margin-top: .3rem;
  font-size: .74rem;
  line-height: 1.35;
  color: var(--tinta-fraca);
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   Ranking horizontal
   ---------------------------------------------------------------------- */
.rank { margin: .3rem 0 .2rem; }
.rank-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.rank-item { min-width: 0; }
.rank-cab {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin-bottom: .22rem;
}
.rank-pos {
  flex: 0 0 auto;
  min-width: 1.35rem;
  font-size: .76rem;
  font-weight: 700;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}
.rank-rotulo {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--tinta);
  overflow-wrap: anywhere;
}
.rank-valor {
  flex: 0 0 auto;
  font-size: .88rem;
  font-weight: 700;
  color: var(--azul-800);
}
.rank-trilha {
  height: 9px;
  background: var(--neutro-fundo);
  border: 1px solid var(--borda);
  border-radius: 999px;
  overflow: hidden;
}
.rank-preenchida { height: 100%; background: var(--azul-700); border-radius: 999px; }
.rank-detalhe {
  display: block;
  margin-top: .2rem;
  font-size: .76rem;
  color: var(--tinta-media);
  overflow-wrap: anywhere;
}
.rank-acao { margin-top: .35rem; }

/* -------------------------------------------------------------------------
   Graficos em SVG
   ---------------------------------------------------------------------- */
.grafico-bloco {
  margin: 0 0 1.1rem;
  padding: .85rem .9rem 1rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.grafico-cab { margin-bottom: .5rem; }
.grafico-titulo {
  margin: 0;
  font-size: .95rem;
  color: var(--azul-900);
  overflow-wrap: anywhere;
}
.grafico-pergunta {
  margin: .2rem 0 0;
  font-size: .82rem;
  color: var(--tinta-media);
  overflow-wrap: anywhere;
}
.grafico-universo {
  margin: .55rem 0 0;
  font-size: .76rem;
  color: var(--tinta-fraca);
  overflow-wrap: anywhere;
}
.grafico-eixo-nota {
  margin: 0 0 .4rem;
  font-size: .76rem;
  color: var(--tinta-media);
  overflow-wrap: anywhere;
}
.grafico-area { width: 100%; }
.grafico-svg { width: 100%; height: auto; display: block; }

.g-grade { stroke: var(--borda); stroke-width: 1; }
.g-eixo { stroke: var(--borda-forte); stroke-width: 1.5; }
.g-barra { fill: var(--azul-700); }
.g-barra:hover { fill: var(--azul-900); }
.g-rotulo-y, .g-rotulo-x {
  font-family: var(--fonte);
  font-size: 12px;
  fill: var(--tinta-media);
}

/* -------------------------------------------------------------------------
   Distribuicao por categoria
   ---------------------------------------------------------------------- */
.dist { margin: .2rem 0; }
.dist-barra {
  display: flex;
  width: 100%;
  height: 22px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--neutro-fundo);
}
.dist-parte { height: 100%; }
.dist-legenda {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .3rem .9rem;
}
/* Grade em vez de flex: com o nome ocupando a coluna do meio, ele reflui em
   quantas linhas precisar sem empurrar o numero para o meio do texto, e o
   numero fica alinhado no topo junto da primeira linha do nome. */
.dist-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .1rem .45rem;
  font-size: .82rem;
  min-width: 0;
}
.dist-marca { margin-top: .32rem; }
.dist-marca { width: .7rem; height: .7rem; border-radius: 2px; }
.dist-nome { min-width: 0; overflow-wrap: break-word; color: var(--tinta); }
.dist-num { color: var(--tinta-media); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Paleta categorica: matizes distintos entre si e legiveis sobre branco,
   derivados do azul institucional para nao brigar com o resto da interface. */
.dist-c0 { background: #12547f; }
.dist-c1 { background: #2f8fbf; }
.dist-c2 { background: #4c3378; }
.dist-c3 { background: #1b5e34; }
.dist-c4 { background: #7a5314; }
.dist-c5 { background: #8d2820; }
.dist-c6 { background: #5b7083; }
.dist-c7 { background: #9a7bc8; }

/* -------------------------------------------------------------------------
   Arvore de correlacao
   ---------------------------------------------------------------------- */
.arvore {
  padding: .85rem .9rem;
  background: var(--azul-050);
  border: 1px solid var(--azul-100);
  border-radius: var(--raio);
}
.arvore-raiz { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .6rem; }
.arvore-raiz-nome {
  font-size: 1rem;
  font-weight: 700;
  color: var(--azul-900);
  overflow-wrap: anywhere;
}
.arvore-raiz-det { font-size: .82rem; color: var(--tinta-media); font-family: var(--mono); }
.arvore-ramos {
  list-style: none;
  margin: 0;
  padding: 0 0 0 .1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: .45rem .9rem;
}
.arvore-ramo {
  position: relative;
  padding: .4rem .5rem .4rem .95rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  min-width: 0;
}
/* O tracinho a esquerda e o que faz o conjunto ser lido como ramificacao de
   uma mesma raiz, e nao como seis cartoes soltos. */
.arvore-ramo::before {
  content: "";
  position: absolute;
  left: .42rem; top: 50%;
  width: .32rem; height: 1px;
  background: var(--borda-forte);
}
.arvore-ausente { background: var(--neutro-fundo); }
.arvore-valor {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--azul-900);
  font-variant-numeric: tabular-nums;
}
.arvore-ausente .arvore-valor { font-size: .85rem; font-style: italic; color: var(--tinta-fraca); white-space: normal; }
.arvore-rotulo { display: block; font-size: .78rem; color: var(--tinta-media); overflow-wrap: anywhere; }
.arvore-nota { display: block; margin-top: .18rem; font-size: .72rem; color: var(--tinta-fraca); overflow-wrap: anywhere; }

/* -------------------------------------------------------------------------
   Telas estreitas
   ---------------------------------------------------------------------- */
@media (max-width: 560px) {
  .kpi-grade { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; }
  .kpi { padding: .6rem .65rem; }

  /* Sem largura para o extenso, entra o abreviado — e o extenso continua
     acessivel pelo atributo title e pela tabela da mesma secao. */
  .rank-valor .valor-extenso { display: none; }
  .rank-valor .valor-curto { display: inline; }

  .rank-cab { flex-wrap: wrap; gap: .25rem .4rem; }
  .rank-rotulo { flex: 1 1 100%; order: 2; }
  .rank-valor { order: 3; }
  .rank-pos { order: 1; }

  .dist-legenda { grid-template-columns: 1fr; }
  .arvore-ramos { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
  .grafico-bloco { padding: .7rem .6rem .8rem; }
  .g-rotulo-y, .g-rotulo-x { font-size: 15px; }
}

@media print {
  .grafico-bloco { break-inside: avoid; }
  .kpi-grade { break-inside: avoid; }
}

/* Ressalva curta dentro de uma frase, sem virar um bloco de alerta proprio. */
.aviso-inline { color: var(--alerta-tinta); font-weight: 600; }

/* =========================================================================
   Leitura do resultado: identificacao, cobertura e origem dos graficos
   ====================================================================== */

/* Identificacao: pares rotulo/valor em linhas, para leitura de cima a baixo
   sem competir por atencao com os numeros que vem depois. */
.identificacao { display: flex; flex-direction: column; gap: .55rem; }
.ident-linha {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
  gap: .2rem .9rem;
  align-items: start;
}
.ident-rotulo {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--tinta-fraca);
  padding-top: .12rem;
}
.ident-valor { font-size: .9rem; color: var(--tinta); min-width: 0; overflow-wrap: break-word; }
.ident-nome { font-size: 1.05rem; font-weight: 700; color: var(--azul-900); overflow-wrap: break-word; }
.ident-doc { margin-left: .5rem; font-family: var(--mono); font-size: .85rem; color: var(--tinta-media); }

@media (max-width: 560px) {
  .ident-linha { grid-template-columns: 1fr; gap: .1rem; }
  .ident-doc { display: block; margin-left: 0; }
}

/* Faixa de cobertura: uma frase e uma barra. O detalhamento por tipo e os
   controles de carregar mais ficam recolhidos, porque interessam a quem esta
   auditando, nao a quem so quer saber se o numero esta completo. */
.cobertura-faixa {
  margin: 0 0 1rem;
  padding: .7rem .8rem;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--neutro-fundo);
}
.cob-ok { border-left-color: var(--ok-borda); background: var(--ok-fundo); }
.cob-parcial { border-left-color: var(--alerta-borda); background: var(--alerta-fundo); }
.cob-texto { margin: 0 0 .5rem; font-size: .86rem; font-weight: 600; overflow-wrap: break-word; }
.cob-ok .cob-texto { color: var(--ok-tinta); }
.cob-parcial .cob-texto { color: var(--alerta-tinta); }
.cob-trilha {
  height: 7px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 999px;
  overflow: hidden;
}
.cob-preenchida { height: 100%; background: var(--azul-700); border-radius: 999px; }
.cob-ok .cob-preenchida { background: var(--ok-tinta); }
.cob-parcial .cob-preenchida { background: var(--alerta-tinta); }
.cob-detalhe { margin-top: .6rem; }
.cob-detalhe > summary { font-size: .8rem; color: var(--tinta-media); cursor: pointer; }

/* Titulo de bloco dentro de uma secao, para separar "quanto" de "quantos"
   sem abrir uma secao nova para cada um. */
.bloco-titulo {
  margin: 1rem 0 .1rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-media);
}
.bloco-titulo:first-child { margin-top: 0; }

/* Tabela de origem de um grafico: os mesmos numeros que a barra desenha. */
.origem { margin-top: .7rem; }
.origem > summary {
  font-size: .8rem;
  color: var(--azul-700);
  cursor: pointer;
  padding: .2rem 0;
}
.origem > summary:hover { text-decoration: underline; }
/* Tabela larga rola dentro do proprio quadro, nunca empurrando a pagina. */
.tabela-rolavel { overflow-x: auto; max-height: 420px; overflow-y: auto; margin-top: .4rem; }
.tabela-rolavel table { margin: 0; }
.tabela-rolavel thead th { position: sticky; top: 0; background: var(--superficie); z-index: 1; }

.graficos-lista { display: flex; flex-direction: column; }
.cob-rotulo {
  margin: 0 0 .2rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  opacity: .8;
}
.ident-sub { display: block; margin-top: .25rem; font-size: .82rem; color: var(--tinta-media); }

/* =========================================================================
   Tabelas de entidades: comparar e aprofundar sem rolar a pagina inteira
   ====================================================================== */
.tab-bloco { margin: .3rem 0 .5rem; }
/* A tabela de entidades rola na horizontal quando precisa, mas NAO tem teto de
   altura proprio: com teto, a linha expandida — que traz o registro inteiro —
   ficava espremida numa janelinha de 420 px com rolagem dentro de rolagem. A
   pagina nao cresce sem controle porque o numero de linhas desenhadas e
   limitado e "Ver mais" e explicito. */
.tab-bloco .tabela-rolavel { max-height: none; overflow-y: visible; }
.tab-controles { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.tab-filtro {
  flex: 1 1 220px;
  min-width: 0;
  padding: .4rem .6rem;
  font-size: .87rem;
  font-family: inherit;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--tinta);
}
.tab-filtro:focus { outline: 2px solid var(--azul-700); outline-offset: 1px; }

.tabela-entidades { width: 100%; font-size: .85rem; }
.tabela-entidades th, .tabela-entidades td { padding: .3rem .5rem; vertical-align: top; line-height: 1.3; }
/* Cabecalho de coluna sem ordenacao usa a mesma forma do que tem: o botao de
   ordenar ja neutraliza o caixa-alta herdado da tabela fiscal, e sem isto
   "ORIGEM" aparecia em caixa alta ao lado de "Valor global".
   O seletor precisa da mesma especificidade de ".tabela-fiscal thead th", que
   e quem impoe o caixa-alta; ".tab-th" sozinho perde para ela. */
.tab-th { background: var(--superficie); white-space: nowrap; }
.tabela-entidades thead th.tab-th { text-transform: none; font-size: .8rem; letter-spacing: 0; }
.tab-ordenar {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--tinta-media);
  cursor: pointer;
}
.tab-ordenar:hover { color: var(--azul-700); text-decoration: underline; }
.tab-seta { font-size: .7em; color: var(--azul-700); }

/* O nome e o campo primario da linha e o que o usuario le primeiro: recebe
   largura suficiente para os rotulos tipicos do PNCP ("Aviso de Contratacao
   Direta no 3370/2026") caberem em uma linha, o que mantem a altura das linhas
   uniforme e a tabela comparavel de cima a baixo. */
.tab-cel-nome { min-width: 14rem; max-width: 24rem; }
.tab-nome { overflow-wrap: break-word; }
/* Nome clicavel: parece link, mas so existe quando ha acao real por tras. */
.tab-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--azul-700);
  text-align: left;
  cursor: pointer;
  overflow-wrap: break-word;
}
.tab-link:hover, .tab-link:focus-visible { text-decoration: underline; color: var(--azul-900); }
.tab-detalhe {
  display: block;
  margin-top: .12rem;
  font-size: .75rem;
  color: var(--tinta-fraca);
  overflow-wrap: anywhere;
}
.tab-detalhe { line-height: 1.25; }

.tab-cel-exp { width: 2.2rem; text-align: center; }
.tab-expandir {
  width: 1.6rem;
  height: 1.6rem;
  line-height: 1;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--azul-700);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.tab-expandir:hover { background: var(--azul-050); }

.tab-linha-exp > td { background: var(--azul-050); padding: .7rem .6rem; }
.exp-conteudo { display: flex; flex-direction: column; gap: .5rem; }
.exp-titulo { margin: 0; font-weight: 700; color: var(--azul-900); font-size: .9rem; }
.exp-sub { margin: .3rem 0 0; font-size: .8rem; color: var(--tinta-media); text-transform: uppercase; letter-spacing: .04em; }

.tab-rodape { margin: .4rem 0 .3rem; font-size: .78rem; color: var(--tinta-fraca); }

/* ---------- Tabela de registros: colunas de texto, acoes e prioridade ----------
   Uma linha por registro, colunas alinhadas entre si. Substituiu a lista de
   cartoes, onde cada registro ocupava um bloco e os botoes internos quebravam
   para a linha de baixo. */
.tab-cel-texto { vertical-align: top; }
/* Celula de uma linha so: o texto e cortado com reticencias em vez de quebrar e
   esticar a linha inteira da tabela. O valor completo esta no atributo title e
   na linha expandida — cortar na exibicao nao e o mesmo que perder o dado. */
.tab-uma-linha {
  display: block; max-width: 15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Empilhamento CONTROLADO: duas linhas curtas dentro da propria celula, em vez
   de o conteudo transbordar e empurrar a linha inteira. */
.tab-empilhado { display: flex; flex-direction: column; gap: .1rem; }
.tab-selo { display: inline-flex; }
.tab-cel-acoes { white-space: nowrap; vertical-align: top; }
.tab-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.tab-acoes .btn-link { padding: 0; font-size: .76rem; }
.tab-acoes .link-ext { font-size: .76rem; }
/* Ausencia declarada: nao e um valor, e a falta dele. Fica visualmente
   distinta de um dado real para nao ser lida como categoria. */
.tab-ausente { color: var(--tinta-fraca); font-style: italic; }
.ent-ficha { font-size: .88rem; }
.ent-ficha .exp-sub { margin: .7rem 0 .3rem; }

.reg-detalhe { font-size: .88rem; }
.reg-detalhe .rel-label { margin-top: .5rem; }
.reg-acoes { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .5rem; }
/* Ficha dos campos que a tabela pode ter escondido por largura de tela. */
.reg-ficha {
  display: grid; grid-template-columns: max-content 1fr; gap: .1rem .6rem;
  margin: 0 0 .5rem; font-size: .82rem;
}
.reg-ficha dt { color: var(--tinta-fraca); font-weight: 600; }
.reg-ficha dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .reg-ficha { grid-template-columns: 1fr; } .reg-ficha dd { margin-bottom: .3rem; } }

/* Larguras de coluna: o nome tem espaco para respirar e o resto nao se estica
   alem do necessario, para que as colunas fiquem comparaveis entre linhas. */
.tabela-entidades .tab-cel-texto { max-width: 16rem; overflow-wrap: anywhere; }

/* Prioridade de coluna. Em tela estreita as colunas secundarias saem da tabela
   — o dado NAO se perde: continua na linha expandida, que traz o registro
   inteiro, e no atributo title da celula. E o que evita comprimir sete colunas
   num celular em vez de adaptar quantas cabem.

   p1 (sem classe) nunca sai: registro, valor, origem e a expansao.
   p2 sai so no celular; p3 e p4 saem antes, por ordem de importancia para a
   leitura de uma lista de contratacoes. */
@media (max-width: 1200px) { .tab-col-p4 { display: none; } }
@media (max-width: 1000px) { .tab-col-p3 { display: none; } }
@media (max-width: 700px) {
  .tab-col-p2 { display: none; }
  /* A coluna de origem sai junto: os mesmos links estao no topo da linha
     expandida, onde cabem sem competir por largura. */
  .tab-cel-acoes { display: none; }
}
/* O acionador da expansao gruda na borda direita enquanto a tabela rola na
   horizontal. Sem isto, no celular ele ficava fora da area visivel — e como e
   por ele que se chega ao resto dos dados, a linha virava um beco sem saida. */
.tabela-entidades th.tab-cel-exp, .tabela-entidades td.tab-cel-exp {
  position: sticky; right: 0; background: var(--superficie);
  box-shadow: -6px 0 6px -6px rgba(16, 32, 48, .18);
}
.tab-linha-exp > td { position: static; }


.rel-bloco { margin-bottom: 1.4rem; }

/* Em tela estreita a tabela rola na horizontal dentro do proprio quadro, e a
   coluna de nome encolhe o suficiente para as colunas numericas aparecerem. */
@media (max-width: 560px) {
  .tabela-entidades { font-size: .8rem; }
  .tabela-entidades th, .tabela-entidades td { padding: .35rem .4rem; }
  .tab-cel-nome { min-width: 8.5rem; max-width: 12rem; }
  .tabela-entidades .tab-cel-texto { max-width: 9rem; }
  /* No celular o identificador longo do registro fica em uma linha so, cortado
     com reticencias. O valor inteiro continua no title e na linha expandida:
     sem isso cada linha da tabela passava de 47 px para 77 px por causa dele. */
  .tab-detalhe { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Em coluna, 'flex-basis' passa a valer para a ALTURA: sem anular o flex, o
     campo de filtro estica e vira uma caixa vazia de 220px de altura. */
  .tab-controles { flex-direction: column; align-items: stretch; }
  .tab-filtro { flex: 0 0 auto; width: 100%; }
}

/* Identificadores e indicadores da localidade, ao lado do nome. */
.ident-chips { display: inline-flex; flex-wrap: wrap; gap: .35rem; margin-left: .5rem; vertical-align: middle; }
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: .2rem;
  padding: .1rem .45rem;
  font-size: .74rem;
  font-weight: 600;
  color: var(--tinta-media);
  background: var(--neutro-fundo);
  border: 1px solid var(--borda);
  border-radius: 999px;
}
.chip-info { background: var(--info-fundo); border-color: var(--info-borda); color: var(--info-tinta); font-weight: 500; }
.chip-ano { color: var(--tinta-fraca); font-weight: 400; }
@media (max-width: 560px) {
  .ident-chips { margin-left: 0; margin-top: .35rem; }
}

/* ------------------------------------------------------------------ */
/* Correlacoes na forma A -> relacao -> B                              */
/*                                                                     */
/* A tabela mostra so o que identifica cada ponta e o caminho para o    */
/* cadastro dela. Os dados cadastrais nao sao copiados para ca: eles    */
/* tem um lugar so na aplicacao, e e para la que o nome leva.           */
/* ------------------------------------------------------------------ */
.tabela-correlacoes { width: 100%; font-size: .85rem; }
.tabela-correlacoes td { vertical-align: top; }
.corr-ponta { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.corr-ponta .btn-link { padding: 0; text-align: left; }
.corr-nome { font-weight: 600; }
.corr-id { color: var(--tinta-fraca); font-size: .8rem; }
.corr-vazio { color: var(--tinta-fraca); }
.corr-rel { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; font-weight: 600; font-size: .8rem; }
.corr-seta { color: var(--tinta-fraca); }
.tabela-correlacoes .nota { margin-top: .3rem; }

@media (max-width: 700px) {
  .corr-rel { font-size: .75rem; }
  .tabela-correlacoes { font-size: .8rem; }
}