/* Painel da equipe. As cores, as fontes e as curvas vêm do tema.css, comum aos sistemas do assessorIA, e funcionam no
   claro e no escuro. Ordem: base, navegação, página, peças, gráficos, telas, entrada e celular. */

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { --altura-topo: 52px; scroll-padding-top: calc(var(--altura-topo) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte); font-size: 15px; line-height: 1.55; color: var(--texto); background: var(--chao); -webkit-font-smoothing: antialiased; }
::selection { background: var(--selecao); }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
code, pre, .mono { font-family: var(--mono); font-size: .86em; }
b, strong { font-weight: 680; }
p { margin: 0 0 12px; }
small { font-size: inherit; }
.num, .tabular { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* a tela seguinte chega deslizando de leve, e o alto e a barra de baixo ficam parados. O marcador da linha das seções e
   a bolha da barra de baixo correm até a seção nova */
@view-transition { navigation: auto; }
::view-transition-old(conteudo) { animation: some .14s var(--padrao) both; }
::view-transition-new(conteudo) { animation: chega .34s var(--chega) both; }
::view-transition-group(marcador), ::view-transition-group(titulo) { animation-duration: .42s; animation-timing-function: var(--chega); }
@keyframes some { to { opacity: 0; } }
@keyframes chega { from { opacity: 0; transform: translateY(10px); } }

.pular { position: absolute; z-index: 60; left: 16px; top: -60px; padding: 10px 14px; border-radius: 10px; background: var(--ambar); color: var(--marinho); font-weight: 700; text-decoration: none; }
.pular:focus { top: 12px; }

/* ---------- navegação ---------- */
/* o alto, no modelo do Escavador: a primeira linha, clara, com a marca, a busca no catálogo, o botão de luz e a conta,
   que rola com a página, e a linha das seções, presa no alto, com o marcador âmbar embaixo da seção atual, que corre até
   a seção nova. As duas e o conteúdo usam o mesmo miolo de 1240 px */
.topo { position: relative; z-index: 41; background: var(--superficie); view-transition-name: topo; }
.topo-dentro { display: flex; align-items: center; gap: 24px; max-width: 1240px; height: 72px; margin: 0 auto; padding: 0 32px; }
.marca { font-weight: 750; font-size: 21px; letter-spacing: -.025em; color: var(--titulo); text-decoration: none; white-space: nowrap; }
.marca span:not([class]) { color: var(--ambar); }
/* o campo da busca geral, que ocupa o meio da linha, da marca ao botão de luz, e abre a caixa da busca. A dica do atalho
   (Ctrl K, ou ⌘ K no Mac) fica antes da lupa */
.topo-busca { position: relative; flex: 1 1 auto; min-width: 0; margin: 0 8px 0 16px; }
.topo-busca input { width: 100%; height: 46px; padding: 0 112px 0 16px; border: 1px solid transparent; border-radius: 10px; background: var(--bruma); color: var(--texto); font: inherit; font-size: 15px; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
.topo-busca kbd { position: absolute; right: 46px; top: 50%; transform: translateY(-50%); pointer-events: none; }
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--borda-campo); border-radius: 6px; font: 600 11.5px var(--fonte); color: var(--suave); white-space: nowrap; }
.topo-busca input::placeholder { color: var(--suave); }
.topo-busca input:focus { outline: none; background: var(--superficie); border-color: var(--foco); box-shadow: 0 0 0 4px color-mix(in srgb, var(--foco) 16%, transparent); }
.topo-busca svg { position: absolute; right: 15px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: var(--ambar-texto); pointer-events: none; }
.topo-fim { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topo-lupa { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--suave); cursor: pointer; }
.topo-lupa svg { width: 20px; height: 20px; }
.topo .tema-botao { color: var(--suave); }
.topo .tema-botao:hover { color: var(--titulo); }
.conta-botao { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--borda); border-radius: 50%; background: var(--bruma); color: var(--titulo); font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; cursor: pointer; transition: border-color .15s; }
.conta-botao:hover { border-color: var(--borda-campo); }
.menu { position: sticky; top: 0; z-index: 40; background: var(--superficie); border-bottom: 1px solid var(--borda); view-transition-name: menu; }
.menu-dentro { display: flex; gap: 2px; max-width: 1240px; height: var(--altura-topo); margin: 0 auto; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.menu a { position: relative; display: flex; align-items: center; padding: 0 12px; color: var(--texto); font-size: 15px; font-weight: 550; text-decoration: none; white-space: nowrap; transition: color .15s; }
.menu a:hover { color: var(--titulo); }
.menu a[aria-current] { color: var(--titulo); font-weight: 700; }
.marcador { position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--ambar); view-transition-name: marcador; }
/* a linha das seções ganha sombra quando a página rola por baixo dela (animação pela rolagem, sem script) */
@supports (animation-timeline: scroll()) {
  .menu { animation: menu-sombra linear both; animation-timeline: scroll(root); animation-range: 72px 120px; }
  @keyframes menu-sombra { to { box-shadow: var(--sombra-alta); } }
}
/* a barra que corre no alto da tela enquanto a tela seguinte não chega */
body::after { content: ""; position: fixed; z-index: 70; left: 0; right: 0; top: 0; height: 2px; background: var(--ambar); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }
[data-carregando] body::after { opacity: 1; animation: progresso 8s var(--chega) forwards; }
@keyframes progresso { to { transform: scaleX(.92); } }
.icone { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.abas, .mais { display: none; }

/* a busca geral (Ctrl K): a caixa do navegador no alto da tela, com o campo, os resultados por grupo e a dica das
   teclas. Fora dela, o fundo escurece, e o clique nele fecha a caixa */
.paleta { width: min(680px, calc(100vw - 24px)); max-height: min(580px, calc(100vh - 96px)); margin: 10vh auto auto; padding: 0; overflow: hidden; border: 1px solid var(--borda); border-radius: 16px; background: var(--elevada); color: var(--texto); box-shadow: var(--sombra-alta); }
.paleta[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: surge .18s var(--chega); }
.paleta::backdrop { background: color-mix(in srgb, var(--marinho) 38%, transparent); }
.paleta-campo { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--borda); }
.paleta-campo svg { flex: none; width: 20px; height: 20px; color: var(--suave); }
.paleta-campo input { flex: 1; min-width: 0; height: 58px; border: 0; outline: none; background: none; color: var(--titulo); font: inherit; font-size: 17px; }
.paleta-resultados { overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 8px; }
.paleta-grupo h2 { margin: 12px 12px 4px; font-size: 12.5px; font-weight: 650; color: var(--suave); }
.paleta-grupo ul { margin: 0; padding: 0; list-style: none; }
.paleta-grupo a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 12px; border-radius: 10px; color: var(--titulo); text-decoration: none; }
.paleta-grupo a:hover, .paleta-grupo a:focus { outline: none; background: color-mix(in srgb, var(--titulo) 8%, transparent); }
.paleta-grupo a:focus { box-shadow: inset 3px 0 0 var(--ambar); }
.paleta-grupo a span { overflow-wrap: anywhere; }
.paleta-grupo small { flex: none; font-size: 12.5px; color: var(--suave); }
.paleta-grupo .mono { font-size: 13.5px; }
.paleta-vazio { margin: 0; padding: 18px 12px; color: var(--suave); }
.paleta-dica { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 10px 16px; border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--suave); }
@media (hover: none) {
  .paleta-dica, .paleta-campo kbd, .topo-busca kbd { display: none; }
  .paleta-campo input { font-size: 16px; }
}

