:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --texto: #16181d;
  --muted: #6b7280;
  --borda: #e5e7eb;
  --primario: #2563eb;
  --primario-texto: #ffffff;
  --verde: #15803d;
  --verde-bg: #dcfce7;
  --vermelho: #b91c1c;
  --vermelho-bg: #fee2e2;
  --amarelo: #a16207;
  --amarelo-bg: #fef9c3;
  --barra: #93c5fd;
  --barra-pessoal: #c4b5fd;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 8px rgba(0, 0, 0, 0.04);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115;
    --card: #181b21;
    --texto: #e7e9ee;
    --muted: #9aa1ad;
    --borda: #2a2f38;
    --primario: #3b82f6;
    --verde: #4ade80;
    --verde-bg: #14331f;
    --vermelho: #f87171;
    --vermelho-bg: #3a1717;
    --amarelo: #facc15;
    --amarelo-bg: #3a3212;
    --barra: #1d4ed8;
    --barra-pessoal: #6d28d9;
    --sombra: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font: 16.5px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; }
h3 { font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.muted { color: var(--muted); }
.erro { color: var(--vermelho); min-height: 1em; margin: 6px 0 0; font-size: 15.5px; }
.espaco { flex: 1; }
[hidden] { display: none !important; }

.btn {
  border: 1px solid var(--borda); background: var(--card); color: var(--texto);
  border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 500; cursor: pointer;
}
.btn:hover { filter: brightness(0.97); }
.btn.primario { background: var(--primario); color: var(--primario-texto); border-color: transparent; }
.btn.perigo { color: var(--vermelho); }
.btn.fantasma { background: transparent; border-color: transparent; }
.btn.pequeno { padding: 4px 10px; font-size: 15.5px; }

input, select, textarea {
  font: inherit; color: var(--texto); background: var(--card);
  border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; width: 100%;
}

.card { background: var(--card); border: 1px solid var(--borda); border-radius: 12px; padding: 16px; box-shadow: var(--sombra); }
.card.sem-padding { padding: 0; overflow: hidden; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(360px, 100%); display: grid; gap: 12px; }

/* topo */
.topo {
  display: flex; align-items: center; gap: 16px; padding: 10px 16px;
  background: var(--card); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5;
}
.marca { font-size: 19px; white-space: nowrap; }
.abas { display: flex; gap: 4px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.abas button {
  background: none; border: none; font: inherit; color: var(--muted); padding: 8px 12px;
  border-radius: 8px; cursor: pointer; white-space: nowrap; font-weight: 500;
}
.abas button.ativa { color: var(--texto); background: var(--bg); }

main { max-width: 1320px; margin: 0 auto; padding: 16px; }
.barra-mes { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.barra-mes h2 { font-size: 24px; min-width: 200px; text-align: center; }
.barra-mes .btn.fantasma { font-size: 20px; padding: 4px 12px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.kpi .rotulo { color: var(--muted); font-size: 14.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; }
.kpi .valor { font-size: 26px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .sub { color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.positivo { color: var(--verde); }
.negativo { color: var(--vermelho); }

.alerta { border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; background: var(--amarelo-bg); color: var(--amarelo); font-weight: 500; }
.alerta.info { background: #dbeafe; color: #1e40af; }
@media (prefers-color-scheme: dark) { .alerta.info { background: #172554; color: #93c5fd; } }
#mes-previsto { margin-left: -4px; }

.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.grade .largo { grid-column: 1 / -1; }
.grafico { position: relative; height: 320px; }
.legenda-grafico { font-weight: 400; font-size: 14.5px; margin-left: 6px; }

/* barras de categoria */
.barra-cat { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin-bottom: 10px; font-size: 15.5px; }
.barra-cat .trilho { grid-column: 1 / -1; height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.barra-cat .preenche { height: 100%; background: var(--barra); border-radius: 3px; }
.barra-cat.pessoal .preenche { background: var(--barra-pessoal); }
.barra-cat .num { font-variant-numeric: tabular-nums; font-weight: 500; }

/* listas */
.linha { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.linha:last-child { border-bottom: none; }
.linha .desc { flex: 1; min-width: 0; }
.linha .desc small { display: block; color: var(--muted); }
.linha .num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.selo { display: inline-block; font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.selo.pago { background: var(--verde-bg); color: var(--verde); }
.selo.pendente { background: var(--amarelo-bg); color: var(--amarelo); }
.selo.empresa { background: #dbeafe; color: #1e40af; }
.selo.pessoal { background: #ede9fe; color: #5b21b6; }
@media (prefers-color-scheme: dark) {
  .selo.empresa { background: #172554; color: #93c5fd; }
  .selo.pessoal { background: #2e1065; color: #c4b5fd; }
}

/* tabelas */
.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--borda); white-space: nowrap; }
th { color: var(--muted); font-weight: 500; font-size: 14.5px; background: var(--bg); position: sticky; top: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.desc { white-space: normal; min-width: 180px; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--bg); }
tr.inativo td { opacity: 0.5; }
tr.inativo td.sempre-visivel { opacity: 1; }
tfoot td { font-weight: 700; background: var(--bg); }

.filtros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 2fr; gap: 8px; margin-bottom: 12px; padding: 12px; }
.acoes-linha { display: flex; justify-content: flex-end; margin-bottom: 12px; }

.progresso { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.progresso > div { height: 100%; background: var(--verde); }

/* modal */
dialog { border: none; border-radius: 14px; padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--card); color: var(--texto); }
dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
#form-modal { padding: 20px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.campos label { display: grid; gap: 4px; font-size: 14.5px; color: var(--muted); font-weight: 500; }
.campos label.cheio, .campos .cheio { grid-column: 1 / -1; }
.modal-acoes { display: flex; gap: 8px; margin-top: 16px; }

.vazio { color: var(--muted); padding: 12px 0; }

@media (max-width: 760px) {
  .topo { flex-wrap: wrap; gap: 8px; }
  .abas { order: 3; flex-basis: 100%; }
  .grade { grid-template-columns: minmax(0, 1fr); } /* minmax(0,…): sem isso o canvas do gráfico estica a coluna além da tela */
  .filtros { grid-template-columns: 1fr 1fr; }
  .filtros #f-busca { grid-column: 1 / -1; }
  .barra-mes h2 { font-size: 17px; min-width: 0; }
  .kpi .valor { font-size: 19px; }
  .campos { grid-template-columns: 1fr; }
}

/* aviso com desfazer */
.aviso {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px;
  background: #16181d; color: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  max-width: calc(100vw - 32px); font-weight: 500;
}
.aviso .btn { background: transparent; color: #93c5fd; border-color: #3b3f48; }

/* histórico */
#historico { width: min(640px, calc(100vw - 32px)); padding: 20px; }
.historico-cabeca { display: flex; align-items: center; justify-content: space-between; }
#lista-historico { max-height: 60vh; overflow-y: auto; }
.linha.desfeita .desc { text-decoration: line-through; opacity: 0.55; }
.acao { font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--muted); }

/* colunas das tabelas */
td.col-data { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
td.col-desc { color: var(--texto); font-weight: 600; }
td.col-desc small { color: var(--muted); font-weight: 400; }
td.col-parcelas { color: #475569; font-weight: 500; }
td.col-origem { color: var(--muted); font-size: 14.5px; }
td.valor-despesa { color: #ea580c; font-weight: 700; }
td.valor-receita { color: var(--verde); font-weight: 700; }
td.valor-neutro { color: var(--muted); font-weight: 700; }

/* tags de categoria */
.selo[class*="cat-"] { font-weight: 600; }
.cat-azul { background: #dbeafe; color: #1d4ed8; }
.cat-verde { background: #dcfce7; color: #15803d; }
.cat-laranja { background: #ffedd5; color: #c2410c; }
.cat-rosa { background: #fce7f3; color: #be185d; }
.cat-roxo { background: #f3e8ff; color: #7e22ce; }
.cat-ciano { background: #cffafe; color: #0e7490; }
.cat-amarelo { background: #fef9c3; color: #a16207; }
.cat-vermelho { background: #fee2e2; color: #b91c1c; }
.cat-indigo { background: #e0e7ff; color: #4338ca; }
.cat-lima { background: #ecfccb; color: #4d7c0f; }
.cat-marrom { background: #f5ebe0; color: #7c4a1e; }
.cat-cinza { background: #f1f5f9; color: #475569; }
@media (prefers-color-scheme: dark) {
  td.col-parcelas { color: #94a3b8; }
  td.valor-despesa { color: #fb923c; }
  .cat-azul { background: #172554; color: #93c5fd; }
  .cat-verde { background: #14331f; color: #86efac; }
  .cat-laranja { background: #3b1d0b; color: #fdba74; }
  .cat-rosa { background: #3b0a24; color: #f9a8d4; }
  .cat-roxo { background: #2e1065; color: #d8b4fe; }
  .cat-ciano { background: #083344; color: #67e8f9; }
  .cat-amarelo { background: #3a3212; color: #fde047; }
  .cat-vermelho { background: #3a1717; color: #fca5a5; }
  .cat-indigo { background: #1e1b4b; color: #a5b4fc; }
  .cat-lima { background: #1a2e05; color: #bef264; }
  .cat-marrom { background: #2b1a0e; color: #e7c9a9; }
  .cat-cinza { background: #1f2937; color: #cbd5e1; }
}

/* contas fixas: cards de resumo no topo */
.topo-fixas { margin-top: 0; }
.cards-fixas { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 1000px) { .cards-fixas { grid-template-columns: 1fr 1fr; } .cards-fixas .destaque { grid-column: 1 / -1; } }
.pilha { display: grid; gap: 12px; align-content: start; }
.kpi.destaque { border-width: 2px; }
.kpi.destaque .valor { font-size: 32px; }
.kpi.destaque.bom { border-color: var(--verde); background: var(--verde-bg); }
.kpi.destaque.bom .valor { color: var(--verde); }
.kpi.destaque.ruim { border-color: var(--vermelho); background: var(--vermelho-bg); }
.kpi.destaque.ruim .valor { color: var(--vermelho); }
.valor-receita-txt { color: var(--verde); }
.valor-despesa-txt { color: #ea580c; }
.valor-pessoal-txt { color: #7c3aed; }
.preenche.receita { background: #4ade80 !important; }
.dica { margin: 10px 0 0; font-size: 14.5px; color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .valor-despesa-txt { color: #fb923c; }
  .valor-pessoal-txt { color: #c4b5fd; }
}

/* gráfico de faturamento por cliente */
.grafico-clientes-card { margin-top: 12px; }
.grafico.alto { height: 380px; }
.kpis-compactos { margin: 4px 0 16px; }
.kpis-compactos .kpi { background: var(--bg); border: none; box-shadow: none; padding: 12px 14px; }
.kpis-compactos .kpi .valor { font-size: 24px; }
.legenda-clientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 20px; margin-top: 14px; }
.legenda-clientes .item { display: flex; align-items: center; gap: 8px; font-size: 15.5px; padding: 4px 0; border-bottom: 1px solid var(--borda); }
.legenda-clientes .bola { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.legenda-clientes .nome { flex: 1; font-weight: 600; }
.legenda-clientes .num { font-variant-numeric: tabular-nums; font-weight: 600; }
.legenda-clientes .pct { color: var(--muted); font-size: 14.5px; min-width: 34px; text-align: right; }

/* tabela de clientes */
#tabela-clientes td { padding-top: 12px; padding-bottom: 12px; vertical-align: middle; }
.cliente-cel { display: flex; align-items: center; gap: 12px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15.5px; flex: none; }
.cliente-nome { font-weight: 700; font-size: 17px; color: var(--texto); }
.cliente-cel small { font-size: 14.5px; }
.tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.dia { display: inline-block; font-weight: 600; font-size: 14.5px; padding: 3px 9px; border-radius: 6px; background: var(--bg); border: 1px solid var(--borda); font-variant-numeric: tabular-nums; }
.mensalidade { font-weight: 700; color: var(--verde); font-size: 17px; font-variant-numeric: tabular-nums; }
#tabela-clientes td.num small { display: block; font-size: 13px; }
.btn.acao-discreta { color: var(--muted); border-color: transparent; background: transparent; }
tr:hover .btn.acao-discreta { border-color: var(--borda); }
.btn.acao-discreta:hover { color: var(--vermelho); border-color: var(--vermelho) !important; }

/* tabela de lançamentos */
#tabela-lanc td { padding-top: 11px; padding-bottom: 11px; vertical-align: middle; }
#tabela-lanc .col-desc { font-weight: 600; color: var(--texto); }
#tabela-lanc td.desc small { display: block; font-size: 14px; margin-top: 1px; }
#tabela-lanc tr.linha-dia td {
  background: var(--bg); font-weight: 700; font-size: 15px; padding-top: 9px; padding-bottom: 9px; cursor: default;
  border-top: 1px solid var(--borda);
}
#tabela-lanc tr.linha-dia:hover td { background: var(--bg); }
#tabela-lanc tr.linha-dia .muted { font-weight: 500; }
#tabela-lanc .valor-lanc { font-size: 17px; }
#tabela-lanc tr.pendente .col-desc { color: var(--texto); }
.origem { color: var(--muted); font-size: 14px; white-space: nowrap; }
/* "Marcar pago" só aparece ao passar o mouse na linha (evita clique sem querer) */
.btn-pagar { font-size: 13px; padding: 2px 10px; margin-left: 6px; visibility: hidden; }
#tabela-lanc tr:hover .btn-pagar { visibility: visible; }
.btn-pagar:hover { background: var(--verde-bg); color: var(--verde); border-color: var(--verde); }
@media (hover: none) { .btn-pagar { visibility: visible; } }

/* aba dívidas */
.valor.texto-kpi { font-size: 20px; line-height: 1.25; }
#kpis-dividas { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.titulo-secao { font-size: 19px; margin: 22px 0 10px; }
.grade-dividas { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.divida { display: grid; gap: 12px; }
.divida-topo { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.divida-nome { font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.divida-saldo { text-align: right; font-weight: 700; font-size: 20px; color: var(--vermelho); white-space: nowrap; font-variant-numeric: tabular-nums; }
.divida-saldo small { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
.progresso.grande { height: 10px; border-radius: 5px; margin: 0; }
.progresso.grande > div { border-radius: 5px; }
.divida-rodape { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14.5px; color: var(--muted); }
.divida-rodape b { color: var(--texto); }
.bolinha { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }
.bolinha.verde { background: #22c55e; }

/* ajuda */
#ajuda { width: min(760px, calc(100vw - 32px)); padding: 20px; }
.ajuda-abas { margin: 10px 0 14px; border-bottom: 1px solid var(--borda); padding-bottom: 8px; }
.ajuda-corpo { max-height: 68vh; overflow-y: auto; line-height: 1.5; padding-right: 4px; }
.ajuda-corpo h4 { margin: 20px 0 6px; font-size: 15.5px; }
.ajuda-corpo p { margin: 8px 0; }
.ajuda-corpo code { background: var(--bg); border: 1px solid var(--borda); border-radius: 5px; padding: 1px 6px; font-size: 14px; }
.ajuda-corpo kbd { background: var(--bg); border: 1px solid var(--borda); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; font-size: 13px; }
.ajuda-corpo a { color: var(--primario); }
.passos { padding-left: 0; list-style: none; counter-reset: passo; margin: 12px 0; }
.passos li { position: relative; padding: 8px 0 8px 44px; border-bottom: 1px solid var(--borda); counter-increment: passo; }
.passos li::before { content: counter(passo); position: absolute; left: 0; top: 8px; width: 30px; height: 30px; border-radius: 50%; background: var(--primario); color: #fff; font-weight: 700; display: grid; place-items: center; }
.lista { padding-left: 20px; margin: 6px 0; }
.lista li { margin: 5px 0; }
.comando { background: #16181d; color: #e7e9ee; border-radius: 8px; padding: 10px 14px; margin: 8px 0; overflow-x: auto; font-size: 14px; }
.comando code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }
.caixa-copiar { display: flex; gap: 8px; margin: 8px 0; }
.caixa-copiar input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; }
.caixa-copiar .btn { flex: none; }
.st { display: flex; gap: 12px; padding: 10px 12px; border-radius: 10px; margin: 8px 0; background: var(--bg); border: 1px solid var(--borda); }
.st-icone { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: none; font-size: 14px; }
.st-ok .st-icone { background: var(--verde-bg); color: var(--verde); }
.st-falta .st-icone { background: var(--vermelho-bg); color: var(--vermelho); }
.st-erro .st-icone { background: var(--vermelho-bg); color: var(--vermelho); }
.st-aviso .st-icone { background: var(--amarelo-bg); color: var(--amarelo); }
.st-titulo { font-weight: 700; }
.st-detalhe { color: var(--muted); font-size: 15px; }
.st-acao { margin-top: 6px; font-size: 15px; }
@media (prefers-color-scheme: dark) { .comando { background: #0b0d11; } }

/* despesas */
.segmentos { display: inline-flex; gap: 4px; background: var(--card); border: 1px solid var(--borda); border-radius: 10px; padding: 4px; margin: 2px 0 14px; flex-wrap: wrap; }
.segmentos button { border: none; background: transparent; color: var(--muted); font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.segmentos button:hover { color: var(--texto); }
.segmentos button.ativa { background: var(--primario); color: #fff; }
.segmentos .seg-valor { font-weight: 500; font-size: 14px; opacity: 0.85; font-variant-numeric: tabular-nums; }
.kpi.clicavel { cursor: pointer; }
.kpi.clicavel:hover { border-color: var(--primario); }
.kpi.selecionado { border-color: var(--primario); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primario) 25%, transparent); }
.valor-empresa-txt { color: #2563eb; }
.valor-pendente-txt { color: var(--amarelo); }
.barra-cat[data-cat] { cursor: pointer; border-radius: 6px; padding: 4px 6px; margin: 0 -6px 6px; }
.barra-cat[data-cat]:hover { background: var(--bg); }
.barra-cat.ativa { background: var(--bg); outline: 2px solid var(--primario); }
.limpar-filtro { margin-left: 8px; font-weight: 500; }
@media (prefers-color-scheme: dark) { .valor-empresa-txt { color: #93c5fd; } }
@media (max-width: 760px) { .segmentos { display: flex; } .segmentos button { flex: 1; justify-content: center; } }

/* visão geral: previsto × realizado; dívidas atrasadas */
#visao-modo { margin: 0 0 12px; }
.divida-atraso { background: var(--vermelho-bg); color: var(--vermelho); font-weight: 600; font-size: 14.5px; border-radius: 8px; padding: 6px 10px; }
@media (max-width: 760px) {
  .barra-mes h2 { white-space: nowrap; }
  #mes-previsto { margin-left: 0; }
  #visao-modo .seg-valor { display: none; }
}
@media (max-width: 760px) {
  /* "+ Lançamento" vira botão redondo flutuante no canto, liberando a barra do mês */
  #novo-lanc {
    position: fixed; right: 16px; bottom: 20px; z-index: 40; width: 58px; height: 58px; padding: 0;
    border-radius: 50%; font-size: 0; box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
  }
  #novo-lanc::before { content: "+"; font-size: 32px; line-height: 1; font-weight: 500; }
  .barra-mes h2 { font-size: 19px; }
  main { padding-bottom: 90px; } /* o fim da lista não fica atrás do botão */
}

/* ---------- Etapa 3: seleção, lote, erros, histórico no modal ---------- */
th.c-sel, td.c-sel { width: 36px; padding-right: 0; }
td.c-sel input, th.c-sel input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primario); }
tr.selecionada td { background: color-mix(in srgb, var(--primario) 8%, transparent); }
.barra-lote {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 45;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  background: var(--card); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); max-width: calc(100vw - 24px);
}
.barra-lote select { width: auto; padding: 4px 8px; font-size: 14px; }
body.com-selecao .aviso { bottom: 96px; }
.aviso.erro { background: var(--vermelho); }
.aviso.erro .btn { display: none; }
.selo.atrasado { background: var(--vermelho-bg); color: var(--vermelho); }
.historico-item { border-top: 1px solid var(--borda); padding-top: 8px; margin-top: 4px; }
.historico-item .rotulo-historico { font-size: 14.5px; color: var(--muted); font-weight: 500; margin-bottom: 2px; }
.historico-item .linha { padding: 6px 0; }
.divida[data-rec] { cursor: pointer; }
.divida[data-rec]:hover { border-color: var(--primario); }
td.c-mes { white-space: nowrap; }
#tabela-fixas tr:hover .btn-pagar { visibility: visible; }

/* ---------- celular (MELHORIAS 33) ---------- */
@media (max-width: 760px) {
  /* cabeçalho numa linha só: só os ícones de Ajuda e Histórico */
  .topo { flex-wrap: wrap; gap: 4px 8px; }
  .rot-btn { display: none; }
  .topo .btn.pequeno { padding: 4px 8px; font-size: 17px; }
  .marca { flex: 1; }
  /* abas: esmaecem na borda direita, sinal de que rolam para o lado */
  .abas { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); padding-right: 28px; }

  /* KPIs em duas colunas; o último sozinho ocupa a linha */
  .kpis, #kpis-dividas { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi { padding: 12px; }
  .kpi .valor { font-size: 19px; }
  .kpi .rotulo { font-size: 12px; }
  .kpi .sub { font-size: 13px; }
  .valor.texto-kpi { font-size: 16px; }

  /* Lançamentos e Despesas: cada linha vira um cartão */
  #tabela-lanc, #tabela-desp { display: block; font-size: 15.5px; }
  #tabela-lanc thead, #tabela-desp thead { display: none; }
  #tabela-lanc tbody, #tabela-desp tbody, #tabela-lanc tfoot, #tabela-desp tfoot { display: block; }
  #tabela-lanc tr[data-id], #tabela-desp tr[data-id] {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "sel desc desc valor" "sel cat esc sit";
    gap: 6px 10px; align-items: center; padding: 12px; border-bottom: 1px solid var(--borda);
  }
  #tabela-lanc tr[data-id] td, #tabela-desp tr[data-id] td { display: block; padding: 0; border: none; }
  td.c-sel { grid-area: sel; width: auto; }
  td.c-desc { grid-area: desc; min-width: 0; }
  td.c-cat { grid-area: cat; min-width: 0; }
  td.c-cat .selo { white-space: normal; }
  td.c-sit .btn-pagar { font-size: 13px; padding: 3px 8px; }
  td.c-esc { grid-area: esc; }
  td.c-sit { grid-area: sit; text-align: right; white-space: nowrap; }
  td.c-orig { display: none !important; }
  td.c-valor { grid-area: valor; }
  #tabela-lanc tr.linha-dia, #tabela-desp tr.linha-dia, #tabela-lanc tfoot tr, #tabela-desp tfoot tr { display: flex; justify-content: space-between; gap: 0; background: var(--bg); }
  #tabela-lanc tr.linha-dia td:last-child, #tabela-desp tr.linha-dia td:last-child { white-space: nowrap; }
  #tabela-lanc tr.linha-dia td, #tabela-desp tr.linha-dia td, #tabela-lanc tfoot td, #tabela-desp tfoot td { display: block; border: none; }
  #tabela-lanc tr.linha-dia td:first-child, #tabela-desp tr.linha-dia td:first-child { white-space: normal; }
  /* no toque, o botão de pagar fica sempre à mostra e dispensa o selo "a pagar" */
  td.c-sit .btn-pagar { margin-left: 0; }
  td.c-sit:has(.btn-pagar) .selo.pendente { display: none; }

  /* Contas fixas e Clientes: só as colunas essenciais */
  #tabela-fixas .c-cat, #tabela-fixas .c-esc, #tabela-fixas .c-parc { display: none; }
  #tabela-clientes .c-serv, #tabela-clientes .c-venc { display: none; }

  .barra-lote { bottom: 12px; padding: 8px 10px; gap: 6px; }
  .barra-lote .btn.pequeno { font-size: 13.5px; padding: 4px 8px; }
  body.com-selecao #novo-lanc { display: none; }
}
@media (hover: none) { #tabela-fixas .btn-pagar { visibility: visible; } }

/* Etapa 4: comprovante, repetido, exportar */
a.clipe { text-decoration: none; margin-left: 4px; }
.selo.duplicado { background: var(--amarelo-bg); color: var(--amarelo); border: none; cursor: pointer; margin-left: 6px; font: inherit; font-size: 12px; font-weight: 600; }
.comprovante-campo { display: grid; gap: 8px; }
.comprovante-atual { display: flex; align-items: center; gap: 12px; }
img.miniatura { max-height: 110px; max-width: 180px; border-radius: 8px; border: 1px solid var(--borda); display: block; }
#exportar { width: auto; max-width: 100%; }