:root {
  --bg: #f4f6f8;
  --bg-painel: #ffffff;
  --bg-linha-par: #f0f3f6;
  --bg-destaque: #e7edf5;
  --borda: #d6dce3;
  --texto: #1c2530;
  --texto-fraco: #5b6b7c;
  --azul: #2563eb;
  --verde: #1f8a4c;
  --vermelho: #c0392b;
  --amarelo: #a8730f;
  --origem-cor: rgba(37, 99, 235, 0.16);
  --destino-cor: rgba(168, 115, 15, 0.20);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--texto);
  font-size: 13px;
  display: flex;
  flex-direction: column;
}

.topo {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 16px;
  background: var(--bg-painel);
  border-bottom: 1px solid var(--borda);
}
.topo-titulo { font-size: 16px; font-weight: 700; }
.abas-principais { display: flex; gap: 6px; }
.aba-btn, .sub-aba-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--texto-fraco);
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.aba-btn:hover, .sub-aba-btn:hover { color: var(--texto); background: rgba(0,0,0,0.04); }
.aba-btn.ativa, .sub-aba-btn.ativa { color: #fff; background: var(--azul); }

main#conteudo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.aba-conteudo { display: none; flex: 1; min-height: 0; flex-direction: column; }
.aba-conteudo.ativa { display: flex; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--bg-painel);
  border-bottom: 1px solid var(--borda);
  flex-wrap: wrap;
}
.campo-toolbar { display: flex; align-items: center; gap: 6px; }
.campo-toolbar label { color: var(--texto-fraco); font-size: 12px; }
select, input[type=text], input[type=number], input[type=file] {
  background: var(--bg);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 13px;
}
.separador-toolbar { width: 1px; height: 22px; background: var(--borda); }
.flex-spacer { flex: 1; }
.info-import { color: var(--texto-fraco); font-size: 12px; }