/* o rodapé de toda tela, como o do Escavador: as seções, a marca e a linha de quem é o painel */
.rodape { border-top: 1px solid var(--borda); background: var(--superficie); }
.rodape-dentro { display: grid; gap: 22px; max-width: 1240px; margin: 0 auto; padding: 34px 32px 40px; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.rodape nav a { color: var(--texto); font-size: 14.5px; text-decoration: none; }
.rodape nav a:hover { color: var(--titulo); text-decoration: underline; }
.rodape p { display: grid; justify-items: start; gap: 8px; margin: 0; font-size: 13.5px; color: var(--suave); }
.rodape .marca { font-size: 19px; }

/* a barra de baixo do celular: as quatro seções principais e o "Mais", com o nome embaixo de cada ícone. A seção atual
   sobe numa bolha âmbar, encaixada num recorte da barra, e corre até a seção nova na troca de página, pela mesma
   transição do marcador da barra lateral. O recorte é uma máscara no fundo da barra, que fica num pseudo-elemento para
   não cortar a bolha junto */
@media (max-width: 680px) {
  .abas { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); color: var(--topo-link); view-transition-name: abas; }
  .abas::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--topo); }
  .abas[data-ativo]::before { --x: calc(env(safe-area-inset-left) + (var(--i) + .5) * (100% - env(safe-area-inset-left) - env(safe-area-inset-right)) / var(--n));
    -webkit-mask: radial-gradient(circle 33px at var(--x) 0, #0000 32px, #000 33px); mask: radial-gradient(circle 33px at var(--x) 0, #0000 32px, #000 33px); }
  .abas a, .abas button { position: relative; display: grid; grid-template-rows: 32px auto; justify-items: center; align-content: center; gap: 3px; height: 64px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .aba-icone { display: grid; place-items: center; width: 56px; height: 32px; border-radius: 16px; transition: background .15s; }
  .abas a:active .aba-icone, .abas button:active .aba-icone { background: var(--topo-fraco); }
  .aba-nome { grid-row: 2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .abas [aria-current], .abas [data-atual] { color: var(--topo-texto); }
  .abas [aria-current] .aba-icone, .abas [data-atual] .aba-icone { position: absolute; top: -26px; left: 50%; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; background: var(--ambar); color: var(--marinho); box-shadow: 0 8px 18px rgba(4, 12, 25, .32); view-transition-name: marcador; }
  .abas [aria-current] .icone, .abas [data-atual] .icone { stroke-width: 2; }
  /* o "Mais" abre por cima da barra (popover do navegador), com o fundo escurecido */
  .mais:popover-open { position: fixed; inset: auto 12px calc(80px + env(safe-area-inset-bottom)) 12px; display: grid; gap: 2px; width: auto; margin: 0; padding: 8px; border: 1px solid var(--borda); border-radius: 18px; background: var(--elevada); color: var(--texto); box-shadow: var(--sombra-alta); animation: sobe .2s var(--chega); }
  .mais::backdrop { background: color-mix(in srgb, var(--marinho) 32%, transparent); }
  .mais a { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: 12px; color: var(--texto); font-size: 16px; text-decoration: none; }
  .mais a:hover { background: var(--bruma); }
  .mais a[aria-current] { background: var(--bruma); color: var(--titulo); font-weight: 700; box-shadow: inset 3px 0 0 var(--ambar); }
}
@keyframes sobe { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* a conta abre por cima da tela (popover do navegador), no canto do avatar */
.conta { position: fixed; inset: 66px max(16px, calc((100vw - 1240px) / 2 + 24px)) auto auto; margin: 0; width: 290px; padding: 6px; border: 1px solid var(--borda); border-radius: 16px; background: var(--elevada); color: var(--texto); box-shadow: var(--sombra-alta); }
.conta:popover-open { animation: surge .2s var(--chega); }
@keyframes surge { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.conta-quem { margin: 0 0 6px; padding: 12px 12px 14px; border-bottom: 1px solid var(--borda); }
.conta-quem b { display: block; font-size: 14px; font-weight: 680; color: var(--titulo); overflow-wrap: anywhere; }
.conta-quem span { display: block; margin-top: 2px; font-size: 13px; color: var(--suave); }
.conta a, .conta button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: var(--texto); font: inherit; font-size: 14.5px; text-align: left; text-decoration: none; cursor: pointer; }
.conta a:hover, .conta button:hover { background: var(--bruma); }
.conta form { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--borda); }

/* ---------- página ---------- */
#conteudo { max-width: 1240px; margin: 0 auto; padding: 40px 32px 72px; view-transition-name: conteudo; }
.cabeca { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 32px; margin: 0 0 34px; }
.cabeca > * { grid-column: 1; }
.cabeca > .acoes { grid-column: 2; grid-row: 1 / span 4; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.trilha { margin: 0 0 10px; font-size: 13.5px; font-weight: 550; color: var(--suave); }
.trilha a { color: inherit; text-decoration: none; }
.trilha a:hover { color: var(--titulo); text-decoration: underline; }
.trilha span { margin: 0 6px; opacity: .55; }
#conteudo h1 { margin: 0; font-size: clamp(30px, 2.4vw + 8px, 42px); font-weight: 760; line-height: 1.06; letter-spacing: -.028em; color: var(--titulo); text-wrap: balance; view-transition-name: titulo; }
h1 code { font-size: .78em; letter-spacing: -.01em; }
.cabeca .sub { margin: 12px 0 0; max-width: 72ch; font-size: 15.5px; color: var(--suave); text-wrap: pretty; }
.sub, .nota-baixa { color: var(--suave); }
.nota-baixa { font-size: 13.5px; margin-top: 12px; }

.secao { margin-top: 44px; }
.secao-cabeca { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; margin: 0 0 16px; }
.secao-cabeca > div { max-width: 78ch; }
h2 { margin: 0; font-size: 19px; font-weight: 720; letter-spacing: -.014em; line-height: 1.25; color: var(--titulo); }
h2 small { margin-left: 8px; font-size: 14px; font-weight: 600; color: var(--suave); letter-spacing: 0; }
.secao-cabeca p { margin: 4px 0 0; font-size: 14px; color: var(--suave); text-wrap: pretty; }
h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--titulo); }

/* ---------- peças ---------- */
.painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; box-shadow: var(--sombra); }
.recheado { padding: 20px 22px; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; background: var(--botao); color: var(--botao-texto); font: inherit; font-size: 14.5px; font-weight: 650; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .16s var(--chega), filter .15s, background .15s, border-color .15s; }
.botao:hover { filter: brightness(1.12); text-decoration: none; }
.botao:active { transform: scale(.97); }
.botao.secundario { background: var(--superficie); color: var(--titulo); border-color: var(--borda-campo); }
.botao.secundario:hover { filter: none; background: var(--bruma); }
.botao svg { width: 17px; height: 17px; flex: none; }

/* os dois formatos de cada tabela, lado a lado */
.baixar { display: inline-flex; gap: 6px; white-space: nowrap; }
.baixar a { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border: 1px solid var(--borda); border-radius: 7px; background: var(--superficie); color: var(--link); font-size: 12.5px; font-weight: 650; text-decoration: none; transition: background .15s, border-color .15s; }
.baixar a:hover { background: var(--bruma); border-color: var(--borda-campo); }

.situacao, .etiqueta { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--bruma); color: var(--suave); font-size: 12px; font-weight: 650; line-height: 1; white-space: nowrap; }
.situacao[data-situacao="em coleta"], .etiqueta[data-tom="ok"] { color: var(--ok); background: var(--ok-fundo); }
.situacao[data-situacao="acesso confirmado"], .etiqueta[data-tom="marca"] { color: var(--titulo); background: color-mix(in srgb, var(--dado) 14%, transparent); }
.situacao[data-situacao="a verificar"], .etiqueta[data-tom="atencao"] { color: var(--atencao); background: var(--atencao-fundo); }

/* números de destaque, lado a lado num painel, com a unidade menor */
/* as linhas entre as células saem da sombra de cada uma, e as da borda do painel ficam cortadas: funciona com qualquer
   número de colunas */
.numeros, .ficha-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; overflow: clip; }
.numeros > div, .ficha-grade > div { min-width: 0; box-shadow: -1px 0 0 var(--borda), 0 -1px 0 var(--borda); }
.numeros > div { padding: 18px 22px 20px; }
.numeros dt { font-size: 13px; font-weight: 600; color: var(--suave); }
.numeros dd { margin: 6px 0 0; font-size: 32px; font-weight: 760; line-height: 1.05; letter-spacing: -.03em; color: var(--titulo); font-variant-numeric: tabular-nums; }
.numeros dd small { margin-left: 4px; font-size: 15px; font-weight: 550; letter-spacing: 0; color: var(--suave); }
.numeros dd a { color: inherit; text-decoration: none; }
.numeros dd a:hover { text-decoration: underline; }
.numeros p { margin: 6px 0 0; font-size: 13.5px; color: var(--suave); }
.numeros .barra { height: 4px; margin-top: 12px; }

.barra { position: relative; height: 6px; border-radius: 6px; background: var(--dado-fundo); overflow: hidden; }
.barra > span { position: absolute; inset: 0 auto 0 0; width: var(--parte); border-radius: inherit; background: var(--dado); transform-origin: left; animation: cresce .8s var(--chega) both; }
.barra[data-tom="atencao"] > span { background: var(--ambar); }
@keyframes cresce { from { transform: scaleX(0); } }

/* tabelas: num painel, com a linha de cabeçalho presa embaixo do topo enquanto a tabela rola */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--borda); }
th { font-size: 12.5px; font-weight: 650; color: var(--suave); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra); overflow: clip; }
.tabela table { font-size: 14.5px; }
.tabela th { position: sticky; top: var(--altura-topo); z-index: 1; padding: 12px 16px 10px; background: var(--superficie); box-shadow: inset 0 -1px 0 var(--borda); border-bottom: 0; }
.tabela td { padding: 12px 16px; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background .12s; }
.tabela tbody tr:hover { background: color-mix(in srgb, var(--bruma) 60%, transparent); }
.tabela td code, .tabela td .mono { color: var(--titulo); }
.tabela a { font-weight: 600; text-decoration: none; }
.tabela a:hover { text-decoration: underline; }
.tabela .baixar a { font-weight: 650; }
.tabela-vazia td { padding: 22px 16px; color: var(--suave); text-align: center; }

.ficha { display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; margin: 0; }
.ficha dt { color: var(--suave); font-size: 14px; }
.ficha dd { margin: 0; }

/* filtros: formulário GET, numa faixa só */
.filtros { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 0 0 18px; padding: 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra); }
.filtros label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--suave); }
/* a caixa de seleção cabe no espaço da linha, mesmo com a opção mais longa (o nome de urna de um deputado) */
.filtros label { grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; }
.filtros label.cresce { flex: 1 1 260px; }
.filtros select { width: 100%; }
.filtros input, .filtros select, .campo-solto { height: 40px; padding: 0 12px; font: inherit; font-size: 14.5px; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda-campo); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.filtros input:focus, .filtros select:focus, .campo-solto:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 4px color-mix(in srgb, var(--foco) 18%, transparent); }
.filtros input[type="search"] { width: 100%; }
.filtros .limpar { align-self: center; margin-top: 18px; font-size: 14px; font-weight: 600; }

