/* =====================================================================
 *  portal.css — sistema visual do Painel de Execução Orçamentária
 *  Identidade do Portal da Prefeitura de Vista Alegre do Alto
 *  (tokens tirados do CSS em produção do portal Governa)
 * ===================================================================== */
:root{
  --p:#004080; --p-dk:#16263B; --s:#EDB112;
  --bg:#F0F3F7; --sf:#FFFFFF; --sf2:#F6F8FB;
  --txt:#23344A; --txt2:#5F7185; --txt3:#8A99AB; --borda:#E3E9F0; --linha:#EEF2F6;
  /* cores com significado — as mesmas em todo o painel */
  --g-pessoal:#bd2f3a; --g-terceirizado:#e07a3c; --g-custeio:#0d4f99; --g-invest:#d98e10;
  --reduz:#004080; --reduz2:#5B8DB8; --reduz3:#9DB4CF; --aumenta:#d98e10;
  --t:'Source Sans 3','Segoe UI',system-ui,sans-serif;
  --h:'Raleway','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--t);font-size:16px;line-height:1.5;color:var(--txt);background:var(--bg)}
a{color:var(--p)}
:focus-visible{outline:2px solid var(--p);outline-offset:2px;border-radius:3px}
td,.ind b,.num{font-variant-numeric:tabular-nums lining-nums}
.w{max-width:1180px;margin:0 auto;padding:0 24px}

/* cabeçalho: brasão inteiro sobre branco; navegação azul com filete amarelo */
.topo{background:var(--sf)}
.topo .w{display:flex;align-items:center;gap:16px;min-height:96px;padding-top:12px;padding-bottom:12px}
.topo img{height:72px;width:auto;flex:none}
.topo .org{line-height:1.15}
.topo .org small{display:block;font-size:14px;color:var(--txt2)}
.topo .org strong{display:block;font-family:var(--h);font-weight:700;font-size:26px;color:var(--p)}
.topo .org span{display:block;font-size:14px;color:var(--txt2);margin-top:2px}
.nav{background:var(--p);border-bottom:4px solid var(--s)}
.nav .w{display:flex;gap:6px 28px;min-height:44px;align-items:center;font-size:15px;font-weight:600;flex-wrap:wrap}
.nav a{color:#fff;text-decoration:none}
.nav a:hover{text-decoration:underline;text-underline-offset:4px}
.nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--s);text-decoration-thickness:2px;text-underline-offset:6px}

/* abertura */
.ab{padding:28px 0 8px}
.trilha{font-size:14px;color:var(--txt2);margin-bottom:14px}
.trilha a{color:var(--txt2)}
.ab-l{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
h1{font-family:var(--h);font-weight:700;font-size:clamp(32px,4.4vw,46px);line-height:1.08;letter-spacing:-.015em;color:var(--p);font-variant-numeric:lining-nums}
.frase{font-size:clamp(19px,2.2vw,23px);line-height:1.45;max-width:58ch;margin:18px 0 6px;color:var(--txt)}
.frase b,.frase .sobe,.frase .desce{font-weight:700;color:var(--p-dk)}
.posicao{font-size:14px;color:var(--txt2)}
.pos-l{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:2px}
.pos-l .acoes{display:flex;gap:8px}
.troca{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--txt2)}
.troca select{font:600 15px var(--t);color:var(--txt);border:1px solid var(--borda);background:var(--sf);border-radius:6px;padding:8px 10px;min-width:240px}

/* controles */
.ctl{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin:22px 0 0;padding:12px 0;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)}
.grp{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--txt2)}
.seg{display:inline-flex;border:1px solid var(--borda);border-radius:6px;overflow:hidden;background:var(--sf)}
.seg button{font:600 14px var(--t);color:var(--txt2);background:none;border:0;padding:6px 13px;cursor:pointer}
.seg button+button{border-left:1px solid var(--borda)}
.seg button.on{background:var(--p);color:#fff}
.ctl .acoes{margin-left:auto;display:flex;gap:8px}
.btn{font:600 14px var(--t);color:var(--p);background:var(--sf);border:1px solid var(--borda);border-radius:6px;padding:6px 13px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--p)}

/* faixa de indicadores */
.ind{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--sf);border:1px solid var(--borda);border-radius:8px;margin:24px 0 0}
.ind>div{padding:16px 20px}
.ind>div+div{border-left:1px solid var(--borda)}
.ind p{font-size:14px;color:var(--txt2)}
.ind b{display:block;font-size:24px;font-weight:700;color:var(--p-dk);margin:2px 0}
.ind small{font-size:13.5px;color:var(--txt2);display:block;line-height:1.35}

