/* Atlas Territory Platform — design system v2 (identidade Praxisinnovation Institute) */
:root{
  --navy:#1F3864; --navy-d:#16294a; --navy-x:#0f1d36;
  --teal:#17B8A6; --teal-d:#0e8f81; --teal-x:#06403a; --teal-50:#e7f7f4; --teal-100:#c9efe9;
  --blue:#2E75B6;
  --ink:#1f2937; --muted:#5b6b82; --line:#e6eaf2; --card:#ffffff; --bg:#f4f6fb;
  --sans:Arial,Helvetica,"Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.55}
section{scroll-margin-top:76px}

/* ---------- header ---------- */
header.top{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:22px;padding:10px 28px}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer;white-space:nowrap;flex:1}
.hflagwrap{flex:0 0 auto;margin-left:auto;display:flex;justify-content:flex-end;align-items:center;min-width:0}
.hflag{height:34px;width:49px;min-width:49px;max-width:49px;flex-shrink:0;object-fit:cover;display:block;
  border-radius:5px;border:1px solid var(--line);box-shadow:0 2px 6px rgba(31,56,100,.15)}
.brand .mark{width:38px;height:38px;border-radius:10px;background:var(--navy);display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.brand .mark svg{width:22px;height:22px}
.brand .wordmark{font-weight:700;font-size:20px;color:var(--navy);letter-spacing:.2px;line-height:1.1}
.brand .wordmark i{font-style:normal;font-weight:400;color:var(--muted)}
/* "Atlas" ao lado da marca: mesmo tamanho e mesma fonte do logotipo, em verde */
.brand .wordmark em{font-style:normal;font-weight:700;color:var(--teal-d)}
.searchwrap{position:relative;flex:1;max-width:440px}
.searchwrap input{width:100%;padding:9px 14px;border:1px solid var(--line);border-radius:24px;
  font-size:14px;background:var(--bg);outline:none;text-overflow:ellipsis}
.searchwrap input:focus{border-color:var(--teal)}
.sresults{position:absolute;top:44px;left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 12px 30px rgba(31,56,100,.14);max-height:320px;overflow:auto;display:none}
.sresults.open{display:block}
.sresults a{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;font-size:14px;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--bg)}
.sresults a:hover{background:var(--teal-50)}
.sresults .uf{color:var(--muted);font-size:12px}
.cta{background:var(--teal);color:#fff;font-weight:700;font-size:14px;padding:10px 20px;
  border-radius:10px;text-decoration:none;white-space:nowrap}
.cta:hover{background:var(--teal-d)}