/* avisos do Django (o que o papel não permite): chegam no canto, somem sozinhos e param com o mouse em cima */
.recados { position: fixed; z-index: 50; top: calc(var(--altura-topo) + 14px); right: 18px; display: grid; gap: 10px; width: min(400px, calc(100vw - 32px)); }
.recado { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 14px 10px 16px 16px; overflow: hidden; border: 1px solid var(--borda); border-radius: 14px; background: var(--elevada); box-shadow: var(--sombra-alta); animation: recado-entra .36s var(--chega) both, recado-sai .3s var(--padrao) 9s forwards; }
.recado::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ambar); transform-origin: left; animation: recado-tempo 9s linear forwards; }
.recado:hover, .recado:hover::after { animation-play-state: paused; }
.recado p { margin: 0; flex: 1; font-size: 14.5px; font-weight: 550; color: var(--titulo); }
.recado button { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: -4px 0 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--suave); cursor: pointer; }
.recado button:hover { background: var(--bruma); color: var(--titulo); }
.recado svg { width: 16px; height: 16px; }
@keyframes recado-entra { from { opacity: 0; transform: translateX(24px); } }
@keyframes recado-sai { to { opacity: 0; transform: translateY(-6px); visibility: hidden; } }
@keyframes recado-tempo { to { transform: scaleX(0); } }

.vazio { margin: 0; padding: 18px 20px; border: 1px dashed var(--borda-campo); border-radius: 14px; color: var(--suave); }
.vazio b { color: var(--titulo); }

.copiar { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--borda-campo); border-radius: 8px; background: var(--superficie); color: var(--titulo); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; transition: background .15s; }
.copiar:hover { background: var(--bruma); }
.copiar[data-copiado] { color: var(--ok); border-color: currentColor; }

/* o esqueleto da tela seguinte, com a forma dela, e o brilho que varre da esquerda para a direita */
.esq { position: relative; overflow: hidden; border-radius: 10px; background: var(--esqueleto); }
.esq::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--brilho), transparent); animation: varre 1.5s infinite; }
@keyframes varre { to { transform: translateX(100%); } }
.esq-linha { height: 14px; margin: 10px 0 0; border-radius: 7px; }
.esq-titulo { height: 38px; width: 42%; border-radius: 10px; }
.esq-trilha { height: 12px; width: 18%; margin-bottom: 14px; }
.esqueleto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.esqueleto .cabeca { margin-bottom: 18px; }
.esqueleto .painel { box-shadow: none; }
.esq-numero { height: 30px; width: 42%; margin-top: 12px; border-radius: 8px; }
.esq-h2 { height: 20px; width: 200px; margin-top: 28px; border-radius: 6px; }
.esq-mapa { width: 100%; max-width: 290px; aspect-ratio: 88.5 / 100; margin: 0 auto; border-radius: 22px; }
.esq-cartao { display: flex; flex-direction: column; gap: 16px; height: 338px; padding: 20px 22px; }
.esq-tempo { display: grid; gap: 10px; padding-left: 84px; }
.esq-meio { justify-content: center; }
.esq-quadro { height: 196px; border-radius: 16px; }
/* várias linhas num elemento só: as barras saem de um gradiente que se repete, com o mesmo brilho por cima */
.esq-lista { position: relative; overflow: hidden; height: calc(var(--n, 6) * 46px + 22px); }
.esq-lista::before { content: ""; position: absolute; inset: 18px 22px; background: repeating-linear-gradient(180deg, var(--esqueleto) 0 14px, transparent 14px 46px); }
.esq-lista.alta { height: calc(var(--n, 6) * 72px + 22px); }
.esq-lista.alta::before { background: repeating-linear-gradient(180deg, var(--esqueleto) 0 14px, transparent 14px 72px), repeating-linear-gradient(180deg, transparent 0 24px, var(--esqueleto) 24px 36px, transparent 36px 72px) 0 0 / 58% 100% no-repeat; }
.esq-lista.solta { height: calc(var(--n, 6) * 36px); }
.esq-lista.solta::before { inset: 0; background: repeating-linear-gradient(180deg, var(--esqueleto) 0 28px, transparent 28px 36px); border-radius: 0; }
.esq-lista::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--brilho), transparent); animation: varre 1.5s infinite; }

/* ---------- gráficos ---------- */
/* a dica dos mapas, posta pelo navegacao.js perto do mouse */
.dica { position: fixed; left: 0; top: 0; z-index: 60; max-width: 300px; padding: 8px 11px; border-radius: 10px; background: var(--titulo); color: var(--superficie); box-shadow: var(--sombra-alta); font-size: 13px; font-weight: 600; line-height: 1.4; white-space: pre-line; pointer-events: none; transform: translate(14px, 18px); }
/* Sergipe com um caminho por município (sergipe.svg, usado com <use>): a cor vem da faixa de cada um */
.mapa { display: block; width: 100%; height: auto; overflow: visible; }
.mapa use { fill: var(--dado-fundo); stroke: var(--superficie); stroke-width: .3; stroke-linejoin: round; transition: opacity .2s, fill .2s; }
.mapa:hover use:not(.mapa-escolhido) { opacity: .5; }
.mapa use:hover, .mapa a:hover use { opacity: 1; stroke: var(--titulo); stroke-width: .7; }
.mapa [data-faixa="completo"] { fill: var(--dado); }
.mapa [data-faixa="quase"] { fill: var(--escala-3); }
.mapa [data-faixa="atras"] { fill: var(--ambar); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--suave); }
.legenda li { display: inline-flex; align-items: center; gap: 7px; }
.legenda li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--dado-fundo); }
.legenda b { margin-right: -3px; color: var(--titulo); }
.cobertura-mapa .legenda { display: grid; gap: 6px; font-size: 13.5px; }
.legenda [data-faixa="completo"]::before { background: var(--dado); }
.legenda [data-faixa="quase"]::before { background: var(--escala-3); }
.legenda [data-faixa="atras"]::before { background: var(--ambar); }

/* ---------- telas ---------- */
/* Início: o que pede atenção num painel com a borda âmbar, cada ponto com o link para ele */
.atencao { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin: 18px 0 0; padding: 14px 20px 15px; border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); box-shadow: inset 3px 0 0 var(--ambar), var(--sombra); }
.atencao h2 { font-size: 15px; }
.atencao ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.atencao li { position: relative; padding-left: 14px; font-size: 14.5px; }
.atencao li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ambar); }
.atencao code { overflow-wrap: anywhere; }
/* as seções em quadros do mesmo tamanho, alinhados em fileiras, cada um com a foto de um lugar de Sergipe (--foto)
   levemente sombreada e, embaixo, onde o véu escurece, o nome da seção e uma linha */
.quadros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.quadro { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-height: 196px; padding: 20px 22px; overflow: hidden; border-radius: 16px; color: var(--topo-texto); text-decoration: none;
  background: linear-gradient(180deg, rgba(4, 12, 25, .08) 35%, rgba(4, 12, 25, .78) 100%), var(--foto) center / cover, var(--marinho);
  box-shadow: var(--sombra); transition: transform .22s var(--chega), box-shadow .22s; }
.quadro:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); text-decoration: none; }
.quadro:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; }
.quadro h3 { margin: 0; font-size: 21px; font-weight: 750; letter-spacing: -.015em; color: var(--topo-texto); text-shadow: 0 1px 3px rgba(4, 12, 25, .55); }
.quadro p { margin: 0; font-size: 14px; color: var(--topo-texto); text-shadow: 0 1px 3px rgba(4, 12, 25, .55); }

/* o que pede atenção, com as linhas que cada teste pegou, na página da versão */
.alertas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.alerta { padding: 16px 20px 18px; border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); box-shadow: inset 3px 0 0 var(--ambar), var(--sombra); }
.alerta h3 { margin: 0; font-size: 15.5px; line-height: 1.4; }
.alerta code { overflow-wrap: anywhere; }
.alerta h3 a { color: inherit; }
.alerta p { margin: 4px 0 0; color: var(--suave); }
.alerta .tabela { margin-top: 14px; box-shadow: none; max-width: 640px; }
.alerta .tabela th { position: static; }

/* a cobertura dos indicadores, na tela Indicadores: o mapa dos municípios em dia e cada indicador */
.cobertura { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); }
.cobertura-mapa { margin: 0; padding: 24px 26px; border-right: 1px solid var(--borda); display: grid; gap: 18px; align-content: start; }
.cobertura-mapa .mapa { max-width: 290px; margin: 0 auto; }
.cobertura-mapa p { margin: 10px 0 0; font-size: 13.5px; color: var(--suave); text-wrap: pretty; }
.cobertura-lista { list-style: none; margin: 0; padding: 6px 0; }
.cobertura-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto 76px; align-items: baseline; gap: 6px 18px; padding: 11px 24px 12px; border-bottom: 1px solid var(--borda); }
.cobertura-lista li:last-child { border-bottom: 0; }
.cobertura-lista a { font-weight: 600; color: var(--titulo); text-decoration: none; }
.cobertura-lista a:hover { text-decoration: underline; }
.cobertura-periodo { font-size: 13px; color: var(--suave); white-space: nowrap; }
.cobertura-conta { font-size: 13px; color: var(--suave); text-align: right; white-space: nowrap; }
.cobertura-conta b { font-size: 14.5px; color: var(--titulo); }
.cobertura-lista .barra { grid-column: 1 / -1; height: 4px; margin-top: 2px; }
.barra[data-tom="parcial"] > span { background: var(--escala-3); }

