/* Painel · Visão geral (web/js/21-painel-geral.js): painel financeiro em cartões. Cor só por token; cada série define --c e os
   elementos (coluna, linha, arco, ponto, gradiente, amostra) leem --c. */
.s-vend{--c:var(--azul2)}.s-rec{--c:var(--verde)}.s-perda{--c:var(--coral)}
.fn1{--c:var(--azul2)}.fn2{--c:var(--dourado-escuro)}.fn3{--c:var(--verde)}.fn4{--c:var(--ceu)}.fn5{--c:var(--azul)}.fn6{--c:var(--cinza-az)}
.s-vendb{background:var(--azul2)}.s-recb{background:var(--verde)}.s-perdab{background:var(--coral)}
.fn1b{background:var(--azul2)}.fn2b{background:var(--dourado-escuro)}.fn3b{background:var(--verde)}.fn4b{background:var(--ceu)}.fn5b{background:var(--azul)}.fn6b{background:var(--cinza-az)}

.pg{display:flex;flex-direction:column;gap:16px;padding-top:20px}
/* barra de período (faixa azul no topo do painel; fixa ao rolar) */
.pg-sel{position:sticky;top:8px;z-index:5;background:linear-gradient(135deg,var(--azul) 0%,var(--azul-medio) 100%);border-radius:14px;padding:8px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;box-shadow:0 6px 18px rgba(var(--azul-rgb),.18)}
.pg-sel-t{font:700 11px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--dourado-claro);padding:0 4px}
.pg-sel-g{display:flex;flex-wrap:wrap;align-items:center;gap:2px;min-width:0}
.pg-sel-g+.pg-sel-g{border-left:1px solid rgba(var(--branco-rgb),.2);padding-left:14px}
.pg-op{font:13px var(--sans);color:var(--sobre-azul-2);background:transparent;border:0;border-radius:999px;padding:6px 11px;cursor:pointer;white-space:nowrap}
.pg-op:hover{background:rgba(var(--branco-rgb),.1);color:var(--branco)}
.pg-op[aria-pressed="true"]{background:var(--dourado);color:var(--azul);font-weight:700}
.pg-op:focus-visible{outline-color:var(--dourado-claro)}

