/* Painel executivo (v1.10.0, redesenho do Alessandro). Mesmos tokens do tema:
   dourado (--bronze) como cor principal, verde/vermelho só para leitura
   favorável/desfavorável. Grade responsiva: cards em linha, gráfico principal
   e tabelas em largura total, receita e despesa lado a lado. */
.painel-exec>*+*{margin-top:16px}
.painel-exec .pe-dupla>*+*{margin-top:0}
.pe-cabeca{align-items:flex-start;flex-wrap:wrap;gap:12px}
.pe-exportar{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.pe-filtros{border:1px solid var(--borda);border-radius:var(--r);padding:12px 14px;background:var(--papel)}
.pe-filtros-alternar{display:none}
.pe-filtros-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px 12px;align-items:end}
.pe-filtros-grade .campo{margin:0}
.pe-filtros-grade select,.pe-filtros-grade input{min-height:38px}
.pe-bloco{padding:16px 18px;min-width:0}
.pe-bloco-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.pe-bloco-topo h3{margin:0;font-size:16px}
.pe-nota{font-size:12.5px;color:var(--texto-3);margin:10px 0 0}
.pe-sub{margin:16px 0 6px;font-size:13px;color:var(--texto-2)}
.pe-dupla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
/* Resumo */
.pe-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px 24px}
.pe-resumo h4{margin:0 0 6px;font-size:13px;font-weight:650;color:var(--texto-2)}
.pe-resumo-lista{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px;line-height:1.45}
.pe-resumo-lista.pe-bom li::marker{color:var(--verde)}
.pe-resumo-lista.pe-ruim li::marker{color:var(--vermelho)}
/* Cards */
/* 8 cards: 4 por linha no desktop (2 linhas iguais), 2 por linha até 1024 px:
   no tablet, 4 colunas não dão espaço para o valor em reais. */