/* as fontes, com o ciclo até a próxima coleta, nas Versões, no Conjunto e na Versão */
.fontes { list-style: none; margin: 0; padding: 4px 0; }
.fontes li { display: grid; grid-template-columns: minmax(0, 1fr) 92px 96px 160px; grid-template-areas: "nome ritmo barra quando" "detalhe detalhe detalhe detalhe"; align-items: center; gap: 0 14px; padding: 11px 20px; border-bottom: 1px solid var(--borda); }
.fontes a { grid-area: nome; }
.fonte-ritmo { grid-area: ritmo; }
.fontes .barra { grid-area: barra; }
.fonte-quando { grid-area: quando; }
.fonte-detalhe { grid-area: detalhe; margin-top: 4px; font-size: 13px; color: var(--suave); }
.fontes li:last-child { border-bottom: 0; }
.fontes a { font-size: 13.5px; font-weight: 500; color: var(--titulo); text-decoration: none; overflow-wrap: anywhere; }
.fontes a:hover { text-decoration: underline; }
.fonte-ritmo, .fonte-quando { font-size: 13px; color: var(--suave); }
.fonte-quando { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fontes .barra { height: 5px; }
.fontes [data-estado="folga"] .barra > span, .fontes [data-estado="atrasada"] .barra > span { background: var(--ambar); }
.fontes [data-estado="atrasada"] .fonte-quando { color: var(--atencao); font-weight: 700; }
.fontes .vazio { display: block; margin: 12px; }

/* Conjunto */
.marcas { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }
.etiqueta[data-tom="briefing"] { color: var(--ambar-texto); background: var(--atencao-fundo); }
.ficha-grade { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ficha-grade > div { padding: 16px 20px 18px; }
.ficha-grade dt { font-size: 12.5px; font-weight: 600; color: var(--suave); }
.ficha-grade dd { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--titulo); overflow-wrap: anywhere; }
.ficha-grade code { font-weight: 500; }
.nota { margin: 36px 0 0; padding: 16px 20px; border-radius: 14px; background: var(--bruma); color: var(--texto); }
/* o caminho das tabelas, uma parada por camada, numa linha que desce até o briefing */
.metro { list-style: none; margin: 0; padding: 10px 0; --x: 190px; }
.metro > li { position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 0 52px; padding: 9px 24px; }
.metro > li::before { content: ""; position: absolute; left: var(--x); top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--borda-campo); }
.metro > li:first-child::before { top: 24px; }
.metro > li:last-child::before { bottom: auto; height: 24px; }
.metro > li::after { content: ""; position: absolute; left: var(--x); top: 18px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--superficie); box-shadow: inset 0 0 0 2.5px var(--dado); }
.metro > li:has([data-tom="briefing"])::after { box-shadow: inset 0 0 0 6px var(--ambar); }
.metro-camada { padding-top: 4px; font-size: 13px; font-weight: 650; color: var(--suave); text-align: right; }
.metro ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.metro ul li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 32px; }
.metro ul .mono { font-size: 13.5px; font-weight: 500; color: var(--titulo); text-decoration: none; }
.metro ul .mono:hover { text-decoration: underline; }
.metro .baixar { margin-left: auto; }

/* Indicador: a fórmula como fração, a receita em passos e o exemplo de um município entre os outros */
.formula { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.formula-conta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 28px 32px; }
.fracao { display: inline-grid; justify-items: center; font-size: 21px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; color: var(--titulo); text-align: center; }
.fracao > span:first-child { padding: 0 10px 8px; }
.fracao > span:last-child { padding: 8px 10px 0; border-top: 2px solid var(--titulo); justify-self: stretch; }
.formula-vezes { font-size: 21px; font-weight: 650; color: var(--suave); white-space: nowrap; }
.formula-publicada { margin: 0; font-size: 21px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; color: var(--titulo); }
.formula-publicada small { display: block; margin-top: 4px; font-size: 14.5px; font-weight: 500; letter-spacing: 0; color: var(--suave); }
.formula-ficha { display: grid; gap: 12px; margin: 0; padding: 24px 28px; border-left: 1px solid var(--borda); align-content: center; }
.formula-ficha > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.formula-ficha dt { font-size: 13px; color: var(--suave); padding-top: 1px; }
.formula-ficha dd { margin: 0; font-size: 14.5px; color: var(--texto); }

.passos { list-style: none; margin: 0; padding: 8px 0; counter-reset: passo; }
.passos li { position: relative; padding: 14px 28px 14px 76px; counter-increment: passo; }
.passos li::before { content: counter(passo); position: absolute; left: 26px; top: 13px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bruma); color: var(--titulo); font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.passos li::after { content: ""; position: absolute; left: 39px; top: 45px; bottom: -13px; width: 2px; background: var(--bruma); }
.passos li:last-child::after { display: none; }
.passos li:last-child::before { background: var(--titulo); color: var(--superficie); }
.passos h3 { margin: 0 0 2px; font-size: 15px; }
.passos p { margin: 0; color: var(--texto); max-width: 82ch; }

.escolha { display: flex; align-items: end; gap: 10px; margin: 0; }
.escolha label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--suave); }
.escolha select { min-width: 240px; }

.exemplo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.exemplo-conta { padding: 24px 26px; margin: 0; }
.exemplo-onde { margin: 0; font-size: 14.5px; color: var(--suave); }
.exemplo-onde b { color: var(--titulo); }
.exemplo-valor { margin: 8px 0 18px; font-size: 52px; font-weight: 760; line-height: 1; letter-spacing: -.035em; color: var(--titulo); font-variant-numeric: tabular-nums; }
.exemplo-valor small { margin-left: 10px; font-size: 16px; font-weight: 550; letter-spacing: 0; color: var(--suave); }
.exemplo-passos { margin: 0; display: grid; }
.exemplo-passos > div { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 4px 18px; padding: 11px 0; border-top: 1px solid var(--borda); }
.exemplo-passos dt { font-size: 13.5px; color: var(--suave); }
.exemplo-passos dd { margin: 0; color: var(--texto); }
.exemplo-passos .num { color: var(--titulo); }
.exemplo-passos [data-tom="atencao"] dd { color: var(--atencao); font-weight: 650; }
/* a régua da posição, do 1º ao último */
.regua { grid-column: 2; position: relative; height: 6px; margin: 8px 0 2px; border-radius: 6px; background: linear-gradient(90deg, var(--dado), var(--dado-fundo)); }
.regua span { position: absolute; left: var(--x); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 0 3px var(--superficie); }

.exemplo-mapa { margin: 0; padding: 22px 24px; display: grid; gap: 14px; align-content: start; }
.exemplo-mapa .mapa { max-width: 330px; margin: 0 auto; }
.mapa-valores [data-faixa="1"] { fill: var(--escala-1); }
.mapa-valores [data-faixa="2"] { fill: var(--escala-2); }
.mapa-valores [data-faixa="3"] { fill: var(--escala-3); }
.mapa-valores [data-faixa="4"] { fill: var(--escala-4); }
.mapa-valores [data-faixa="5"] { fill: var(--escala-5); }
.mapa .mapa-escolhido { fill: none; stroke: var(--ambar); stroke-width: 1.4; pointer-events: none; opacity: 1; }
.escala { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 12.5px; color: var(--suave); font-variant-numeric: tabular-nums; }
.escala span:first-child { margin-right: 8px; }
.escala span:last-child { margin-left: 8px; }
.escala i { width: 26px; height: 9px; border-radius: 2px; background: var(--dado-fundo); }
.escala [data-faixa="1"] { background: var(--escala-1); }
.escala [data-faixa="2"] { background: var(--escala-2); }
.escala [data-faixa="3"] { background: var(--escala-3); }
.escala [data-faixa="4"] { background: var(--escala-4); }
.escala [data-faixa="5"] { background: var(--escala-5); }

.exemplo-distribuicao { grid-column: 1 / -1; margin: 0; padding: 20px 28px 18px; container-type: inline-size; }
.exemplo-distribuicao figcaption { margin-bottom: 14px; font-size: 13.5px; color: var(--suave); }
/* cada município é um ponto, empilhado na coluna do seu valor. A coluna tem a largura do ponto mais a folga de 2 px,
   para os pontos encostarem uns nos outros, e a pilha mais alta cabe em 200 px, com os pontos sobrepostos quando ela
   passa disso (o anel da cor da superfície separa um do outro). Na largura do celular, as colunas são menos e mais largas */