/* grade de cartões */
.pg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pg-c{background:var(--branco);border:1px solid var(--linha);border-radius:16px;padding:16px 18px;min-width:0;box-shadow:0 1px 2px rgba(var(--azul-rgb),.04),0 8px 24px rgba(var(--azul-rgb),.06)}
.pg-l2c{grid-column:span 2}.pg-l4c{grid-column:1/-1}
.pg-t{font:600 17px var(--display);letter-spacing:.01em;color:var(--azul)}
.pg-h{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap}
.pg-lg{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.pg-lg span{display:inline-flex;align-items:center;gap:6px}
.pg-sub{font-size:13px;color:var(--muted);margin:4px 0 0}
/* cartão de indicador com minigráfico */
.pg-kpi{display:flex;flex-direction:column;gap:6px}
.pg-kpi-c{display:flex;flex-direction:column;gap:6px;flex:1}
.pg-kpi-n{display:flex;flex-direction:column;gap:2px}
.pg-v{font:600 30px var(--display);line-height:1.1;white-space:nowrap}
.pg-q{font-size:13px;color:var(--muted)}
.pg-d{font-size:12px;font-weight:700}
.pg-faisca{width:100%;height:72px;display:block;margin-top:auto}
.pg-faisca .pg-l,.pg-faisca .pg-guia{vector-effect:non-scaling-stroke}
/* pontos de atenção, em andamento, perdidas e funil por etapa (vindos da antiga aba Resumo) */
.pg-aten .aten-t{margin:0;color:var(--azul)}
.pg-kpi .pilha{margin-top:6px}
.pg-leg-r{flex:none;min-width:0;margin-top:4px}
.pg-leg-r .sw{width:10px;height:10px;border-radius:3px}
.pg-mais{font-size:13px;align-self:flex-start;margin-top:4px}
.pg-q b{color:var(--azul)}
.pg-fn{margin:0;min-width:200px;max-width:300px}
.pg-c .bh{margin-top:12px}
/* séries: colunas, linhas, áreas, pontos */
.pg-col{fill:var(--c)}
.pg-l{stroke:var(--c);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pg-l2{stroke-width:3}
.pg-pt{fill:var(--branco);stroke:var(--c);stroke-width:2.5}
.gs1{stop-color:var(--c);stop-opacity:.34}.gs0{stop-color:var(--c);stop-opacity:0}
.pg-area{opacity:.75}
.pg-graf{width:100%;height:auto;display:block;margin-top:10px}
.pg-grade{stroke:var(--cinza-fio);stroke-width:1}
.pg-ey{font:11px var(--sans);fill:var(--muted)}
.pg-ex{font:12px var(--sans);fill:var(--muted)}
.pg-ex-sel{font-weight:700;fill:var(--azul)}
.pg-apag{opacity:.32}
.pg-guia{stroke:var(--azul-apoio);stroke-width:1.5;stroke-dasharray:4 4}
.pg-alvo{fill:transparent;cursor:pointer}
.pg-alvo:hover{fill:rgba(var(--azul-rgb),.05)}
.pg-alvo:focus-visible{outline:none;fill:rgba(var(--ceu-rgb),.14)}
/* roscas */
.pg-rosca-box{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;justify-content:center;margin-top:10px}
.pg-rosca{width:136px;height:136px;flex:none;display:block}
.pg-trilho{stroke:var(--cinza-bg-3)}
.pg-arc{stroke:var(--c);transition:stroke-width .15s}
.pg-rosca .clic:hover{stroke-width:7}
.pg-rosca .clic:focus-visible{outline:3px solid var(--ceu)}
.pg-rc-v{font:600 6.4px var(--display);fill:var(--azul)}
.pg-rc-t{font:2.7px var(--sans);fill:var(--muted)}
.pg-leg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:12px;flex:1 1 104px;min-width:104px}
.pg-leg li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}
.pg-leg b{font-weight:700}
/* anéis de participação */
.pg-aneis{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:6px;margin-top:12px}
.pg-anel{display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;color:var(--azul);background:transparent;border:1px solid transparent;border-radius:12px;padding:8px 4px;cursor:pointer;min-width:0}
.pg-anel:hover{background:var(--azul-gelo)}
.pg-anel[aria-pressed="true"]{background:var(--azul-gelo);border-color:var(--azul)}
.pg-anel svg{width:76px;height:76px}
.pg-an-v{font:600 9px var(--display);fill:var(--azul)}
.pg-an-s{font:600 15px var(--display)}
.pg-an-n{font-size:10px;color:var(--muted);text-align:center;line-height:1.25;overflow-wrap:break-word;max-width:100%}
.pg-bh-f{fill:var(--cinza-bg-3)}
/* detalhamento por município */
.pg-det{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:16px;margin-top:12px;align-items:start}
.pg-bh{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.pg-bh-i{display:grid;grid-template-columns:minmax(80px,32%) minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;font:13px var(--sans);color:var(--azul);text-align:left;background:transparent;border:1px solid transparent;border-radius:10px;padding:6px 8px;cursor:pointer}
.pg-bh-i:hover{background:var(--azul-gelo);border-color:var(--linha)}
.pg-bh-r{text-align:right;font-weight:600;overflow-wrap:anywhere}
.pg-bh-b{width:100%;height:12px;display:block}
.pg-bh-v{font-weight:700;white-space:nowrap}
.pg-det-f{display:flex;flex-direction:column;gap:3px}
.pg-fop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;text-align:left;font:600 13px var(--sans);color:var(--azul);background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 10px;cursor:pointer}
.pg-fop small{font-weight:400;font-size:11px;color:var(--muted)}
.pg-fop:hover{background:var(--azul-gelo)}
.pg-fop[aria-pressed="true"]{background:var(--azul);color:var(--branco)}
.pg-fop[aria-pressed="true"] small{color:var(--sobre-azul-2)}
.pg-c .dados{margin-top:10px}

@media (max-width:1180px){.pg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* atenção compacta em telas estreitas: título em cima, 3 cartões lado a lado (número sobre o texto) */
@media (max-width:980px){
  .pg-aten .aten-faixa{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .pg-aten .aten-t{grid-column:1/-1;max-width:none;font-size:14px;padding:0}
  .pg-aten .aten-i{grid-template-columns:1fr;align-content:start;gap:2px;padding:8px 10px;font-size:12px;line-height:1.3}
  .pg-aten .aten-i b{font-size:22px;line-height:1.1;min-width:0}
}
@media (max-width:760px){
  .pg-sel{position:static;padding:10px}
  .pg-meses{flex-wrap:nowrap;overflow-x:auto;width:100%}
  .pg-sel-g+.pg-sel-g{border-left:0;padding-left:0}
  .pg-grid{grid-template-columns:minmax(0,1fr)}
  .pg-l2c{grid-column:auto}
  .pg-det{grid-template-columns:1fr}
  .pg-det-f{flex-direction:row;flex-wrap:wrap;order:-1}
}
/* Recebimentos: mesma linguagem de cartões (web/js/48-recebimentos.js) */
.rb-pg .pg-v{font-size:26px}
.rb-pg .rb-dh{font-size:20px;white-space:normal}
.rb-pg-dl{margin:10px 0 0;display:grid;gap:4px;font-size:12px}
.rb-pg-dl div{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--cinza-fio);padding-top:4px}
.rb-pg-dl dt{color:var(--muted)}.rb-pg-dl dd{margin:0;font-weight:600;text-align:right}
.rb-pg-m{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:8px}
.rb-pg-m .pg-q{flex:1 1 120px;margin:0}
.pg-medidor{width:96px;height:96px;flex:none}