/* Painel da diretoria (D-039): grade de 12 colunas, cartões de indicador com comparação, painéis de gráfico, faixa da empresa de demonstração (D-040). */
/* Paleta dos gráficos: c0–c9 semântica (verde GMIX = bom/principal, grafite = faturado, vermelho = custo/atraso…), p0–p7 categórica por usina.
   O JS lê estes tokens: uma só fonte para gráfico, tooltip e legenda. */
:root { --demo: #8a5300; --demo-bg: #fff3dc; --up: #1f7a33; --down: #b3261e; --flat: #6b6f6d; --chart-h: 300px;
  --c0: #4eb852; --c1: #363435; --c2: #2f9e8f; --c3: #e0a526; --c4: #4a78c2; --c5: #d6544a; --c6: rgba(54, 52, 53, .16); --c7: #e2e6e4; --c8: #a8dcaa; --c9: #f0a8a2; --c10: #b9c0bc;
  --p0: #4eb852; --p1: #4a78c2; --p2: #e0a526; --p3: #2f9e8f; --p4: #d6544a; --p5: #8c6bb1; --p6: #5b5f5d; --p7: #c27c2c; --chart-shadow: rgba(54, 52, 53, .05); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --demo: #f0b45a; --demo-bg: #33270f; --up: #8ad690; --down: #ff8a80; --flat: #a0a7a3;
  --c0: #5cc561; --c1: #c9cfcc; --c2: #3fb8a6; --c3: #f0b45a; --c4: #7aa2e6; --c5: #ff8a80; --c6: rgba(201, 207, 204, .25); --c7: #2c322f; --c8: #3d7a40; --c9: #8a3d38; --c10: #6b736f;
  --p0: #5cc561; --p1: #7aa2e6; --p2: #f0b45a; --p3: #3fb8a6; --p4: #ff8a80; --p5: #b79ae0; --p6: #a0a7a3; --p7: #e0a060; --chart-shadow: rgba(255, 255, 255, .05); } }
:root[data-theme="dark"] { --demo: #f0b45a; --demo-bg: #33270f; --up: #8ad690; --down: #ff8a80; --flat: #a0a7a3;
  --c0: #5cc561; --c1: #c9cfcc; --c2: #3fb8a6; --c3: #f0b45a; --c4: #7aa2e6; --c5: #ff8a80; --c6: rgba(201, 207, 204, .25); --c7: #2c322f; --c8: #3d7a40; --c9: #8a3d38; --c10: #6b736f;
  --p0: #5cc561; --p1: #7aa2e6; --p2: #f0b45a; --p3: #3fb8a6; --p4: #ff8a80; --p5: #b79ae0; --p6: #a0a7a3; --p7: #e0a060; --chart-shadow: rgba(255, 255, 255, .05); }

main.wide { max-width: 1480px; }
.demo-band { background: repeating-linear-gradient(-45deg, var(--demo-bg) 0 14px, color-mix(in srgb, var(--demo-bg) 70%, var(--card)) 14px 28px); color: var(--demo); border-bottom: 1px solid color-mix(in srgb, var(--demo) 35%, transparent); padding: 7px 24px; font-size: 13px; }
.demo-band b { letter-spacing: .08em; margin-right: 8px; }
.head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.updated { color: var(--muted); font-size: 12.5px; }

/* filtros */
.filters { position: sticky; top: 58px; z-index: 8; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; box-shadow: var(--shadow); }
.filters label.f { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 170px; }
.filters select { padding: 7px 10px; }
.f-period { display: flex; flex-direction: column; gap: 4px; } .f-period > div, .f-period { min-width: 0; }
.f-period { flex-direction: row; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.f-lbl { width: 100%; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: transparent; color: var(--muted); border: 0; border-radius: 0; padding: 7px 12px; font-weight: 500; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.f-period select { width: auto; min-width: 170px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; align-self: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--info-bg); color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; font-weight: 500; }
.chip button { background: transparent; border: 0; color: inherit; padding: 0 6px; font-size: 15px; line-height: 1; }

/* indicadores */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 16px; }
@media (max-width: 1280px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kc .kl { display: flex; justify-content: space-between; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kc .kv { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc .kv small { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.kc .kv.nodata { font-size: 18px; color: var(--muted); font-weight: 600; }
.cmp { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; font-variant-numeric: tabular-nums; }
.cmp span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.cmp .good { color: var(--up); } .cmp .bad { color: var(--down); } .cmp .flat { color: var(--flat); }
.cmp i { font-style: normal; color: var(--muted); }
.spark { height: 38px; margin: 4px -4px 0; }
.info { background: transparent; border: 1px solid var(--line); color: var(--muted); width: 22px; height: 22px; padding: 0; border-radius: 50%; font-size: 12px; font-weight: 700; line-height: 1; flex: none; }
.info:hover { background: var(--soft); color: var(--brand-strong); border-color: var(--brand); }

/* painéis de gráfico */
.board { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .span-12 { grid-column: 1 / -1; }
@media (max-width: 1180px) { .span-4, .span-6, .span-8 { grid-column: span 6; } .span-8 { grid-column: span 12; } }
@media (max-width: 760px) { .span-4, .span-6, .span-8 { grid-column: span 12; } }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; }
.panel.dim { opacity: .98; }
.ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 14px 16px 0; }
.ph h2 { font-size: 15px; margin: 0; } .ph p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.tools { display: flex; gap: 4px; flex: none; }
.tools button { background: transparent; border: 1px solid transparent; color: var(--muted); padding: 4px 7px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.tools button:hover { background: var(--soft); border-color: var(--line); color: var(--brand-strong); }
.tools svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.chart { height: var(--chart-h); margin: 4px 6px 0; }
.pf { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 16px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; margin-top: auto; }
.pf b { font-weight: 600; color: var(--ink); }
.legend-note { padding: 0 16px; color: var(--muted); font-size: 12px; }

/* tooltip ECharts (classes, sem estilo inline — CSP) */
.tt { font: 12.5px/1.45 Inter, system-ui, sans-serif; }
.tt b { display: block; margin-bottom: 4px; }
.tt div { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; }
.tt .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.tt .c0 { background: var(--c0); } .tt .c1 { background: var(--c1); } .tt .c2 { background: var(--c2); } .tt .c3 { background: var(--c3); } .tt .c4 { background: var(--c4); }
.tt .c5 { background: var(--c5); } .tt .c6 { background: var(--c6); } .tt .c7 { background: var(--c7); } .tt .c8 { background: var(--c8); } .tt .c9 { background: var(--c9); } .tt .c10 { background: var(--c10); }
.tt .p0 { background: var(--p0); } .tt .p1 { background: var(--p1); } .tt .p2 { background: var(--p2); } .tt .p3 { background: var(--p3); }
.tt .p4 { background: var(--p4); } .tt .p5 { background: var(--p5); } .tt .p6 { background: var(--p6); } .tt .p7 { background: var(--p7); }

/* detalhe (drill-down) */
.drill { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100%); background: var(--card); border-left: 1px solid var(--line); box-shadow: -8px 0 30px rgba(0, 0, 0, .12); z-index: 40; display: flex; flex-direction: column; }
.drill header { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; }
.drill header h2 { margin: 0; } .drill header p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.drill .crumbs { color: var(--muted); font-size: 12.5px; padding: 10px 18px 0; }
.drill .crumbs b { color: var(--ink); }
.drill .body { overflow: auto; padding: 8px 18px 18px; }
.drill td.num, .drill th.num { text-align: right; font-variant-numeric: tabular-nums; }
.drill .sum { display: flex; gap: 18px; flex-wrap: wrap; padding: 12px 0; }
.drill .sum div { display: flex; flex-direction: column; } .drill .sum small { color: var(--muted); font-size: 12px; } .drill .sum b { font-size: 18px; font-variant-numeric: tabular-nums; }
.tag { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 10px; font-weight: 600; }
.tag.paga { background: var(--ok-bg); color: var(--ok); } .tag.aberta { background: var(--info-bg); color: var(--info); } .tag.atraso { background: var(--err-bg); color: var(--err); }
.formula { margin: 8px 16px 0; padding: 10px 12px; border-radius: 8px; background: var(--soft); border: 1px solid var(--line); font-size: 12.5px; }
.formula dt { font-weight: 600; } .formula dd { margin: 0 0 6px; color: var(--muted); }

@media (max-width: 860px) {
  .demo-band { padding: 7px 16px; }
  .filters { position: static; } .filters label.f { min-width: 0; flex: 1 1 140px; }
  .chips { margin-left: 0; }
  :root { --chart-h: 260px; }
}

[hidden] { display: none !important; }
.drill td:first-child, .drill td:nth-child(2), .drill .tag { white-space: nowrap; }
@media (max-width: 640px) { .kc .kv { font-size: 18px; } .kc .kl { font-size: 11px; } }

/* ---------- painel no sistema (D-039) ---------- */
.painel-avisos { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.painel-avisos p { margin: 0; }
.kc.na .kv { color: var(--muted); }
.kc .na-note { font-size: 11.5px; color: var(--muted); }
.chart-empty { height: var(--chart-h); display: grid; place-items: center; color: var(--muted); font-size: 13px; margin: 4px 16px 0; text-align: center; }
.panel .na { margin: 6px 16px 0; padding: 6px 10px; border-radius: 8px; background: var(--info-bg); color: var(--info); font-size: 12px; }
.panel .ptable { margin: 8px 16px 0; overflow: auto; max-height: 460px; }
.panel .ptable table, .drill table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.panel .ptable th, .panel .ptable td, .drill th, .drill td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.panel .ptable th { position: sticky; top: 0; background: var(--card); color: var(--muted); font-weight: 600; }
.panel .ptable td.num, .panel .ptable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.panel .ptable tr.click, .drill tr.click { cursor: pointer; }
.panel .ptable tr.click:hover, .drill tr.click:hover { background: var(--soft); }
.panel.tabela-only .chart { display: none; }
.tools button[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-strong); }
.f-range { display: inline-flex; gap: 6px; align-items: center; }
.f-range input { width: auto; padding: 6px 8px; }
.drill .total { font-weight: 700; }
.drill tfoot td { font-weight: 700; border-top: 2px solid var(--line); }
.drill .actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; }
.drill-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .18); z-index: 39; }
.print-filtros { display: none; }
.manual-gen { margin-top: 16px; }

@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff; }
  .sidebar, .top, .filters, .tools, .drill, .drill-backdrop, .head-actions button, .manual-gen, #toast { display: none !important; }
  .content, main, main.wide { max-width: none; padding: 0; margin: 0; }
  .print-filtros { display: block; color: #333; font-size: 12px; margin: 0 0 8px; }
  .panel, .kc { break-inside: avoid; box-shadow: none; }
  .board { gap: 10px; } .kpis { gap: 8px; }
  .demo-band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.kc .kv { white-space: normal; } .kc .kv small { white-space: nowrap; }
.drill td.num, .panel .ptable td.num { white-space: nowrap; }