.pontos { --colunas: 80; --altura: var(--altura-larga); --d: calc((100cqw - 16px) / var(--colunas)); --passo: min(var(--d), 200px / var(--altura)); --tam: clamp(6px, var(--d) - 2px, 12px); position: relative; height: calc(var(--altura) * var(--passo) + 44px); margin: 0 8px; }
.ponto { position: absolute; left: var(--x); bottom: calc(var(--y) * var(--passo)); width: var(--tam); height: var(--tam); margin-left: calc(var(--tam) / -2); border-radius: 50%; background: var(--dado); box-shadow: 0 0 0 1.5px var(--superficie); transition: transform .15s var(--chega); animation: ponto-chega .5s var(--chega) both; animation-delay: calc(var(--y) * 25ms); }
@container (width < 600px) {
  .pontos { --colunas: 30; --altura: var(--altura-estreita); }
  .ponto { left: var(--x2); bottom: calc(var(--y2) * var(--passo)); animation-delay: calc(var(--y2) * 25ms); }
  .pontos-eixo .eixo-valor { display: none; }
}
.ponto:hover { transform: scale(1.45); z-index: 3; }
.ponto.escolhido { z-index: 2; background: var(--ambar); box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--ambar); }
/* a dica do ponto só existe com o mouse em cima, para não alargar a página perto da borda */
.ponto:hover::after { content: attr(data-rotulo); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) scale(.69); transform-origin: bottom; padding: 5px 9px; border-radius: 8px; background: var(--titulo); color: var(--superficie); font-size: 18px; font-weight: 650; white-space: nowrap; pointer-events: none; }
@keyframes ponto-chega { from { opacity: 0; transform: translateY(-14px); } }
.pontos-linha { position: absolute; left: var(--x); top: 0; bottom: 0; border-left: 1.5px dashed var(--suave); }
.pontos-linha span { position: absolute; top: -2px; left: 7px; font-size: 12px; font-weight: 650; color: var(--suave); white-space: nowrap; }
.pontos-linha[data-lado="esquerda"] span { left: auto; right: 7px; }
.pontos-linha.limite { border-left-color: var(--ambar); }
.pontos-linha.limite span { top: 16px; color: var(--ambar-texto); }
.pontos-eixo { position: relative; display: flex; justify-content: space-between; margin: 6px 8px 0; padding-top: 8px; border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--suave); font-variant-numeric: tabular-nums; }
/* os valores redondos do eixo, cada um com o seu risco na linha */
.pontos-eixo .eixo-valor { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.pontos-eixo .eixo-valor::before { content: ""; position: absolute; left: 50%; top: -8px; height: 5px; border-left: 1px solid var(--borda-campo); }
.notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.notas li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 40px; align-items: center; gap: 12px; }
.notas b { font-size: 15px; color: var(--titulo); }
.notas .num { text-align: right; color: var(--suave); }
.notas .barra { height: 10px; }
.notas [data-escolhida] .barra > span { background: var(--ambar); }

/* Indicadores: um cartão por indicador, com a fórmula e os municípios em miniatura */
.indicadores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.indicador-cartao { display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 20px 22px 16px; color: inherit; text-decoration: none; transition: transform .22s var(--chega), box-shadow .22s, border-color .22s; }
.indicador-cartao:hover { position: relative; z-index: 2; transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: var(--borda-campo); }
.indicador-nome { font-size: 16.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--titulo); }
.indicador-formula { display: flex; align-items: center; gap: 10px; min-height: 50px; font-size: 14px; color: var(--suave); }
.fracao.pequena { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--texto); }
.fracao.pequena > span:first-child { padding: 0 6px 4px; }
.fracao.pequena > span:last-child { padding: 4px 6px 0; border-top-width: 1.5px; border-top-color: var(--suave); }
.indicador-formula .formula-vezes { font-size: 13px; font-weight: 600; }
.mini-legenda { margin: auto 0 -8px; font-size: 12px; color: var(--suave); }
/* as barras do cartão, com 16 px em cima para o rótulo do estado. A coluna inteira é a área do mouse, e a barra é
   desenhada dentro dela, para a dica abrir também na faixa de um município só */
.barras-mini { position: relative; display: flex; gap: 2px; height: 80px; padding-top: 16px; }
.barras-mini i { position: relative; flex: 1; }
.barras-mini i::before { content: ""; position: absolute; inset: auto 0 0; height: var(--h); border-radius: 2px 2px 0 0; background: var(--dado); opacity: .8; }
.barras-mini i[data-rotulo]:hover::before { opacity: 1; }
.barras-mini i[data-rotulo]:hover::after { content: attr(data-rotulo); position: absolute; left: 50%; bottom: calc(var(--h) + 6px); z-index: 3; transform: translateX(-50%); padding: 4px 8px; border-radius: 7px; background: var(--titulo); color: var(--superficie); font: 650 12px/1.3 var(--fonte); white-space: nowrap; pointer-events: none; }
/* nas pontas, a dica se alinha à borda da barra, para não sair do cartão */
.barras-mini i:nth-of-type(-n+8):hover::after { left: 0; transform: none; }
.barras-mini i:nth-last-of-type(-n+8):hover::after { left: auto; right: 0; transform: none; }
.barras-estado { position: absolute; left: var(--x); top: 0; bottom: 0; z-index: 1; border-left: 1.5px dashed var(--suave); pointer-events: none; }
.barras-estado span { position: absolute; top: -2px; left: 5px; font-size: 11px; font-weight: 650; color: var(--suave); white-space: nowrap; }
.barras-estado[data-lado="esquerda"] span { left: auto; right: 5px; }
.pontos-eixo.mini { margin: 0; padding-top: 6px; font-size: 12px; }
.notas-mini { display: flex; align-items: flex-end; gap: 6px; height: 80px; }
.notas-mini > span { flex: 1; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 4px; height: 100%; }
.notas-mini i { align-self: end; width: 100%; height: var(--h); min-height: 2px; border-radius: 3px 3px 0 0; background: var(--dado); opacity: .75; }
.notas-mini b { font-size: 11.5px; font-weight: 650; color: var(--suave); }
.indicador-rodape { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--suave); }

.entradas { list-style: none; margin: 0; padding: 4px 0; }
.entradas li { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 8px 20px; padding: 12px 20px; border-bottom: 1px solid var(--borda); }
.entradas li:last-child { border-bottom: 0; }
.entradas code { font-size: 13.5px; color: var(--titulo); }
.entradas span:not(.baixar) { color: var(--texto); font-size: 14.5px; }

/* Briefing: os números de cada página à esquerda e as páginas do PDF à direita */
.briefing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: 28px; align-items: start; }
.briefing-numeros { min-width: 0; }
/* como a capa do PDF: azul-marinho nos dois temas */
.briefing-capa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; padding: 26px 28px; border: 0; color: var(--topo-texto); background: radial-gradient(130% 160% at 100% 0%, var(--marinho-claro) 0%, var(--marinho) 58%); }
.briefing-capa h2 { margin: 6px 0 8px; font-size: 36px; font-weight: 760; line-height: 1.04; letter-spacing: -.028em; color: var(--topo-texto); }
.briefing-para, .briefing-versao { margin: 0; font-size: 14px; color: var(--topo-link); }
.briefing-para { font-weight: 650; }
.briefing-capa .botao { background: var(--ambar); color: var(--marinho); }
.briefing-capa .botao:focus-visible { outline-color: var(--ambar); }
.briefing-capa > div { flex: 1 1 300px; min-width: 0; }
/* a largura do botão não muda quando o texto troca para "Gerando o PDF…" */
.briefing-capa .botao { min-width: 168px; }
.briefing-capa .botao[aria-busy="true"] { cursor: progress; background: linear-gradient(90deg, var(--ambar) 30%, color-mix(in srgb, var(--ambar) 70%, var(--papel)) 50%, var(--ambar) 70%) 0 0 / 300% 100%; animation: gerando 1.2s linear infinite; }
@keyframes gerando { from { background-position: 100% 0; } to { background-position: 0 0; } }
.conferir { list-style: none; margin: 0; padding: 4px 0; }
.conferir li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rotulo valor" "fonte fonte"; align-items: baseline; gap: 2px 18px; padding: 12px 20px; border-bottom: 1px solid var(--borda); }
.conferir li:last-child, .conferir li:has(+ .conferir-bloco) { border-bottom: 0; }
.conferir-rotulo { grid-area: rotulo; font-weight: 600; color: var(--titulo); }
a.conferir-rotulo { text-decoration: none; }
a.conferir-rotulo:hover { text-decoration: underline; }
.conferir-valor { grid-area: valor; font-size: 16px; font-weight: 720; color: var(--titulo); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.conferir-fonte { grid-area: fonte; font-size: 13px; color: var(--suave); }
.conferir-fonte code { font-size: 12px; }
.conferir li.conferir-bloco { display: block; padding: 18px 20px 4px; font-size: 13px; font-weight: 700; color: var(--suave); }
.conferir li.conferir-texto { grid-template-columns: 1fr; grid-template-areas: "rotulo" "valor" "fonte"; gap: 3px; }
.conferir-texto .conferir-valor { font-size: 15px; font-weight: 500; text-align: left; white-space: normal; color: var(--texto); }
.serie { margin-top: 14px; }
.serie-fonte { margin: 0; padding: 10px 16px; border-top: 1px solid var(--borda); font-size: 13px; color: var(--suave); }

/* a prévia: as páginas do modelo do PDF numa moldura da largura da coluna, com o esqueleto das folhas até chegarem */
.briefing-previa { position: sticky; top: calc(var(--altura-topo) + 16px); max-height: calc(100vh - var(--altura-topo) - 32px); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--borda); border-radius: 16px; background: var(--bruma); scrollbar-width: thin; }
.previa { position: relative; --escala: .5; }
.previa iframe { position: absolute; top: 0; left: 0; width: 826px; height: 3480px; border: 0; transform: scale(var(--escala)); transform-origin: 0 0; color-scheme: light; opacity: 0; transition: opacity .45s var(--padrao); }
.previa[data-pronta] iframe { opacity: 1; }
.previa-esqueleto { display: grid; gap: 14px; padding: 14px 8px; transition: opacity .3s var(--padrao); }
.previa[data-pronta] .previa-esqueleto { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.folha { aspect-ratio: 210 / 297; border-radius: 3px; }

/* Tratamentos: o grafo do caminho dos dados, com as ligações desenhadas pelo tratamentos.js, e a lista de cada passo */
/* o grafo usa a largura da tela, além da coluna do texto, para os nomes caberem */
.grafo { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 30px; width: min(1400px, 100vw - 48px); margin-left: 50%; transform: translateX(-50%); padding: 22px 26px 26px; overflow: hidden; }
.grafo-linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.grafo-linhas path { fill: none; stroke: var(--borda-campo); stroke-width: 1.2; opacity: .6; stroke-dasharray: 1; animation: traca 1s var(--chega) both; transition: opacity .2s, stroke .2s, stroke-width .2s; }
@keyframes traca { from { stroke-dashoffset: 1; } }
.grafo[data-foco] .grafo-linhas path { opacity: .1; }
.grafo[data-foco] .grafo-linhas path[data-aceso] { opacity: 1; stroke: var(--dado); stroke-width: 2; }
.grafo-coluna { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.grafo-coluna h2 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--suave); }
.grafo-coluna > .no:first-of-type { margin-top: auto; }
.grafo-coluna > .no:last-of-type { margin-bottom: auto; }
.no { position: relative; z-index: 1; display: block; padding: 6px 10px; border: 1px solid var(--borda); border-radius: 9px; background: var(--superficie); font: 500 11.5px/1.35 var(--mono); color: var(--titulo); text-decoration: none; overflow-wrap: anywhere; transition: opacity .2s, border-color .2s, background .2s, box-shadow .2s; }
.no:hover { border-color: var(--dado); text-decoration: none; }
.no[data-briefing]::after { content: ""; position: absolute; top: 50%; right: -5px; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 0 2px var(--superficie); }
.grafo[data-foco] .no { opacity: .32; }
.grafo[data-foco] .no[data-aceso] { opacity: 1; border-color: var(--dado); background: color-mix(in srgb, var(--dado) 9%, var(--superficie)); }
.grafo[data-foco] .no:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dado) 22%, transparent); }
.grafo-divisa { margin: 12px 0 2px; font-size: 12px; font-weight: 650; color: var(--suave); }
.grafo-legenda { min-height: 42px; max-width: 980px; margin: 14px auto 0; text-align: center; }
.grafo-legenda b { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--titulo); }
.grafo-conta { color: var(--titulo); font-weight: 600; white-space: nowrap; }
.grafo-marca { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--ambar); vertical-align: middle; }
.passos-lista { list-style: none; margin: 0; padding: 4px 0; }
.passos-lista li { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 4px 24px; padding: 12px 20px; border-bottom: 1px solid var(--borda); }
.passos-lista li:last-child { border-bottom: 0; }
.passos-lista .mono { font-size: 13px; font-weight: 500; color: var(--titulo); text-decoration: none; overflow-wrap: anywhere; }
.passos-lista .mono:hover { text-decoration: underline; }
.passos-lista p { margin: 0; font-size: 14.5px; color: var(--texto); }

