/* ---------- etapa 3: gráficos e blocos de análise ---------- */
.grafico { position: relative; height: 240px; }
.rosca { position: relative; height: 200px; }
.legenda { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--tx2); flex-wrap: wrap; }
.legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.ico-card { width: 30px; height: 30px; border-radius: 8px; background: rgba(var(--p-rgb), .15); color: var(--p); display: grid; place-items: center; }
.mini-cards { margin-top: 12px; }
.card.mini { padding: 10px 12px; background: var(--bg2); }
.card.mini .valor { font-size: 16px; font-weight: 800; margin: 4px 0 2px; }
.linha-mini { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--tx2); gap: 6px; }
.linha-mini b { font-size: 11px; padding: 1px 6px; border-radius: 6px; }
.pt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.rot-mini { font-size: 10px; color: var(--tx3); letter-spacing: .4px; margin-bottom: 4px; }
.up { background: rgba(34,197,94,.15); color: var(--verde); }
.down { background: rgba(239,68,88,.15); color: var(--vermelho); }
.neutro { color: var(--tx3); }
.kpi .var .neutro { background: none; }
.canal-linha { padding: 8px 0; border-bottom: 1px solid var(--linha); }
.canal-linha:last-child { border-bottom: 0; }
.canal-cab { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.barra.larga { width: 100%; display: block; margin: 0; }
.cliente-bloco { margin-top: 10px; background: var(--bg2); }
.carregando { color: var(--tx2); padding: 30px; text-align: center; }
.tabela tfoot td { border-top: 2px solid var(--linha); background: var(--bg2); }
.tabela.compacta tfoot td { padding: 9px; }
.grade-4.mini-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }


/* ---------- etapa 4: DRE e lançamentos ---------- */
.grade-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1100px) { .grade-5 { grid-template-columns: repeat(2, 1fr); } }
.filtro.comp { position: relative; }
.comp-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; background: var(--bg1); border: 1px solid var(--linha); border-radius: 12px; padding: 12px; min-width: 300px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.comp-atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.comp-atalhos button, .comp-grade button { background: var(--bg2); border: 1px solid var(--linha); color: var(--tx1); border-radius: 8px; padding: 6px 8px; font-size: 12px; cursor: pointer; }
.comp-atalhos button:hover, .comp-grade button:hover { border-color: var(--p); }
.comp-ano { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 6px 0 8px; }
.comp-ano button { background: none; border: 1px solid var(--linha); color: var(--tx1); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; }
.comp-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.comp-grade button.sel { background: rgba(var(--p-rgb), .2); border-color: var(--p); }
.comp-grade button.borda { background: var(--p); color: #fff; }
.comp-pop .sep { border-top: 1px solid var(--linha); margin: 6px 0; }
.comp-pop .caixa { display: flex; padding: 4px 0; }
.tabela.dre th:first-child, .tabela.dre td:first-child { text-align: left; min-width: 240px; position: sticky; left: 0; background: var(--bg1); }
.tabela.dre th:not(:first-child), .tabela.dre td:not(:first-child) { text-align: right; min-width: 130px; }
.tabela.dre .dre-grupo td { background: var(--bg2); font-weight: 800; cursor: pointer; }
.tabela.dre .dre-grupo td:first-child { background: var(--bg2); }
.tabela.dre .dre-filho td { font-size: 13px; }
.tabela.dre .dre-filho td:first-child { padding-left: 28px; color: var(--tx2); }
.tabela.dre .dre-total td { font-weight: 800; border-top: 2px solid var(--linha); }
.tabela.dre .dre-margem td { background: rgba(245,179,36,.10); } .tabela.dre .dre-margem td:first-child { background: rgba(245,179,36,.10); color: var(--amarelo); }
.tabela.dre .dre-lucro td { background: rgba(34,197,94,.10); } .tabela.dre .dre-lucro td:first-child { background: rgba(34,197,94,.10); color: var(--verde); }
.tabela.dre .dre-neg td:first-child { color: var(--tx2); }
.dre-v { font-weight: 600; } .dre-v.neg { color: var(--vermelho); }
.dre-p { font-size: 10px; color: var(--tx3); }
.col-ant { background: rgba(var(--p-rgb), .06); }
.seta { display: inline-block; width: 14px; color: var(--tx3); }