/* ---------- hero institucional ---------- */
.herowrap{background:linear-gradient(135deg,var(--navy-x) 0%,var(--navy) 55%,#27477e 100%);color:#fff}
.herowrap .inner{max-width:1180px;margin:0 auto;padding:34px 24px 30px}
.crumbs{font-size:13px;color:#9db2d4;margin-bottom:14px}
.crumbs a{color:#7fd8cd;text-decoration:none;font-weight:600}
.crumbs span.sep{margin:0 7px;color:#41598a}
.heroid{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.flag{border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.25);
  height:58px;width:auto;background:#fff}
.flag.big{height:72px}
h1.title{font-size:clamp(30px,4.4vw,44px);line-height:1.1;color:#fff;font-weight:800;letter-spacing:-.5px}
h1.title em{color:#5eead4;font-style:normal}
.kicker{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#7fd8cd;margin-bottom:8px}
.lede{max-width:760px;color:#c8d6ee;font-size:16px;margin-top:10px}
.badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 10px;border-radius:12px;margin-left:8px;vertical-align:middle}
.badge.polo{background:var(--teal);color:#fff}
.badge.cap{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.35)}
.badge.ok{background:var(--teal-50);color:var(--teal-x)}
.badge.pend{background:#fdf2df;color:#b46a09}

/* números-síntese dentro do hero */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:22px}
.stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:13px 16px;
  backdrop-filter:blur(2px)}
.stat b{display:block;font-size:25px;font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.4px}
.stat span{font-size:12px;color:#b9c8e2}
.stat .selo{display:block;font-size:10px;color:#8298bd;margin-top:4px}

/* chips de prioridade no hero */
.priochips{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.priochips .lbl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9db2d4;margin-right:2px}
/*  As três ações são um grupo, e é o grupo que encosta à direita. Antes cada
    botão levava `margin-left:auto` e o primeiro comia o espaço livre sozinho:
    os outros dois eram empurrados para fora da linha, e "Fontes e datas"
    sobrava numa terceira fileira só dela.                                  */
.priochips .acoes{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/*  No celular não existe largura para as três lado a lado. Em vez de deixá-las
    quebrarem de qualquer jeito — uma em cima, duas embaixo, todas de tamanhos
    diferentes —, elas ocupam a largura inteira, uma por linha. Fica óbvio que
    é uma escolha, e cada uma vira um alvo de toque decente.                */
@media(max-width:559px){
  .priochips .acoes{margin-left:0;width:100%}
  .priochips .acoes > *{flex:1 1 100%;text-align:center;justify-content:center}
}
a.pchip{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--navy);font-weight:700;
  font-size:13px;padding:7px 14px;border-radius:20px;text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,.25)}
a.pchip:hover{background:var(--teal-50)}
a.pchip .dot{width:9px;height:9px;border-radius:50%;background:#d13c30;flex-shrink:0}
a.pchip.aten .dot{background:#e0940b}
a.pchip.okk .dot{background:var(--teal)}
/*  Linha das frentes de colaboração, abaixo dos destaques (14/09/2026).
    Mesma informação das tarjas de antes, em texto pequeno: no cabeçalho de uma
    ficha que vai ser aberta na frente do prefeito, quem fala primeiro é o que
    o município tem de bom. Continua clicável, e a cor é a do rodapé do hero —
    presente, sem gritar.                                                    */
.frentesline{margin-top:10px;font-size:12.5px;color:#9db2d4;display:flex;align-items:center;
  gap:8px;flex-wrap:wrap}
.frentesline .lbl{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#7a8fb5}
.frentesline a{color:#c8d6ee;text-decoration:none;border-bottom:1px dotted #5a7099}
.frentesline a:hover{color:#fff;border-bottom-color:#9db2d4}
.frentesline .sep{color:#4a5f84}

/* ---------- layout ---------- */
main{max-width:1180px;margin:0 auto;padding:0 24px 80px}
section.blk{margin-top:44px}
.blkhead{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--teal-100);padding-bottom:10px;margin-bottom:18px}
.blkhead h2{font-size:22px;color:var(--navy);font-weight:800;letter-spacing:-.3px}
.blkhead .tag{font-size:11px;font-weight:700;letter-spacing:.13em;color:var(--muted);text-transform:uppercase;margin-left:auto}
.isq{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.isq svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.isq.sm{width:30px;height:30px;border-radius:8px}
.isq.sm svg{width:17px;height:17px}
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- map ---------- */
.mapcard{background:linear-gradient(160deg,var(--navy-x),var(--navy));border-radius:18px;padding:14px;position:relative}
.mapcard svg{width:100%;height:auto;display:block}
.mapcard .hint{color:#aebfda;font-size:12px;padding:6px 6px 2px}
path.shape{stroke:var(--navy-x);stroke-width:.6;cursor:pointer;transition:filter .12s}
path.shape:hover{filter:brightness(1.25);stroke:#fff;stroke-width:1}
circle.polo{pointer-events:none;stroke:#fff;stroke-width:1}
.tip{position:fixed;z-index:99;background:var(--navy-x);color:#fff;font-size:12.5px;padding:7px 11px;border-radius:8px;
  pointer-events:none;display:none;box-shadow:0 8px 20px rgba(0,0,0,.35);max-width:240px}
.tip b{color:#5eead4}
.legend{display:flex;flex-wrap:wrap;gap:10px;padding:8px 6px 2px;font-size:11px;color:#c6d3e8}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* ---------- lists ---------- */
.list{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.list .row{display:grid;grid-template-columns:34px 30px 1fr auto auto;gap:10px;align-items:center;
  padding:9px 14px;border-bottom:1px solid var(--bg);font-size:14px;text-decoration:none;color:var(--ink)}
.list .row.noflag{grid-template-columns:34px 1fr auto auto}
.list .row.mun{grid-template-columns:1fr 128px 70px}
.list .row.mun .sub,.list .row.mun .v{text-align:right}
.list .colhead{display:grid;grid-template-columns:1fr 128px 70px;gap:10px;padding:7px 14px;white-space:nowrap;
  border-bottom:1px solid var(--line);background:#fbfcfe;font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#93a1b8}
.list .colhead span:nth-child(2),.list .colhead span:nth-child(3){text-align:right}
.list .row.alfa{display:flex;justify-content:center;align-items:center;gap:10px;padding:11px 14px}
.list .row.alfa img.mini{width:26px;height:18px;object-fit:cover;flex-shrink:0}
.list .row.alfa b{font-weight:700;color:var(--navy)}
.list .row.alfa .reg{font-weight:700;font-size:13px}
.list .row.alfa .reg::before{content:"· ";color:#c3ccdb;font-weight:400}
.list .row.alfa .sub::before{content:"· ";color:#c3ccdb}
.list .row:hover{background:var(--teal-50)}
.list .row .rk{color:#9fb0c7;font-weight:700;font-size:12px}
.list .row img.mini{width:28px;height:auto;border-radius:3px;border:1px solid var(--line)}
.list .row b{font-weight:700}
.list .row .v{font-weight:800;color:var(--navy)}
.list .row .sub{color:var(--muted);font-size:12px}
.listhead{padding:10px 14px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase;background:var(--bg);border-bottom:1px solid var(--line)}
.filter{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;font-size:14px}

/* ---------- indicator cards ---------- */
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
/*  Item de destaque dentro da própria grade — o gráfico da população, o cartão
    composto do IDHM. Ocupa duas colunas e continua no mesmo ritmo dos demais;
    antes disso viviam numa segunda coluna à parte (.split), que espremia os
    cartões vizinhos num fio vertical e abria vazios de mais de mil pixels.
    Abaixo de 560 px a grade tem uma coluna só, e aí duas colunas não existem. */
.grid3 > .larga{grid-column:span 2}
@media(max-width:560px){.grid3 > .larga{grid-column:auto}}
/*  Cartão em coluna, com a linha da fonte empurrada para baixo: numa fileira
    todos têm a mesma altura (é o padrão da grade), e assim o rótulo da fonte
    fica na mesma linha em todos, em vez de flutuar onde o texto acabou.      */
.icard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;position:relative;
  display:flex;flex-direction:column;
  transition:box-shadow .15s, transform .15s}
.icard > .selo:not(.sub){margin-top:auto}
.icard:hover{box-shadow:0 8px 22px rgba(31,56,100,.10);transform:translateY(-1px)}
.icard .lbl{font-size:12.5px;color:var(--muted)}
.icard .val{font-size:23px;font-weight:800;color:var(--navy);line-height:1.15;margin:2px 0;letter-spacing:-.3px}
.icard .val small{font-size:13px;color:var(--muted);font-weight:400;letter-spacing:0}
.icard .cmp{font-size:11.5px;color:var(--muted)}
.icard .cmp b{color:var(--teal-d)}
.icard .selo{font-size:10px;color:#93a3b8;margin-top:6px;border-top:1px dashed var(--line);padding-top:5px}
/*  Aviso de indicador substituído. Âmbar em vez de vermelho de propósito:
    não é erro, é sucessão — o número continua correto para a data dele.  */
.icard .selo.sub{color:#8a6a12;border-top:0;padding-top:2px;margin-top:3px}
.icard .selo.sub b{color:#6b5218}
/*  IDADE DO DADO (v111). Pílula âmbar colada ao selo, no cartão e no
    cabeçalho. Âmbar, como o aviso de sucessão, porque é da mesma família:
    o número está certo — só é antigo. Vermelho diria "errado".
    Ela precisa ser lida à distância de uma sala de reunião, e por isso é
    um pouco maior que o selo que a hospeda e tem fundo próprio: dentro de
    um selo de 10px em cinza claro, mais texto cinza claro seria só mais
    letra miúda, que é exatamente o que falhou até aqui.                 */
.idade{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:9px;
  background:#fdf3dc;color:#8a6a12;font-size:10.5px;font-weight:600;
  letter-spacing:.2px;white-space:nowrap;vertical-align:baseline}
.stat .selo .idade{background:rgba(255,255,255,.16);color:#f4dfae;font-weight:700}
.icard.pend{background:#f8fafd;border-style:dashed}
.icard.pend .val{color:#9fb0c7;font-size:15px;font-weight:600}

/* IDHM composite bars */
.bars{margin-top:8px}
/*  A1/M21 (05/09/2026): trilho e preenchimento são <span> — inline, altura e
    largura não se aplicavam e TODAS as barras da ficha saíam vazias. E a
    coluna do valor tinha 44px para "R$ 1.220/hab.", que quebrava em duas
    linhas: agora ela mede o conteúdo e o trilho fica com o resto.         */
.bars .b{display:grid;grid-template-columns:96px minmax(40px,1fr) auto;gap:8px;align-items:center;font-size:12px;margin:4px 0;color:var(--muted)}
.bars .b>span:last-child{white-space:nowrap;text-align:right}
.bars .tr{display:block;height:7px;background:var(--bg);border-radius:4px;overflow:hidden}
.bars .fl{display:block;height:100%;background:var(--teal);border-radius:4px}

/* sparkline */
.spark{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.spark svg{width:100%;height:70px;display:block}
.spark .lbl{font-size:12.5px;color:var(--muted)}
.spark .selo{font-size:10px;color:#93a3b8;margin-top:4px}

/* ---------- setor VITTO integrado ao tema ---------- */
.vsec{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 18px;
  border-left:4px solid var(--teal);transition:box-shadow .15s}
.vsec:hover{box-shadow:0 8px 22px rgba(31,56,100,.10)}
.vsec .vhead{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.vsec .vhead b{color:var(--navy);font-size:14.5px}
.vsec .vhead .vt{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-d)}
.vsec .dor{font-size:12.5px;color:var(--muted);margin:7px 0 2px}
.vsec .why{margin-top:7px;padding:7px 10px;border-radius:8px;font-size:11.5px}
.vsec .chips{margin-top:8px}
.vsec .selo{font-size:10.5px;color:#93a3b8;margin-top:8px}
.vsec .selo a{color:var(--blue);text-decoration:none}
.chip{display:inline-block;background:var(--teal-50);border:1px solid var(--teal-100);border-radius:14px;
  font-size:11.5px;padding:3px 10px;margin:2px 4px 2px 0;color:var(--teal-x)}
a.solchip{background:#fff;border:1px solid var(--teal);color:var(--teal-d);text-decoration:none;font-weight:600;
  transition:all .12s}
a.solchip:hover{background:var(--teal);color:#fff}

/* ---------- polos ---------- */
.polocard{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--blue);
  border-radius:14px;padding:16px 18px;transition:box-shadow .15s}
.polocard:hover{box-shadow:0 8px 22px rgba(31,56,100,.10)}
.polocard.ancora{border-left-color:var(--teal)}
.polocard h3{font-size:18px;color:var(--navy);font-weight:800}
.polocard .idx{float:right;font-weight:800;font-size:19px;color:#fff;background:var(--blue);border-radius:20px;padding:2px 13px}
.polocard.ancora .idx{background:var(--teal)}
.polocard p{font-size:13.5px;color:var(--muted);margin:7px 0}
.polocard .meta{font-size:12px;color:var(--muted)}
.polocard .meta b{color:var(--navy)}
.pesos{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.peso{background:var(--card);border:1px solid var(--line);border-radius:16px;font-size:12px;padding:5px 12px}
.peso b{color:var(--teal-d)}
.ledein{max-width:760px;color:var(--muted);font-size:15px}

/* ---------- VITTO banner ---------- */
.vitto{background:linear-gradient(135deg,var(--navy),var(--navy-d));border-radius:18px;padding:26px 28px;color:#dbe6f5;margin-top:44px}
.vitto h2{color:#fff;font-size:22px;font-weight:800;margin-bottom:6px}
.vitto h2 em{color:var(--teal);font-style:normal}
.vitto p{font-size:14px;max-width:640px}
.vitto .btns{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.vitto a.b1{background:var(--teal);color:#fff;font-weight:700;font-size:14px;padding:10px 20px;border-radius:10px;text-decoration:none}
.vitto a.b1:hover{background:var(--teal-d)}
.vitto a.b2{border:1px solid #40557e;color:#dbe6f5;font-weight:600;font-size:14px;padding:10px 20px;border-radius:10px;text-decoration:none}
.vitto a.b2:hover{border-color:var(--teal)}

/* ---------- misc ---------- */
.note{background:var(--teal-50);border:1px solid var(--teal-100);border-radius:12px;padding:12px 16px;font-size:13px;color:var(--teal-x);margin:14px 0}
footer{border-top:1px solid var(--line);background:#fff;margin-top:60px;padding:30px 28px;font-size:13px;color:var(--muted)}
footer .wrap{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between}
footer b{color:var(--navy)}
footer a{color:var(--blue)}
footer .frow{display:flex;align-items:center;gap:9px;margin-top:10px;line-height:1.4}
footer .frow svg{width:15px;height:15px;min-width:15px;max-width:15px;min-height:15px;max-height:15px;
  stroke:var(--teal-d);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;display:block}
footer .frow a{text-decoration:none}
footer .frow a:hover{text-decoration:underline}
footer .fsede{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-d);
  background:var(--teal-50);border:1px solid var(--teal-100);border-radius:9px;padding:1px 7px;margin-left:2px}
footer .fcopy{margin-top:16px;font-size:12px;color:#93a1b8}
.loading{padding:80px 0;text-align:center;color:var(--muted);font-size:15px}

/*  Faixa de tablet — 641 a 980 px.
    A assinatura ficou mais larga ao virar "Praxisinnovation Platform Atlas" e
    passou a espremer a busca: a 768 px o campo caiu de 205 para 161 pixels,
    estreito demais para ler o município que se está digitando. Aqui a
    assinatura cede um ponto de tamanho, para de crescer (flex:0 1) e a busca
    ganha um piso. Abaixo de 640 px o cabeçalho já quebra em duas linhas e a
    busca ocupa a largura inteira, então nada disto se aplica lá. */
@media(min-width:641px) and (max-width:980px){
  header.top{gap:14px;padding:10px 18px}
  .brand{flex:0 1 auto;min-width:0}
  .brand .wordmark{font-size:17px}
  .searchwrap{flex:1 1 240px;min-width:200px}
}

/* mobile */
@media(max-width:640px){
  header.top{padding:10px 14px;gap:8px;flex-wrap:wrap;justify-content:space-between}
  .cta{display:none}
  .hflagwrap{display:none}
  .brand{flex:0 0 auto}
  .brand .mark{width:32px;height:32px;border-radius:8px}
  .brand .mark svg{width:19px;height:19px}
  .searchwrap{flex:1 0 100%;max-width:none;order:3}
  .list .row.mun,.list .colhead{grid-template-columns:1fr 92px 54px;gap:8px}
  /*  M22 (05/09/2026): "HABITANTES · 2026" e "IDHM · 2010" não cabem nas
      colunas de 92 e 54 px e se sobrepunham; o título pode quebrar linha. */
  .list .colhead{font-size:9.5px;letter-spacing:.06em;white-space:normal;line-height:1.3;align-items:end}
  /*  M20 (05/09/2026): o seletor de indicador mede a opção mais larga e
      estourava a tela (513 px em 390); nada aqui passa da largura do cartão. */
  .fbox{padding:14px 12px}
  .flin select,.crit select,.crit input,.flin input{max-width:100%;min-width:0}
  .crit .ckey{min-width:0;width:100%}
  #fnovo{width:100%}
  main{padding:0 14px 60px}
  .herowrap .inner{padding:24px 14px 22px}
  .statrow{grid-template-columns:repeat(2,1fr)}
  .brand .wordmark{font-size:16px}
  .flag{height:44px}.flag.big{height:52px}
}

/* ---------- diagnóstico em PDF ---------- */
.diagbtn{background:transparent;border:1.5px solid rgba(255,255,255,.45);color:#fff;
  font-weight:700;font-size:12.5px;padding:8px 14px;border-radius:10px;cursor:pointer;font-family:inherit;
  white-space:nowrap}
.diagbtn:hover{background:rgba(255,255,255,.12);border-color:#5eead4;color:#5eead4}
.wikiline{margin-top:14px;font-size:13px;color:#9db2d4;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wikiline svg{width:15px;height:15px;stroke:#7fd8cd;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.wikiline a{color:#7fd8cd;font-weight:700;text-decoration:none}
.wikiline a:hover{text-decoration:underline}
.wikiline .wfonte{font-size:10.5px;color:#6d81a8;border:1px solid #3c5384;border-radius:9px;padding:1px 8px}
#diagprint{display:none}
@media print{
  /*  Na impressão só existe o diagnóstico. A regra é por exclusão, e não uma
      lista do que esconder, porque a lista envelhece: em 13/09/2026 o PDF do
      município saiu com o balão "Falar com o consultor" e o "Powered by
      ElevenAgents" colados no rodapé — o widget de voz foi acrescentado à
      página depois que este bloco foi escrito, e ninguém voltou aqui para
      incluí-lo. Escrito assim, qualquer coisa que entre no corpo da página
      amanhã já nasce fora do papel.                                        */
  body > *:not(#diagprint){display:none!important}
  @page{size:A4;margin:12mm}
  body{background:#fff}
  #diagprint{display:block;font-family:Arial,Helvetica,sans-serif;color:#1c2740;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  #diagprint .dp-band{display:flex;justify-content:space-between;align-items:center;background:#1F3864;color:#fff;
    padding:14px 18px;border-radius:8px}
  #diagprint .dp-brand{display:flex;align-items:center;gap:9px;font-size:15px}
  #diagprint .dp-brand svg{width:22px;height:22px}
  #diagprint .dp-doc{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#5eead4;font-weight:700}
  #diagprint .dp-h1{font-size:25px;color:#1F3864;margin:16px 0 4px}
  #diagprint .dp-h1 small{font-size:13px;color:#5b6b85;font-weight:400}
  #diagprint .dp-stats{display:flex;gap:8px;margin:12px 0 4px}
  #diagprint .dp-stats>div{flex:1;border:1px solid #dde4ee;border-radius:8px;padding:9px 11px;background:#f4f6fa}
  #diagprint .dp-stats b{display:block;font-size:15px;color:#1F3864}
  #diagprint .dp-stats span{font-size:8.5px;color:#5b6b85}
  #diagprint .dp-polo{border:1px solid #c9efe9;background:#f0fbf9;border-radius:8px;padding:10px 12px;
    font-size:10.5px;line-height:1.5;margin-top:8px}
  #diagprint .dp-h2{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#1F3864;
    border-bottom:2px solid #17B8A6;padding-bottom:4px;margin:16px 0 8px}
  #diagprint .dp-alert{border:1px solid #dde4ee;border-radius:8px;padding:9px 12px;font-size:10.5px;
    line-height:1.5;margin-bottom:6px;page-break-inside:avoid}
  #diagprint .dp-alert.p0{border-left:5px solid #b3342a;background:#fdf5f4}
  #diagprint .dp-alert.p1{border-left:5px solid #b46a09;background:#fdfaf2}
  #diagprint .dp-alert.p2{border-left:5px solid #17B8A6;background:#f0fbf9}
  #diagprint .dp-alert .tag{display:inline-block;font-size:8px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;margin-right:6px;padding:2px 7px;border-radius:9px;background:#fff;border:1px solid #dde4ee}
  #diagprint .dp-alert.p0 .tag{color:#b3342a;border-color:#e8b4b0}
  #diagprint .dp-alert.p1 .tag{color:#b46a09;border-color:#ecd3a8}
  #diagprint .dp-alert .sols{margin-top:4px;color:#0e9486;font-weight:700;font-size:9.5px}
  #diagprint .dp-tab{width:100%;border-collapse:collapse;font-size:9px}
  #diagprint .dp-tab th{text-align:left;background:#1F3864;color:#fff;padding:6px 8px;font-size:8.5px;
    letter-spacing:.08em;text-transform:uppercase}
  #diagprint .dp-tab td{border-bottom:1px solid #e6ebf3;padding:5px 8px;vertical-align:top;line-height:1.45}
  #diagprint .dp-tab tr{page-break-inside:avoid}
  #diagprint .dp-tab .st{white-space:nowrap;font-weight:700}
  /*  Sem vermelho e sem âmbar no panorama (13/09/2026). Quem recebe este
      documento é o município; a mesma informação em tinta de alerta lê-se
      como reprovação, e a leitura correta é comparativa. O verde-água fica,
      porque elogio discreto continua sendo elogio.                       */
  #diagprint .dp-tab .s0{color:#1F3864}
  #diagprint .dp-tab .s1{color:#3d5478}
  #diagprint .dp-tab .s2{color:#0e9486}
  #diagprint .dp-tab .s3{color:#8a97ab;font-weight:400}
  /*  Piso de base (set/2026): não é bom nem ruim, é 'não se sabe'.
      Cinza mais escuro que o do 'sem dado' — ali não há o que
      comparar, aqui há pouco, e são duas coisas diferentes.      */
  #diagprint .dp-tab .s4{color:#5b7091;font-weight:400}
  #diagprint .dp-tab .dp-base{white-space:nowrap;color:#6b7c96;font-variant-numeric:tabular-nums}
  /*  Idade do dado no papel (v111). Sem fundo e sem cor de marca-texto: o
      documento é fotocopiado, e o que sobrevive à fotocópia é o texto.
      Vai em linha própria, embaixo do nome do indicador, para não empurrar
      a coluna e quebrar a tabela em duas páginas.                      */
  #diagprint .dp-vel{display:block;font-size:7.8px;color:#8a6a12;font-weight:600;
    letter-spacing:.2px;margin-top:1px}
  #diagprint .dp-op .dp-vel{display:inline;margin-left:4px}

  /* ---- abertura: o que o município tem de bom ---- */
  #diagprint .dp-resumo{border:1px solid #c9efe9;background:#f0fbf9;border-radius:8px;padding:10px 13px;
    font-size:11px;line-height:1.55;margin-bottom:8px}
  #diagprint .dp-resumo b{color:#0b5d55}
  #diagprint .dp-setok{margin-top:4px;color:#33566b;font-size:10px}
  #diagprint .dp-tab.dp-destaque th{background:#0e9486}
  #diagprint .dp-tab.dp-destaque td{font-size:9.5px}
  #diagprint .dp-tab.dp-destaque .dest{font-weight:700;color:#0b5d55;white-space:nowrap}
  #diagprint .dp-tab.dp-destaque .ref{color:#5b6b85;white-space:nowrap}
  #diagprint .dp-tab.dp-destaque .setor{color:#5b6b85}

  /* ---- oportunidades: mesma informação de antes, sem tinta de alerta ---- */
  #diagprint .dp-op-lead{font-size:9.5px;color:#5b6b85;margin-bottom:6px;line-height:1.5}
  #diagprint .dp-op{border-left:3px solid #c3cfe0;background:#fbfcfe;border-radius:0 8px 8px 0;
    padding:8px 12px;font-size:10.5px;line-height:1.5;margin-bottom:5px;page-break-inside:avoid}
  #diagprint .dp-op b{color:#1F3864}

  /* ---- apoio: um bloco só, no fim ---- */
  #diagprint .dp-apoio{border:1px solid #dde4ee;border-radius:8px;padding:11px 13px;font-size:10px;
    line-height:1.55;page-break-inside:avoid}
  #diagprint .dp-apoio p{color:#33566b;margin-bottom:6px}
  #diagprint .dp-apoio .li{color:#0e9486;font-size:9.5px;margin-bottom:3px}
  #diagprint .dp-apoio .li b{color:#1F3864}
  #diagprint .dp-foot{margin-top:14px;border-top:1px solid #dde4ee;padding-top:8px;font-size:8.5px;
    color:#5b6b85;line-height:1.55}
  #diagprint .dp-foot .ct{margin-top:4px;color:#1F3864}
}
@media(max-width:760px){.diagbtn{margin-left:0}}

/* ---------- ícones dos números-síntese do hero ---------- */
.stat .lbl{display:flex;align-items:center;gap:6px}
.stat .lbl svg{width:14px;height:14px;flex-shrink:0;fill:none;stroke:var(--teal);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- painéis da coluna do mapa (página inicial) ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:16px}
.panelhead{padding:10px 14px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase;background:var(--bg);border-bottom:1px solid var(--line)}
.panel .pbody{padding:12px 14px}
.panel .pfoot{padding:9px 14px;border-top:1px solid var(--bg);font-size:11px;color:var(--muted);line-height:1.45}

.pbar{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin-bottom:9px}
.pbar:last-child{margin-bottom:0}
.pnome{font-size:13.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px}
.pnome i{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.pval{font-size:13.5px;font-weight:700;color:var(--ink);text-align:right;white-space:nowrap}
.pval small{font-weight:600;color:var(--muted);font-size:11.5px}
.ptrack{grid-column:1/-1;height:6px;background:var(--bg);border-radius:4px;overflow:hidden}
.ptrack b{display:block;height:100%;border-radius:4px}
.psub{grid-column:1/-1;font-size:11.5px;color:var(--muted)}

.fnums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.fnums div{background:var(--teal-50);border-radius:10px;padding:9px 10px}
.fnums b{display:block;font-size:19px;font-weight:800;color:var(--teal-x);line-height:1.15}
.fnums span{font-size:11px;color:var(--teal-x);opacity:.85;line-height:1.3;display:block}
.fult{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:2px 0 7px}
.flin{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:baseline;
  font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--bg)}
.flin:last-child{border-bottom:0}
.flin .fsrc{color:var(--muted);font-size:11.5px}
.flin .fbase{color:var(--teal-d);font-weight:700;font-size:11.5px;white-space:nowrap}

/* ---------- bloco institucional acima do rodapé ---------- */
footer .sobre{max-width:1180px;margin:0 auto 26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
footer .sobrelead{color:var(--navy);font-size:15px;font-weight:700;line-height:1.5;max-width:820px}
footer .sobrelist{list-style:none;margin:14px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:9px 26px}
footer .sobrelist li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.5;color:var(--muted)}
footer .sobrelist li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:2px;background:var(--teal)}

/* ---------- bloco institucional na coluna do mapa ---------- */
.inst{background:linear-gradient(160deg,var(--navy-x),var(--navy));border-radius:16px;
  padding:22px 24px;margin-top:16px;color:#fff}
.inst h3{font-size:19px;font-weight:800;letter-spacing:-.3px;line-height:1.25;color:#fff}
.inst .instlead{color:#9db2d4;font-size:13.5px;margin:7px 0 15px}
.inst ul{list-style:none;margin:0;padding:0}
.inst li{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px;
  font-size:14px;line-height:1.5;color:#dce6f6}
.inst li:last-child{margin-bottom:0}
.inst .estrela{width:16px;height:16px;flex-shrink:0;margin-top:2px}

/* ---------- evolução do indicador entre duas datas-base ---------- */
.icard .evol{display:flex;align-items:baseline;gap:7px;margin-top:5px;font-size:12px}
.icard .evol b{font-weight:800;font-size:13px}
.icard .evol span{color:var(--muted);font-size:11px}
.icard .evol.melhor b{color:var(--teal-x)}
.icard .evol.pior b{color:#b3342a}
.icard .evol.igual b{color:var(--muted)}

/* ---------- comparador de municípios ---------- */
.cbar{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.cchip{display:inline-flex;align-items:center;gap:8px;background:var(--teal-50);border:1px solid var(--teal-100);
  color:var(--teal-x);font-weight:700;font-size:13px;padding:6px 12px;border-radius:18px}
.cchip a{color:var(--teal-d);text-decoration:none;font-weight:800;font-size:15px;line-height:1}
.cchip a:hover{color:#b3342a}
.cvazio{color:var(--muted);font-size:14px}
.cadd{max-width:340px;margin:0}
.cbar .sresults{top:44px}
.ctabwrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.ctab{width:100%;border-collapse:collapse;font-size:14px}
.ctab th,.ctab td{padding:10px 14px;text-align:right;white-space:nowrap}
.ctab thead th{background:var(--bg);border-bottom:1px solid var(--line);color:var(--navy);font-weight:800}
.ctab thead th a{color:var(--navy);text-decoration:none}
.ctab thead th a:hover{text-decoration:underline}
.ctab thead th small{display:block;font-weight:600;font-size:11px;color:var(--muted)}
.ctab tbody th,.ctab thead tr.cpop th{text-align:left;font-weight:700;color:var(--ink);
  border-bottom:1px solid var(--bg);max-width:280px;white-space:normal}
.ctab tbody th small{display:block;font-weight:600;font-size:10.5px;color:var(--muted);margin-top:2px}
.ctab tbody td{border-bottom:1px solid var(--bg);color:var(--ink)}
.ctab tbody tr:hover th,.ctab tbody tr:hover td{background:#fbfcfe}
.ctab td.melhor{color:var(--teal-x);font-weight:800;background:var(--teal-50)}
.ctab td.vz{color:#aab6c8}
.ctab tr.cpop td{font-weight:700;color:var(--navy)}
.cnota{margin-top:12px;font-size:12.5px;color:var(--muted);max-width:820px}
a.diagbtn.cmpbtn{text-decoration:none;display:inline-flex;align-items:center}

/* ---------- busca por critério ---------- */
.fbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:16px}
.flin{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:10px}
.flin label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--muted)}
.flin input,.flin select,.crit input,.crit select{padding:8px 11px;border:1px solid var(--line);
  border-radius:9px;font-size:14px;background:#fff;color:var(--ink);font-family:inherit}
.flin input{width:150px}
.crit{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:9px}
.crit .ckey{min-width:260px}
.crit .cval{width:110px}
.crit .cun{font-size:12px;color:var(--muted);min-width:28px}
.crit .cdel{background:none;border:1px solid var(--line);border-radius:8px;width:30px;height:30px;
  cursor:pointer;color:var(--muted);font-size:16px;line-height:1}
.crit .cdel:hover{border-color:#e8b4b0;color:#b3342a}
.fbtn2{background:var(--teal-50);border:1px solid var(--teal-100);color:var(--teal-x);font-weight:700;
  font-size:13px;padding:8px 14px;border-radius:9px;cursor:pointer;font-family:inherit}
.fbtn2:hover{background:var(--teal-100)}
.fres{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:12px;font-size:15px;color:var(--ink)}
.fres b{font-size:22px;font-weight:800;color:var(--navy)}
.fres span{color:var(--muted);font-size:13px}
.fvazio{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px;
  color:var(--muted);font-size:14.5px}
.btab tbody th{max-width:none}
.btab tbody th a{color:var(--navy);text-decoration:none;font-weight:700}
.btab tbody th a:hover{text-decoration:underline}
.btab td:nth-child(2){text-align:center;color:var(--muted)}

/* ---------- identificação da sessão no cabeçalho (10/08/2026) ---------- */
.sessaobox{display:flex;align-items:center;gap:12px;margin-left:14px;flex-shrink:0;
  font-size:12.5px;color:var(--muted);white-space:nowrap}
.sessaobox .quem{font-weight:700;color:var(--navy);max-width:180px;overflow:hidden;
  text-overflow:ellipsis}
.sessaobox .prazo{background:#fdf2df;color:#b46a09;border:1px solid #ecd3a8;
  border-radius:20px;padding:2px 10px;font-weight:700;font-size:11.5px}
.sessaobox .lk{background:none;border:0;color:var(--teal-d);cursor:pointer;font:inherit;
  text-decoration:underline;padding:2px 0}
.sessaobox .lk:hover{color:var(--teal-x)}
.fsemcsv{display:inline-block;font-size:13px;color:var(--muted);background:#eef1f6;
  border:1px solid var(--line);border-radius:20px;padding:6px 14px}
@media(max-width:860px){.sessaobox .prazo,.sessaobox .quem{display:none}}

/* ---------- marca d'água de quem está vendo (11/08/2026) ----------
   Não impede cópia; tira o anonimato de quem repassa. Fica atrás de tudo e não
   recebe clique. No papel ela some da tela e vira a assinatura do documento,
   que é mais legível e igualmente rastreável. */
#marcadagua{position:fixed;inset:0;z-index:9998;pointer-events:none;
  background-repeat:repeat;background-position:0 0}
#diagprint .dp-assin{margin-top:10px;font-size:10.5px;color:#5b6b85;
  border-left:3px solid #17B8A6;padding-left:10px;line-height:1.5}
@media print{#marcadagua{display:none!important}}

/* ---------- atualidade do dado (19/08/2026) ----------------------------------
   Nasceu de um questionamento real: um gestor público olhou a comparação, viu
   sete linhas seguidas do Censo 2010 e concluiu que a plataforma estava velha.
   O dado do setor dele era de jun/2026 e estava vinte linhas abaixo.

   Estes estilos servem a uma ideia só: a Plataforma declarar a idade de cada bloco
   antes que alguém precise perguntar. Quem anuncia a própria limitação não é
   pego por ela. */
.atbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin:0 0 14px;
  padding:11px 16px;background:#f5f8fc;border:1px solid var(--line);border-radius:11px}
.atbar .atn{font-weight:800;color:var(--navy);font-size:13.5px}
.atbar .atd{font-size:13.5px;color:var(--muted)}
.atbar .atd b{color:var(--navy)}

tr.grpc th{background:#f7f9fc;border-top:2px solid var(--line);padding:11px 12px !important;
  text-align:left;vertical-align:top}
tr.grpc .gt{display:inline-block;font-size:13.5px;font-weight:800;color:var(--navy);
  letter-spacing:.01em;margin-right:12px}
tr.grpc .ga{font-size:12.5px;color:var(--muted);font-weight:400}
tr.grpc .ga b{color:var(--navy)}
/*  Nota de grupo na comparação: mesma doutrina das notas da ficha — contexto
    de leitura não se pinta de amarelo na tela de um cliente. */
tr.grpc .gn{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:#5b6b85;
  font-weight:400;background:#f6f8fb;border-left:3px solid #c3cfe0;
  padding:8px 11px;border-radius:0 7px 7px 0;max-width:78ch}
tr.grpc .gn b{color:#3d5478}
tr.grpc.novo th{border-top-color:var(--teal)}
tr.grpc.velho th{border-top-color:#c07f10}

/* selo de maturidade dentro do card de setor */
.vhead .matbadge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 8px;border-radius:20px;border:1px solid;margin-left:8px}
.matbadge.novo{background:var(--teal-50);color:#06403a;border-color:var(--teal-100)}
.matbadge.medio{background:#eef4fb;color:#1F3864;border-color:#cfdcec}
.matbadge.velho{background:#fdf6e6;color:#8a6a12;border-color:#ecd3a8}
.matbadge.misto{background:#f4f6fb;color:#5b6b82;border-color:#dde3ec}
.matbadge.sem{background:#f2f4f7;color:#7b8794;border-color:#dfe3e8}
.vsec .matnota{margin-top:9px;font-size:12.4px;line-height:1.55;color:#5b6b85;
  background:#f6f8fb;border-left:3px solid #c3cfe0;padding:8px 11px;border-radius:0 7px 7px 0}
.vsec .matnota b{color:#3d5478}

/* ---------- série histórica recolhida e nota de bloco antigo ----------------
   O dado de 2010 não sai da plataforma: ele vira comparação. Mas deixa de
   disputar a primeira linha com o dado de 2022 e 2026. */
details.hist{margin-top:16px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe}
details.hist summary{cursor:pointer;padding:12px 16px;font-size:13.5px;font-weight:700;
  color:var(--navy);list-style:none;display:flex;align-items:center;gap:8px}
details.hist summary::-webkit-details-marker{display:none}
details.hist summary::before{content:"▸";color:var(--muted);font-size:15px;transition:transform .15s}
details.hist[open] summary::before{transform:rotate(90deg)}
details.hist summary span{font-weight:400;color:var(--muted);font-size:12.5px}
details.hist .grid3{padding:0 14px 14px}
/*  Nota de leitura, recolhida.
    -------------------------------------------------------------------------
    Uma peça só para todas as notas da ficha. Duas regras que não são estética:
    `grid-column:1/-1` faz a nota ocupar a fileira inteira mesmo quando cai
    dentro da grade de cartões — era assim que a nota da creche virava um bloco
    de texto solto ao lado de três cartões; e nada de amarelo, porque na tela
    de um cliente amarelo significa "tem coisa errada aqui", e não é o caso:
    é contexto de leitura.                                                  */
.notaler{grid-column:1/-1;margin:10px 0 0;border-top:1px dashed var(--line);padding-top:8px}
.notaler > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;color:#8697ad;letter-spacing:.02em;user-select:none}
.notaler > summary::-webkit-details-marker{display:none}
.notaler > summary::before{content:"";width:6px;height:6px;border-right:1.6px solid #b3c0d1;
  border-bottom:1.6px solid #b3c0d1;transform:rotate(-45deg);transition:transform .15s;margin-bottom:2px}
.notaler[open] > summary::before{transform:rotate(45deg);margin-bottom:0}
.notaler > summary:hover{color:var(--muted)}
.notaler .corpo{margin-top:7px;font-size:12.5px;line-height:1.62;color:#5b6b85;max-width:92ch}
.notaler .corpo b{color:#3d5478}
/*  O aviso do bloco do Censo 2010 vive dentro de um bloco que já está
    recolhido; aqui basta tirar o amarelo e alinhar ao resto. */
.histaviso{margin:0 14px 12px;background:#f6f8fb;border-left:3px solid #c3cfe0;
  border-radius:0 8px 8px 0;padding:10px 13px;font-size:12.6px;line-height:1.6;color:#5b6b85}
.histaviso b{color:#3d5478}

/* ---------- painel de fontes e datas -----------------------------------
   Aberto pelo botão "Fontes e datas" na ficha do município. O cartão passou a
   mostrar a etiqueta curta ("SINISA · 2023"); a certidão inteira mora aqui.
   Sobreposição escura e caixa rolável: a lista pode passar de oitenta linhas
   num município com cobertura completa, e ela precisa caber em tela de
   notebook numa reunião — que é onde este painel vai ser aberto de verdade. */
/*  z-index alto de propósito: o widget de voz da ElevenLabs é injetado por
    script de terceiro e se planta no canto inferior direito acima de quase
    tudo. Com 120 ele cobria o rodapé do painel de fontes — justamente na
    reunião em que o painel é aberto para provar rigor.                     */
.fontewrap{position:fixed;inset:0;background:rgba(15,29,54,.62);z-index:2147483000;
  display:flex;align-items:flex-start;justify-content:center;padding:40px 18px;overflow-y:auto}
.fontebox{background:#fff;border-radius:16px;max-width:760px;width:100%;padding:28px 30px 24px;
  position:relative;box-shadow:0 24px 60px rgba(15,29,54,.32)}
.fontebox .fechar{position:absolute;top:14px;right:16px;background:transparent;border:0;
  font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px;font-family:inherit}
.fontebox .fechar:hover{color:var(--navy)}
.fontebox h2{font-size:21px;color:var(--navy);font-weight:800;letter-spacing:-.3px;margin-bottom:8px;padding-right:30px}
.fontebox .resumo{font-size:14.5px;color:var(--ink);margin-bottom:10px}
.fontebox .nota{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:20px;
  border-left:3px solid var(--teal);padding-left:12px}
.fontebox section{margin-bottom:18px}
.fontebox h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-d);
  font-weight:800;margin-bottom:6px}
.fontebox table{width:100%;border-collapse:collapse}
.fontebox td{padding:6px 8px 6px 0;font-size:13px;border-bottom:1px solid var(--line);vertical-align:top}
.fontebox td.ind{color:var(--ink);font-weight:600;width:38%}
.fontebox td.ref{color:var(--muted);font-size:12px}
.fontebox td.dt{color:var(--navy);font-weight:700;white-space:nowrap;text-align:right;width:80px}
.fontebox .rodape{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.fontebox .rodape a{color:var(--teal-d);word-break:break-all}
@media(max-width:640px){
  .fontebox{padding:24px 18px 20px}
  .fontebox td.ref{display:none}
  .fontebox td.ind{width:auto}
}

/* ---------- seletor de idioma (26/08/2026) ----------
   Discreto de propósito: quem entra em português não deve tropeçar nele.
   Fica ao lado da bandeira, com o idioma ativo em destaque. */
.langwrap{display:flex;align-items:center;margin-left:10px}
.langseg{display:flex;gap:1px;background:#eef1f6;padding:2px;border-radius:4px}
.langseg button{
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.01em;
  border:0;background:transparent;color:#5b6b82;
  padding:4px 9px;border-radius:3px;cursor:pointer;line-height:1.3;
}
.langseg button:hover{color:#1F3864}
.langseg button.on{background:#fff;color:#1F3864;box-shadow:0 1px 2px rgba(31,56,100,.12)}
.langseg button:focus-visible{outline:2px solid #17B8A6;outline-offset:1px}
@media (max-width:760px){
  .langseg button{padding:4px 7px;font-size:11px}
}

/*  Aviso de impressão (v109, 18/09/2026) — ver o comentário em app.js.
    Fica no rodapé da tela, sobre o conteúdo, e some ao ser fechado. No
    papel ele não aparece: a regra `body > *:not(#diagprint)` do @media
    print já o exclui, por exclusão e não por lista.                     */
#dicaimp{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:9000;
  max-width:520px;width:calc(100% - 32px);background:#0f2a4a;color:#e7eefb;
  border:1px solid #2c4a75;border-radius:14px;padding:16px 18px;
  box-shadow:0 12px 34px rgba(8,20,38,.45);font-size:13px;line-height:1.5}
#dicaimp b{display:block;font-size:14px;color:#5eead4;margin-bottom:6px}
#dicaimp p{margin:0 0 12px}
#dicaimp button{background:transparent;border:1.5px solid rgba(255,255,255,.45);color:#fff;
  font-family:inherit;font-weight:700;font-size:12.5px;padding:7px 16px;border-radius:9px;
  cursor:pointer}
#dicaimp button:hover{background:rgba(255,255,255,.12);border-color:#5eead4;color:#5eead4}
@media(max-width:520px){#dicaimp{bottom:12px;padding:14px}}

/*  A base do veredito no cartão de setor (set/2026) — ver o comentário em
    app.js. Fica logo abaixo do cabeçalho do cartão, em texto miúdo: é
    ressalva, não manchete, mas tem de estar sempre à vista.             */
.vsec .vbase{font-size:11.5px;line-height:1.45;color:#5b6b82;margin:8px 0 2px;
  padding-left:10px;border-left:2px solid var(--line)}
.vsec .vbase b{color:#3f5b80}