/* Tratamento: um passo, entre os vizinhos, com o SQL colorido e os arquivos do bronze */
.baixar.grande a { height: 38px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
.vizinhos { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 0; padding: 22px 26px; }
.vizinhos h2 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--suave); }
.vizinhos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; justify-items: start; }
.vizinhos-nada { font-size: 14px; color: var(--suave); }
/* a origem encosta no traço que leva ao passo, e o destino sai do outro lado */
.vizinhos > :first-child { text-align: right; }
.vizinhos > :first-child ul { justify-items: end; }
/* as setas do fluxo: uma linha que chega ao passo e outra que sai dele */
.vizinhos-este { position: relative; align-self: center; padding: 0 56px; }
.vizinhos-este::before, .vizinhos-este::after { content: ""; position: absolute; top: 50%; width: 40px; height: 2px; background: linear-gradient(90deg, var(--borda-campo), var(--dado)); }
.vizinhos-este::before { left: 8px; }
.vizinhos-este::after { right: 8px; background: linear-gradient(90deg, var(--dado), var(--borda-campo)); }
.vizinhos-este .no { padding: 11px 18px; font-size: 14px; border-color: var(--dado); background: color-mix(in srgb, var(--dado) 10%, var(--superficie)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--dado) 10%, transparent); }
.vizinhos .no { display: inline-block; }
.sql { display: grid; grid-template-columns: auto minmax(0, 1fr); max-height: 680px; margin: 0; padding: 0; overflow: auto; font: 13px/1.65 var(--mono); scrollbar-width: thin; }
.sql-linhas { position: sticky; left: 0; padding: 16px 12px 16px 18px; border-right: 1px solid var(--borda); background: var(--superficie); color: var(--suave); text-align: right; white-space: pre; user-select: none; opacity: .7; }
.sql code { padding: 16px 22px; font-size: inherit; white-space: pre; color: var(--texto); }
.sql-palavra { font-weight: 700; color: var(--titulo); }
.sql-texto { color: var(--ambar-texto); }
.sql-numero { color: var(--dado); }
.sql-comentario { font-style: italic; color: var(--suave); }
.sql-jinja { color: var(--dado); }
.sql-ref { color: var(--link); font-weight: 600; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.sql-ref:hover { text-decoration-style: solid; }
.tabela.arquivos { max-height: 560px; overflow: auto; }
.tabela.arquivos th { top: 0; }
.tabela.arquivos td { padding-top: 9px; padding-bottom: 9px; vertical-align: middle; }
.tabela.arquivos code { font-size: 12.5px; overflow-wrap: anywhere; }
.hash { font-family: var(--mono); font-size: 12px; color: var(--suave); }

/* Versões: a linha do tempo das rodadas, por dia, e a página de cada versão */
.numeros dd.numeros-texto { font-size: 26px; }
.tempo { list-style: none; margin: 36px 0 0; padding: 0; }
.tempo-dia + .tempo-dia { margin-top: 32px; }
.tempo-dia h2 { margin: 0 0 10px; font-size: 16px; }
.tempo-dia > ol { position: relative; list-style: none; margin: 0; padding: 0; }
.tempo-dia > ol::before { content: ""; position: absolute; left: 69px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--borda); }
.tempo-item { position: relative; display: grid; grid-template-columns: 56px 28px minmax(0, 1fr); align-items: center; padding: 4px 0; }
.tempo-item time { font-size: 13.5px; font-weight: 650; color: var(--suave); font-variant-numeric: tabular-nums; }
.tempo-item::before { content: ""; grid-column: 2; grid-row: 1; justify-self: center; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--dado); box-shadow: 0 0 0 4px var(--chao); }
.tempo-item[data-situacao="sem novidade"]::before { background: var(--chao); box-shadow: inset 0 0 0 2px var(--borda-campo), 0 0 0 4px var(--chao); }
.tempo-item[data-situacao="falhou"]::before, .tempo-item[data-situacao="interrompida"]::before { width: 11px; height: 11px; border-radius: 2px; background: var(--ambar); transform: rotate(45deg); }
.tempo-cartao { grid-column: 3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding: 8px 16px; color: inherit; text-decoration: none; }
a.tempo-cartao { padding: 13px 18px; transition: transform .2s var(--chega), box-shadow .2s, border-color .2s; }
a.tempo-cartao:hover { transform: translateX(3px); border-color: var(--borda-campo); box-shadow: var(--sombra-alta); }
.tempo-titulo { font-weight: 700; color: var(--titulo); }
div.tempo-cartao .tempo-titulo { font-weight: 650; color: var(--suave); }
.tempo-item[data-situacao="falhou"] .tempo-titulo, .tempo-item[data-situacao="interrompida"] .tempo-titulo { color: var(--atencao); }
.tempo-fatos { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13.5px; color: var(--suave); }
.tempo-fatos > span + span { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--borda); }
.calor { padding: 6px 0; }
.calor-linha { display: grid; grid-template-columns: 290px minmax(0, 1fr); align-items: center; gap: 16px; padding: 10px 22px; border-bottom: 1px solid var(--borda); }
.calor-linha:last-child { border-bottom: 0; }
.calor-nome { font-size: 14.5px; font-weight: 600; color: var(--titulo); }
.calor ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.calor li { display: grid; justify-items: center; gap: 1px; width: 78px; padding: 6px 4px 7px; border-radius: 8px; text-align: center; background: var(--escala-1); color: var(--sobre-1); }
.calor li b { font-size: 15px; font-weight: 750; }
.calor li span { font-size: 10.5px; font-weight: 550; line-height: 1.2; opacity: .85; }
.calor [data-faixa="2"] { background: var(--escala-2); color: var(--sobre-2); }
.calor [data-faixa="3"] { background: var(--escala-3); color: var(--sobre-3); }
.calor [data-faixa="4"] { background: var(--escala-4); color: var(--sobre-4); }
.calor [data-faixa="5"] { background: var(--escala-5); color: var(--sobre-5); }
.tabela .tabela-grupo th { position: static; padding: 9px 16px; background: var(--bruma); box-shadow: none; font-size: 12.5px; font-weight: 700; color: var(--suave); }

