/* ============================================================
   financeiro.css — Contas do mês, lançamento rápido (chips), A receber, Painel (resultado), Pro contador.
   Sem cor escrita aqui: só tokens de tema.css. Cor de status SEMPRE com palavra ou ícone junto.
   Animação nunca deixa nada invisível: o estado natural é visível.
   ============================================================ */
.grande-n{font-family:var(--fonte-titulo);font-weight:700;font-size:30px;line-height:1.1;margin-top:6px;white-space:nowrap}
.grande-n.problema{color:var(--problema-tx)}
.par-bt{display:flex;gap:8px;flex:0 0 auto}

/* ---------- contas do mês ---------- */
.g-dbar{display:flex;gap:3px;height:10px;margin:12px 0 4px;border-radius:99px;overflow:hidden}
.g-dbar i{display:block;min-width:6px;border-radius:99px;background:var(--cinza-2)}
.g-dbar i.paga{background:var(--ok)}.g-dbar i.aberta{background:var(--atencao)}.g-dbar i.vencida{background:var(--problema)}.g-dbar i.prevista{background:var(--linha)}
.g-d4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.g-dt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:var(--toque-min);padding:8px 12px;border:2px solid transparent;border-radius:var(--r-s);background:var(--card-2);cursor:pointer;text-align:left}
.g-dt span{font-size:var(--t-12);font-weight:800;color:var(--tinta-2)}
.g-dt b{font-family:var(--fonte-titulo);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.g-dt.paga span{color:var(--ok-tx)}.g-dt.aberta span{color:var(--atencao-tx)}.g-dt.vencida span{color:var(--problema-tx)}.g-dt.prevista span{color:var(--cinza)}
.g-dt.on{border-color:var(--marca);background:var(--card)}
.g-atr{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--toque-min);padding:10px 14px;border:0;border-radius:var(--r-m);background:var(--problema-bg);color:var(--problema-tx);font-weight:800;font-size:var(--t-13);text-align:left;cursor:pointer}
.g-atr span:nth-child(2){flex:1;min-width:0}
.dia-h{display:flex;justify-content:space-between;font-size:var(--t-12);font-weight:800;color:var(--tinta-2);letter-spacing:.03em;text-transform:uppercase;padding:12px 0 2px;border-bottom:1px solid var(--linha)}
.dia-h:first-child{padding-top:2px}
.mov.prev .t,.mov.prev .vl{color:var(--cinza)}
.mov.prev{opacity:.92}
.mov.prev .ic{background:var(--card-2);color:var(--cinza);border:1.5px dashed var(--cinza-2)}
.mov.paga .ic{background:var(--card-2);color:var(--cinza)}
.mov.paga .vl{color:var(--tinta-2)}
.mov .ic.t{background:var(--info-bg);color:var(--info-tx);font-size:16px}
.mov .vl.t{color:var(--info-tx)}
em.sit.prev{color:var(--cinza)}

/* ---------- lançamento rápido: chips grandes pro polegar ---------- */
.chips-sel{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.ch{min-height:var(--toque-min);padding:0 14px;border:2px solid var(--linha);border-radius:var(--r-pill);background:var(--card);color:var(--tinta-2);font-weight:800;font-size:var(--t-13);cursor:pointer;max-width:100%;overflow-wrap:anywhere;text-align:left}
.ch.on{border-color:var(--marca);background:var(--card-2);color:var(--tinta)}
.campo-valor{font-family:var(--fonte-titulo);font-weight:700;font-size:30px;min-height:58px}
/* campo de dinheiro (validar2.js): "R$" fixo na frente, o número com ,00; o saldo ganha o botão "−" (o teclado numérico do celular não tem o menos) */
.cr-w{position:relative;display:block}
.cr-w>.campo{padding-left:50px}
.cr-w.cr-s>.campo{padding-right:58px}
.cr-p{position:absolute;left:16px;top:0;height:var(--toque-min);display:flex;align-items:center;font-style:normal;font-weight:700;font-size:16px;color:var(--tinta-2);pointer-events:none}
.cr-w>.campo-valor~.cr-p{height:58px;font-size:18px}
.cr-sinal{position:absolute;right:6px;top:0;width:46px;height:var(--toque-min);display:flex;align-items:center;justify-content:center;border:0;background:none;font-size:26px;font-weight:700;color:var(--tinta-2);cursor:pointer;border-radius:var(--r-m)}
.cr-w>.campo-valor~.cr-sinal{height:58px}
.cr-sinal:active{background:var(--linha)}
.modal .caixa textarea.campo{min-height:150px;line-height:1.5}
.modal .caixa .divisor{margin-top:14px}

/* ---------- painel: resultado ---------- */
.dre{margin-top:6px}
.dre-l{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--linha)}
.dre-l span{font-weight:800;font-size:var(--t-14)}
.dre-l small{display:block;font-size:var(--t-12);font-weight:600;color:var(--cinza);margin-top:2px}
.dre-l b{font-family:var(--fonte-titulo);font-weight:700;font-size:19px;white-space:nowrap}
.dre-l.forte b{font-size:21px}
.dre-l.menos b{color:var(--tinta-2)}
.dre-l.final{border-bottom:0;border-top:2px solid var(--tinta);margin-top:2px;padding-top:14px}
.dre-l.final b{font-size:28px}
.dre-l.final.ok b{color:var(--ok-tx)}.dre-l.final.problema b{color:var(--problema-tx)}
.stats .n{white-space:nowrap}
@media (max-width:400px){ .grande-n{font-size:26px} .dre-l.final b{font-size:24px} .g-dt b{font-size:15px} }
@media (min-width:1024px){ .g-d4{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:400px){ .stats.duas .st .n{font-size:19px} }
/* FOLHA-NA-LARGURA */
.modal .caixa{min-width:0;overflow-x:hidden}
.modal .caixa .sub{overflow-wrap:anywhere}
.seg{min-width:0}
.seg button{min-width:0;padding-left:6px;padding-right:6px;overflow-wrap:anywhere;line-height:1.15}
@media (max-width:420px){.seg button{font-size:13px}}
input[type=date].campo,input[type=time].campo{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none;text-align:left}
input[type=date].campo::-webkit-date-and-time-value,input[type=time].campo::-webkit-date-and-time-value{text-align:left;min-width:0;margin:0}
/* /FOLHA-NA-LARGURA */
/* TRAVA-ZOOM: sem pinça, sem toque duplo, sem elástico e sem arrasto pros lados (o resto é o trava-zoom.js). Rolagem vertical segue normal. */
html{touch-action:manipulation;overscroll-behavior:none;width:100%;max-width:100%}
body{overscroll-behavior:none;max-width:100%}
.modal .caixa{touch-action:pan-y pinch-zoom;overscroll-behavior:contain}
[data-zoom],[data-zoom] *{touch-action:pinch-zoom pan-x pan-y}
/* /TRAVA-ZOOM */