/* seções */
section{margin:40px 0 0}
h2{font-family:var(--h);font-weight:700;font-size:22px;color:var(--p-dk)}
.sub{font-size:15px;color:var(--txt2);margin:4px 0 16px;max-width:75ch}
.caixa{background:var(--sf);border:1px solid var(--borda);border-radius:8px;padding:20px 22px}
.leg{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--txt2);margin-bottom:12px}
.leg:empty{display:none}
.leg i{display:inline-block;width:14px;height:8px;border-radius:2px;margin-right:6px;vertical-align:1px}
.leg .sep{color:var(--borda)}
.grafico{position:relative;height:300px}

/* tabelas */
.rolagem{overflow-x:auto;background:var(--sf);border:1px solid var(--borda);border-radius:8px}
.rolagem.estreita{max-width:640px}
.rolagem.compacta{max-width:860px}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{font-weight:600;font-size:13.5px;color:var(--txt2);text-align:right;padding:11px 14px;border-bottom:1px solid var(--borda);white-space:nowrap;background:var(--sf)}
th small{display:block;font-weight:400;color:var(--txt3);font-size:12.5px}
th.l,td.l{text-align:left}
td{padding:8px 14px;border-bottom:1px solid var(--linha);text-align:right;white-space:nowrap}
tr.tot td{font-weight:700;color:var(--p-dk);border-top:2px solid var(--p-dk);border-bottom:0;background:var(--sf)}
.situ{display:inline-flex;align-items:center;gap:6px;color:var(--txt2)}
.situ::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
/* o normal é discreto; só a exceção tem cor */
.situ.fechado{color:var(--txt2)}.situ.fechado::before{background:var(--txt3)}
.situ.parcial,.situ.aguardando{color:#B7791F;font-weight:600}.situ.previsto{color:var(--txt3)}
tr.previsto td{color:var(--txt3)}
.aviso{font-size:14.5px;color:var(--txt);background:#FFF8E5;border:1px solid #F3D98A;border-radius:6px;padding:9px 13px;margin-bottom:12px}
.nota{font-size:15px;color:var(--txt);background:var(--sf);border:1px solid var(--borda);border-left:4px solid var(--s);border-radius:6px;padding:12px 16px;margin-top:14px;max-width:80ch}

footer{margin:56px 0 0;padding:28px 0 40px;border-top:1px solid var(--borda);font-size:14.5px;color:var(--txt2)}
footer p{max-width:80ch;margin-bottom:8px}

main{transition:opacity .2s}
body.atualizando main{opacity:.45;pointer-events:none}

@media (min-width:901px){.rolagem.fixa{overflow:visible}.rolagem.fixa th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 var(--borda)}}
@media (max-width:900px){
  .ind{grid-template-columns:repeat(2,minmax(0,1fr))}.ind>div:nth-child(3){border-left:0}.ind>div:nth-child(n+3){border-top:1px solid var(--borda)}
  .topo img{height:60px}.topo .org strong{font-size:22px}
  .nav .w{gap:6px 18px;font-size:14px;padding-top:9px;padding-bottom:9px}
  .grafico{height:240px}
}
@media (max-width:560px){
  .w{padding:0 16px}
  .ind{grid-template-columns:minmax(0,1fr)}.ind>div+div{border-left:0;border-top:1px solid var(--borda)}
  .troca select{min-width:0;width:100%}.ab-l{display:block}.troca{margin-top:14px}
  .ctl .acoes{margin-left:0}
  .pos-l .acoes{width:100%}
}
@media print{
  body{background:#fff}.topo{border-bottom:2px solid var(--txt)}.nav,.ctl,.troca,.acoes{display:none!important}
  .rolagem{overflow:visible}.caixa,.ind,.rolagem{break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* cabeçalho: brasão e nome levam ao site da Prefeitura; Portal da Transparência à direita */
.topo .marca{display:flex;align-items:center;gap:16px;color:inherit;text-decoration:none;min-width:0}
.topo .marca:hover .org strong{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.topo .portal{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--p);text-decoration:none;border:1px solid var(--borda);border-radius:6px;padding:8px 14px;white-space:nowrap;background:var(--sf)}
.topo .portal:hover{background:var(--sf2);border-color:var(--p)}
.topo .portal .ct{display:none}
@media (max-width:560px){.topo .w{gap:12px}.topo .marca{gap:12px}.topo img{height:52px}.topo .org strong{font-size:20px}.topo .org small,.topo .org span{font-size:12.5px}
  .topo .portal{padding:5px 8px;font-size:13px;gap:2px}.topo .portal .lg{display:none}.topo .portal .ct{display:inline}}
@media print{.topo .portal{display:none!important}}