/* ============================================================
   planilha.css — a PLANILHA (Despesas → Contas/Extrato · Vendas → Vendas/A receber) e o "Por mês". Carregado por último.
   PC: tabela densa (linhas de 40 px, cabeçalho fixo, número à direita), totais fixos no pé, barra verde de soma, painel lateral (≥ 1280 px).
   Celular: cartões de 3 linhas (≤ 120 px), faixa de totais fixa de 44 px acima da barra, "Por mês" com a 1ª coluna fixa e 3 meses por tela.
   Cor só por token (tokens.css/tema.css). Amarelo: só botão principal, filete e FAB. Só transform e opacity se mexem; o efeito fica LIGADO mesmo com "Reduzir movimento".
   ============================================================ */
.pl{--pl-sel:var(--ok-bg);--pl-linha:#EEF2EF;--pl-cab:#F7FAF8;font-variant-numeric:tabular-nums}
.pl .num,.pl-pe .num,.pl-soma .st{font-family:var(--fonte-titulo);font-weight:700;font-variant-numeric:tabular-nums}
.pl .mudo{color:var(--tinta-2);font-weight:500}
.pl .pos{color:var(--ok)}.pl .neg{color:var(--problema)}
.pl .riscado{text-decoration:line-through;color:var(--tinta-2)}
.pl .mini{font-size:12px;color:var(--tinta-2);margin-top:1px}.pl .mini.cred{color:var(--ok);font-weight:700}
.pl .gv{font-family:var(--fonte-titulo);font-weight:800}.pl .gv.ruim{color:var(--problema)}
.pl .nn{font-family:var(--fonte-titulo);font-weight:700}

/* ---- pílulas da situação ---- */
.pl-pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:99px;font:700 12px var(--fonte-texto);background:var(--info-bg);color:var(--info-tx);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pl-pill.p-ok{background:var(--ok-bg);color:var(--ok-tx)}
.pl-pill.p-problema{background:var(--problema-bg);color:var(--problema-tx)}
.pl-pill.p-atencao{background:var(--atencao-bg);color:var(--atencao-tx)}
.pl-pill.p-prev{background:transparent;border:1px dashed var(--cinza-2);color:var(--tinta-2)}
.pl-sinal{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:7px;border-radius:50%;font-style:normal;font-size:11px;font-weight:800;background:var(--info-bg);color:var(--info-tx);vertical-align:1px}
.pl-sinal.sc{background:var(--ok-bg);color:var(--ok-tx)}.pl-sinal.sd{background:var(--atencao-bg);color:var(--atencao-tx)}

/* ---- ferramentas (na linha do resumo da Barra) ---- */
.fl-fim{flex-wrap:wrap;row-gap:6px}
.pl-ferr{position:relative;display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.pl-bt{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--fl-ln);border-radius:10px;background:#fff;color:var(--tinta);font:600 13px var(--fonte-texto);cursor:pointer;white-space:nowrap;transition:transform .18s,border-color .2s}
.pl-bt:hover{border-color:rgba(26,36,32,.32)}.pl-bt:active{transform:scale(.97)}
.pl-bt .i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pl-bt.escuro{background:var(--marca);border-color:var(--marca);color:#fff}
.pl-bt.largo{width:100%;height:42px;margin-bottom:8px}
.pl-bt.pl-aj{width:34px;padding:0;font-weight:800;color:var(--tinta-2)}
.pl-seg{display:inline-flex;border:1px solid var(--fl-ln);border-radius:10px;background:#fff;overflow:hidden}
.pl-seg button{height:32px;padding:0 12px;border:0;background:none;font:700 13px var(--fonte-texto);color:var(--tinta-2);cursor:pointer;transition:background .2s,color .2s}
.pl-seg button.on{background:var(--marca);color:#fff}
.pl-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:70;width:288px;max-height:70vh;overflow:auto;padding:14px 14px 10px;background:#fff;border:1px solid var(--fl-ln);border-radius:14px;box-shadow:0 14px 36px rgba(5,39,14,.22);animation:fl-menu .14s ease backwards}
.pl-pop h4{margin:0 0 10px;font:800 12px var(--fonte-titulo);letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-2)}
.pl-pop .mini{margin:6px 0 2px;font-size:12px;color:var(--tinta-2)}
.pl-opc{display:flex;align-items:center;gap:10px;min-height:36px;font-size:14px;cursor:pointer}
.pl-opc input{width:17px;height:17px;accent-color:var(--marca)}
.pl-vis{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.pl-vis-n{flex:1;text-align:left;height:38px;padding:0 12px;border:1px solid var(--fl-ln);border-radius:10px;background:#fff;font:600 14px var(--fonte-texto);cursor:pointer}
.pl-vis-n:hover{border-color:var(--marca)}
.pl-vis-x{width:34px;height:34px;border:0;border-radius:10px;background:none;font-size:20px;color:var(--tinta-2);cursor:pointer}
.pl-vis-novo{display:flex;gap:8px;margin-top:10px}
.pl-vis-novo input{flex:1;min-width:0;height:36px;padding:0 10px;border:1px solid var(--fl-ln);border-radius:10px;font:14px var(--fonte-texto)}
.pl-atalhos{display:grid;gap:8px;margin:12px 0}
.pl-atalhos div{display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:center;font-size:14px}
.pl-atalhos kbd{justify-self:start;padding:3px 9px;border:1px solid var(--fl-ln);border-bottom-width:2px;border-radius:7px;background:var(--card-2);font:700 12px var(--fonte-titulo)}
html[data-pl-modo="mes"] .fl-lin,html[data-pl-modo="mes"] .fl-rs,html[data-pl-modo="mes"] .fl-fim .fl-lim{display:none}

/* ---- faixa do saldo no começo do período (Extrato) ---- */
.pl-ini{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0 0;padding:10px 16px;border-radius:12px 12px 0 0;background:var(--card);border-bottom:1px solid var(--pl-linha,#EEF2EF);font-size:13px;color:var(--tinta-2)}
.pl-ini b{color:var(--tinta);font-size:15px}
.pl-nota{margin:8px 4px 0}

/* ---- a tabela (PC) ---- */
.pl-corpo.pc{background:var(--card);border-radius:14px;box-shadow:var(--sombra-card);overflow:clip;margin-top:8px}
.pl-tab{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:13.5px}
.pl-tab th{position:sticky;top:var(--pl-top,180px);z-index:4;background:var(--pl-cab);height:36px;padding:0 10px;text-align:left;font:700 11.5px var(--fonte-texto);letter-spacing:.03em;text-transform:uppercase;color:var(--tinta-2);border-bottom:1px solid var(--linha)}
.pl-tab th button{display:inline-flex;align-items:center;gap:4px;height:100%;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;white-space:nowrap;cursor:pointer}
.pl-tab th.r,.pl-tab td.r{text-align:right}.pl-tab th.r button{flex-direction:row-reverse}
.pl-tab th.on,.pl-tab th button:hover{color:var(--marca)}
.pl-tab th .sa{font-style:normal;font-size:9px;min-width:9px}
.pl-tab td{height:40px;padding:0 10px;border-bottom:1px solid var(--pl-linha);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;font-variant-numeric:tabular-nums}
.pl-tab td[hidden],.pl-tab th[hidden],.pl-tab col[hidden]{display:none}
.pl-tab td .mini{font-size:11.5px;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
.pl-tab tr.lin{cursor:pointer;outline:0}
.pl-tab tr.lin:nth-child(even) td{background:#FBFCFB}
.pl-tab tr.lin:hover td{background:#F1F6F2}
.pl-tab tr.lin:focus-visible td{background:#F1F6F2;box-shadow:inset 0 2px 0 var(--marca),inset 0 -2px 0 var(--marca)}
.pl-tab tr.lin.sel td{background:var(--pl-sel)}
.pl-tab tr.lin.aberta td{background:var(--pl-sel)}
.pl-tab tr.lin.aberta td.ck{box-shadow:inset 3px 0 0 var(--marca)}
.pl-tab tr.lin.atr td.ck{box-shadow:inset 3px 0 0 var(--problema)}
.pl-tab tr.lin.prev td{color:var(--tinta-2);font-style:italic}
.pl-tab tr.lin.cancelada td{color:var(--tinta-2)}
.pl-tab tr.lin.transito td{color:var(--tinta-2)}
.pl-tab tr:last-child td{border-bottom:0}
.pl-tab .ck{width:38px;padding:0 0 0 12px;text-align:left}
.pl-tab input[type=checkbox]{width:16px;height:16px;accent-color:var(--marca);cursor:pointer}
.pl-tab td.ed{cursor:text}
.pl-tab td.editando{padding:0 4px;background:#fff!important;box-shadow:inset 0 0 0 2px var(--marca);overflow:visible}
.pl-edita{width:100%;height:34px;border:0;outline:0;background:transparent;color:var(--tinta);font:600 13.5px var(--fonte-texto)}
.pl-tab td.lk .cad{width:12px;height:12px;margin-right:5px;stroke:var(--tinta-2);fill:none;stroke-width:2;opacity:0;vertical-align:-1px;transition:opacity .12s}
.pl-tab td.lk:hover .cad{opacity:.75}
.pl-tab tr.g td{height:36px;background:#F1F6F2;border-bottom:1px solid var(--linha);font-size:12px}
.pl-tab tr.g td.ck{background:#F1F6F2}
.gl{display:flex;justify-content:space-between;align-items:center;gap:12px}
.gtog{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;font:inherit;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--tinta);cursor:pointer;text-align:left}
.gtog .seta{font-style:normal;width:10px;color:var(--tinta-2)}
.gsub{font-size:13px;color:var(--tinta);text-transform:none;letter-spacing:0;white-space:nowrap}
.pl .vazio-l,.vazio-l{padding:42px 16px;text-align:center;color:var(--tinta-2);font-weight:600}

/* ---- totais fixos no pé ---- */
.pl-pe{position:sticky;bottom:12px;z-index:30;display:flex;flex-wrap:wrap;gap:6px 34px;margin-top:12px;padding:10px 20px;background:#fff;border:1px solid var(--linha);border-radius:14px;box-shadow:0 -4px 18px rgba(5,39,14,.08)}
.pl-pe .t small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
.pl-pe .t b{font-size:16px;font-weight:800;white-space:nowrap}

/* ---- barra verde de soma da seleção ---- */
.pl-soma{position:fixed;z-index:70;left:calc(var(--lateral,232px) + (100vw - var(--lateral,232px)) / 2);bottom:84px;transform:translate(-50%,18px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:18px;padding:9px 10px 9px 18px;border-radius:14px;background:var(--marca);color:#fff;box-shadow:0 12px 32px rgba(5,39,14,.38);transition:transform .22s var(--fl-mola),opacity .18s}
.pl-soma.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
body.com-lateral .pl-soma{left:calc(var(--lateral,232px) + (100vw - var(--lateral,232px) - 400px) / 2)}
.pl-soma .st{font-size:15px;white-space:nowrap}
.pl-soma .sbs{display:flex;gap:6px}
.pl-soma .sb{height:36px;padding:0 13px;border:0;border-radius:10px;background:rgba(255,255,255,.16);color:#fff;font:700 13px var(--fonte-texto);cursor:pointer;white-space:nowrap;transition:background .2s,transform .18s}
.pl-soma .sb:hover{background:rgba(255,255,255,.26)}.pl-soma .sb:active{transform:scale(.97)}
.pl-soma .sb.sx{width:36px;padding:0;font-size:20px;line-height:1}

/* ---- cartões (celular) ---- */
.pl-cartoes{margin-top:8px;padding-bottom:6px}
.pl-cartao{position:relative;display:block;margin:0 0 8px;padding:10px 14px;background:var(--card);border-radius:14px;box-shadow:var(--sombra-card);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:0;transition:transform .18s}
.pl-cartao:active{transform:scale(.99)}
.pl-cartao:focus-visible{box-shadow:0 0 0 2px var(--marca)}
.pl-cartao.atr{box-shadow:inset 3px 0 0 var(--problema),var(--sombra-card)}
.pl-cartao.prev{opacity:.82}.pl-cartao.cancelada .cl1 b{color:var(--tinta-2)}
.pl-cartao .cl1{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pl-cartao .cl1 b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:700}
.pl-cartao .cl1 .num{flex:none;font-size:15px}
.pl-cartao .cl2{margin-top:2px;font-size:13px;line-height:18px;color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-cartao .cl3{display:flex;align-items:center;gap:6px;margin-top:6px;min-height:24px;overflow:hidden}
.pl-cartao .cl3 .pl-pill{flex:0 1 auto}
.pl-cartao .pl-cobrar{margin-left:auto;flex:none;height:28px;padding:0 12px;font-size:12px}
.pl-cartao .v-pctl{font-size:12px;font-weight:700;color:var(--ok-tx);white-space:nowrap}
.pl-cartao .cbola{display:none;position:absolute;left:-6px;top:-6px;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--marca);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.pl-cartoes.modo-sel .cbola{display:block}
.pl-cartao.sel{background:var(--pl-sel);box-shadow:inset 0 0 0 2px var(--marca)}
.pl-cartao.sel .cbola{background:var(--marca)}
.pl-cartao.sel .cbola::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
.pl-gcab{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px 4px 6px;font-size:12px}

/* ---- o "Por mês" ---- */
.mx-card{--mw:88px;margin-top:10px;padding:16px 0 6px;overflow:hidden}
.mx-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:0 20px 10px;flex-wrap:wrap}
.mx-top h3{margin:0;font:800 17px var(--fonte-titulo)}
.mx-top small{display:block;margin-top:2px;color:var(--tinta-2);font-size:12.5px}
.mx-rolagem{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-left:140px}
.mx td,.mx th.mes{scroll-snap-align:start}.mx .tot{scroll-snap-align:end}
.mx{border-collapse:separate;border-spacing:0;font-size:12.5px;min-width:100%;table-layout:fixed}
.mx th,.mx td{height:38px;padding:0 8px;border-bottom:1px solid var(--pl-linha,#EEF2EF);white-space:nowrap}
.mx thead th{font-size:11.5px;color:var(--tinta-2);font-weight:700;background:var(--pl-cab,#F7FAF8);text-align:right}
.mx th.mes,.mx td.num:not(.tot){width:var(--mw);min-width:var(--mw)}
.mx thead th.c0,.mx th.c0{text-align:left;position:sticky;left:0;z-index:3;width:150px;min-width:150px;background:var(--card);box-shadow:1px 0 0 var(--linha);padding-left:16px;overflow:hidden;text-overflow:ellipsis}
.mx thead th.c0{background:var(--pl-cab,#F7FAF8);z-index:4}
.mx .c0 button,.mx th button{padding:0;border:0;background:none;font:600 13px var(--fonte-texto);color:var(--tinta);text-align:left;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.mx th.mes button{font-size:11.5px;font-weight:700;color:var(--tinta-2);text-align:right;width:100%}
.mx th.mes.atual button{color:var(--marca)}.mx th.mes i{display:block;font-style:normal;font-size:9.5px;font-weight:700;color:var(--marca)}
.mx td.num{text-align:right}.mx td.zero{color:var(--cinza-2)}
.mx td.atual{background:var(--ok-bg)}
.mx td button{padding:2px 6px;margin:-2px -6px;border:0;border-radius:7px;background:none;font:inherit;font-weight:700;color:var(--tinta);cursor:pointer}
.mx td button:hover{background:var(--ok-bg);color:var(--marca)}
.mx .tot{width:104px;min-width:104px;font-weight:800;background:var(--pl-cab,#F7FAF8)}
.mx tfoot th,.mx tfoot td{border-top:1px solid var(--linha);border-bottom:0;font-weight:800;background:var(--pl-cab,#F7FAF8)}
.mx-fora{margin:8px 20px 4px}

/* ---- painel lateral (PC ≥ 1280): a folha vira um painel à direita e a lista continua ali ---- */
.modal.lateral{position:fixed;inset:calc(var(--h-proto) + var(--h-topo)) 0 0 auto;width:400px;display:block;padding:0;background:transparent;pointer-events:none;z-index:60;animation:none}
.modal.lateral .caixa{position:relative;width:100%;max-width:none;height:100%;max-height:none;margin:0;border-radius:0;background:var(--card);border-left:1px solid var(--linha);box-shadow:-8px 0 28px rgba(5,39,14,.12);overflow:auto;padding:24px 22px 28px;pointer-events:auto;animation:pl-lado .22s var(--fl-mola) backwards}
.modal.lateral .alca{display:none}
.lat-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:10px;background:var(--card-2);font-size:22px;line-height:1;color:var(--tinta);cursor:pointer;z-index:2}
@keyframes pl-lado{from{transform:translateX(24px);opacity:0}}
body.com-lateral #app{padding-right:400px}
body.com-lateral .toast{left:calc(50% + var(--lateral,232px)/2 - 200px)}

/* ---- celular ---- */
@media (max-width:1023px){
  .pl-ferr{margin-left:0;width:100%;justify-content:space-between}
  .pl-bt span{display:inline}
  .pl-bt{height:36px}
  .pl-seg button{height:34px}
  .pl-pop{left:0;right:auto;width:min(320px,calc(100vw - 32px))}
  .pl-pe{position:fixed;left:12px;right:12px;bottom:calc(12px + 64px + 8px + env(safe-area-inset-bottom));z-index:36;height:44px;margin:0;padding:0 14px;gap:0 14px;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-radius:14px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .pl-pe .t{min-width:0;flex:1 1 0}
  .pl-pe .t:not(.mv){display:none}
  .pl-pe .t small{font-size:9.5px;letter-spacing:.04em;white-space:nowrap}
  .pl-pe .t b{font-size:13.5px;line-height:17px}
  .pl-soma{left:12px;right:12px;bottom:calc(12px + 64px + 8px + 44px + 8px + env(safe-area-inset-bottom));transform:translateY(18px);flex-wrap:wrap;gap:6px 12px;padding:10px 12px;z-index:37}
  .pl-soma.on{transform:none}
  .pl-soma .st{font-size:14px;flex:1 1 100%}
  .pl-soma .sbs{flex:1 1 100%;flex-wrap:wrap}
  .pl-soma .sb{height:44px;flex:1 1 auto}.pl-soma .sb.sx{flex:none;width:44px}
  .pagina:has(.pl-pe){padding-bottom:64px}
  body:has(.pl-pe) .fab{bottom:calc(12px + 64px + 8px + 44px + 12px + env(safe-area-inset-bottom))}
  .mx-card{margin-top:8px;padding-top:12px}
  .mx-top{padding:0 14px 8px}
  .mx thead th.c0,.mx th.c0{width:112px;min-width:112px;padding-left:12px}
  .mx th.mes,.mx td.num:not(.tot){width:var(--mw);min-width:var(--mw)}
  .mx .tot{width:92px;min-width:92px}
  .mx-rolagem{scroll-padding-left:112px}
  .pl-ini{border-radius:12px 12px 0 0}
}

/* ---- PC: a 1ª linha de dado sobe (meta: y ≤ 430 em 1280×800). O que se perde: o subtítulo do banner (repete o pé e o resumo) e uns pixels de respiro ---- */
@media (min-width:1024px){
  html[data-tela="vendas"] .pagina,html[data-tela="despesas"] .pagina{padding-top:14px}
  .tp.ban.com-abas .dt{display:none}
  .fl-aba{min-height:40px}
  .fl-in{gap:6px}
  .fl-fim{margin:6px 0 0}
  .pl-ferr .pl-bt{height:30px}.pl-ferr .pl-seg button{height:28px}.pl-ferr .pl-bt.pl-aj{width:30px}
  .pl-tab th{height:32px}.pl-tab tr.g td{height:32px}
  .pl-corpo.pc{margin-top:6px}
}

/* o resumo do cartão de venda (% de 1 e de 2, doce) cabe numa linha com as pílulas; se faltar lugar, quebra (cartão continua ≤ 120 px) */
.pl-cartao .cl3{flex-wrap:wrap;row-gap:4px}
@media (min-width:1024px){.fl-bsc{flex:0 0 230px}}

.pl-fdot{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;vertical-align:1px}

.pl-tab td.lk{position:relative}
.pl-tab td .cad{position:absolute;left:6px;top:50%;display:block!important;width:12px!important;height:12px!important;margin:-6px 0 0!important;transition:opacity .12s}      /* o cadeado não ocupa lugar na célula: dinheiro grande nunca é empurrado pra fora */
.pl-tab td.r .cad{margin-right:6px}
@media (min-width:1024px){.fl-aba{min-height:38px}}
@media (max-width:1023px){.pl-bt.so-pc{display:none}.pl-ferr{gap:8px}.pl-ferr .pl-seg{flex:1}.pl-ferr .pl-seg button{flex:1}.pl-ferr .pl-bt{flex:1}}
.mx th,.mx td{box-sizing:border-box}

/* Por mês: colunas de largura EXATA (tabela automática + largura = mínima = máxima), senão o nome da linha empurra tudo */
.mx{table-layout:auto;width:max-content;min-width:100%}
.mx thead th.c0,.mx th.c0{max-width:150px;box-sizing:border-box}
.mx th.mes,.mx td.num:not(.tot){max-width:var(--mw)}
.mx .tot{max-width:104px}
@media (max-width:1023px){.mx thead th.c0,.mx th.c0{max-width:112px}.mx .tot{max-width:92px}}

/* =====================================================================
   LOTE B-2 (revisões 2, 3 e 4): iPhone, alvos de toque, Por mês, Início, saldo a favor, linha que pisca
   ===================================================================== */
/* ---- B7: o FAB sai da frente da barra de soma; a página reserva a altura da barra; o rodapé respira ---- */
@media (max-width:1023px){
  body:has(.pl-soma.on) .fab{display:none}
  .pagina:has(.pl-soma.on){padding-bottom:200px}
  .rodape{padding-bottom:88px}
}
/* ---- B8: 16 px nos campos (o Safari não dá zoom), dvh, toque, fundo parado, fundo clicável ---- */
.cg-in,.fl-mq{font-size:16px!important}.fl-mq{height:44px}
@media (max-width:1023px){input,select,textarea{font-size:max(16px,1em)}}
.modal .caixa,.pn-folha,.fl-folha,.cal-fo{overscroll-behavior:contain}
html.modal-aberto{overflow:hidden}
@supports (height:1dvh){.modal .caixa{max-height:88dvh}.fl-folha{max-height:88dvh}.pn-folha{max-height:86dvh}.cal-fo{height:92dvh;max-height:92dvh}}
button,[data-a],.pl-cartao,.fl-pa{touch-action:manipulation}
.modal{cursor:pointer}.modal .caixa{cursor:default}
@media (max-width:1023px){
  .gtog{min-height:44px}
  .fl-pg{height:44px}.fl-pa{width:44px}
  .cel-busca{width:44px;height:44px}
  .pl-seg button,.pl-bt,.botao.pequeno{min-height:44px}
  .pl-cartao .pl-cobrar{height:44px;font-size:13px}
  .fl-sel,.fl-fbt{min-height:44px}
  .nav button{font-size:11px}
  .pl-pe .t small{font-size:11px}
  .rec-an .an-c small{font-size:11px}
}
/* ---- B10: Por mês — 1ª coluna e Total fixos, sombra nas bordas, setas, 12 meses sem rolar em ≥ 1280 ---- */
.mx-card{--c0w:128px;--totw:92px}
.mx{table-layout:auto;width:max-content;min-width:100%;border-collapse:separate}
.mx thead th.c0,.mx th.c0{width:var(--c0w);min-width:var(--c0w);max-width:var(--c0w);padding-left:12px;overflow:hidden;text-overflow:ellipsis}
.mx th.mes,.mx td.num:not(.tot){width:var(--mw);min-width:var(--mw);max-width:var(--mw);padding:0 6px}
.mx .tot{width:var(--totw);min-width:var(--totw);max-width:var(--totw);position:sticky;right:0;z-index:3;padding:0 8px;background:var(--pl-cab,#F7FAF8)}
.mx thead th.tot{z-index:4}.mx thead th.tot i{display:block;font-style:normal;font-size:10.5px;font-weight:700;color:var(--tinta-2)}
.mx{font-size:12px}
.mx-card.sombra-e th.c0{box-shadow:7px 0 8px -5px rgba(5,39,14,.28)}
.mx-card.sombra-d .tot{box-shadow:-7px 0 8px -5px rgba(5,39,14,.28)}
.mx-setas{display:flex;justify-content:space-between;gap:8px;padding:0 14px 8px;min-height:30px}
.mx-setas.vazia{display:none}
.mx-setas button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--fl-ln);border-radius:99px;background:#fff;font:700 12px var(--fonte-texto);color:var(--tinta);cursor:pointer}
.mx-setas button[hidden]{display:none}.mx-setas button:last-child{margin-left:auto}
.mx-setas em{font-style:normal}
.mx-card[data-cabe="1"] .mx-rolagem{overflow-x:hidden}
@media (max-width:1023px){
  .mx-card{--c0w:104px;--totw:72px}
  .mx th,.mx td{height:44px}
  .mx-setas button{min-height:44px;padding:0 14px}
  .mx th.mes{padding:0 2px}.mx th.mes button{display:block;min-height:44px}
  .mx td button{display:flex;align-items:center;justify-content:flex-end;width:100%;min-height:44px;margin:0;padding:0 2px}
  .mx td button:hover{background:none}
  .mx thead th.tot i{font-size:10px}
}
/* ---- Início: cartões não esticam, "Tudo em dia" compacto, anel na linha das vendas, "Nada atrasado ✓" ---- */
@media (min-width:1024px){.corpo-i{align-items:start}}
.cartao.lista.compacto{padding:10px 14px}
.tudo-ok{margin:0;font-size:14px;color:var(--tinta)}.tudo-ok b{color:var(--ok-tx)}.tudo-ok small{display:block;margin-top:2px;font-size:12px;color:var(--tinta-2)}
.rec-mes-l{display:flex;align-items:center;gap:14px;margin:14px 0 10px}
.rec-mes-l .anel.rec-an{width:72px;height:72px}.rec-mes-l .rec-an .an-n{font-size:16px}.rec-mes-l .rec-an .an-c small{font-size:10.5px}
.rec-mes-t{flex:1;min-width:0}.rec-mes-t .rec-mes{margin:0}.rec-mes-t .barra-fina{margin:8px 0 0}
.rec-mes .liq{color:var(--tinta-2)}
.dia .rec-atr.nada{color:var(--ok-tx);font-weight:700}
.ban-duo .duo-ok .nada-atr{display:block;font-family:var(--fonte-titulo);font-weight:800;font-size:19px;line-height:1.7;color:#fff}
/* ---- saldo a favor por comprador (Vendas → A receber) ---- */
.sf{margin-top:10px;padding:14px 16px 6px}
.sf .tit-mini{margin:0 0 4px}
.sf-l{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--linha)}
.sf-n{min-width:0}.sf-n b{display:block;font-size:15px}.sf-n small{font-size:13px;color:var(--ok-tx);font-weight:600}
.sf-b{display:flex;gap:6px;flex-wrap:wrap}.sf-b .botao{min-height:44px}
.pl-saldos{margin-top:10px}
/* ---- X3: a linha nova pisca depois de salvar ---- */
@keyframes pl-pisca{0%,100%{background-color:transparent}35%,65%{background-color:#CFE8D6}}
@keyframes pl-pisca-c{0%,100%{box-shadow:var(--sombra-card)}35%,65%{box-shadow:0 0 0 3px var(--marca)}}
.pl-tab tr.pisca td{animation:pl-pisca 1.1s ease 2}
.pl-cartao.pisca{animation:pl-pisca-c 1.1s ease 2}

/* ---- celular: a 1ª linha de dado continua em y ≤ 520 com os alvos de 44 px ---- */
.tp.ban.com-abas .dt{display:none}
@media (max-width:1023px){
  .fl-pg{height:46px}
  .pl-gcab{margin:4px 4px 0}
  .fl-fim{margin-top:6px}
  .fl-in{gap:8px}
}
@media (max-width:1023px){
  .pl-gcab{margin:0 4px}
  .fl-fim{margin-top:2px}
  .corpo:has(.fl-abas){margin-top:8px}
  .pl-cartoes,.pl-corpo.cel{margin-top:4px}
}

/* aviso com título em negrito e frase embaixo: cada um na sua linha (vale pra todo aviso) */
.aviso > span:not(.ico) > b{display:block}
.aviso > span:not(.ico) > b + small{display:block;margin-top:2px;font-weight:500}

/* A receber: "Nada atrasado ✓" e a frase embaixo numa linha só; o banner volta a ser baixo */
.ban-duo .duo-i{flex:0 0 auto;white-space:nowrap}
.ban-duo .duo-ok .nada-atr{font-size:19px;line-height:1.25}
.ban-duo .duo-ok em{white-space:nowrap}

/* Por mês: o nome da 1ª coluna ganha até 2 linhas (a altura da linha não muda) */
.mx th.c0{white-space:normal}
.mx tbody th.c0 button{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal;word-break:break-word;line-height:1.18;overflow:hidden;text-overflow:clip;font-size:12.5px;width:100%;min-height:36px;-webkit-box-pack:center;box-pack:center}
@media (max-width:1023px){.mx tbody th.c0 button{min-height:44px}}

/* =====================================================================
   v0.14.1 — PAINEL LATERAL aberto: a página responde à largura que SOBRA (container query no #tela), não à largura da tela.
   Só vale com o painel aberto (body.com-lateral): com o painel fechado o PC fica exatamente como era. No celular o painel não existe.
   Larguras do #tela com o painel aberto (sem barra de rolagem): 1280 → 648 · 1366 → 734 · 1440 → 808 · 1536 → 904 · 1920 → 1288.
   ===================================================================== */
@media (min-width:1024px){
  #tela{container:pag/inline-size}
  body.com-lateral .topbar{margin-right:-400px}                 /* a barra de topo continua de ponta a ponta; o painel nasce embaixo dela */
}
body.com-lateral .fl-lin{flex-wrap:wrap}
@container pag (max-width:1000px){

  body.com-lateral .fl-bsc{flex:1 1 100%}
  body.com-lateral .fl-lim.pc{margin-left:0}
  body.com-lateral .pl-pe{gap:6px 22px;padding:10px 16px}
  body.com-lateral .pl-pe .t{min-width:0}
}
@container pag (max-width:880px){
  body.com-lateral .tp.ban{grid-template-columns:auto minmax(0,1fr);gap:16px;padding:14px 20px}
  body.com-lateral .tp.ban.sem-valor{grid-template-columns:minmax(0,1fr)}
  body.com-lateral .tp.ban .ban-c3{display:none}                /* a placa da logo sai: o nome já está na lateral */
  body.com-lateral .ban-duo{flex-wrap:wrap;gap:4px 20px}
  body.com-lateral .sem-h1-pc .valor-ban .grande{font-size:30px}
  body.com-lateral .tp.ban .pn-res .num,body.com-lateral .tp.ban .pn-res-n{font-size:30px}
  body.com-lateral .pl-corpo.pc,body.com-lateral .pl-pe,body.com-lateral .pl-ini{min-width:0}
}
@container pag (max-width:720px){
  body.com-lateral .tp.ban{gap:12px;padding:12px 16px}
  body.com-lateral .segf button{padding:0 12px}
  body.com-lateral .ban-duo .duo-i .grande{font-size:21px}
  body.com-lateral .sem-h1-pc .valor-ban .grande{font-size:28px}
  body.com-lateral .pl-tab{font-size:13px}
  body.com-lateral .pl-tab th,body.com-lateral .pl-tab td{padding:0 8px}
  /* larguras das colunas que ficam: o essencial (data, descrição, valor, situação) em ~ 592 px de tabela */
  body.com-lateral .pl-tab col[data-col=venc]{width:60px!important}
  body.com-lateral .pl-tab col[data-col=data]{width:58px!important}
  body.com-lateral .pl-tab col[data-col=valor]{width:112px!important}
  body.com-lateral .pl-tab col[data-col=sit]{width:166px!important}
  body.com-lateral .pl-tab col[data-col=falta]{width:106px!important}
  body.com-lateral .pl-tab col[data-col=entrada],body.com-lateral .pl-tab col[data-col=saida]{width:116px!important}
  body.com-lateral .pl-tab col[data-col=saldo]{width:116px!important}
  body.com-lateral .pl-pe{gap:6px 16px;padding:10px 14px}
  body.com-lateral .pl-pe .t b{font-size:15px}
}
/* painel lateral: o título e a linha de baixo não passam por baixo do × de fechar; cor do texto do painel é do próprio cartão (nunca herda a da barra verde) */
.modal.lateral .caixa{color:var(--tinta)}
.modal.lateral .caixa h2{padding-right:44px;overflow-wrap:anywhere}
.modal.lateral .caixa .sub{padding-right:44px}

/* barra de filtros grudada (as 2 linhas: busca/filtros e resumo/ferramentas): fundo SÓLIDO, nada da lista aparece por trás dela, no fim da rolagem também */
@media (min-width:1024px){
  .fl-bar.preso{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none}
}