.pe-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1024px){.pe-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pe-card{position:relative;display:grid;gap:4px;padding:14px 14px 10px;border-radius:var(--r);background:var(--papel);border:1px solid var(--borda);border-top:3px solid var(--bronze);min-width:0;overflow:hidden;container-type:inline-size}
.pe-card-negativo{border-top-color:var(--vermelho)}
.pe-card-nome{font-size:12.5px;color:var(--texto-3);font-weight:600}
/* Dinheiro nunca sai cortado: o corpo encolhe até caber na largura do card
   (--pe-n = caracteres do valor, posto em indicadores-blocos.js), entre 13 px e o
   máximo da faixa. Sem consulta de contêiner, veja o bloco @supports not abaixo. */
.pe-card-valor{--pe-valor-max:21px;font-size:var(--pe-valor-max);letter-spacing:-.02em;overflow-wrap:anywhere}
@supports (width:1cqi){.pe-card-valor{font-size:clamp(13px,calc(100cqi / (var(--pe-n,10) * .62)),var(--pe-valor-max))}}
.pe-card-comp{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:12px;color:var(--texto-3)}
.pe-card-comp small{font-size:inherit}
.pe-card-meta{font-size:12px;color:var(--texto-3)}
.pe-delta{font-weight:700;font-size:12.5px}
.pe-favoravel,.pe-bom{color:var(--verde)}
.pe-desfavoravel,.pe-negativo,.pe-ruim{color:var(--vermelho)}
.pe-neutro{color:var(--bronze-texto)}
.pe-spark{width:100%;height:30px;margin-top:4px}
@media (max-width:1180px){.pe-card-valor{--pe-valor-max:18px}}
/* Sem consulta de contêiner (Safari < 16, Chrome < 105, Firefox < 110): o valor
   fica numa linha só (antes partia no meio do número) e o corpo encolhe pela
   largura útil do card estimada pela tela: 4 por linha com a barra lateral,
   2 por linha com o trilho (até 1024 px) e na gaveta (até 767 px). */
@supports not (width:1cqi){
  .pe-card-valor{--pe-card-w:calc(25vw - 124px);white-space:nowrap;overflow-wrap:normal;font-size:clamp(13px,calc(var(--pe-card-w) / (var(--pe-n,10) * .62)),var(--pe-valor-max))}
  @media (max-width:1024px){.pe-card-valor{--pe-card-w:calc(50vw - 118px)}}
  @media (max-width:767px){.pe-card-valor{--pe-card-w:calc(50vw - 65px)}}
}
/* Gráficos: duas pranchas por gráfico (indicadores-graficos.js) e a caixa como
   contêiner. Abaixo de 720 px de caixa vale a compacta; nas duas, o corpo (em
   unidades do SVG) muda com a caixa para o texto ficar entre 11 e 15 px na tela,
   sem rolagem: a larga cresce quando a caixa encolhe (e diminui nas telas
   grandes); a compacta, que vai até 460 px no tablet, diminui depois de 400 px. */
.pe-largo{grid-column:1/-1}
.pe-grafico-caixa{overflow-x:auto;container-type:inline-size}
.pe-grafico{width:100%;height:auto;display:block;font-size:12px}
.pe-grafico .pe-eixo{fill:var(--texto-3);font-size:12px}
.pe-grafico-compacto{display:none;max-width:460px}
.pe-grafico-compacto .pe-eixo{font-size:13px}
@container (min-width:400px){.pe-grafico-compacto .pe-eixo{font-size:11px}}
@container (max-width:879px){.pe-grafico-largo .pe-eixo{font-size:15px}}
@container (min-width:1200px){.pe-grafico-largo .pe-eixo{font-size:10px}}
@container (max-width:719px){.pe-grafico-largo{display:none}.pe-grafico-compacto{display:block}}
/* Sem consulta de contêiner: as mesmas faixas pela largura da tela (caixa de
   720 px = tela de 888 px com o trilho; a gaveta abaixo de 768 px), e a larga
   não encolhe abaixo de 560 px (rola na caixa), como antes das duas pranchas. */
@supports not (width:1cqi){
  .pe-grafico-largo{min-width:560px}
  .pe-grafico-largo .pe-eixo{font-size:15px}
  @media (min-width:1228px){.pe-grafico-largo .pe-eixo{font-size:12px}}
  @media (min-width:462px){.pe-grafico-compacto .pe-eixo{font-size:11px}}
  @media (max-width:887px){.pe-grafico-largo{display:none}.pe-grafico-compacto{display:block}}
}
.pe-grafico .pe-grade{stroke:var(--borda);stroke-width:1}
.pe-grafico .pe-zero{stroke:var(--texto-3);stroke-width:1;opacity:.6}
.pe-controles{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:10px}
.pe-chips{display:flex;flex-wrap:wrap;gap:6px;margin-right:auto}
.pe-chip{border:1px solid var(--borda-forte);background:transparent;color:var(--texto-3);border-radius:var(--r-pilula);padding:5px 10px;font:inherit;font-size:12.5px;cursor:pointer}
.pe-chip::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cor,var(--texto-3));margin-right:6px;opacity:.35}
.pe-chip.ativo{color:var(--texto);border-color:var(--bronze-borda)}
.pe-chip.ativo::before{opacity:1}
/* Barras horizontais */
.pe-barras{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pe-barra{display:grid;grid-template-columns:minmax(110px,1.1fr) minmax(80px,1.4fr) auto;gap:10px;align-items:center;width:100%;background:transparent;border:0;border-radius:10px;padding:7px 8px;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pe-barra:hover,.pe-barra:focus-visible{background:var(--papel-2)}
.pe-barra-nome{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.pe-barra-trilho{height:10px;border-radius:6px;background:var(--papel-2);overflow:hidden}
.pe-barra-cheia{display:block;height:100%;border-radius:6px}
.pe-barra-num{display:grid;text-align:right;font-size:13px}
.pe-barra-num small{font-size:12px;color:var(--texto-3)}
/* Tabela */
.pe-tabela th .pe-ordenar{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;white-space:nowrap}
.pe-tabela td,.pe-tabela th{white-space:nowrap}
.pe-tabela .pe-total td{font-weight:700;border-top:2px solid var(--borda-forte)}
.pe-link{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--texto);cursor:pointer;text-decoration:underline;text-decoration-color:var(--bronze-borda);text-underline-offset:3px}
/* Metas e distribuição */
.pe-metas{display:grid;gap:12px}
.pe-meta{display:grid;grid-template-columns:1fr auto;gap:2px 12px}
.pe-meta span{font-size:13px;color:var(--texto-2)}
.pe-meta small{grid-column:1/-1;font-size:12px;color:var(--texto-3)}
.pe-meta .pe-progresso{grid-column:1/-1}
.pe-progresso{display:block;height:6px;border-radius:4px;background:var(--papel-2);overflow:hidden}
.pe-progresso>span{display:block;height:100%;background:var(--bronze);border-radius:4px}
.pe-progresso.pe-cheio>span{background:var(--verde)}
.pe-progresso.pe-sem>span{width:0}
.pe-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px 18px;margin:0}
.pe-dl dt{font-size:12.5px;color:var(--texto-3)}
.pe-dl dd{margin:2px 0 0;font-size:16px;font-weight:650}
/* Pontos de atenção: linhas separadas por fio e texto inteiro (é a explicação do
   alerta, não pode sair cortado). acesso.css vem depois: daí .lista.pe-alertas. */
.lista.pe-alertas li{border-bottom:1px solid var(--borda);border-radius:0}
.lista.pe-alertas li:last-child{border-bottom:0}
.lista.pe-alertas b,.lista.pe-alertas small{white-space:normal;overflow-wrap:anywhere}
.pe-impressao{display:none}
/* Celular: filtros recolhíveis, tabelas rolam, alerta com o texto em cima */
@media (max-width:720px){
  .pe-filtros-alternar{display:inline-flex}
  .pe-filtros .pe-filtros-grade{display:none;margin-top:10px}
  .pe-filtros.aberto .pe-filtros-grade{display:grid}
  .pe-barra{grid-template-columns:1fr auto}
  .pe-barra-trilho{grid-column:1/-1;grid-row:2}
  .lista.pe-alertas li{flex-wrap:wrap}
  /* Os :not() só dão peso para vencer o flex:1 de .lista li>span:not(…) (acesso.css). */
  .lista.pe-alertas li>span:first-child:not(.pilula):not(.lista-acoes){flex:1 1 100%}
}
@media (max-width:420px){.pe-card{padding:12px 10px 8px}.pe-card-valor{--pe-valor-max:17px}}
/* Impressão: PDF do painel e relatório executivo (Salvar como PDF) */
@media print{
  body.pe-imprimindo .pe-filtros,body.pe-imprimindo .pe-exportar,body.pe-imprimindo .pe-controles,body.pe-imprimindo .pe-bloco-topo .botao,body.pe-imprimindo #appHeader{display:none!important}
  body.pe-imprimindo .pe-impressao{display:grid;gap:2px;font-size:11px;margin-bottom:10px;border-bottom:1px solid #ccc;padding-bottom:8px}
  body.pe-imprimindo .pe-bloco,body.pe-imprimindo .pe-card{break-inside:avoid}
  body.pe-so-relatorio #peEvolucao,body.pe-so-relatorio #peReceitaCentros,body.pe-so-relatorio #peDespesaCentros,body.pe-so-relatorio #pePonte{display:none!important}
  /* No papel vale sempre a prancha larga, a mesma da imagem baixada. */
  .pe-grafico-compacto{display:none!important}
  .pe-grafico-largo{display:block!important}
}