/* Auditoria: a cadeia de hashes, os filtros e os registros por dia */
.cadeia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-bottom: 18px; padding: 20px 24px; box-shadow: inset 4px 0 0 var(--ok), var(--sombra); }
.cadeia[data-estado="quebra"] { box-shadow: inset 4px 0 0 var(--ambar), var(--sombra); }
.cadeia > div:first-child { flex: 1 1 420px; }
.cadeia h2 { font-size: 17px; }
.cadeia p { margin: 4px 0 0; color: var(--suave); }
.cadeia-hash { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 12px; max-width: 100%; }
.cadeia-hash span { grid-column: 1 / -1; font-size: 12.5px; font-weight: 650; color: var(--suave); }
.cadeia-hash code { padding: 6px 10px; border-radius: 8px; background: var(--bruma); font-size: 12px; color: var(--titulo); overflow-wrap: anywhere; max-width: 36ch; }
.auditoria-conta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 12px; }
.auditoria-conta p { margin: 0; color: var(--suave); }
.auditoria-conta b { color: var(--titulo); }
.registros td { vertical-align: middle; }
.registros tr[data-tom="atencao"] td:first-child { box-shadow: inset 3px 0 0 var(--ambar); }
.registros time { font-size: 13.5px; color: var(--suave); }
.pessoa { display: inline-flex; align-items: center; gap: 9px; font-weight: 550; }
.iniciais { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--bruma); color: var(--titulo); font-size: 10.5px; font-weight: 750; letter-spacing: .02em; }
.ninguem { color: var(--suave); }
.mono-ip { font-family: var(--mono); font-size: 13px; color: var(--suave); }
.paginas { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; font-size: 14px; color: var(--suave); }

/* Catálogo: a busca e as opções no alto, os temas ao lado e os conjuntos por tema */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.catalogo-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin: 0 0 26px; padding: 12px 12px 10px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; box-shadow: var(--sombra); }
.busca { position: relative; flex: 1 1 100%; display: block; }
.busca svg { position: absolute; left: 14px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: var(--suave); pointer-events: none; }
.busca input { width: 100%; height: 46px; padding: 0 16px 0 44px; font: inherit; font-size: 15.5px; color: var(--texto); background: var(--chao); border: 1px solid var(--borda); border-radius: 12px; transition: border-color .15s, box-shadow .15s, background .15s; }
.busca input::placeholder { color: var(--suave); opacity: .85; }
.busca input:focus { outline: none; background: var(--superficie); border-color: var(--foco); box-shadow: 0 0 0 4px color-mix(in srgb, var(--foco) 16%, transparent); }
/* no toque, o campo tem 16 px, porque abaixo disso o Safari do iPhone amplia a tela quando a pessoa toca nele */
@media (hover: none) {
  .busca input, .filtros input, .filtros select, .campo-solto, .conta-form input { font-size: 16px; }
}
.opcoes { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: 0; border: 0; min-width: 0; }
.opcoes legend { float: left; margin-right: 8px; font-size: 12.5px; font-weight: 650; color: var(--suave); }
.opcoes label { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--texto); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.opcoes label:hover { background: var(--bruma); }
.opcoes input, .temas input { position: absolute; opacity: 0; pointer-events: none; }
.opcoes label:has(:checked) { background: var(--titulo); color: var(--superficie); }
.opcoes label:has(:focus-visible), .temas label:has(:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.qtd { font-size: 12px; font-weight: 650; color: var(--suave); font-variant-numeric: tabular-nums; }
.opcoes label:has(:checked) .qtd { color: inherit; opacity: .72; }

.catalogo-corpo { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 32px; align-items: start; }
.temas { position: sticky; top: calc(var(--altura-topo) + 20px); display: grid; gap: 1px; margin: 0; padding: 0; border: 0; min-width: 0; }
.temas legend { padding: 0 12px 10px; font-size: 12.5px; font-weight: 650; color: var(--suave); }
.temas label { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 12px; border-radius: 10px; font-size: 14px; line-height: 1.35; color: var(--texto); cursor: pointer; transition: background .15s; }
.temas label:hover { background: var(--bruma); }
.temas label:has(:checked) { background: var(--superficie); color: var(--titulo); font-weight: 650; box-shadow: var(--sombra), inset 0 0 0 1px var(--borda); }
.temas label:has(:checked)::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ambar); }
.catalogo-lista { min-width: 0; }
.catalogo-achados { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 14px; font-size: 14px; color: var(--suave); }
.catalogo-achados b { font-size: 15px; color: var(--titulo); }
.catalogo-achados a { font-weight: 600; }
.catalogo-grupo { margin: 0 0 28px; }
/* o nome do tema fica preso no alto enquanto a lista dele rola */
.catalogo-grupo h2 { position: sticky; top: var(--altura-topo); z-index: 2; margin: 0 0 2px; padding: 10px 0 8px; font-size: 16px; background: var(--chao); }
.catalogo-grupo ul { margin: 0; padding: 0; list-style: none; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra); overflow: clip; }
.catalogo-grupo li + li { border-top: 1px solid var(--borda); }
.catalogo-grupo a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 20px; padding: 14px 18px 15px; color: inherit; text-decoration: none; transition: background .12s; }
.catalogo-grupo a:hover { background: color-mix(in srgb, var(--bruma) 60%, transparent); }
.conjunto-nome { font-size: 15px; font-weight: 680; color: var(--titulo); }
.catalogo-grupo a:hover .conjunto-nome { text-decoration: underline; text-underline-offset: 3px; }
.conjunto-marcas { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 6px; align-self: start; }
.conjunto-descricao { grid-column: 1; font-size: 14px; color: var(--texto); overflow-wrap: anywhere; }
.conjunto-meta { grid-column: 1; font-size: 13px; color: var(--suave); }
/* enquanto o servidor refaz a lista, ela esmaece, e só depois de 150 ms, para a resposta rápida não piscar */
.catalogo-lista [data-resultado] { transition: opacity .15s; }
.catalogo-lista[aria-busy="true"] [data-resultado] { opacity: .5; transition-delay: .15s; }
/* as páginas numeradas, com a atual marcada como a opção escolhida nos filtros */
.numeradas { flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.numeradas a, .numeradas span { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px; font-weight: 600; color: var(--texto); text-decoration: none; font-variant-numeric: tabular-nums; }
.numeradas a[href]:hover { background: var(--bruma); }
.numeradas a[aria-current] { background: var(--titulo); color: var(--superficie); }
.numeradas span { color: var(--suave); }

/* telas de conta do allauth dentro do painel (segundo fator, códigos de recuperação e senha), pelos elementos de
   templates/allauth/elements */
#conteudo > h1 { margin-bottom: 26px; }
#conteudo > h1 + p { max-width: 70ch; margin: -12px 0 26px; font-size: 15.5px; color: var(--suave); }
.conta-painel { max-width: 760px; margin: 0 0 14px; padding: 20px 24px; }
.conta-painel h2 { margin-bottom: 4px; font-size: 17px; }
.conta-painel p { margin: 0; color: var(--suave); }
.conta-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.conta-form { max-width: 520px; }
.conta-form .campo { display: grid; gap: 7px; margin: 0 0 18px; }
.conta-form label { font-size: 13px; font-weight: 650; color: var(--texto); }
.conta-form input:not([type="checkbox"], [type="radio"], [type="hidden"]) { height: 44px; padding: 0 14px; font: inherit; font-size: 15px; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda-campo); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.conta-form input:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 4px color-mix(in srgb, var(--foco) 18%, transparent); }
.conta-form input:disabled { background: var(--bruma); color: var(--titulo); font-family: var(--mono); font-size: 14px; }
/* o rótulo já está em cima: o texto de exemplo do allauth dentro do campo só repetiria */
.conta-form ::placeholder { color: transparent; }
.ajuda { font-size: 13px; color: var(--suave); }
.ajuda ul { margin: 4px 0 0; padding-left: 18px; }
.errorlist { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--atencao); }
.botao.perigo { color: var(--atencao); }
.qr { display: block; width: 216px; height: 216px; margin: 0 0 24px; padding: 14px; border-radius: 16px; background: var(--papel); box-shadow: var(--sombra), 0 0 0 1px var(--borda); }
/* na ativação do aplicativo, o QR fica ao lado do segredo e do código */
.conta-form:has(> .qr) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 36px; max-width: 820px; }
.conta-form:has(> .qr) > :not(.qr) { grid-column: 2; }
.conta-form > .qr { grid-row: 1 / span 4; margin: 0; }

/* ---------- entrada ---------- */
/* telas de entrada (login, código do segundo fator e senha esquecida): o Brasil, que a câmera percorre até Sergipe, e o
   formulário. A arte é escura nos dois temas, e o lado do formulário segue o tema */
