/* t67: folha dos três gráficos de Custos e recebimentos.
   Tudo prefixado com .cg-, dentro de .cg-analise ou .cg-faixa-area: classe
   genérica em folha compartilhada já atravessou telas neste repositório. */
/* ⚠️ Classe PRÓPRIA, não `.pendencias-metricas`: aquela é compartilhada com a
   Central de Pendências, e mexer nela ali mudaria uma tela que ninguém pediu.
   Com quatro colunas fixas, o quinto cartão caía sozinho numa segunda linha. */
.cg-metricas{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.cg-analise{margin-bottom:14px}
/* ⚠️ ARMADILHA CONHECIDA DESTE REPOSITÓRIO: a folha base cobra do TIPO
   (`header{height:76px}`, e 48px abaixo de 760px). Um <header> aqui ficava com
   altura fixa, o conteúdo transbordava e o botão "Ocultar análise" passava a
   ficar POR BAIXO do título do gráfico seguinte: existia, tinha tamanho, e não
   recebia clique. Por isso é <div>, e a altura é declarada mesmo assim. */
.cg-analise-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
 height:auto;min-height:0;padding:0;border:0;background:none}
.cg-analise-topo h2{margin:0;font-size:1.05rem}
.cg-analise-acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cg-analise-acoes label{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted)}

/* 6/3/3: a evolução é mais larga porque é a que tem eixo temporal. */
.cg-grade{display:grid;gap:14px;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);margin-top:12px;align-items:start}
.cg-painel{min-width:0;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface)}
.cg-painel h3{margin:0 0 8px;font-size:.92rem}
.cg-svg{inline-size:100%;block-size:auto;max-block-size:240px}
.cg-eixo{stroke:var(--line);stroke-width:1}
.cg-escala{font-size:9px;fill:var(--muted)}
/* ⚠️ A cor do TRAÇO e a cor do PREENCHIMENTO vão em regras separadas. Com
   `fill` na mesma regra da linha, o caminho aberto era preenchido e o gráfico
   virava uma mancha verde sólida: `path.cg-linha{fill:none}` sozinho perde,
   porque duas classes ganham de elemento mais classe. */
.cg-linha{stroke-width:2;stroke-linejoin:round;stroke-linecap:round;fill:none!important}
path.cg-recebido{stroke:var(--grafico-recebido,#2f7d5a)}
path.cg-pago{stroke:var(--grafico-pago,#b4601f)}
circle.cg-recebido{stroke:var(--grafico-recebido,#2f7d5a);fill:var(--grafico-recebido,#2f7d5a)}
circle.cg-pago{stroke:var(--grafico-pago,#b4601f);fill:var(--grafico-pago,#b4601f)}
/* Lacuna é BURACO visível, não zero desenhado no eixo. */
.cg-lacuna{fill:var(--paper))}
.cg-legenda{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:6px 0 0;font-size:.8rem;color:var(--muted)}
.cg-chave{inline-size:10px;block-size:10px;border-radius:2px;display:inline-block}
.cg-chave.cg-recebido{background:var(--grafico-recebido,#2f7d5a)}
.cg-chave.cg-pago{background:var(--grafico-pago,#b4601f)}
.cg-chave.cg-areceber{background:var(--grafico-areceber,#3f6ea8)}
.cg-chave.cg-custo{background:var(--grafico-custo,#8a5fbf)}
.cg-tabela{inline-size:100%;border-collapse:collapse;margin-top:8px;font-size:.8rem}
.cg-tabela th,.cg-tabela td{text-align:left;padding:3px 6px;border-bottom:1px solid var(--line)}
.cg-nota{margin:8px 0 0;font-size:.78rem;color:var(--muted)}
.cg-vazio{border:1px dashed var(--line);border-radius:8px;padding:14px;text-align:center;color:var(--muted)}

.cg-grupos{display:flex;align-items:flex-end;gap:10px;block-size:150px;margin-top:4px}
.cg-grupo{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;block-size:100%}
.cg-barras{display:flex;align-items:flex-end;gap:2px;block-size:100%}
.cg-barra{flex:1 1 0;min-block-size:2px;border-radius:2px 2px 0 0;display:block}
.cg-barra.cg-recebido{background:var(--grafico-recebido,#2f7d5a)}
.cg-barra.cg-areceber{background:var(--grafico-areceber,#3f6ea8)}
.cg-barra.cg-custo{background:var(--grafico-custo,#8a5fbf)}
/* Custo desconhecido é HACHURA, não barra cheia nem barra zero. */
.cg-barra.cg-parcial{background:repeating-linear-gradient(45deg,var(--grafico-custo,#8a5fbf),var(--grafico-custo,#8a5fbf) 3px,transparent 3px,transparent 6px)}
.cg-grupo-rotulo{font-size:.72rem;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-marca{font-size:.7rem;padding:0 5px;border-radius:999px;border:1px solid var(--line)}

.cg-rosca-area{display:flex;flex-direction:column;align-items:center;gap:2px}
.cg-rosca{inline-size:150px;block-size:150px}
.cg-rosca-numero{font-size:24px;font-weight:700;fill:var(--ink)}
.cg-rosca-unidade{font-size:9px;fill:var(--muted)}
.cg-rosca-sub{margin:0 0 8px;font-size:.8rem;color:var(--muted);text-align:center}
.cg-legenda-lista{list-style:none;margin:8px 0 0;padding:0;inline-size:100%;display:flex;flex-direction:column;gap:4px;font-size:.8rem}
.cg-legenda-lista li{display:flex;align-items:center;gap:6px}
.cg-legenda-valor{margin-inline-start:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.cg-fatia-0,.cg-chave.cg-fatia-0{stroke:#b4601f;background:#b4601f}
.cg-fatia-1,.cg-chave.cg-fatia-1{stroke:#3f6ea8;background:#3f6ea8}
.cg-fatia-2,.cg-chave.cg-fatia-2{stroke:#2f7d5a;background:#2f7d5a}
.cg-fatia-3,.cg-chave.cg-fatia-3{stroke:#8a5fbf;background:#8a5fbf}
.cg-fatia-4,.cg-chave.cg-fatia-4{stroke:#a3803a;background:#a3803a}
.cg-fatia-5,.cg-chave.cg-fatia-5{stroke:#6b6b6b;background:#6b6b6b}

.cg-faixa-area{margin-bottom:14px}
.cg-faixa{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cg-faixa-item{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;
 align-items:center;justify-content:space-between;gap:10px;min-width:0}
.cg-faixa-item p{margin:0}
.cg-faixa-item small{display:block;font-size:.78rem;color:var(--muted)}

/* Transição discreta só na primeira pintura e na troca de período. Nada de
   animação contínua: a tela não é painel de mercado ao vivo. */
@media (prefers-reduced-motion:no-preference){
 .cg-barra,.cg-fatia{transition:block-size 320ms ease,stroke-dasharray 320ms ease}
}
@media (max-width:1180px){
 .cg-grade{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
 .cg-grupos{block-size:120px}
 .cg-faixa-item{flex-direction:column;align-items:stretch}
}