:root {
  --fundo: #f4f6f9;
  --cartao: #ffffff;
  --texto: #1d2533;
  --suave: #667085;
  --borda: #e3e7ee;
  --primaria: #1f6feb;
  --primaria-escura: #1a5fcc;
  --verde: #12805c;
  --vermelho: #c0392b;
  --amarelo-fundo: #fff6db;
  --amarelo-borda: #f0d58c;
  --raio: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1, h2, h3 { margin: 0; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
[hidden] { display: none !important; }

/* Botões e campos */
.btn { border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); padding: 8px 14px; border-radius: 8px; font: inherit; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: #c5ccd8; }
.btn.primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.btn.primario:hover { background: var(--primaria-escura); }
.btn.link { border: 0; background: none; color: var(--suave); padding: 6px 8px; }
.btn.mini { padding: 3px 9px; font-size: .85rem; }
.btn.perigo { color: var(--vermelho); }
label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--suave); }
label.check { flex-direction: row; align-items: center; gap: 6px; }
input, select, textarea { font: inherit; color: var(--texto); padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid #bcd3fb; border-color: var(--primaria); }
.rotulo { font-size: .85rem; color: var(--suave); display: block; margin-bottom: 4px; }
.ajuda { color: var(--suave); font-size: .85rem; margin: 4px 0 12px; }
.msg-erro { color: var(--vermelho); min-height: 1em; margin: 6px 0 0; font-size: .9rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Login */
.tela-login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.caixa-login { background: var(--cartao); padding: 28px; border-radius: 14px; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 6px 30px rgba(20, 30, 50, .08); }
.caixa-login .sub { color: var(--suave); margin: -6px 0 6px; }

/* Topo */
.topo { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--cartao); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.marca { color: var(--primaria); font-size: 1.15rem; }
.abas { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.abas button { flex-shrink: 0; }
.abas button { border: 0; background: none; padding: 8px 12px; border-radius: 8px; font: inherit; color: var(--suave); cursor: pointer; }
.abas button.ativa { background: #e8f0fe; color: var(--primaria); font-weight: 600; }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.usuario { color: var(--suave); font-size: .9rem; margin-right: 6px; }

main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 60px; }
.barra { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.barra-acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.titulo-secao { margin: 24px 0 12px; }

/* Indicadores do painel: faixa colorida no topo, valor grande alinhado, detalhes em linhas rótulo/valor */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { --kpi-cor: var(--primaria); position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px 12px; overflow: hidden; }
.kpi::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--kpi-cor); opacity: .85; }
.kpi-positivo { --kpi-cor: var(--verde); }
.kpi-negativo { --kpi-cor: var(--vermelho); }
.kpi-neutro { --kpi-cor: #8a94a6; }
.kpi-alerta { --kpi-cor: #d9a400; }
.kpi-destaque { background: linear-gradient(180deg, color-mix(in srgb, var(--kpi-cor) 6%, #fff), #fff 70%); border-color: color-mix(in srgb, var(--kpi-cor) 28%, var(--borda)); }
.kpi-titulo { color: var(--suave); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-sub { color: #98a2b3; font-size: .74rem; margin-top: 2px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-valor { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 0; margin: 8px 0 2px; color: var(--texto);
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.kpi-moeda { font-size: .55em; font-weight: 600; opacity: .7; margin-right: .3em; letter-spacing: 0; }
.kpi-cent { font-size: .6em; font-weight: 600; opacity: .75; }
.kpi-sinal { margin-right: .1em; }
.kpi-linhas { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--borda); display: grid; gap: 5px; font-size: .8rem; }
.kpi-linhas > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.kpi-linhas dt { color: var(--suave); min-width: 0; overflow-wrap: break-word; line-height: 1.25; }
.kpi-linhas dt small { display: block; font-size: .72rem; color: #98a2b3; }
.kpi-linhas dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--texto); }
.kpi-rodape { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .8rem; }
.kpi-linhas + .kpi-rodape, .kpi-valor + .kpi-rodape { margin-top: 10px; border-top: 1px solid var(--borda); }
.kpi-rodape span { color: var(--suave); min-width: 0; line-height: 1.25; }
.kpi-rodape b { font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-rodape a { color: var(--primaria); font-weight: 600; text-decoration: none; }
.kpi-rodape a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 12px 12px 10px; }
  .kpi-valor { font-size: 1.15rem; }
  .kpi-destaque { grid-column: 1 / -1; order: -1; }
  .kpi-destaque .kpi-valor { font-size: 1.6rem; }
  /* Títulos e explicações em até 2 linhas, sempre com a mesma altura, para os valores continuarem alinhados */
  .kpi-titulo, .kpi-sub { white-space: normal; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .kpi-destaque .kpi-titulo, .kpi-destaque .kpi-sub { min-height: 0; }
  /* Cartão estreito: rótulo em cima, valor embaixo */
  .kpi-linhas > div, .kpi-rodape { flex-direction: column; align-items: flex-start; gap: 0; }
  .kpi-linhas { gap: 7px; }
}
@media (max-width: 360px) { .kpis { grid-template-columns: 1fr; } }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; }
.grade2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.grade-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 16px; }
.vazio { color: var(--suave); padding: 10px 0; }
.ok { color: var(--verde); font-weight: 600; padding: 10px 0; }

/* Cores dos grupos (loja principal + sua loja de apoio) */
.g0 { --cor: #1f6feb; --cor-clara: #e8f0fe; }
.g1 { --cor: #12805c; --cor-clara: #e3f5ee; }
.g2 { --cor: #d9730d; --cor-clara: #fdefe2; }
.g3 { --cor: #7c4dcc; --cor-clara: #f0eafb; }
.g4 { --cor: #c2185b; --cor-clara: #fbe7ef; }
.g5 { --cor: #00838f; --cor-clara: #e0f4f6; }
.etiqueta { display: inline-flex; align-items: center; gap: 4px; background: var(--cor-clara, #eef0f4); color: var(--cor, var(--texto)); padding: 1px 8px; border-radius: 20px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.etiqueta small { font-weight: 400; opacity: .8; }

/* Cartão de grupo no painel */
.grupo { border-top: 4px solid var(--cor); }
.grupo h3 { color: var(--cor); display: flex; justify-content: space-between; align-items: baseline; }
.grupo .apoio-nome { font-size: .8rem; font-weight: 400; color: var(--suave); }
.linhas-valor { margin: 10px 0 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: .92rem; }
.linhas-valor dt { color: var(--suave); }
.linhas-valor dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.linhas-valor .forte { font-weight: 700; color: var(--texto); }
.positivo { color: var(--verde) !important; }
.negativo { color: var(--vermelho) !important; }
.separador { grid-column: 1 / -1; border-top: 1px dashed var(--borda); margin: 4px 0; }
.contas-mini { margin-top: 12px; font-size: .82rem; color: var(--suave); }
.contas-mini div { display: flex; justify-content: space-between; gap: 8px; }
.contas-mini .conta { margin-top: 6px; display: block; }
.contas-mini .conta > div:first-child { color: var(--texto); }
.contas-mini .conta b { font-variant-numeric: tabular-nums; }
.contas-mini .sem-saldo { color: var(--suave); font-weight: 400; font-style: italic; }

/* Despesas por categoria */
.bloco-categorias { margin-top: 16px; }
.barra-cat { display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 6px; cursor: pointer; font-size: .9rem; }
.barra-cat:hover { background: #f4f6f9; }
.barra-cat .trilho { height: 10px; background: #eef1f5; border-radius: 5px; overflow: hidden; }
.barra-cat .trilho span { display: block; height: 100%; background: var(--vermelho); opacity: .75; border-radius: 5px; }
.barra-cat.sem-cat .trilho span { background: var(--suave); }
.barra-cat .valor { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.barra-cat small { color: var(--suave); font-weight: 400; }
.categoria-tag { display: inline-block; font-size: .78rem; color: var(--suave); background: #eef1f5; padding: 0 7px; border-radius: 20px; margin-top: 2px; }
#btnExcluirCategoria { margin-right: auto; }

/* Relatórios */
.rel-tipos { margin-bottom: 12px; }
.relatorio .rel-cabecalho { margin-bottom: 12px; }
.relatorio .rel-cabecalho p { margin: 2px 0 0; color: var(--suave); font-size: .88rem; }
.relatorio .aviso { margin: 0 0 12px; }
.relatorio .tabela-wrap { border: 0; border-radius: 0; }
.tabela.rel td.num, .tabela.rel th.num { white-space: nowrap; }
.tabela.rel tr.secao td { background: #f6f8fb; font-weight: 600; color: var(--suave); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.tabela.rel tr.forte td { font-weight: 700; }
.tabela.rel tr.total td { font-weight: 700; border-top: 2px solid var(--borda); }
.tabela.rel td.recuo { padding-left: 24px; }
.tabela.rel td small { display: block; color: var(--suave); }
.rel-resumo { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 14px; font-size: .95rem; }
.rel-resumo b { font-variant-numeric: tabular-nums; }

/* Impressão / PDF: só o relatório */
@media print {
  body { background: #fff; font-size: 12px; }
  .topo, .barra, #segRel, #filtrosRel, .toast, dialog { display: none !important; }
  main { max-width: none; padding: 0; }
  .aba:not(#aba-relatorios) { display: none !important; }
  .cartao { border: 0; padding: 0; }
  .tabela-wrap { overflow: visible; }
  .tabela.rel tr { break-inside: avoid; }
  .tabela.rel tr.secao td { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* No papel a tabela fica sempre como tabela, mesmo em tela pequena */
  .tabela.rel thead { display: table-header-group !important; }
  .tabela.rel { display: table !important; }
  .tabela.rel tbody { display: table-row-group !important; }
  .tabela.rel tr { display: table-row !important; }
  .tabela.rel td, .tabela.rel th { display: table-cell !important; }
}

/* Contas */
.nome-conta { font-size: .85rem; color: var(--texto); white-space: nowrap; }
.contas-mini .conta.sub { padding-left: 12px; }
.contas-mini .loja-contas { margin-top: 8px; font-weight: 600; }
.campo-parcelas { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.campo-parcelas label { max-width: 110px; }
.dialogo.extra-largo { width: min(1100px, calc(100vw - 32px)); }
.tabela-extrato td small { display: block; color: var(--suave); }
.tabela-extrato select { max-width: 420px; width: 100%; font-size: .85rem; }
.tabela-extrato tr.lida td { opacity: .45; }
.tabela-extrato tr.feita td { background: #f0fbf6; }
.tabela-extrato tr.falhou td { background: #fdecea; }
.tabela-extrato td.desc-extrato { max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
/* Diálogo sem formulário (ex.: contas fixas) com o mesmo espaçamento dos outros */
.dialogo .dlg-corpo { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.tabela-fixas td small { display: block; color: var(--suave); }
.tabela-fixas tr.inativa td { opacity: .55; }
#avisoFixas { margin-bottom: 12px; }
/* Relatório: fluxo de caixa */
.tabela.rel tr.atrasados td:first-child { color: var(--vermelho); font-weight: 600; }
.tabela.rel td small { display: block; color: var(--suave); font-weight: 400; }
/* Painel: quadro de contas (linhas = lojas/contas, colunas = bancos) */
#contasPainel { margin-top: 16px; }
.quadro-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.quadro-topo h3 { margin: 0; }
.quadro-topo span { color: var(--suave); font-size: .88rem; }
.tabela-contas td, .tabela-contas th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-contas tr.linha-loja td:first-child { font-weight: 600; }
.tabela-contas tr.primeira-outra td { border-top: 2px solid var(--borda); }
.tabela-contas .vazio-cel { color: #c7ccd5; }
.tabela-contas tfoot th { border-top: 2px solid var(--borda); }
.tabela-contas .forte { font-weight: 700; }
/* Painel: contas separadas por banco */
.contas-mini .banco-grupo { display: block; margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--borda); }
.contas-mini .banco-topo { color: var(--texto); font-weight: 600; font-size: .86rem; }
.contas-mini .banco-topo small { color: var(--suave); font-weight: 400; margin-left: 4px; }
.contas-mini .banco-topo b { font-variant-numeric: tabular-nums; }
.contas-mini .banco-mes { padding-left: 12px; margin-top: 4px; font-style: italic; }
.bloco-loja + .bloco-loja { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--borda); }
.bloco-loja-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.bloco-loja-topo b { color: var(--cor); font-size: 1.05rem; }
.bloco-loja-topo .sub-loja { display: block; color: var(--suave); font-size: .8rem; }
.conta-item { padding: 7px 0 7px 10px; }
.conta-item.inativa { opacity: .6; }
/* Aba Lojas e contas: cada conta num cartão */
.grade-contas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; margin-bottom: 8px; }
.conta-cartao { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.conta-cartao.inativa { opacity: .6; }
.conta-cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; width: 100%; }
.conta-cartao-topo b { font-size: 1rem; word-break: break-word; }
.conta-cartao .tipo-conta { margin-left: 0; }
.conta-cartao .sub-loja { color: var(--suave); font-size: .8rem; display: block; }
.banco-linha { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; width: 100%; padding: 8px 0 4px; border-top: 1px solid var(--borda); }
.banco-linha.inativa { opacity: .6; }
.banco-linha .desc { min-width: 0; }

/* Contas separadas (sem loja dona): cinza, fora das cores das lojas */
.grupo.separadas { --cor: #667085; --cor-clara: #eef0f4; border-top-style: dashed; }
.etiqueta.separada { background: #eef0f4; color: #4a5568; font-weight: 500; }
.tipo-conta { font-size: .72rem; color: var(--suave); background: #eef1f5; padding: 0 6px; border-radius: 20px; margin-left: 4px; }
.lista-saldos .linha-saldo span { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* Lançamento rápido */
.rapido { margin-bottom: 12px; border-left: 4px solid var(--primaria); }
.rapido summary { cursor: pointer; list-style-position: inside; }
.rapido .ajuda-inline { color: var(--suave); font-size: .85rem; margin-left: 6px; }
.rapido-modo { margin-top: 12px; max-width: 360px; }
.rapido-desc { flex: 2 !important; max-width: 420px !important; }
.rapido form { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.rapido-fixos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 10px; }
.rapido-fixos > * { min-width: 0; }
.rapido-valor { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.rapido-valor label { flex: 1; min-width: 160px; max-width: 320px; }
.rapido-valor input { padding: 10px 12px; }
#rapidoValor { font-size: 1.5rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.rapido-valor .btn { padding: 12px 18px; }
.rapido-valor .btn small { opacity: .75; font-size: .8rem; }
.rapido .msg-erro { margin: 0; }
.rapido-lista { margin-top: 10px; font-size: .9rem; }
.rapido-lista .topo-lista { display: flex; justify-content: space-between; color: var(--suave); padding: 6px 0; border-bottom: 1px solid var(--borda); }
.rapido-lista .item-lista { padding: 6px 0; }
.rapido-lista .novo { animation: piscar 1.2s ease-out; }
@keyframes piscar { from { background: #e3f5ee; } to { background: transparent; } }

/* Clientes */
.busca-cliente { min-width: 200px; }
.cliente-item .desc b { font-weight: 600; }
.cliente-item .numeros { text-align: right; font-size: .85rem; color: var(--suave); }
.cliente-item .numeros b { color: var(--texto); font-variant-numeric: tabular-nums; }

/* Saldos iniciais */
.lista-saldos { display: flex; flex-direction: column; gap: 6px; }
.lista-saldos .linha-saldo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 150px); align-items: center; gap: 10px; }
.lista-saldos .linha-saldo input { text-align: right; width: 100%; }

/* Listas do painel */
.item-lista { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.item-lista:last-child { border-bottom: 0; }
.item-lista .desc { flex: 1; min-width: 150px; }
.item-lista .desc small { display: block; color: var(--suave); }
.item-lista .valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.seta { color: var(--suave); }
/* Painel: vencidos e próximos 7 dias (compacto, por dia) */
.pend-resumo { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88rem; color: var(--suave); padding-bottom: 8px; border-bottom: 1px solid var(--borda); }
.pend-resumo b { font-variant-numeric: tabular-nums; }
.pend-dia { margin-top: 8px; }
.pend-dia-topo { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--suave); padding: 4px 0 2px; border-bottom: 1px dashed var(--borda); }
.pend-dia-topo b { color: var(--texto); text-transform: uppercase; letter-spacing: .03em; }
.pend-dia.vencidos .pend-dia-topo b { color: var(--vermelho); }
.pend-linha { display: grid; grid-template-columns: 18px 1fr auto auto; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f0f2f6; font-size: .9rem; }
.pend-linha.grupo { cursor: pointer; }
.pend-linha.grupo:hover { background: #f8fafc; }
.pend-linha.sub { padding-left: 26px; font-size: .85rem; color: var(--suave); }
.pend-tipo { font-weight: 700; text-align: center; }
.pend-tipo.tipo-pagamento { color: var(--vermelho); }
.pend-tipo:not(.tipo-pagamento) { color: var(--verde); }
.pend-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pend-desc small { display: block; color: var(--suave); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pend-linha .valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pend-espaco { width: 0; }
.tag-vencido { background: #fdecea; color: var(--vermelho); padding: 1px 7px; border-radius: 20px; font-size: .75rem; font-weight: 600; }

/* Lançamentos */
.filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; margin-bottom: 12px; align-items: end; }
.atalhos-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.atalhos-filtro .rotulo { margin: 0 4px 0 0; }
.chip { border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); padding: 4px 12px; border-radius: 999px; font: inherit; font-size: .85rem; cursor: pointer; }
.chip:hover { border-color: var(--primaria); }
.chip.ativo { background: #e8f0fe; border-color: var(--primaria); color: var(--primaria); font-weight: 600; }
.totais { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 10px; font-size: .9rem; color: var(--suave); }
.totais b { color: var(--texto); }
.tabela-wrap { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th { text-align: left; font-weight: 600; color: var(--suave); font-size: .8rem; padding: 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela th.num { text-align: right; }
.tabela td { padding: 9px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela td small { color: var(--suave); display: block; }
.tipo-venda { color: var(--verde); font-weight: 600; }
.tipo-pagamento { color: var(--vermelho); font-weight: 600; }
.tipo-repasse { color: var(--primaria); font-weight: 600; }
.situacao { font-size: .8rem; padding: 1px 8px; border-radius: 20px; white-space: nowrap; }
.sit-parte + .sit-parte { margin-top: 4px; }
.situacao.quitado { background: #e3f5ee; color: var(--verde); }
.situacao.pendente { background: var(--amarelo-fundo); color: #8a6100; }
.situacao.vencido { background: #fdecea; color: var(--vermelho); }
.acoes-linha { display: flex; gap: 4px; justify-content: flex-end; white-space: nowrap; }

/* Diálogos */
.dialogo { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.dialogo.pequeno { width: min(400px, calc(100vw - 32px)); }
.dialogo::backdrop { background: rgba(20, 28, 40, .45); }
.dialogo form { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Sem isto, um select com opção de texto comprido alarga a coluna e a janela passa da tela */
.linha2 > * { min-width: 0; }
select { max-width: 100%; }
.dlg-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* Engrenagem da barra superior e a janela do robô do ERP / webhook */
.btn.link.engrenagem { font-size: 1.15rem; line-height: 1; }
#formWebhook h4 { margin: 6px 0 0; font-size: .95rem; }
#formWebhook .ajuda { margin: 0; }
.wh-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.segmentado { display: flex; background: #eef1f5; border-radius: 9px; padding: 3px; gap: 3px; }
.segmentado button { flex: 1; border: 0; background: none; padding: 8px; border-radius: 7px; font: inherit; color: var(--suave); cursor: pointer; }
.segmentado button.ativo { background: #fff; color: var(--texto); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.segmentado.pequeno button { padding: 6px; font-size: .9rem; }
#campoVenc { margin-top: 10px; }
.barra-lote { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #e8f0fe; border: 1px solid #bcd3fb; border-radius: var(--raio); padding: 8px 12px; margin-bottom: 10px; position: sticky; top: 56px; z-index: 4; }
.barra-lote #loteResumo { flex: 1; min-width: 200px; }
.tabela .col-lote { width: 28px; text-align: center; }
.tabela tr.marcada td { background: #f3f7ff; }
.tipo-transferencia { color: #7c4dcc; font-weight: 600; }
.tipo-recebimento { color: var(--verde); font-weight: 600; }
.receber-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: #f6f8fb; border-radius: 8px; padding: 10px; }
.receber-resumo div { display: flex; flex-direction: column; font-size: .8rem; color: var(--suave); }
.receber-resumo b { font-size: 1rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.receber-historico { font-size: .85rem; }
.receber-historico b { display: block; margin-bottom: 4px; color: var(--suave); font-weight: 600; }
.receber-historico div { display: flex; justify-content: space-between; padding: 3px 0; border-top: 1px solid var(--borda); }
.campo-adicionar { background: #f6f8fb; border: 1px dashed var(--borda); border-radius: 8px; padding: 10px; }
.campo-adicionar .ajuda { margin: 6px 0 0; }
.campo-adicionar label { max-width: 260px; }
.campo-rateio { background: #f6f8fb; border: 1px dashed var(--borda); border-radius: 8px; padding: 10px; }
.campo-rateio .ajuda { margin: 6px 0 0; }
.rateio-lojas { display: grid; grid-template-columns: 1fr 110px 120px; gap: 6px 10px; align-items: center; margin-top: 8px; }
.rateio-lojas:empty { display: none; }
.rateio-lojas input { text-align: right; }
.rateio-lojas .num { text-align: right; font-variant-numeric: tabular-nums; }
.rateio-lojas .cab { font-size: .8rem; color: var(--suave); }
.aviso { background: var(--amarelo-fundo); border: 1px solid var(--amarelo-borda); border-radius: 8px; padding: 8px 10px; margin: -2px 0 0; font-size: .88rem; }

/* Vendas do dia */
.grade-caixa { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.caixa-topo { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 10px; }
.caixa-topo label { min-width: 160px; }
.caixa-nav { display: flex; gap: 4px; }
.caixa-formas input { width: 130px; text-align: right; font-size: 1rem; }
.caixa-formas td small, .tabela-conc td small { display: block; color: var(--suave); }
.caixa-formas tfoot th { text-align: left; border-top: 2px solid var(--borda); padding-top: 8px; }
.caixa-formas tfoot th.num { text-align: right; }
.caixa-mes-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.caixa-mes-topo h3 { margin: 0; }
.dia-caixa { cursor: pointer; padding: 7px 6px; }
.dia-caixa:hover, .dia-caixa.atual { background: #f3f7ff; }
.dia-caixa .desc small { display: inline; margin-left: 4px; }
.dia-caixa-total { display: flex; justify-content: space-between; padding: 10px 6px 0; }
.dialogo.largo { width: min(820px, calc(100vw - 32px)); }
.tabela-taxas input { width: 80px; text-align: right; }
.tabela-taxas select { max-width: 260px; }
.tabela-taxas tr.inicio-loja td { border-top: 2px solid var(--borda); }
.tabela-conc input[name=valor] { width: 100px; text-align: right; }
.tabela-conc select { max-width: 200px; }
.tabela-conc input[type=date] { width: 140px; }
#concResumo { flex: 1; min-width: 200px; }
.grade-fundos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-bottom: 16px; }
.fundo-saldo { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 10px; }
.fundo-saldo span { color: var(--suave); font-size: .85rem; }
.fundo-saldo b { font-size: 1.4rem; }
.acoes-fundo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#caixaFundo .caixa-mes-topo { align-items: end; }
#caixaFundo .caixa-mes-topo .ajuda { margin: 0; flex: 1; }
#fundoExtrato td small { display: block; color: var(--suave); }
/* Conta pessoal de sócio (retirada): campo em destaque quando preenchido, etiqueta na lista */
.campo-socio a { font-size: .8rem; margin-left: 4px; }
.campo-socio.ativo select { border-color: #b45309; background: #fff7ed; color: #9a3412; font-weight: 600; }
.categoria-tag.pessoal { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }

/* Sem lojas de apoio cadastradas: esconde o que só vale para elas */
.sem-apoio .so-com-apoio { display: none !important; }

/* Recebimentos */
#recebEntradas .identificando { background: #f3f7ff; }
#recebIdentificando .btn.link { padding: 0 4px; }
.receb-valor input { font-size: 1.3rem; width: 170px; text-align: right; }
.receb-desc { flex: 1; min-width: 200px; }
.receb-opcoes { margin: 6px 0 4px; }
.receb-opcao { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; margin-top: 6px; cursor: pointer; flex-wrap: wrap; }
.receb-opcao .desc { flex: 1; min-width: 200px; }
.receb-opcao .desc small { display: block; color: var(--suave); margin-top: 2px; }
.receb-opcao .valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.receb-opcao.sel { border-color: var(--primaria); background: #f3f7ff; box-shadow: 0 0 0 1px var(--primaria); }
.receb-opcao:not(.sel) [data-confirmar-opcao] { visibility: hidden; }
.receb-opcao select { margin-left: 4px; padding: 3px 6px; font-size: .85rem; }
.tipo-receb { font-size: .78rem; font-weight: 600; color: var(--primaria); text-transform: uppercase; letter-spacing: .02em; }
th.ordenavel { cursor: pointer; user-select: none; white-space: nowrap; }
th.ordenavel:hover { color: var(--primaria); }
th.ordenavel.ativa { color: var(--primaria); }
.seta-ordem { margin-left: 4px; font-size: .75em; opacity: .5; }
th.ordenavel.ativa .seta-ordem { opacity: 1; }
.tabela-formas input[name=nome] { width: 100%; }
.tabela-formas .check { flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; }
.acoes-forma { display: flex; gap: 4px; align-items: center; justify-content: flex-end; white-space: nowrap; }
.acoes-forma small { color: var(--suave); margin-left: 4px; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1d2533; color: #fff; padding: 10px 18px; border-radius: 8px; z-index: 50; max-width: calc(100vw - 32px); }
.toast.erro { background: var(--vermelho); }

@media (max-width: 640px) {
  .topo { padding: 8px 12px; gap: 8px; }
  .usuario { display: none; }
  /* Abas numa linha própria, embaixo da marca e dos botões Senha/Sair */
  .abas { order: 3; width: 100%; }
  .abas button { padding: 6px 10px; }
  /* Barra de categoria: nome e valor em cima, barra embaixo */
  .barra-cat { grid-template-columns: 1fr auto; row-gap: 4px; }
  .barra-cat .trilho { grid-column: 1 / -1; grid-row: 2; }
  .linha2 { grid-template-columns: 1fr; }
  .barra-acoes { margin-left: 0; width: 100%; }
  .barra-acoes .btn { flex: 1; }
  .grade2, .grade-caixa { grid-template-columns: 1fr; }
  .caixa-formas tfoot, .caixa-formas tfoot tr { display: block; }
  .caixa-formas input { width: 100%; }
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; }
  .tabela tr { padding: 10px; border-bottom: 1px solid var(--borda); }
  .tabela td { border: 0; padding: 2px 0; }
  .tabela td.num { text-align: left; font-weight: 700; }
  .acoes-linha { justify-content: flex-start; margin-top: 6px; }
  /* Relatórios continuam como tabela (com rolagem lateral dentro do cartão), para não perder os cabeçalhos das colunas */
  .tabela.rel { display: table; font-size: .82rem; }
  .tabela.rel thead { display: table-header-group; }
  .tabela.rel tbody { display: table-row-group; }
  .tabela.rel tr { display: table-row; padding: 0; }
  .tabela.rel td { display: table-cell; padding: 7px 8px; border-bottom: 1px solid var(--borda); }
  .tabela.rel td.num { text-align: right; font-weight: inherit; }
  .relatorio { padding: 12px; }
  .rel-tipos { display: grid; grid-template-columns: 1fr 1fr; }
  #segTipo button { padding: 8px 2px; font-size: .88rem; }
  /* Lançamento rápido no celular: o valor (o que mais se digita) em cima, campos fixos em duas colunas */
  .rapido .ajuda-inline { display: none; }
  .rapido-valor { order: -1; }
  .rapido-valor label { max-width: none; }
  .rapido-fixos { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rapido-fixos select, .rapido-fixos input { font-size: .88rem; padding: 7px 8px; }
}

/* Importar relatório da Rede (Vendas do dia) */
.rede-estabs { display: flex; flex-direction: column; gap: 6px; }
.rede-estab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .88rem; }
.rede-estab select { max-width: 220px; }
.rede-forma { display: inline-block; white-space: nowrap; margin: 0 10px 2px 0; font-size: .85rem; }
#redeGrupos td small { display: block; color: var(--suave); }

/* Conciliação: uma linha por loja (clique abre os itens) */
.tabela-conc tr.conc-grupo td { background: #f6f8fb; font-weight: 600; cursor: pointer; border-top: 2px solid var(--borda); }
.tabela-conc tr.conc-grupo:hover td { background: #eef3fb; }
.tabela-conc tr.conc-grupo small { display: inline; color: var(--suave); font-weight: 400; margin-left: 6px; }
.tabela-conc tr.conc-grupo td { white-space: nowrap; }
.tabela-conc .seta-grupo { display: inline-block; width: 1.2em; color: var(--suave); }
.tabela-conc tr[data-grupo] td:nth-child(2) { padding-left: 18px; }

/* Importar recebimentos Rede: uma linha por loja (clique abre o detalhe) */
.tabela-rr tr.rr-loja td { background: #f6f8fb; font-weight: 600; cursor: pointer; border-top: 2px solid var(--borda); vertical-align: middle; }
.tabela-rr tr.rr-loja:hover td { background: #eef3fb; }
.tabela-rr tr.rr-loja td small { display: block; color: var(--suave); font-weight: 400; }
.tabela-rr .seta-grupo { display: inline-block; width: 1.2em; color: var(--suave); }
.tabela-rr td.recuo { padding-left: 28px; }
.tabela-rr td small { color: var(--suave); }
.tabela-rr tr.lida td { opacity: .45; }
.tabela-rr select { max-width: 260px; }

/* Relatórios: linha agrupada (venda + taxa) que abre o detalhe */
.tabela.rel tr.rel-abre { cursor: pointer; }
.tabela.rel tr.rel-abre:hover td { background: #eef3fb; }
.tabela.rel tr.rel-filho td { background: #fafbfd; font-size: .85rem; }
.tabela.rel tr.rel-filho td:nth-child(2) { padding-left: 32px; }
.tabela.rel .seta-grupo { display: inline-block; width: 1.2em; color: var(--suave); }

/* Conciliação: total que caiu para vários dias selecionados */
.barra-lote .lote-campo { display: inline-flex; flex-direction: column; font-size: .75rem; color: var(--suave); gap: 2px; }
.barra-lote .lote-campo input, .barra-lote .lote-campo select { font-size: .85rem; }
.barra-lote #concLoteValor { width: 120px; }
.barra-lote #concLoteConta { max-width: 220px; }

/* Recebimentos: dividir a entrada entre as lojas */
.receb-divisao { border: 1px dashed var(--borda); border-radius: 8px; padding: 8px 10px; margin: 6px 0 10px; }
.receb-divisao .rotulo { font-size: .8rem; color: var(--suave); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.receb-div-lojas { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 10px; }
.receb-div-lojas label { font-size: .8rem; }
.receb-div-lojas input { width: 100%; }

/* Painel · vencidos e próximos 7 dias: filtros, marcar vários, transferências separadas */
.pend-filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.pend-filtros .chip { border: 1px solid var(--borda); background: #fff; border-radius: 999px; padding: 3px 10px; font-size: .8rem; cursor: pointer; color: var(--suave); }
.pend-filtros .chip.ativo { background: #e8f0fe; border-color: var(--primaria); color: var(--primaria); font-weight: 600; }
.pend-filtros .chip small { opacity: .7; }
.pend-filtro-sep { width: 1px; height: 18px; background: var(--borda); margin: 0 4px; }
.pend-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; background: #eef3fb; border: 1px solid #c9daf8; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: .85rem; }
.pend-barra label { display: inline-flex; flex-direction: column; font-size: .75rem; color: var(--suave); }
.pend-barra select { max-width: 220px; }
.pend-linha { grid-template-columns: 34px 1fr auto auto; }
.pend-tipo { display: inline-flex; align-items: center; gap: 2px; }
.pend-tipo input { margin: 0; }
.pend-linha.marcada { background: #f2f7ff; }
.tag-transf { display: inline-block; font-size: .7rem; font-weight: 700; color: #7a4cc2; background: #f1eafc; border-radius: 4px; padding: 0 5px; margin-right: 2px; vertical-align: 1px; }

.pend-linha.marcavel { cursor: pointer; }
.pend-linha.marcavel:hover { background: #f8fafc; }
.pend-barra { position: sticky; top: 0; z-index: 2; }
.pend-total b { font-size: 1.05rem; }


/* ---------- Lançamentos: tabela inteira à vista (sem coluna escondida à direita) ---------- */
/* A aba usa a largura da tela (as outras continuam com 1200px) */
main:has(#aba-lancamentos:not([hidden])) { max-width: 1680px; }
/* Cabeçalho da tabela fica parado ao rolar; a tabela rola dentro da área */
#aba-lancamentos .tabela-wrap { max-height: calc(100vh - 150px); overflow: auto; }
#aba-lancamentos .tabela thead th { position: sticky; top: 0; z-index: 2; background: var(--cartao); box-shadow: 0 1px 0 var(--borda); }
#aba-lancamentos .tabela { table-layout: auto; }
#corpoLanc tr:hover td { background: #f7f9fc; }
#corpoLanc tr.marcada:hover td { background: #eaf1ff; }
/* Larguras: a descrição ganha espaço; conta e situação quebram linha em vez de empurrar a tabela */
#aba-lancamentos .col-data { width: 92px; white-space: nowrap; }
#aba-lancamentos .col-desc { min-width: 220px; }
#aba-lancamentos .col-conta { max-width: 200px; }
#corpoLanc .nome-conta { white-space: normal; }
#corpoLanc td.num { white-space: nowrap; font-weight: 600; }
#corpoLanc .situacao { white-space: normal; display: inline-block; line-height: 1.35; }
#aba-lancamentos .col-acoes { width: 1%; }
/* Ações: botões compactos; Editar/Excluir viram ícones (o nome aparece ao passar o mouse) */
#corpoLanc .acoes-linha { flex-wrap: wrap; max-width: 170px; margin-left: auto; white-space: normal; }
#corpoLanc .btn.icone { padding: 3px 7px; line-height: 1; font-size: .95rem; }
.lanc-mais { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 10px; color: var(--suave); font-size: .88rem; }
/* Filtros: os principais sempre à vista; o resto em "Mais filtros" */
.filtros .filtros-mais { display: contents; }
.filtros .filtros-mais[hidden] { display: none; }
.filtros .btn-mais-filtros { align-self: end; white-space: nowrap; }
.filtros .btn-mais-filtros b { background: var(--primaria); color: #fff; border-radius: 10px; padding: 0 6px; font-size: .75rem; margin-left: 4px; }
/* Totais como pílulas, mais fáceis de ler */
#totaisLanc span { background: var(--cartao); border: 1px solid var(--borda); border-radius: 20px; padding: 3px 10px; }
@media (max-width: 640px) {
  #aba-lancamentos .tabela-wrap { max-height: none; }
  #corpoLanc .acoes-linha { max-width: none; margin-left: 0; }
}
/* Coluna de ações sempre à vista: fica presa na direita mesmo se a tabela precisar rolar para o lado */
#aba-lancamentos .tabela th.col-acoes, #corpoLanc td.col-acoes { position: sticky; right: 0; background: var(--cartao); box-shadow: -1px 0 0 var(--borda); }
#aba-lancamentos .tabela th.col-acoes { z-index: 3; }
#corpoLanc tr:hover td.col-acoes { background: #f7f9fc; }
#corpoLanc tr.marcada td.col-acoes { background: #f3f7ff; }
@media (max-width: 1200px) {
  #aba-lancamentos .col-desc { min-width: 170px; }
  #corpoLanc .acoes-linha { max-width: 120px; }
  #aba-lancamentos .tabela td, #aba-lancamentos .tabela th { padding-left: 7px; padding-right: 7px; }
}
@media (max-width: 640px) {
  #aba-lancamentos .tabela th.col-acoes, #corpoLanc td.col-acoes { position: static; box-shadow: none; }
}
/* Formulário em grade dos diálogos (cliente pagou uma conta) */
.grade-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.grade-form .largo { grid-column: 1 / -1; }
#dlgCompensar { width: min(640px, calc(100vw - 32px)); }

/* Lançamentos: filtro por faixa de valor */
.filtros .campo-valor input { width: 96px; text-align: right; }

/* ===== Acabamento visual (out/2026): mais profissional, sem mudar o layout ===== */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: #cfe0fd; }

/* Topo com leve sombra e marca com peso */
.topo { box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
.marca { font-weight: 800; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 8px; }
.marca::before { content: ""; width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(135deg, #1f6feb 0%, #12805c 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.abas button { transition: background-color .15s, color .15s; }
.abas button:not(.ativa):hover { background: #f1f4f8; color: var(--texto); }

/* Botões: transição, foco por teclado visível e estado desabilitado claro */
.btn { transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s; }
.btn:hover { background-color: #f8fafc; }
.btn.primario { box-shadow: 0 1px 2px rgba(31, 111, 235, .25); }
.btn.primario:hover { background: var(--primaria-escura); }
.btn.link:hover { color: var(--texto); background: none; }
.btn.perigo:hover { background: #fdf1ef; border-color: #f2c4bd; }
.btn:focus-visible, .abas button:focus-visible { outline: 2px solid #bcd3fb; outline-offset: 1px; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: #c5ccd8; }
input:disabled, select:disabled, textarea:disabled { background: #f4f6f9; color: var(--suave); }

/* Cartões e indicadores */
.cartao, .kpi, .tabela-wrap, .filtros { box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.kpi { transition: box-shadow .15s, border-color .15s; }
.kpi:hover { border-color: #d3d9e3; box-shadow: 0 4px 12px rgba(16, 24, 40, .06); }

/* Tabelas: cabeçalho destacado e linha sob o mouse (cores de situação continuam valendo) */
.tabela th { background: #f9fafb; text-transform: uppercase; letter-spacing: .03em; font-size: .72rem; }
:where(.tabela) tbody tr:hover > td { background-color: #f7f9fc; }
.tabela td { font-variant-numeric: tabular-nums; }

/* Diálogos: abrem com suavidade e fundo desfocado */
.dialogo[open] { animation: dlgEntra .16s ease-out; }
.dialogo::backdrop { backdrop-filter: blur(2px); }
.dialogo form > h3:first-child, .dialogo form > h2:first-child { padding-bottom: 10px; border-bottom: 1px solid var(--borda); }
@keyframes dlgEntra { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }

/* Aviso rápido (toast) */
.toast { box-shadow: 0 10px 30px rgba(16, 24, 40, .25); animation: toastEntra .2s ease-out; }
@keyframes toastEntra { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Barras de rolagem discretas */
* { scrollbar-width: thin; scrollbar-color: #c9d0db transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c9d0db; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #aab3c0; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) { .dialogo[open], .toast { animation: none; } }
@media print { .marca::before { display: none; } .tabela th { background: none; } .cartao, .kpi, .tabela-wrap { box-shadow: none; } }

/* Resultado da conta digitada num campo de valor (calculadora) */
.dica-calc { position: fixed; transform: translate(-100%, -50%); z-index: 60; pointer-events: none;
  background: #e8f0fe; color: var(--primaria); font-weight: 700; font-size: .8rem; font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 6px; white-space: nowrap; box-shadow: 0 1px 3px rgba(16,24,40,.12); }

/* Despesas por categoria: % sobre vendas e sobre despesas embaixo do valor */
.barra-cat .valor { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.barra-cat .valor .pct-cat { font-size: .76rem; color: var(--suave); font-weight: 400; white-space: nowrap; }
.barra-cat .valor .pct-cat b { color: var(--texto); font-weight: 600; }

/* Resumo em cascata das vendas do ERP (forma > dia > transações) */
.erp-titulo { margin: 14px 0 6px; font-size: .95rem; }
.erp-titulo small { color: var(--suave); font-weight: 400; }
.erp-resumo details { border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao); margin-bottom: 6px; }
.erp-resumo details details { margin: 0 10px 6px 18px; }
.erp-resumo summary { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; cursor: pointer; list-style: none; }
.erp-resumo summary::-webkit-details-marker { display: none; }
.erp-resumo summary::before { content: '▸'; color: var(--suave); margin-right: 6px; }
.erp-resumo details[open] > summary::before { content: '▾'; }
.erp-resumo summary .nome { flex: 1; font-weight: 600; }
.erp-resumo summary .qtd { color: var(--suave); font-size: .85rem; white-space: nowrap; }
.erp-resumo summary .valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 110px; text-align: right; }
.erp-resumo .tabela { margin: 0 10px 8px 28px; width: calc(100% - 38px); font-size: .88rem; }
.erp-resumo .tabela td, .erp-resumo .tabela th { padding: 5px 8px; }

/* Relatórios em cascata (grupo > detalhe): colunas alinhadas em todos os níveis, cabeçalho clicável para ordenar.
   As colunas vêm de cada relatório (--cc-cols / --cc-min no estilo da caixa). */
.rel-cascata { --cc-cols: minmax(220px, 2fr) repeat(5, 112px); overflow-x: auto; }
.rel-cascata .cc-linha { display: grid; grid-template-columns: var(--cc-cols); gap: 8px; align-items: center; padding: 7px 10px; min-width: var(--cc-min, 680px); }
.rel-cascata .cc-linha .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rel-cascata .cc-linha .txt { min-width: 0; overflow-wrap: anywhere; }
.rel-cascata .cc-linha small { display: block; color: var(--suave); font-size: .8rem; font-weight: 400; }
.rel-cascata .cc-linha .nome { padding-left: calc(var(--n, 0) * 20px); }
.rel-cascata .cc-folha .nome { padding-left: calc(var(--n, 0) * 20px + 16px); }
.rel-cascata .cc-cab { background: var(--cartao); border-bottom: 2px solid var(--borda); padding-top: 4px; padding-bottom: 4px; }
.rel-cascata .cc-cab button, .rel-cascata .cc-cab span { background: none; border: 0; padding: 4px 0; font: inherit; font-size: .8rem; font-weight: 600; color: var(--suave); text-transform: uppercase; letter-spacing: .02em; }
.rel-cascata .cc-cab button { cursor: pointer; }
.rel-cascata .cc-cab button.txt { text-align: left; }
.rel-cascata .cc-cab button:hover, .rel-cascata .cc-cab button.ativo { color: var(--primaria); }
.rel-cascata .cc-cab .nome { padding-left: 16px; }
.rel-cascata .cc-n0 > .cc-cab { background: #f3f6fb; border-bottom: 1px solid var(--borda); }
.rel-cascata .cc-n0 > .cc-cab .nome { padding-left: 36px; }
.rel-cascata details, .rel-cascata > .cc-folha { border-bottom: 1px solid var(--borda); }
.rel-cascata details details:last-child { border-bottom: 0; }
.rel-cascata details .cc-folha { font-size: .88rem; background: #fcfdff; border-top: 1px dashed var(--borda); }
.rel-cascata summary { cursor: pointer; list-style: none; }
.rel-cascata summary::-webkit-details-marker { display: none; }
.rel-cascata summary .nome { font-weight: 600; }
.rel-cascata summary .nome::before { content: '▸'; color: var(--suave); display: inline-block; width: 16px; }
.rel-cascata details[open] > summary .nome::before { content: '▾'; }
.rel-cascata summary:hover { background: #eef3fb; }
.rel-cascata .cc-n1 > summary { background: #f7f9fc; }
.rel-cascata .cc-n2 > summary { font-size: .92rem; }
.rel-cascata .cc-n2 > summary .nome { font-weight: 500; }
.rel-cascata .cc-forte { font-weight: 600; }
.rel-cascata .cc-total { font-weight: 700; border-top: 2px solid var(--borda); }
.rel-cascata .cc-atrasados .nome { color: var(--vermelho, #c62828); }
/* Grupo do primeiro nível (loja, dia, seção) destacado, para não misturar com o que abre dentro */
.rel-cascata .cc-n0 { border: 1px solid var(--primaria); border-radius: 8px; margin-top: 6px; overflow: hidden; }
.rel-cascata .cc-n0 > summary { background: #e8f0fd; }
.rel-cascata .cc-n0[open] > summary { background: var(--primaria); color: #fff; }
.rel-cascata .cc-n0[open] > summary .nome::before,
.rel-cascata .cc-n0[open] > summary small,
.rel-cascata .cc-n0[open] > summary span,
.rel-cascata .cc-n0[open] > summary .num { color: #fff; }

/* Recebimentos: "Previstos nesta conta" em cascata (coluna estreita: Previsto / Itens / Valor); clique no item usa o valor */
.receb-cascata { --cc-cols: minmax(0, 1fr) 44px 104px; --cc-min: 0px; }
.receb-cascata .receb-prev { cursor: pointer; }
.receb-cascata .receb-prev:hover { background: #eef3fb; }
.receb-cascata .cc-atrasados .nome { color: inherit; }
/* Cores por nível, para não confundir com o grupo principal (azul): dia/cliente em verde, loja em amarelo, Vencidos em vermelho */
/* ERP × Rede/VR: resumo em cascata (loja › forma › dia). Níveis em tons de azul/cinza (nunca verde/vermelho/amarelo,
   que são só da diferença); a diferença é um selo com fundo próprio, legível em qualquer nível, aberto ou fechado. */
.conf-cascata-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 6px; }
.conf-cascata-acoes small { color: var(--suave); }
.conf-cascata { --cc-cols: minmax(220px, 2fr) 70px repeat(3, 120px); margin-bottom: 14px; }
.conf-cascata .cc-n0 { border-color: #9db4d8; }
.conf-cascata .cc-n0 > summary, .conf-cascata .cc-n0[open] > summary { background: #e3ebf7; color: var(--texto); }
.conf-cascata .cc-n0[open] > summary .nome::before, .conf-cascata .cc-n0[open] > summary small,
.conf-cascata .cc-n0[open] > summary span, .conf-cascata .cc-n0[open] > summary .num { color: inherit; }
.conf-cascata .cc-n0 > summary .nome { font-weight: 700; }
.conf-cascata .cc-n1 > summary { background: #f2f5fa; border-left: 4px solid #9db4d8; }
.conf-cascata .cc-folha { background: #fff; cursor: pointer; }
.conf-cascata .cc-folha:hover, .conf-cascata .cc-folha.sel { background: #eef3fb; }
.conf-cascata summary:hover { background: #dbe5f4; }
.conf-ligar { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; margin-bottom: 14px; }
.conf-ligar-topo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.conf-ligar-topo small { color: var(--suave); flex: 1 1 260px; }
.conf-ligar-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .conf-ligar-lados { grid-template-columns: 1fr; } }
.conf-ligar-lados > div { max-height: 360px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; }
.conf-ligar-cab { position: sticky; top: 0; background: #e3ebf7; font-weight: 700; padding: 6px 10px; }
.conf-ligar-cab small { color: var(--suave); font-weight: 400; }
.conf-ligar-item { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--borda); cursor: pointer; }
.conf-ligar-item small { display: block; color: var(--suave); font-size: .8rem; }
.conf-ligar-item .num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.conf-ligar-item:hover { background: #eef3fb; }
.conf-ligar-item.sugerido { background: var(--amarelo-fundo); }
.conf-ligar-item.sel { background: #d6e4fb; box-shadow: inset 4px 0 0 var(--primaria); }
.forma-trocada { color: #6a3fb5 !important; font-weight: 600; }
.conf-mudar-forma { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.conf-mudar-forma select, .conf-mudar-forma input { font-size: .85rem; padding: 2px 4px; max-width: 170px; }
.dif-selo { display: inline-block; padding: 1px 8px; border-radius: 999px; font-weight: 600; font-size: .85rem; border: 1px solid; }
.dif-selo.ok { background: #e6f4ee; color: #0d6b4c !important; border-color: #a9d8c3; }
.dif-selo.falta { background: #fdecea; color: #a5281b !important; border-color: #eab1aa; }
.dif-selo.sobra { background: var(--amarelo-fundo); color: #8a5a00 !important; border-color: var(--amarelo-borda); }
.receb-cascata .cc-n1 > summary { background: #eaf6f0; border-left: 4px solid var(--verde); }
.receb-cascata .cc-n1[open] > summary { background: #d5efe2; }
.receb-cascata .cc-n1 > summary.cc-atrasados { background: #fdecea; border-left-color: var(--vermelho); }
.receb-cascata .cc-n1[open] > summary.cc-atrasados { background: #f9d6d2; }
.receb-cascata .cc-n2 > summary { background: #fff7e6; border-left: 4px solid #e0a106; }
.receb-cascata .cc-n2[open] > summary { background: #ffedc7; }
.receb-cascata .cc-n3 > summary { background: #f4f1fb; border-left: 4px solid #7b61c4; }
.receb-cascata .receb-prev { background: #fff; }

/* Taxas e contas: uma aba por loja */
.taxas-abas { margin-bottom: 10px; flex-wrap: wrap; }

/* Renomear forma do ERP (engrenagem ao lado do nome) */
.erp-resumo .erp-renomear { padding: 0 6px; margin-left: 4px; font-size: 1rem; line-height: 1; }
.erp-resumo .erp-renomear:hover { color: var(--primaria); }
.erp-resumo .erp-editar { padding: 3px 8px; width: min(320px, 100%); font-weight: 400; }

/* Lançar vendas: campo alimentado pelo ERP */
#caixaFormas input[readonly] { background: #f6f8fb; color: var(--suave); }
#caixaFormas .do-erp { display: block; color: var(--verde); font-size: .75rem; }

/* Conferência ERP × Rede/VR */
.conf-erp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.conf-erp td small { display: block; color: var(--suave); font-size: .78rem; }

/* Lançar vendas: venda a venda de cada forma */
#caixaFormas .vd-abrir { padding: 0; color: inherit; text-align: left; }
#caixaFormas .vd-abrir:hover b, #caixaFormas span.vd-abrir:hover { color: var(--primaria); text-decoration: underline; }
#caixaFormas .vd-lupa { margin-right: 4px; font-size: .85rem; opacity: .55; }
#caixaFormas .vd-lupa:hover { opacity: 1; }

/* Lançar vendas: procurar um valor nas vendas do dia */
.vd-busca { margin: 0 0 10px; }
.vd-busca input { width: 100%; }
#caixaBuscaRes { margin-top: 6px; }
.vd-achado { padding: 4px 0; border-bottom: 1px dashed var(--borda); }
.vd-achado .btn.link { padding: 0; color: var(--primaria); }
.vd-achado small { display: block; color: var(--suave); }
#caixaFormas tr.vd-achou td { background: #fff6db; }
.busca-extrato span { display: flex; align-items: center; gap: 2px; }
.busca-extrato input { min-width: 220px; }

/* ===== Vendas (dashboard do ERP) ===== */
.vd-barra { align-items: flex-start; margin-bottom: 12px; }
.vd-status { margin: 2px 0 0; color: var(--suave); font-size: .82rem; }
#aba-vendas .aviso { margin: 0 0 12px; }
#aba-vendas.carregando #vdKpis, #aba-vendas.carregando #vdGrade { opacity: .55; transition: opacity .15s; }

/* Grade de 12 colunas: cada bloco diz quantas usa (vd-col-6, vd-col-12…); no celular todos ocupam a linha inteira */
.vd-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.vd-col-4 { grid-column: span 4; } .vd-col-6 { grid-column: span 6; } .vd-col-8 { grid-column: span 8; } .vd-col-12 { grid-column: 1 / -1; }
@media (max-width: 900px) { .vd-col-4, .vd-col-6, .vd-col-8 { grid-column: 1 / -1; } }
.vd-bloco { min-width: 0; }
.vd-bloco-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.vd-bloco-extra { color: var(--suave); font-size: .8rem; }
.vd-nota { color: var(--suave); font-size: .78rem; margin: 12px 0 0; }
.vd-vazio { text-align: center; padding: 40px 16px; }
.vd-vazio .ajuda { margin-bottom: 0; }

/* Variação contra o período anterior */
.vd-var { font-size: .8rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vd-var.sobe { color: var(--verde); } .vd-var.desce { color: var(--vermelho); } .vd-var.neutra { color: var(--suave); }

/* Gráfico de barras (empilhadas por empresa) */
.vd-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -4px 0 10px; font-size: .82rem; color: var(--suave); }
.vd-legenda span, .vd-tip-linha span { display: inline-flex; align-items: center; gap: 6px; }
.vd-legenda i, .vd-tip i { width: 10px; height: 10px; border-radius: 3px; background: var(--cor, var(--primaria)); display: inline-block; }
.vd-grafico { position: relative; width: 100%; }
.vd-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.vd-seg { fill: var(--cor, var(--primaria)); }
.vd-grade-linha { stroke: #edf0f4; stroke-width: 1; }
.vd-base { stroke: #c9d0da; stroke-width: 1; }
.vd-eixo { fill: #98a2b3; font-size: 11px; font-variant-numeric: tabular-nums; }
.vd-alvo { fill: transparent; cursor: pointer; }
.vd-alvo.ativo { fill: rgba(31, 111, 235, .06); }
.vd-tip { position: absolute; top: 4px; z-index: 2; min-width: 180px; pointer-events: none; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 8px; padding: 8px 10px; font-size: .8rem; box-shadow: 0 6px 20px rgba(20, 30, 50, .12); }
.vd-tip-total { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0 4px; }
.vd-tip-linha { display: flex; justify-content: space-between; gap: 14px; color: var(--suave); }
.vd-tip-linha b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.vd-tip-linha.suave { border-top: 1px dashed var(--borda); margin-top: 4px; padding-top: 4px; }

/* Listas com barra (por empresa / por forma) */
.vd-lista { display: grid; gap: 14px; }
.vd-item-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vd-item-nome { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font-weight: 600; font-size: .92rem; min-width: 0; overflow-wrap: anywhere; }
.vd-item-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vd-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--cor, var(--primaria)); display: inline-block; flex-shrink: 0; }
.vd-trilho { height: 8px; background: #eef1f5; border-radius: 4px; overflow: hidden; margin: 6px 0 5px; }
.vd-trilho span { display: block; height: 100%; border-radius: 4px; background: var(--cor, var(--primaria)); }
.vd-trilho .vd-forma { background: var(--primaria); opacity: .8; }
.vd-item-info { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: .78rem; color: var(--suave); }
.vd-item-info .vd-var { margin-left: auto; }
.vd-tag { white-space: nowrap; font-size: .68rem; font-weight: 600; color: #8a6d00; background: var(--amarelo-fundo); border: 1px solid var(--amarelo-borda); border-radius: 20px; padding: 0 6px; }

/* Matriz empresa × forma */
.vd-matriz-wrap { border: 0; box-shadow: none; border-radius: 0; margin: 0 -16px; padding: 0 16px; width: auto; }
.vd-matriz th .vd-ponto { margin-right: 6px; vertical-align: 1px; }
.vd-matriz td.num, .vd-matriz th.num { white-space: nowrap; }
.vd-matriz td small { font-size: .72rem; }
.vd-matriz tfoot td { font-weight: 700; border-top: 2px solid var(--borda); padding: 9px 10px; }
.vd-matriz td.forte { font-weight: 600; }
.vd-zero { color: #c5ccd8; }
@media (max-width: 640px) {
  .vd-matriz tfoot { display: table-footer-group; }
  .vd-matriz tfoot tr { display: table-row; }
  .vd-matriz tfoot td { display: table-cell; }
}

/* Vendas: loja em destaque (hero) e o conjunto de lojas embaixo */
.vd-conjunto-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; margin: 0 0 12px; padding-top: 4px; }
.vd-conjunto-topo p { margin: 0; display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; font-size: .9rem; }
.vd-conjunto-topo p b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.vd-conjunto-topo p span:last-child { color: var(--suave); font-size: .82rem; }
.vd-item-loja { cursor: pointer; margin: -6px -8px; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; }
.vd-item-loja:hover { background: #f6f8fb; }
.vd-item-loja.ativo { background: var(--cor-clara, #f3f7ff); border-color: color-mix(in srgb, var(--cor, var(--primaria)) 25%, transparent); }
@media (max-width: 640px) {
}

/* Vendas: período (um seletor só, com calendário de intervalo) */
.vd-acoes { align-items: center; }
.vd-datas { position: relative; }
.vd-datas-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--borda); background: var(--cartao); color: var(--texto);
  padding: 8px 12px; border-radius: 8px; font: inherit; font-size: .9rem; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vd-datas-btn:hover { border-color: #c5ccd8; }
.vd-datas-btn[aria-expanded="true"] { border-color: var(--primaria); outline: 2px solid #bcd3fb; }
.vd-datas-btn > svg { color: var(--suave); flex-shrink: 0; }
.vd-datas-btn b { font-weight: 600; }
.vd-datas-btn #vdDatasTxt span { color: var(--suave); margin-left: 4px; }
.vd-cal { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(20, 30, 50, .16); }
.vd-cal-atalhos { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-right: 1px solid var(--borda); min-width: 150px; }
.vd-cal-atalhos button { border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 7px; font: inherit; font-size: .86rem; color: var(--texto); cursor: pointer; white-space: nowrap; }
.vd-cal-atalhos button:hover { background: #f1f4f8; }
.vd-cal-atalhos button.ativo { background: #e8f0fe; color: var(--primaria); font-weight: 600; }
.vd-cal-corpo { padding: 12px 14px 10px; }
.vd-cal-meses { display: flex; gap: 22px; }
.vd-cal-mes { width: 238px; }
.vd-cal-titulo { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; text-align: center; margin-bottom: 6px; }
.vd-cal-titulo b { font-size: .92rem; text-transform: capitalize; }
.vd-cal-nav { border: 0; background: none; width: 30px; height: 30px; border-radius: 7px; font-size: 1.3rem; line-height: 1; color: var(--suave); cursor: pointer; }
.vd-cal-nav:hover:not(:disabled) { background: #f1f4f8; color: var(--texto); }
.vd-cal-nav:disabled { opacity: .3; cursor: default; }
.vd-cal-sem, .vd-cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); }
.vd-cal-sem span { text-align: center; font-size: .72rem; color: #98a2b3; font-weight: 600; padding: 4px 0; }
.vd-cal-dias button { height: 34px; border: 0; background: none; font: inherit; font-size: .85rem; color: var(--texto); cursor: pointer; border-radius: 0; font-variant-numeric: tabular-nums; }
.vd-cal-dias button:hover:not(:disabled):not(.ini):not(.fim) { background: #f1f4f8; border-radius: 7px; }
.vd-cal-dias button:disabled { color: #d0d5dd; cursor: default; }
.vd-cal-dias button.hoje { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.vd-cal-dias button.no { background: #e8f0fe; }
.vd-cal-dias button.ini, .vd-cal-dias button.fim { background: var(--primaria); color: #fff; font-weight: 600; }
.vd-cal-dias button.ini { border-radius: 7px 0 0 7px; }
.vd-cal-dias button.fim { border-radius: 0 7px 7px 0; }
.vd-cal-dias button.ini.fim { border-radius: 7px; }
.vd-cal-dica { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--borda); color: var(--suave); font-size: .78rem; max-width: 498px; }

/* Vendas: destaque — um botão por loja (nome e total vendido) e os indicadores da escolhida */
.vd-hero { margin-bottom: 28px; }
.vd-lojas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.vd-loja { position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left; min-width: 0; overflow: hidden;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px 12px; font: inherit; color: var(--texto); cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: border-color .15s, box-shadow .15s, transform .15s; }
.vd-loja::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cor); opacity: .35; transition: opacity .15s; }
.vd-loja:hover { border-color: color-mix(in srgb, var(--cor) 35%, var(--borda)); box-shadow: 0 4px 14px rgba(20, 30, 50, .08); }
.vd-loja:focus-visible { outline: 2px solid var(--cor); outline-offset: 2px; }
.vd-loja.ativo { border-color: color-mix(in srgb, var(--cor) 55%, var(--borda)); background: linear-gradient(180deg, var(--cor-clara, #f3f7ff), #fff 85%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cor) 55%, transparent), 0 6px 18px rgba(20, 30, 50, .08); }
.vd-loja.ativo::before { opacity: 1; height: 4px; }
.vd-loja-nome { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-loja.ativo .vd-loja-nome { color: var(--cor); }
.vd-loja .vd-ponto { background: var(--cor); }
.vd-loja-total { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.65rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vd-loja-total .vd-zero { font-size: .95rem; font-weight: 500; letter-spacing: 0; }
.vd-loja-rodape { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .78rem; color: var(--suave); }
.vd-hero-info { margin: 4px 2px 10px; color: var(--suave); font-size: .82rem; }
.vd-hero-info b { color: var(--texto); }
.vd-hero .kpis { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

@media (max-width: 640px) {
  .vd-barra .barra-acoes { width: 100%; }
  .vd-datas, .vd-datas-btn { width: 100%; }
  .vd-datas-btn #vdDatasTxt { margin-right: auto; overflow: hidden; text-overflow: ellipsis; }
  .vd-cal { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; flex-direction: column-reverse; max-height: calc(100vh - 16px); overflow: auto; }
  .vd-cal-atalhos { flex-direction: row; flex-wrap: wrap; border-right: 0; border-top: 1px solid var(--borda); min-width: 0; }
  .vd-cal-atalhos button { flex: 1 1 30%; text-align: center; background: #f4f6f9; }
  .vd-cal-mes { width: 100%; }
  .vd-cal-dias button { height: 40px; }
  .vd-lojas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .vd-loja { padding: 12px 12px 10px; }
  .vd-loja-total { font-size: 1.15rem; }
  .vd-loja-rodape { flex-direction: column; gap: 0; }
  .vd-hero .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}