:root {
  --fundo: #f5f6f8;
  --papel: #ffffff;
  --texto: #1d2330;
  --suave: #5f6b7a;
  --borda: #dde1e7;
  --linha: #eef0f3;
  --primaria: #1f5fae;
  --primaria-escura: #174a88;
  --receita: #138a5e;
  --despesa: #c93a3f;
  --aviso: #b7791f;
  --neutro: #6c7a89;
  --raio: 8px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  color: var(--texto);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); }
a { color: var(--primaria); }
code { background: var(--linha); padding: 1px 5px; border-radius: 4px; }

.topo {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--primaria-escura); color: #fff; padding: 10px 20px;
}
.marca { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; }
.marca span { font-weight: 400; opacity: .8; margin-left: 6px; }
.marca span.dev { opacity: 1; font-size: .7rem; font-weight: 700; background: #e8a33b; color: #1d2330; padding: 2px 6px; border-radius: 4px; }
.controles-topo { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.controles-topo form { margin: 0; display: flex; gap: 8px; align-items: center; }
.seletor-ano select, .seletor-banco select { margin-left: 6px; }
.seletor-banco select { max-width: 220px; font-weight: 600; }
.seletor-banco a { color: #fff; opacity: .8; font-size: .85rem; }
.menu {
  display: flex; flex-wrap: wrap; gap: 2px; background: var(--papel);
  border-bottom: 1px solid var(--borda); padding: 0 12px;
}
.menu a {
  padding: 10px 12px; text-decoration: none; color: var(--suave);
  border-bottom: 3px solid transparent;
}
.menu a:hover { color: var(--texto); }
.menu a.ativo { color: var(--primaria); border-bottom-color: var(--primaria); font-weight: 600; }

main { padding: 16px 20px 40px; max-width: 1500px; margin: 0 auto; }
footer.versao { text-align: center; font-size: .75rem; color: #888; padding: 0 20px 16px; }
@media print { footer.versao { display: none; } }
h1 { font-size: 1.5rem; margin: 6px 0 12px; }
h1 small { font-weight: 400; color: var(--suave); font-size: 1rem; margin-left: 8px; }
h2 { font-size: 1.1rem; margin: 24px 0 10px; }

.meses { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.meses a {
  padding: 5px 11px; border-radius: 999px; background: var(--papel);
  border: 1px solid var(--borda); text-decoration: none; color: var(--texto);
}
.meses a.ativo { background: var(--primaria); color: #fff; border-color: var(--primaria); }

.msg { padding: 10px 14px; border-radius: var(--raio); margin: 10px 0; background: #eaf2fd; border: 1px solid #c8daf4; }
.msg.ok { background: #e7f6ef; border-color: #b9e2cf; }
.msg.erro { background: #fdecec; border-color: #f2c4c5; color: #8a1f23; font-weight: 600; }
.nota { color: var(--suave); font-size: .9rem; }
.vazio { color: var(--suave); text-align: center; padding: 18px; }

/* cartões e resumo */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 12px; }
.cartao { background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; }
.cartao span { display: block; color: var(--suave); font-size: .85rem; }
.cartao strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.cartao.receita strong { color: var(--receita); }
.cartao.despesa strong { color: var(--despesa); }
.cartao.destaque { border-color: var(--primaria); box-shadow: inset 4px 0 0 var(--primaria); }
.resumo-geral {
  display: flex; flex-wrap: wrap; gap: 8px 24px; background: var(--papel);
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 16px; margin-bottom: 14px;
}
.resumo-geral span { display: block; color: var(--suave); font-size: .8rem; }
.resumo-geral b { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.resumo-geral .receita b { color: var(--receita); }
.resumo-geral .despesa b { color: var(--despesa); }
.resumo-geral .destaque b { color: var(--primaria); }
.colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; }

/* formulários */
input, select, button { font: inherit; }
input, select { padding: 6px 8px; border: 1px solid var(--borda); border-radius: 6px; background: #fff; min-width: 0; }
input:focus, select:focus { outline: 2px solid #9cc0ee; border-color: var(--primaria); }
button, .botao {
  display: inline-block; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--borda);
  background: var(--papel); color: var(--texto); cursor: pointer; text-decoration: none;
}
button:hover, .botao:hover { background: var(--linha); }
button.primario { background: var(--primaria); border-color: var(--primaria); color: #fff; font-weight: 600; }
button.primario:hover { background: var(--primaria-escura); }
button.mini, .botao.mini { padding: 3px 9px; font-size: .85rem; }
button.link { border: 0; background: none; padding: 0; color: var(--primaria); text-decoration: underline; }
button.perigo, .perigo { color: var(--despesa); }
form.inline { display: flex; gap: 6px; align-items: center; margin: 0; }
.acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0; }

form.lancamento {
  display: grid; gap: 10px 12px; align-items: end;
  grid-template-columns: 80px minmax(170px, 1fr) minmax(200px, 1.3fr) minmax(160px, 1.3fr) 130px auto auto;
  background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px;
}
form.lancamento.editando { border-color: var(--aviso); box-shadow: inset 4px 0 0 var(--aviso); }
form.lancamento label { display: flex; flex-direction: column; font-size: .8rem; color: var(--suave); gap: 3px; }
form.lancamento input, form.lancamento select { color: var(--texto); font-size: .95rem; width: 100%; }
form.lancamento .valor input { text-align: right; }
form.lancamento .acoes { margin: 0; }
fieldset.status { border: 0; padding: 0; margin: 0; display: flex; gap: 10px; }
fieldset.status legend { font-size: .8rem; color: var(--suave); padding: 0; margin-bottom: 3px; }
fieldset.status label { white-space: nowrap; flex-direction: row; align-items: center; color: var(--texto); font-size: .95rem; }
@media (max-width: 1100px) { form.lancamento { grid-template-columns: repeat(2, 1fr); } }

.barra { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 8px; }
.filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
details.saldo-inicial { background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px; margin-top: 16px; }
details.saldo-inicial form { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
details.saldo-inicial input { width: 300px; }

/* tabelas */
.rolagem { overflow-x: auto; background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio); }
.tabela { border-collapse: collapse; width: 100%; background: var(--papel); font-variant-numeric: tabular-nums; }
.rolagem > .tabela { border: 0; }
.tabela th, .tabela td { padding: 6px 10px; border-bottom: 1px solid var(--linha); text-align: left; white-space: nowrap; }
.tabela thead th { background: #f0f3f7; font-size: .85rem; color: var(--suave); font-weight: 600; }
.tabela .num { text-align: right; }
.tabela .centro { text-align: center; }
.tabela td.neg, .neg { color: var(--despesa); }
.tabela td.zero { color: #b6bec8; }
.tabela tfoot td, .tabela tfoot th { font-weight: 700; background: #f7f8fa; }
.tabela.compacta th, .tabela.compacta td { padding: 4px 8px; }
.tabela.anual .rotulo { position: sticky; left: 0; background: inherit; min-width: 230px; z-index: 1; }
.tabela.anual tbody th.rotulo { background: var(--papel); font-weight: 500; }
.tabela tr.forte th, .tabela tr.forte td { font-weight: 700; }
.tabela tr.rec th.rotulo { color: var(--receita); }
.tabela tr.des th.rotulo { color: var(--despesa); }

.lancs tr.rec .valor { color: var(--receita); }
.lancs tr.des .valor { color: var(--despesa); }
.lancs tr.pendente td { background: #fffaf0; }
.lancs tr.sel td { background: #fff3d6; }
.tabela tr.vencida td { background: #fff4f4; }
.lancs td form { margin: 0; }
.acoes-linha { display: flex; gap: 10px; align-items: center; }
.status-btn { padding: 2px 10px; font-size: .82rem; border-radius: 999px; }
.status-btn.pago { background: #e2f4ec; border-color: #b9e2cf; color: var(--receita); }
.status-btn.naopago { background: #fdf0dc; border-color: #f1d3a4; color: var(--aviso); }

.dre tr.secao th, .dre tr.secao td { background: #eef3fa !important; font-weight: 700; border-top: 2px solid var(--borda); }
.dre tr.secao.resultado th, .dre tr.secao.resultado td { background: #e3ecf8 !important; }
.dre tr.grupo { cursor: pointer; }
.dre tr.grupo:hover th, .dre tr.grupo:hover td { background: #f7f9fc; }
.dre tr.grupo .seta { display: inline-block; transition: transform .15s; color: var(--suave); }
.dre tr.grupo.aberto .seta { transform: rotate(90deg); }
.dre tr.conta th.rotulo { padding-left: 34px; font-weight: 400; color: var(--suave); }
.dre tr.conta td { color: var(--suave); }
.oculto { display: none; }

.competencia .pc { color: var(--suave); font-size: .8rem; }
.competencia tr.nivel1 th.rotulo { padding-left: 22px; }
.competencia tr.nivel2 th.rotulo { padding-left: 40px; font-weight: 400; }
.competencia tr.secao th, .competencia tr.secao td { background: #eef3fa !important; font-weight: 700; }
.competencia.editando input { width: 92px; text-align: right; padding: 3px 5px; }

/* bancos de dados */
form.novo-banco { display: flex; flex-direction: column; gap: 12px; max-width: 720px; background: var(--papel);
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; }
form.novo-banco > label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--suave); }
form.novo-banco > label input, form.novo-banco > label select { color: var(--texto); max-width: 360px; }
form.novo-banco > label.linha { flex-direction: row; align-items: center; color: var(--texto); }
form.novo-banco fieldset { border: 1px solid var(--borda); border-radius: 6px; display: flex; flex-direction: column; gap: 6px; }
form.novo-banco fieldset legend { font-size: .9rem; color: var(--suave); }
.tabela tr.sel td { background: #f0f6ff; }
.acoes-banco { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.acoes-banco details summary { cursor: pointer; color: var(--primaria); font-size: .9rem; padding: 3px 0; }
.acoes-banco details summary.perigo { color: var(--despesa); }
.acoes-banco details[open] { background: #f7f9fc; border: 1px solid var(--borda); border-radius: 6px; padding: 4px 10px 10px; }
.excluir-banco { white-space: normal; max-width: 340px; margin: 0; }
.excluir-banco p { font-size: .85rem; margin: 6px 0; }
.excluir-banco input { width: 100%; margin-bottom: 6px; }
button.perigo:not(:disabled) { border-color: var(--despesa); }
button:disabled { opacity: .45; cursor: not-allowed; }

/* plano de contas */
.grade-plano { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 16px; }
.grupo-plano { background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 4px 14px 14px; }
.grupo-plano h2 { font-size: 1rem; }
.grupo-plano .codigo { color: var(--suave); font-variant-numeric: tabular-nums; }
.grupo-plano input[name=nome] { flex: 1; }
.grupo-plano tr.inativa input[name=nome] { color: var(--suave); text-decoration: line-through; }
.grupo-plano .usos { color: var(--suave); font-size: .8rem; }
.nova-conta { margin-top: 10px; }
.tag { font-size: .7rem; padding: 1px 7px; border-radius: 999px; font-weight: 500; vertical-align: middle; }
.tag.receita { background: #e2f4ec; color: var(--receita); }
.tag.despesa { background: #fbe5e6; color: var(--despesa); }

/* alertas */
.alertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.alerta { background: var(--papel); border: 1px solid var(--borda); border-left: 5px solid var(--neutro); border-radius: var(--raio); padding: 10px 14px; margin-bottom: 10px; }
.alerta h3 { margin: 4px 0 8px; font-size: 1rem; display: flex; justify-content: space-between; }
.alerta p { margin: 6px 0; }
.alerta dl { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 0; font-size: .9rem; }
.alerta dt { color: var(--suave); }
.alerta dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.alerta.positivo { border-left-color: var(--receita); }
.alerta.negativo { border-left-color: var(--despesa); }
.alerta.neutro { border-left-color: var(--aviso); }
.selo { font-size: .8rem; padding: 1px 8px; border-radius: 999px; background: var(--linha); }
.positivo .selo { background: #e2f4ec; color: var(--receita); }
.negativo .selo { background: #fbe5e6; color: var(--despesa); }
.ponto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #d0d5dc; vertical-align: middle; }
.ponto.positivo { background: var(--receita); }
.ponto.negativo { background: var(--despesa); }
.ponto.neutro { background: var(--aviso); }

/* gráficos */
.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.grafico { margin: 0; background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px; height: 320px; display: flex; flex-direction: column; }
.grafico figcaption { font-weight: 600; margin-bottom: 6px; }
.grafico canvas { flex: 1; min-height: 0; }
.grafico.pizza { height: 300px; }

/* relatório de impressão */
.relatorio { background: var(--papel); padding: 20px; border: 1px solid var(--borda); border-radius: var(--raio); }
.relatorio h3 { margin-top: 22px; }
.relatorio .tabela { font-size: .82rem; }
.relatorio .tabela th, .relatorio .tabela td { padding: 3px 6px; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff; font-size: 11px; }
  .topo, .menu, .meses, .nao-imprimir, h1, .msg { display: none !important; }
  main { padding: 0; max-width: none; }
  .relatorio { border: 0; padding: 0; }
  .relatorio h3 { break-after: avoid; }
  .tabela { break-inside: avoid; }
}

/* acesso: entrar, senha, usuários */
.usuario-topo { display: flex; gap: 10px; align-items: center; font-size: .9rem; }
.usuario-topo span { font-weight: 600; }
.usuario-topo a, .usuario-topo button.link { color: #fff; opacity: .85; font-size: .85rem; }
.marca-entrar { text-align: center; color: var(--primaria-escura); margin-top: 48px; }
.marca-entrar span { display: block; font-weight: 400; font-size: 1rem; color: var(--suave); }
form.cartao-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; background: var(--papel);
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 20px; }
form.cartao-form.largo { max-width: 720px; }
form.cartao-form.entrar { margin: 24px auto; }
form.cartao-form h2 { margin: 0; }
form.cartao-form label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--suave); }
form.cartao-form label input, form.cartao-form label select { color: var(--texto); font-size: 1rem; padding: 6px 8px; }
form.cartao-form.largo label input, form.cartao-form.largo label select { max-width: 360px; }
table.usuarios form.inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
table.usuarios tr.inativa { opacity: .6; }
table.auditoria td.detalhe { max-width: 420px; color: var(--suave); font-size: .85rem; }
.em-uso-por { font-size: .8rem; color: var(--suave); }
@media (max-width: 640px) {
  .usuario-topo { width: 100%; }
}