button { font-family: inherit; }
.btn-primario, .btn-secundario {
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--borda);
}
.btn-primario { background: var(--azul); color: #fff; border-color: var(--azul); }
.btn-primario:hover { filter: brightness(1.1); }
.btn-secundario { background: #fff; color: var(--texto); }
.btn-secundario:hover { background: rgba(0,0,0,0.05); }
.btn-perigo { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }
.btn-icone { background: transparent; border: none; color: var(--texto-fraco); cursor: pointer; font-size: 13px; }
.btn-icone:hover { color: var(--vermelho); }

.quadro-scroll { flex: 1; overflow: auto; }
.estado-vazio { padding: 40px; text-align: center; color: var(--texto-fraco); }

table.tabela-fluxo { border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
table.tabela-fluxo th, table.tabela-fluxo td {
  border: 1px solid var(--borda);
  padding: 5px 8px;
  text-align: right;
}
table.tabela-fluxo th.col-rotulo, table.tabela-fluxo td.col-rotulo {
  text-align: left;
  position: sticky;
  background: var(--bg-painel);
  z-index: 2;
}
table.tabela-fluxo thead th {
  position: sticky;
  top: 0;
  background: var(--bg-painel);
  z-index: 3;
  color: var(--texto-fraco);
}
table.tabela-fluxo thead th.col-rotulo { z-index: 4; }
table.tabela-fluxo tbody tr:nth-child(even) td { background: var(--bg-linha-par); }
table.tabela-fluxo tbody tr.linha-saldo td { background: var(--bg-destaque); font-weight: 700; }
table.tabela-fluxo tbody tr.linha-total td { background: var(--bg-destaque); font-weight: 700; border-top: 2px solid var(--borda); }
table.tabela-fluxo tbody tr.linha-nivel-0 > td.col-rotulo { font-weight: 700; }

.valor-neg { color: var(--vermelho); }
.valor-pos { color: var(--texto); }

.toggle-expandir { cursor: pointer; color: var(--texto-fraco); margin-right: 6px; user-select: none; display: inline-block; width: 12px; }

td.celula-valor { cursor: grab; position: relative; }
td.celula-valor.arrastando { opacity: 0.4; }
td.celula-valor.tocado-origem { background: var(--origem-cor) !important; }
td.celula-valor.tocado-destino { background: var(--destino-cor) !important; }
td.celula-valor.alvo-drop { outline: 2px dashed var(--azul); outline-offset: -2px; }

.overlay-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 40;
}
.popover-arrasto {
  position: fixed; z-index: 50;
  background: var(--bg-painel); border: 1px solid var(--borda); border-radius: 8px;
  padding: 14px; width: 280px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.popover-titulo { font-weight: 700; margin-bottom: 8px; }
.popover-linha { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--texto-fraco); }
.popover-linha input { width: 100%; }
.popover-botoes { display: flex; justify-content: flex-end; gap: 8px; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #fff; color: var(--texto); border: 1px solid var(--borda); padding: 10px 18px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12); z-index: 60; font-size: 13px;
}
.toast.erro { border-color: var(--vermelho); color: var(--vermelho); }
.toast.sucesso { border-color: var(--verde); color: var(--verde); }

/* ----- Gráfico ----- */
.grafico-corpo { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.grafico-legenda { width: 260px; flex-shrink: 0; overflow: auto; padding: 14px; border-right: 1px solid var(--borda); background: var(--bg-painel); }
.grafico-legenda-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texto-fraco); margin: 16px 0 6px; }
.grafico-legenda-titulo:first-child { margin-top: 0; }
.grafico-legenda-item { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 12.5px; cursor: pointer; border-radius: 4px; }
.grafico-legenda-item:hover { background: rgba(0,0,0,0.04); }
.grafico-legenda-item input { cursor: pointer; }
.grafico-legenda-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.grafico-legenda-nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grafico-legenda-total { color: var(--texto-fraco); font-size: 11px; }
.grafico-svg-container { flex: 1; overflow: auto; padding: 16px; }
.grafico-svg-container svg { display: block; }
.grafico-ponto { cursor: pointer; }
.grafico-eixo-linha { stroke: var(--borda); stroke-width: 1; }
.grafico-grade-linha { stroke: var(--borda); stroke-width: 1; stroke-dasharray: 2,3; }
.grafico-eixo-texto { fill: var(--texto-fraco); font-size: 10px; font-family: Arial, Helvetica, sans-serif; }

/* ----- Cadastro ----- */
.sub-abas { display: flex; gap: 6px; padding: 10px 16px; background: var(--bg-painel); border-bottom: 1px solid var(--borda); }
.sub-aba-conteudo { display: none; padding: 20px; overflow: auto; flex: 1; }
.sub-aba-conteudo.ativa { display: block; }

.painel-cadastro { max-width: 900px; }
.painel-cadastro h2 { font-size: 15px; margin: 0 0 4px; }
.painel-cadastro p.descricao { color: var(--texto-fraco); margin: 0 0 16px; font-size: 12.5px; }

.linha-form { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.linha-form label { width: 220px; color: var(--texto-fraco); font-size: 12.5px; }
.linha-form input[type=text] { flex: 1; }

table.tabela-cadastro { border-collapse: collapse; width: 100%; margin-top: 10px; font-size: 12.5px; }
table.tabela-cadastro th, table.tabela-cadastro td { border: 1px solid var(--borda); padding: 6px 8px; text-align: left; }
table.tabela-cadastro th { background: var(--bg-painel); color: var(--texto-fraco); }
table.tabela-cadastro tr.linha-arrastavel { cursor: grab; }
table.tabela-cadastro tr.linha-arrastavel.arrastando { opacity: 0.4; }

.chip-campo { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border: 1px solid var(--borda); border-radius: 6px; margin-bottom: 6px; background: var(--bg-painel); cursor: grab; }
.chip-campo.arrastando { opacity: 0.4; }
.chip-campo .chip-esquerda { display: flex; align-items: center; gap: 10px; }

.resumo-import { margin-top: 16px; padding: 12px; border: 1px solid var(--borda); border-radius: 6px; background: var(--bg-painel); font-size: 12.5px; }
.resumo-import strong { color: var(--verde); }

.lista-cenarios-hist { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; }
.lista-cenarios-hist li { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--borda); font-size: 12.5px; }
.lista-cenarios-hist li.inativo { opacity: 0.45; text-decoration: line-through; }