.entrada { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr); }
.entrada-arte { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: 36px 44px 34px; display: grid; grid-template-rows: auto 1fr auto;
  background: radial-gradient(120% 90% at 72% 40%, #163861 0%, var(--marinho) 46%, #050F1E 100%); }
/* escurece o canto de baixo, onde fica o texto, e a faixa de cima, onde fica a marca */
.entrada-arte::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(80% 62% at 0% 100%, rgba(4, 12, 25, .95) 0%, rgba(4, 12, 25, .72) 42%, rgba(4, 12, 25, 0) 78%), linear-gradient(180deg, rgba(4, 12, 25, .5) 0%, rgba(4, 12, 25, 0) 20%); }
.entrada-arte > :not(.pais) { position: relative; z-index: 2; }
.entrada .marca { margin: 0; font-size: 24px; color: var(--topo-texto); }
/* o mapa cobre o painel inteiro e se põe à direita sozinho (preserveAspectRatio do brasil.svg). O zoom vai até a borda do painel */
.pais { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; }
.chamada { grid-row: 3; max-width: 560px; }
.chamada-titulo { margin: 0 0 18px; max-width: 13ch; font-weight: 760; font-size: clamp(40px, 4.4vw, 66px); line-height: 1.02; letter-spacing: -.025em; color: #fff; }
.chamada-titulo em { font-style: normal; color: var(--ambar); }
.chamada-texto { margin: 0; max-width: 40ch; color: #AFC2D9; font-size: 16px; line-height: 1.55; }

.entrada-formulario { position: relative; max-width: none; margin: 0; display: flex; flex-direction: column; padding: 40px clamp(24px, 6vw, 88px); background: var(--fundo); }
.entrada-formulario .tema-botao { position: absolute; top: 20px; right: 20px; color: var(--suave); }
.caixa { width: 100%; max-width: 380px; margin: auto 0; }
.entrada h1 { margin: 0 0 12px; font-size: 46px; font-weight: 760; line-height: 1.02; letter-spacing: -.025em; color: var(--titulo); }
.caixa form + p { margin: 20px 0 0; font-size: 14px; color: var(--suave); }
.entrada .sub { margin: 0 0 30px; font-size: 15px; line-height: 1.55; }
.entrada form p, .campo { margin: 0 0 18px; }
.entrada label { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 600; }
.rotulo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rotulo a { font-size: 13px; text-underline-offset: 3px; }
.entrada input[type="email"], .entrada input[type="password"], .entrada input[type="text"] { width: 100%; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--borda-campo); border-radius: 10px; background: var(--superficie); color: var(--texto); transition: border-color .15s, box-shadow .15s; }
.entrada input:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 4px color-mix(in srgb, var(--foco) 20%, transparent); }
.entrada button[type="submit"] { width: 100%; margin-top: 8px; font: inherit; font-size: 16px; font-weight: 650; padding: 14px 16px; border: 0; border-radius: 10px; background: var(--botao); color: var(--botao-texto); cursor: pointer; transition: filter .15s; }
.entrada button[type="submit"]:hover { filter: brightness(1.12); }
/* o "voltar ao login" do código do segundo fator é um botão do allauth com cara de link */
.entrada button[form="logout-from-stage"] { width: auto; margin: 16px auto 0; padding: 4px 8px; background: none; color: var(--link); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.entrada .errorlist { list-style: none; margin: 8px 0 0; padding: 0; color: var(--atencao); font-size: 13.5px; }

@media (max-width: 860px) {
  .entrada { grid-template-columns: 1fr; }
  .entrada-arte { min-height: 300px; padding: 22px 20px 24px; }
  .chamada-texto { display: none; }
  .chamada-titulo { margin: 0; font-size: 34px; }
  .entrada-formulario { padding: 28px 20px 32px; }
  .entrada-formulario .tema-botao { top: 14px; right: 12px; }
  .entrada h1 { font-size: 38px; }
}

/* ---------- celular e telas estreitas ---------- */
@media (max-width: 900px) {
  .grade-3, .indicadores, .quadros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cobertura, .formula, .exemplo, .briefing { grid-template-columns: 1fr; }
  .briefing-previa { position: static; max-height: none; }
  /* no celular, o caminho fica só na lista de cada passo */
  .grafo, .grafo-legenda { display: none; }
  .passos-lista li { grid-template-columns: 1fr; }
  .calor-linha { grid-template-columns: 1fr; gap: 8px; padding: 12px 16px; }
  .tempo-fatos { gap: 2px 12px; }
  .tempo-fatos > span + span { margin-left: 0; padding-left: 0; border-left: 0; }
  /* no celular, cada registro da auditoria é um cartão: hora e pessoa, o que fez, e o IP e o aparelho em letra menor */
  .tabela.registros { overflow: clip; }
  .registros table, .registros tbody, .registros td { display: block; }
  .registros thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .registros tbody tr:not(.tabela-grupo) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--borda); }
  .registros tbody tr.tabela-grupo, .registros .tabela-grupo th { display: block; }
  .registros td { padding: 0; border: 0; text-align: left; }
  .registros td:nth-child(3) { grid-column: 1 / -1; color: var(--titulo); }
  .registros td:nth-child(n + 4) { font-size: 12.5px; color: var(--suave); }
  .registros td:empty { display: none; }
  .registros tr[data-tom="atencao"] td:first-child { box-shadow: none; }
  .registros tr[data-tom="atencao"] { box-shadow: inset 3px 0 0 var(--ambar); }
  .tempo-item { grid-template-columns: 44px 24px minmax(0, 1fr); }
  .tempo-dia > ol::before { left: 55px; }
  .conta-form:has(> .qr) { grid-template-columns: 1fr; }
  .conta-form:has(> .qr) > :not(.qr) { grid-column: 1; }
  .conta-form > .qr { grid-row: auto; margin: 0 0 24px; }
  .vizinhos { grid-template-columns: 1fr; gap: 18px; }
  .vizinhos > :first-child { text-align: left; }
  .vizinhos > :first-child ul { justify-items: start; }
  .vizinhos-este { padding: 0; }
  .vizinhos-este::before, .vizinhos-este::after { display: none; }
  .formula-ficha { border-left: 0; border-top: 1px solid var(--borda); }
  .cobertura-mapa { border-right: 0; border-bottom: 1px solid var(--borda); }
}
@media (max-width: 680px) {
  #conteudo { padding: 22px 16px 48px; }
  html { --altura-topo: 0px; }
  .topo-dentro { height: 60px; padding: 0 12px 0 16px; }
  .topo-busca, .menu { display: none; }
  .com-menu .topo-lupa { display: grid; }
  .paleta { margin-top: 12px; }
  .paleta-grupo a { display: grid; gap: 2px; }
  .conta { inset: 56px 12px auto auto; }
  .rodape-dentro { padding: 26px 16px 30px; }
  .com-menu .rodape-dentro { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  /* o fim da tela fica acima da barra de baixo e da bolha */
  /* no celular, os quadros vão em pares */
  .quadros { gap: 10px; }
  .quadro { min-height: 140px; padding: 14px 14px 15px; border-radius: 14px; }
  .quadro h3 { font-size: 17px; }
  .quadro p { font-size: 12.5px; line-height: 1.4; }
  .esq-quadro { height: 140px; border-radius: 14px; }
  .cabeca { grid-template-columns: 1fr; margin-bottom: 26px; }
  .cabeca > .acoes { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 16px; }
  .grade-2, .grade-3 { grid-template-columns: 1fr; }
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeros > div { padding: 14px 16px 16px; }
  .numeros dd { font-size: 26px; }
  .numeros dd .mono-numero { font-size: 18px; }
  .tabela { overflow-x: auto; }
  .tabela th { position: static; }
  .filtros label { flex: 1 1 100%; }
  .filtros label:has(input[type="date"]) { flex-basis: 40%; }
  .escolha label { flex: 1; min-width: 0; }
  .escolha select { min-width: 0; width: 100%; }
  .ficha { grid-template-columns: 1fr; gap: 2px; }
  .ficha dd { margin-bottom: 12px; }
  .recados { top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); right: 16px; }
  .indicadores { grid-template-columns: 1fr; }
  .exemplo-passos > div { grid-template-columns: 1fr; gap: 2px; }
  .regua { grid-column: 1; }
  .exemplo-valor { font-size: 44px; }
  .entradas li { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
  .entradas .baixar { margin-top: 4px; }
  .formula-conta { padding: 22px 20px; }
  .formula-ficha { padding: 18px 20px; }
  .metro { --x: 22px; }
  .metro > li { grid-template-columns: 1fr; padding: 8px 16px 8px 42px; }
  .metro-camada { text-align: left; padding: 0 0 4px; }
  .catalogo-corpo { grid-template-columns: 1fr; gap: 16px; }
  .temas { position: static; display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .temas legend { display: none; }
  .temas label { flex: none; padding: 7px 12px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); font-size: 13.5px; }
  .temas label:has(:checked) { background: var(--titulo); color: var(--superficie); box-shadow: none; }
  .temas label:has(:checked)::before { display: none; }
  .temas label:has(:checked) .qtd { color: inherit; opacity: .72; }
  .catalogo-grupo a { grid-template-columns: 1fr; padding: 14px 16px; }
  .conjunto-marcas { grid-row: auto; grid-column: 1; order: 3; margin-top: 6px; }
  .cobertura-lista li { padding: 11px 16px 12px; grid-template-columns: minmax(0, 1fr) auto; }
  .cobertura-periodo { grid-row: 2; }
  .fontes li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome nome" "ritmo quando" "barra barra" "detalhe detalhe"; gap: 4px 12px; padding: 12px 16px; }
  .fontes .barra { margin-top: 4px; }
  /* as páginas vizinhas estão sempre entre os números, então as setas saem, e cada número ganha o alvo de 44 px */
  .numeradas [rel] { display: none; }
  .numeradas a, .numeradas span { min-width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  @view-transition { navigation: none; }
}