.app{display:flex;min-height:100vh}
.sidebar{width:236px;flex-shrink:0;background:var(--card);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
.sidebar-logo{padding:6px 8px 22px}
.sidebar-logo img{width:150px}
.nav-item{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-sm);color:var(--txt-2);font-size:13.5px;font-weight:550;transition:background .15s,color .15s}
.nav-item:hover{background:var(--raised);color:var(--txt)}
.nav-item.active{background:var(--teal-soft);color:var(--teal)}
.content{flex:1;padding:26px 30px 60px;min-width:0}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:14px;flex-wrap:wrap}
.grid{display:grid;gap:16px}
.grid-6{grid-template-columns:repeat(6,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.bottom-nav{display:none}
@media(max-width:768px){
  .app{flex-direction:column}
  .sidebar{display:none}
  .content{padding:16px 14px calc(88px + env(safe-area-inset-bottom))}
  .grid-6,.grid-5,.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .input,select,textarea{font-size:16px}
  .modal-bg{align-items:flex-end;padding:0}
  .modal{max-width:100%;border-radius:var(--r) var(--r) 0 0;max-height:92vh}
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;height:calc(74px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--card);border-top:1px solid var(--line);z-index:60}
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--txt-3);font-size:10.5px;font-weight:600}
  .bottom-nav a.active{color:var(--teal)}
  table{display:block;overflow-x:auto;white-space:nowrap}
}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:100%;max-width:340px;text-align:center;padding:34px 26px}
.login-logo{width:150px;margin-bottom:18px}
.login-sub{color:var(--txt-2);font-size:13px;margin:0 0 20px}
.login-btn{width:100%;justify-content:center}
.abas-wrap{margin-bottom:18px;border-bottom:1px solid var(--line)}
.abas{position:relative;display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:2px;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.aba{flex:0 0 auto;padding:9px 14px;border-radius:var(--r-sm) var(--r-sm) 0 0;color:var(--txt-3);font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;scroll-snap-align:start;white-space:nowrap;min-height:44px}
.aba:hover{color:var(--txt)}
.aba.active{color:var(--teal)}
.aba-ind{position:absolute;bottom:0;height:2px;background:var(--teal);left:0;width:0;transition:left .22s ease,width .22s ease}
.aba-count{background:var(--raised);border-radius:99px;padding:1px 7px;font-size:11px}
.kpi-t{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-3);font-weight:600}
.kpi-v{font-size:25px;font-weight:700;margin-top:7px;letter-spacing:-.02em}
.kpi-s{font-size:12px;color:var(--txt-2);margin-top:5px}
.vazio{padding:44px;text-align:center;color:var(--txt-3);font-size:13.5px;border:1px dashed var(--line);border-radius:var(--r)}
.page-sub{color:var(--txt-3);font-size:13px;margin-top:5px}
.dado{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.dado:last-child{border-bottom:0}
.dado span{color:var(--txt-3)}
.filtros{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;align-items:center}
.seg{display:flex;background:var(--raised);border-radius:var(--r-sm);padding:3px}
.seg button{padding:7px 13px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--txt-3)}
.seg button.active{background:var(--card);color:var(--teal)}
.cli-card{display:block;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.cli-card:hover{border-color:var(--teal);transform:translateY(-2px)}
.cli-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}
.cli-ini{width:38px;height:38px;border-radius:11px;background:var(--teal-soft);color:var(--teal);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.cli-nome{font-weight:650;font-size:15px;margin-bottom:5px}
.cli-sub{color:var(--txt-3);font-size:12.5px}
.mes-nav{display:flex;align-items:center;gap:12px;font-size:14px}
.cat-linha{margin-bottom:14px}
.cat-topo{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:6px}
.cat-topo i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:8px}
.ponto-conta{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;flex-shrink:0;vertical-align:middle}
.link-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:99px;font-size:11px;font-weight:600;white-space:nowrap}
.link-badge.tem{background:rgba(46,204,143,.14);color:var(--ok)}
.link-badge.falta{background:rgba(232,176,75,.14);color:var(--warn)}
.link-badge.ignorado{background:var(--raised);color:var(--txt-3)}
.link-badge.emprestimo{background:rgba(0,140,131,.16);color:var(--teal)}
.conta-card.emprestimo-quitado{opacity:.68;border-left-color:var(--line)}
.cartao-lanc-info .link-badge{margin-top:4px}
.conta-card{border-left:3px solid var(--teal)}
.barra{height:6px;background:var(--raised);border-radius:99px;overflow:hidden}
.barra>div{height:100%;border-radius:99px}
.fluxo-graf{display:flex;align-items:flex-end;gap:8px;height:170px}
.fluxo-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:7px}
.fluxo-barra{width:100%;border-radius:6px 6px 0 0;min-height:3px}
.fluxo-col span{font-size:10.5px;color:var(--txt-3)}
@media(max-width:768px){
  .mes-nav{font-size:13px;gap:8px}
  .fluxo-graf{gap:4px}
  .fluxo-col span{font-size:9px}
}

/* ===== Financeiro: cabeçalho fixo ===== */
.fin-head{position:sticky;top:0;z-index:40;background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;margin-bottom:18px;border-bottom:1px solid var(--line)}
.fin-head h1{font-size:19px;font-family:var(--font-title)}
.mes-pill{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:5px 8px 5px 8px;font-size:13px;white-space:nowrap}
.mes-pill b{font-weight:600;min-width:120px;text-align:center;font-family:var(--font-title)}
.btn-icone{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:99px;color:var(--txt-2);flex-shrink:0}
.btn-icone:hover{background:var(--raised);color:var(--txt)}
@media(max-width:768px){
  .fin-head{padding:12px 0}
  .fin-head h1{font-size:16px}
  .mes-pill b{min-width:96px;font-size:12.5px}
  .btn-icone{width:38px;height:38px}
}

/* ===== Financeiro: termômetro do mês ===== */
/* Previa da redistribuicao: de quanto para quanto vai cada parcela. */
.red-previa{display:flex;flex-direction:column;gap:6px;margin:14px 0 4px;max-height:40vh;overflow:auto}
.red-linha{display:grid;grid-template-columns:1fr auto 14px auto;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-sm);background:var(--raised);font-size:13px}
.red-linha span:first-child{color:var(--muted)}
.red-de{color:var(--txt-3,var(--muted));text-decoration:line-through;font-variant-numeric:tabular-nums}
.red-linha svg{transform:rotate(180deg);color:var(--txt-3,var(--muted))}
.red-linha b{font-variant-numeric:tabular-nums;color:var(--teal)}
.pag-emp-quando{margin-bottom:14px;width:max-content;max-width:100%}
.emp-juros{display:block;font-style:normal;font-size:11px;color:var(--warn);margin-top:1px}
/* O que de fato saiu da conta: parcela mais juros. Sem essa linha a
   pessoa tinha que somar de cabeca. */
.emp-total-pago{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--txt);margin-top:1px}

/* Barra de versao nova: canto de baixo, sem tampar o conteudo, some se a
   pessoa disser depois. */
.barra-versao{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:99px;background:var(--card);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.45);font-size:13px}
@media (max-width:640px){
  .barra-versao{left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:none;border-radius:14px;flex-wrap:wrap;justify-content:center}
}

/* ================= Financeiro: extrato do caixa =================
   O conceito da tela: o dinheiro anda em linha do tempo, entao a leitura
   principal e um extrato continuo, dia a dia, com o saldo correndo do lado.
   A coluna da direita fica fixa com o estado do mes e o caminho para as
   demais visoes, no lugar da barra de abas que rolava de lado. */
.fin-shell{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:28px;align-items:start}
.fin-principal{min-width:0}
.fin-lado{position:sticky;top:18px;display:flex;flex-direction:column;gap:18px}
.lado-topo{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.lado-topo .mes-pill{width:100%;justify-content:space-between;margin-bottom:14px}
.lado-rot{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lado-saldo{display:block;font-family:var(--font-title);font-size:26px;line-height:1.2;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:3px}
.lado-saldo.neg{color:var(--err)}
.lado-conta{margin-top:12px;display:flex;flex-direction:column;gap:5px;font-size:12px}
.lc-linha{display:flex;justify-content:space-between;gap:10px;color:var(--muted)}
.lc-linha b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--txt)}
.lc-linha b.ok{color:var(--ok)}
.lc-linha b.err{color:var(--err)}
.lado-pilulas{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.lado-pilulas .fin-pilula{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
.lado-nav{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 10px;display:flex;flex-direction:column;gap:14px}
.ln-grupo{display:flex;flex-direction:column;gap:1px}
.ln-titulo{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3,var(--muted));padding:0 8px 6px}
.ln-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px;border-radius:8px;font-size:13px;color:var(--muted);text-align:left;transition:background .12s,color .12s}
.ln-item:hover{background:var(--raised);color:var(--txt)}
.ln-item.ativo{background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal);font-weight:600}
.ln-item:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.ln-count.alerta{background:color-mix(in srgb,var(--err) 22%,transparent);color:var(--err)}
.ln-count{font-style:normal;font-size:11px;background:var(--raised);border-radius:99px;padding:1px 7px;color:var(--txt)}

.cx-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.cx-acoes{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* O botao da previsao fica aceso enquanto ela esta na tela, para o estado
   ser legivel sem ler o rotulo. */
.cx-acoes .btn-ghost.on{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 45%,transparent)}
.cx-sub{margin:4px 0 0;font-size:13px;color:var(--muted);max-width:46ch}
/* ---- Busca e filtros do Caixa ----
   A lupa abre uma faixa com o campo e os recortes. O recorte muda o que
   aparece, nunca o saldo que corre ao lado das linhas: aquele e o saldo da
   conta de verdade. */
.cx-busca{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:14px;display:flex;flex-direction:column;gap:10px}
.cx-busca-campo{position:relative;display:flex;align-items:center}
.cx-busca-campo>svg{position:absolute;left:12px;color:var(--txt-3,var(--muted));pointer-events:none}
.cx-busca-campo .input{padding-left:36px;padding-right:38px}
.cx-busca-campo .btn-icone{position:absolute;right:6px}
.cx-busca-filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cx-busca-filtros .input{max-width:190px;padding:7px 10px;font-size:13px}
.cx-busca-filtros .seg button{font-size:12.5px;padding:5px 10px}
.cx-busca-resumo{font-size:12px;color:var(--txt-3,var(--muted))}
.cx-acoes .btn-ghost .aba-count{margin-left:6px;background:color-mix(in srgb,var(--teal) 20%,transparent);color:var(--teal)}
@media (max-width:640px){
  .cx-busca-filtros .input{max-width:100%;flex:1 1 100%}
  .cx-busca-filtros .seg{width:100%}
  .cx-busca-filtros .seg button{flex:1}
}

.cx-abertura,.cx-fim{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line);font-size:12px;color:var(--muted)}
/* A abertura resume o mes passado e leva ate ele. */
button.cx-abertura{width:100%;text-align:left;flex-wrap:wrap;cursor:pointer;font:inherit;font-size:12px;transition:border-color .13s}
button.cx-abertura:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--line))}
button.cx-abertura:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.cxa-mes{color:var(--txt);font-weight:600}
.cxa-nums{display:flex;gap:16px;flex-wrap:wrap}
.cxa-nums i{font-style:normal}
.cxa-nums b,.cxa-saldo b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--txt)}
.cxa-nums b.ok{color:var(--ok)}
.cxa-nums b.err{color:var(--err)}
.cxa-nums b.neg,.cxa-saldo b.neg{color:var(--err)}
.cxa-saldo{margin-left:auto}
.cx-abertura b,.cx-fim b{font-family:var(--font-title);font-variant-numeric:tabular-nums;color:var(--txt)}
.cx-fim{margin-top:14px;font-size:13px;flex-wrap:wrap;align-items:center}
.cxf-parcelas{display:flex;gap:22px;flex-wrap:wrap;align-items:baseline}
.cxf-item{display:flex;flex-direction:column;gap:2px}
.cxf-item span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cxf-item b{font-size:15px}
.cxf-item.forte b{font-size:21px}
.cxf-item b.ok{color:var(--ok)}
.cxf-item b.err{color:var(--err)}
.cxf-saldo{display:flex;flex-direction:column;gap:2px;text-align:right;margin-left:auto}
.cxf-saldo span{font-size:11px;color:var(--txt-3,var(--muted))}
.cxf-saldo b{font-size:14px}
.cx-fim b.neg,.cx-fecho b.neg{color:var(--err)}

/* ---- Em atraso ----
   Mesmo desenho do Caixa, com o trilho e os nos em vermelho: tudo aqui
   passou da data. Quanto mais velho, mais forte o no. */
.at-resumo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:10px}
.at-card{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 14px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line);color:inherit;font:inherit;cursor:pointer;transition:border-color .13s}
.at-card:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--line))}
.at-card.ativo{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.at-card.estatico{cursor:default}
.at-card.estatico:hover{border-color:var(--line)}
.at-card:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.at-card span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.at-card b{font-family:var(--font-title);font-size:19px;font-variant-numeric:tabular-nums}
.at-card b.ok{color:var(--ok)}
.at-card b.err{color:var(--err)}
.at-card i{font-style:normal;font-size:11.5px;color:var(--txt-3,var(--muted))}
.at-limpar{margin-bottom:4px}
.at-mes{margin:18px 0 2px -26px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.at-mes:first-child{margin-top:4px}
.at-trilha .cx-dia::before{background:color-mix(in srgb,var(--err) 55%,var(--card))}
.at-trilha .cx-dia.velho::before{background:var(--err)}
.at-dias{color:var(--err)!important}
.at-baixa{flex:none}
.at-trilha .cx-linha{grid-template-columns:26px minmax(0,1fr) auto auto}
@media (max-width:640px){
  .at-resumo{grid-template-columns:1fr 1fr}
  .at-resumo .estatico{grid-column:1 / -1}
  .at-trilha .cx-linha{grid-template-columns:26px minmax(0,1fr) auto}
  .at-baixa{grid-column:2 / -1;justify-self:start}
  .at-mes{margin-left:-20px}
}

/* O trilho: a linha vertical que atravessa o mes. Solida no passado,
   pontilhada no futuro, com um no em cada dia. */
.cx-trilha{position:relative;margin:16px 0 0;padding-left:26px}
.cx-trilha::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--line)}
.cx-dia{position:relative;padding:12px 0 6px}
.cx-dia+.cx-dia{border-top:1px solid var(--line)}
.cx-dia::before{content:'';position:absolute;left:-23px;top:20px;width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px var(--bg)}
.cx-dia.futuro::before{background:var(--bg);border:1px solid color-mix(in srgb,var(--teal) 60%,var(--muted))}
/* O marco de hoje: a divisa entre o que e fato e o que e previsao. Dali
   para baixo o trilho vira pontilhado. */
.cx-hoje{position:relative;display:flex;align-items:center;gap:10px;padding:14px 0 4px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.cx-hoje::before{content:'';position:absolute;left:-23px;top:50%;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px var(--bg),0 0 0 5px color-mix(in srgb,var(--teal) 30%,transparent)}
.cx-hoje::after{content:'';flex:1;height:1px;background:linear-gradient(to right,color-mix(in srgb,var(--teal) 45%,transparent),transparent)}
.cx-hoje~.cx-dia{border-top:1px dashed var(--line)}
.cx-trilha:has(.cx-hoje)::before{background:linear-gradient(var(--line),var(--line))}
.cx-dia.futuro{opacity:.86}
.cx-dia.hoje::before{background:var(--teal);box-shadow:0 0 0 3px var(--bg),0 0 0 5px color-mix(in srgb,var(--teal) 35%,transparent)}
.cx-cab{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.cx-data{display:flex;align-items:baseline;gap:6px}
.cx-data b{font-family:var(--font-title);font-size:21px;line-height:1;font-variant-numeric:tabular-nums}
.cx-data span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cx-fluxo{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;font-variant-numeric:tabular-nums}
.cx-fluxo .ok{color:var(--ok)}
.cx-fluxo .err{color:var(--err)}
.cx-fluxo .prev{color:var(--warn)}
.cx-fluxo .prev.atraso{color:var(--err)}
.cx-fecho{margin-left:auto;display:flex;align-items:baseline;gap:7px;font-size:11px;color:var(--muted)}
.cx-fecho b{font-family:var(--font-title);font-size:14px;color:var(--txt);font-variant-numeric:tabular-nums}

.cx-linha{display:grid;grid-template-columns:26px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:9px 12px 9px 9px;border-radius:10px;cursor:pointer;transition:background .12s}
.cx-linha:hover{background:var(--card)}
.cx-linha:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
/* A seta diz o sentido do dinheiro antes de qualquer numero: para cima e
   verde, entrou; para baixo e vermelha, saiu. Substitui o traco da cor da
   conta, que nao dizia nada de relance (a conta ja esta escrita embaixo).
   No que ainda vai acontecer, a seta fica mais apagada, como o resto da
   linha. */
.cx-seta{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none}
.cx-seta.entra{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 30%,transparent)}
.cx-seta.sai{color:var(--err);background:color-mix(in srgb,var(--err) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--err) 28%,transparent)}
.cx-seta svg{stroke-width:2.2}
.cx-linha.aberta .cx-seta{opacity:.8}
/* Versao de tabela: menor, alinhada ao texto da descricao. */
.cx-seta.mini{width:22px;height:22px}
.cx-seta.mini.aberta{opacity:.8}
.td-com-seta{display:inline-flex;align-items:center;gap:9px;min-width:0}
.td-com-seta>span:last-child{min-width:0}
.cx-texto{min-width:0;display:flex;flex-direction:column;gap:2px}
.cx-texto b{font-weight:550;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-linha.aberta .cx-texto b{color:var(--muted)}
.cx-meta{font-size:11.5px;color:var(--txt-3,var(--muted));display:flex;align-items:center;gap:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* O texto da meta encolhe com reticencias; o selo nunca: e ele que diz
   se a linha ja aconteceu. */
.cx-meta-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-sit{font-style:normal;font-size:10px;letter-spacing:.05em;text-transform:uppercase;border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);color:var(--warn);border-radius:99px;padding:1px 7px;flex:none}
.cx-sit.atraso{border-color:color-mix(in srgb,var(--err) 50%,transparent);color:var(--err)}
/* Pago e recebido: pilula preenchida em verde. As pendentes sao so
   contornadas (ambar ou vermelho); preenchido contra contornado separa o
   que ja aconteceu do que falta sem depender so da cor. */
.cx-sit.feito{display:inline-flex;align-items:center;gap:4px;border:0;padding:2px 8px 2px 6px;font-weight:600;color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,transparent)}
/* Pago fora do prazo continua no verde de pago: o ambar e a cor do que
   ainda precisa de acao, e usar os dois iguais fazia uma conta quitada
   parecer pendente. O aviso do atraso fica no texto. */
.cx-sit.feito svg{flex:none;stroke-width:2.6}
.cx-valor{font-family:var(--font-title);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cx-valor.ok{color:var(--ok)}
.cx-valor.err{color:var(--err)}
.cx-linha.aberta .cx-valor{opacity:.72}
.cx-saldo{min-width:96px;text-align:right;font-size:12px;color:var(--txt-3,var(--muted));font-variant-numeric:tabular-nums}

/* Em tela estreita a coluna se desfaz: o estado do mes sobe para o topo, o
   extrato vem logo em seguida (ele e a tela), e a navegacao desce para o pe.
   `display:contents` deixa os dois filhos do aside entrarem direto na grade. */
@media (max-width:1080px){
  .fin-shell{display:flex;flex-direction:column;gap:18px}
  .fin-lado{display:contents}
  .lado-topo{order:-1}
  .fin-principal{order:0}
  .lado-nav{order:1;flex-direction:row;flex-wrap:wrap;gap:10px 18px}
  .ln-grupo{flex:1 1 150px}
}
@media (max-width:640px){
  /* No celular o saldo linha a linha vira ruido: o fecho do dia ja esta no
     cabecalho, entao so ele fica. */
  .cx-linha{grid-template-columns:26px minmax(0,1fr) auto;padding:9px 8px}
  .cx-saldo{display:none}
  .cx-fecho{margin-left:0;width:100%}
  .cxf-parcelas{gap:14px}
  .cxf-saldo{margin-left:0;text-align:left;width:100%;flex-direction:row;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:8px;margin-top:4px}
  .cx-topo{flex-direction:column;align-items:stretch}
  .cx-acoes{justify-content:stretch}
  .cx-acoes .btn{flex:1}
  .cx-trilha{padding-left:20px}
  .cx-dia::before{left:-17px}
}

/* ---- Faixa do mes do Financeiro ----
   O saldo e a manchete; a conta que leva ate ele fica em corpo pequeno logo
   abaixo, e a regua mostra o mes dia a dia. */
.fin-mes{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px 14px;margin-bottom:18px}
.fin-mes-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fin-mes-rot{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.fin-mes-saldo>b{display:block;font-family:var(--font-title);font-size:34px;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:4px}
.fin-mes-saldo>b.neg{color:var(--err)}
.fin-mes-conta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:8px;font-size:12px}
.fmc-passo{display:inline-flex;align-items:baseline;gap:5px}
.fmc-op{font-style:normal;color:var(--muted)}
.fmc-rot{color:var(--muted)}
.fmc-val{font-variant-numeric:tabular-nums;font-weight:600}
.fmc-val.ok{color:var(--ok)}
.fmc-val.err{color:var(--err)}
.fin-mes-frente{display:flex;gap:8px;flex-wrap:wrap}
.fin-pilula{display:flex;flex-direction:column;gap:2px;align-items:flex-start;background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer;color:inherit;font:inherit;text-align:left;transition:border-color .15s,transform .15s}
.fin-pilula:hover{border-color:var(--teal);transform:translateY(-1px)}
.fin-pilula:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.fin-pilula span{font-size:11px;color:var(--muted)}
.fin-pilula b{font-size:15px;font-variant-numeric:tabular-nums}
.fin-pilula b.ok{color:var(--ok)}
.fin-pilula.alerta{border-color:color-mix(in srgb,var(--err) 45%,transparent)}
/* O vencido mora dentro do a pagar porque e um pedaco dele: em pilula
   propria, a soma das duas contaria o mesmo dinheiro duas vezes. */
.fp-vencido{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--err);margin-top:1px}
.fin-pilula.alerta b{color:var(--err)}
.fin-mes-vazio{margin-top:14px;font-size:13px;color:var(--muted)}
.fin-regua{display:flex;align-items:flex-end;gap:2px;height:52px;margin-top:16px;padding-top:6px;border-bottom:1px solid var(--line)}
.fr-dia{flex:1;height:100%;display:flex;align-items:flex-end;min-width:3px}
.fr-barra{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:1px;width:100%;height:100%;border-radius:3px 3px 0 0}
.fr-dia.hoje{position:relative}
.fr-dia.hoje::before{content:'';position:absolute;inset:-6px 0 0;border-left:1px solid var(--teal);opacity:.7}
.fr-dia.hoje .fr-barra{background:color-mix(in srgb,var(--teal) 14%,transparent)}
.fin-regua-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;font-size:10px;letter-spacing:.06em;color:var(--txt-3,var(--muted))}
.frp-legenda{display:inline-flex;align-items:center;gap:6px}
.frp-cor{width:8px;height:8px;border-radius:2px;display:inline-block}
.frp-cor.feito{background:var(--teal)}
.frp-cor.futuro{background:color-mix(in srgb,var(--warn) 55%,transparent);margin-left:6px}
.fr-feito,.fr-futuro{display:block;width:100%;border-radius:2px 2px 0 0;min-height:2px}
.fr-feito{background:var(--teal)}
.fr-futuro{background:color-mix(in srgb,var(--warn) 55%,transparent)}
.fr-futuro.atrasado{background:color-mix(in srgb,var(--err) 60%,transparent)}
@media (max-width:640px){
  .fin-mes{padding:14px 14px 12px;margin-bottom:14px}
  .fin-mes-saldo>b{font-size:27px}
  .fin-mes-topo{gap:12px}
  .fin-mes-frente{width:100%}
  .fin-pilula{flex:1}
  .fin-regua{height:40px}
}
@media (prefers-reduced-motion:reduce){.fin-pilula:hover{transform:none}}

.fin-termometro{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:18px}
.term-nums{display:flex;gap:26px;margin-bottom:12px;flex-wrap:wrap}
.term-item{display:flex;flex-direction:column;gap:3px}
.term-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-3);font-weight:600}
.term-val{font-size:17px;font-weight:700;letter-spacing:-.01em}
.term-saldo .term-val{font-size:21px}
.term-barra{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--raised)}
.term-e{background:var(--teal);transition:width .3s ease}
.term-s{background:var(--err);transition:width .3s ease}
.term-neutro{width:100%;height:100%;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px)}
.term-vazio{margin-top:10px;font-size:12.5px;color:var(--txt-3)}
.term-item-btn{text-align:left;border-radius:var(--r-sm);padding:4px 6px;margin:-4px -6px;transition:background .15s}
.term-item-btn:hover{background:var(--raised)}
@media(max-width:768px){
  .fin-termometro{padding:13px 14px;margin-bottom:14px}
  .term-nums{gap:16px}
  .term-val{font-size:15px}
  .term-saldo .term-val{font-size:18px}
}

/* ===== Painel ===== */
a.fin-termometro.painel-faixa{display:block;text-decoration:none;color:inherit;transition:border-color .15s}
a.fin-termometro.painel-faixa:hover{border-color:var(--teal)}
.painel-card-titulo{font-size:13px;font-weight:700;margin-bottom:10px;color:var(--txt)}
.graf-tar-leitura{font-size:12.5px;color:var(--txt-2);margin-bottom:12px}
a.painel-card{display:block;text-decoration:none;color:inherit;transition:border-color .15s}
a.painel-card:hover{border-color:var(--teal)}
.painel-card .dado:last-child,a.painel-card .dado:last-child{border-bottom:0}
.painel-linha{text-decoration:none;color:inherit;cursor:pointer}
.painel-linha:hover{color:var(--teal)}
.painel-linha span{color:inherit}
.painel-tar-nums{display:flex;gap:10px;margin-bottom:10px}
.painel-mini{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:var(--r-sm);background:var(--raised);text-decoration:none;color:var(--txt)}
.painel-mini:hover{background:var(--line)}
.painel-mini b{font-size:19px;font-weight:700;font-family:'Sora',sans-serif;font-variant-numeric:tabular-nums}
.painel-mini span{font-size:10.5px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.04em}
.painel-mini-err b{color:var(--err)}
.painel-mini-warn b{color:var(--warn)}
.painel-onboard p{font-size:13.5px;line-height:1.5}
.painel-atalhos-linha{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.painel-escolha-cliente{max-height:60vh;overflow:auto}
a.fin-termometro.painel-faixa:focus-visible,a.painel-card:focus-visible,.painel-linha:focus-visible,.painel-mini:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media(max-width:768px){
  .painel-atalhos-linha{margin-bottom:90px}
  .painel-atalhos-linha .btn{flex:1;justify-content:center;min-height:44px}
}

/* ===== Gráfico de faturamento/despesas/comparativo (painel) ===== */
.graf-fat-seg{margin:10px 0 14px;width:max-content;max-width:100%}
.graf-fat-wrap{position:relative;overflow-x:auto;padding-bottom:2px}
.graf-fat-svg{display:block}
.graf-fat-grid{stroke:var(--line);stroke-width:1}
.graf-fat-base{stroke:#454545;stroke-width:1.5}
.graf-fat-eixo{font-size:11px;fill:var(--txt-2);font-family:var(--font-title)}
.graf-fat-mes{font-size:11px;fill:var(--txt-3);font-family:var(--font)}
.graf-fat-mes-atual{fill:var(--txt);font-weight:700}
.graf-fat-rotulo-atual{font-size:12px;fill:var(--txt);font-weight:700;font-family:var(--font-title)}
.graf-fat-hit{cursor:pointer}
.graf-fat-hit:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.graf-fat-col:hover .graf-fat-hit{fill:rgba(255,255,255,.05)}
.graf-fat-legenda{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap}
.graf-fat-leg-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--txt-2)}
.graf-fat-marcador{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.graf-fat-tooltip{position:absolute;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px;pointer-events:none;z-index:10;min-width:170px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.graf-fat-tooltip b:first-child{display:block;margin-bottom:6px;font-family:var(--font-title);font-size:12.5px}
.graf-fat-tt-linha{display:flex;justify-content:space-between;gap:14px;padding:2px 0}
.graf-fat-tt-linha span{color:var(--txt-2)}
.graf-fat-tt-total{border-top:1px solid var(--line);margin-top:4px;padding-top:5px;font-weight:700}
.graf-fat-toggle{margin-top:12px;font-size:12.5px;color:var(--txt-2);text-decoration:underline;padding:10px 4px;min-height:44px;display:inline-flex;align-items:center}
.graf-fat-toggle:hover{color:var(--teal)}
.graf-fat-tabela-wrap{margin-top:10px;overflow-x:auto}

/* ===== Gráfico de clientes, visão carteira (linha com área) ===== */
.graf-cli-linha{fill:none;stroke:#00A093;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.graf-cli-area{fill:#00A093;opacity:.12;stroke:none}
@media (prefers-reduced-motion: no-preference){
  .graf-cli-linha,.graf-cli-area{transition:d .2s ease}
}

/* ===== Financeiro: filtros recolhidos ===== */
.filtros-bar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.chips-filtro{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--raised);border:1px solid var(--line);color:var(--txt-2);border-radius:99px;padding:5px 6px 5px 12px;font-size:12px;font-weight:600}
.chip button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:99px;color:var(--txt-3)}
.chip button:hover{background:var(--line);color:var(--txt)}
@media(max-width:768px){
  .chip{padding:8px 6px 8px 14px}
  .chip button{width:28px;height:28px}
}
.btn-novo-lanc{margin-left:auto}
@media(max-width:768px){
  .btn-novo-lanc{display:none}
}

/* ===== Financeiro: lista como cartões no celular ===== */
.tabela-desktop{display:block}
.lista-cartoes{display:none}
.dia-grupo{margin-bottom:16px}
.dia-rotulo{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-3);font-weight:600;padding:0 2px 8px}
.cartao-lanc{position:relative;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:4px 10px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--r-sm);padding:13px 12px;margin-bottom:8px;cursor:pointer}
.cartao-lanc.cartao-ok{border-left-color:var(--ok)}
.cartao-lanc.cartao-warn{border-left-color:var(--warn)}
.cartao-lanc.cartao-err{border-left-color:var(--err)}
.cartao-lanc-info{grid-column:1;grid-row:1 / span 2;min-width:0}
.cartao-lanc-desc{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cartao-lanc-sub{font-size:12px;color:var(--txt-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cartao-lanc-valor{grid-column:2;grid-row:1;font-weight:700;font-size:14.5px;white-space:nowrap}
.cartao-lanc .tag{grid-column:2;grid-row:2;justify-self:end;min-height:32px;display:inline-flex;align-items:center}
@media(max-width:768px){
  .cartao-lanc .tag{min-height:44px;padding:0 14px}
}
.cartao-lanc-menu{grid-column:3;grid-row:1 / span 2;color:var(--txt-3);padding:6px;border-radius:7px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.cartao-lanc-menu:hover{background:var(--raised);color:var(--txt)}
.cartao-lanc-acoes{position:absolute;right:8px;top:calc(100% + 4px);background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:30;overflow:hidden;min-width:190px}
.cartao-lanc-acoes button{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;font-size:13px;color:var(--txt-2);text-align:left;min-height:44px}
.cartao-lanc-acoes button:hover{background:var(--line);color:var(--txt)}
@media(max-width:768px){
  .tabela-desktop{display:none}
  .lista-cartoes{display:block}
}

/* ===== Menu de contexto reutilizável ===== */
.menu-ctx{position:fixed;z-index:200;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 12px 32px rgba(0,0,0,.45);overflow:hidden;min-width:200px;padding:4px 0}
.menu-ctx-item{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;font-size:13.5px;color:var(--txt-2);text-align:left;min-height:44px}
.menu-ctx-item svg{flex:none;color:var(--txt-3)}
.menu-ctx-item:hover,.menu-ctx-item:focus-visible{background:var(--line);color:var(--txt);outline:none}
.menu-ctx-item:focus-visible{box-shadow:inset 2px 0 0 var(--teal)}
.menu-ctx-item.perigo{color:var(--err)}
.menu-ctx-item.perigo svg{color:var(--err)}
.menu-ctx-item.perigo:hover,.menu-ctx-item.perigo:focus-visible{background:rgba(229,97,94,.14)}
.menu-ctx-sep{border-top:1px solid var(--line);margin:4px 0}
.menu-ctx-titulo{padding:8px 16px 5px;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--txt-3);font-family:var(--font-title);user-select:none}
.menu-ctx-item.marcado{color:var(--txt);cursor:default;opacity:1}
.menu-ctx-item.marcado span{flex:1}
.menu-ctx-item.marcado svg{color:var(--teal)}
.menu-ctx-item.marcado svg:first-child{fill:var(--teal)}
.menu-ctx-item.marcado:hover{background:transparent}
@media(prefers-reduced-motion:no-preference){
  .menu-ctx{animation:menuCtxIn .12s ease}
}
@keyframes menuCtxIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}

/* ===== Autocomplete reutilizável ===== */
.autocomplete-lista{position:fixed;z-index:200;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 12px 32px rgba(0,0,0,.45);overflow-y:auto;padding:4px 0}
.autocomplete-item{display:flex;flex-direction:column;gap:2px;justify-content:center;width:100%;padding:9px 14px;min-height:44px;cursor:pointer;color:var(--txt)}
.autocomplete-item mark{background:transparent;color:var(--teal);font-weight:700}
.autocomplete-rotulo{font-size:13.5px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.autocomplete-apoio{font-size:11.5px;color:var(--txt-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.autocomplete-item:hover,.autocomplete-item.ativo{background:var(--line)}
.autocomplete-item.ativo .autocomplete-rotulo{color:var(--txt)}
@media(prefers-reduced-motion:no-preference){
  .autocomplete-lista{animation:menuCtxIn .12s ease}
}

/* ===== Financeiro: botão flutuante ===== */
.fab{display:none}
@media(max-width:768px){
  .fab{display:flex;align-items:center;justify-content:center;position:fixed;right:18px;bottom:calc(90px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:99px;background:var(--teal);color:#fff;box-shadow:0 10px 26px rgba(0,140,131,.4);z-index:55;transition:background .15s}
  .fab:hover{background:var(--teal-hover)}
}

/* ===== Financeiro: estado vazio ===== */
.fin-vazio{padding:56px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.fin-vazio-txt{color:var(--txt-2);font-size:14px;max-width:320px}

/* ===== Financeiro: foco de teclado ===== */
.aba:focus-visible,.btn-icone:focus-visible,.chip button:focus-visible,.fab:focus-visible,.cartao-lanc:focus-visible,.cartao-lanc-menu:focus-visible,.term-item-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ===== Tarefas: quadro (kanban) ===== */
.kanban-wrap{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity}
.kanban-col{flex:0 0 280px;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;scroll-snap-align:start;max-height:calc(100vh - 280px);min-height:200px;transition:border-color .15s,background .15s}
.kanban-col-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 12px;flex-shrink:0}
.kanban-col-titulo{font-weight:650;font-size:13px}
.kanban-col-body{flex:1;overflow-y:auto;min-height:60px;padding:2px}
.kanban-col.arrasto-sobre{border-color:var(--teal);background:var(--teal-soft)}
.kanban-col-body-oculta{display:flex;align-items:center}
.kanban-col-oculta-aviso{color:var(--txt-3);font-size:11.5px;padding:14px 8px;text-align:center;border:1px dashed var(--line);border-radius:var(--r-sm);width:100%}
.kanban-card{position:relative;background:var(--raised);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--r-sm);padding:11px 34px 11px 12px;margin-bottom:8px;cursor:grab}
.kanban-card[data-prioridade="alta"]{border-left-color:var(--err)}
.kanban-card[data-prioridade="media"]{border-left-color:var(--warn)}
.kanban-card[data-prioridade="baixa"]{border-left-color:var(--line)}
.kanban-card-titulo{font-weight:600;font-size:13.5px;margin-bottom:7px;word-break:break-word}
.kanban-card-meta{display:flex;flex-wrap:wrap;gap:5px 10px;font-size:11.5px;color:var(--txt-3)}
.kanban-card-prazo-atrasada{color:var(--err);font-weight:600}
.kanban-card-prazo-hoje{color:var(--warn);font-weight:600}
.tar-badge-repete{display:inline-flex;vertical-align:-2px;margin-right:5px;color:var(--teal)}
.tar-badge-pausada{color:var(--warn)}
#tar-venc-aviso{color:var(--warn);margin:-4px 0 10px}
.tar-repeticao-resumo{font-size:12px;color:var(--txt-3);margin-top:6px;min-height:16px}
.tar-repeticao-campos{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tar-repeticao-campos[hidden],.tar-dias-semana[hidden],.grid[hidden]{display:none}
.tar-dias-semana{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tar-dia-chip{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:36px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--raised);cursor:pointer;font-size:12.5px;user-select:none}
.tar-dia-chip input{position:absolute;opacity:0;width:0;height:0}
.tar-dia-chip.ativo{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}
.kanban-card-menu{position:absolute;top:8px;right:6px;color:var(--txt-3);padding:5px;border-radius:7px;min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center}
.kanban-card-menu:hover{background:var(--line);color:var(--txt)}
@media(max-width:768px){
  .kanban-col{flex:0 0 82vw;max-height:none}
  .kanban-card{cursor:pointer}
  .kanban-card-menu{min-width:44px;min-height:44px}
}

/* ===== Tarefas: lista agrupada por prazo ===== */
.tarefas-grupo{margin-bottom:20px}
.tarefas-grupo-titulo{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:650;padding:0 2px 9px;color:var(--txt-3)}
.tarefas-grupo-titulo.grupo-atrasada{color:var(--err)}
.tarefas-grupo-titulo.grupo-hoje{color:var(--warn)}
.tarefas-grupo-titulo.grupo-concluida{color:var(--ok)}
.tar-ocultas-info{font-size:11.5px;color:var(--txt-3);white-space:nowrap}
.tarefa-linha{position:relative;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--r-sm);padding:12px 34px 12px 12px;margin-bottom:8px;cursor:pointer}
.tarefa-linha.linha-atrasada{border-left-color:var(--err)}
.tarefa-linha.linha-hoje{border-left-color:var(--warn)}
.tarefa-linha-info{flex:1;min-width:0}
.tarefa-linha-titulo{font-weight:600;font-size:13.5px}
.tarefa-linha-meta{display:flex;flex-wrap:wrap;gap:5px 10px;font-size:11.5px;color:var(--txt-3);margin-top:4px}
@media(max-width:768px){
  .tarefa-linha{flex-wrap:wrap}
}

/* ===== RH: socios em cartao, faixa de contracheque ===== */
.rh-socio-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.rh-socio-card b{font-size:15px}
.rh-socio-valor{font-family:var(--font-title);font-size:22px;font-weight:700;color:var(--ok);margin-top:6px}
.rh-socio-sub{color:var(--txt-3);font-size:12.5px;margin-top:2px}
.rh-fechada-aviso{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--ok);border-radius:var(--r);padding:14px 16px;margin-bottom:16px}
.rh-fechada-aviso b{color:var(--ok)}
@media(max-width:768px){
  .rh-socio-valor{font-size:19px}
}

/* ===== Recibo de contracheque: documento de escritorio, papel A4, isolado do
   tema escuro por prefixo proprio (recibo-*, escopado a #recibo-overlay).
   Escala tipografica (px): sobretitulo 10/uppercase/tracking .14em; nome do
   socio 27/650; periodo secundario 12.5/400; valor final 46 digitos + 20
   cifra/500; rotulo da cascata 9.5/uppercase/tracking .11em; numero da
   cascata 17/650 Sora tabular; cabecalho de tabela 10.5/uppercase/tracking
   .07em; corpo de tabela 12.5/400; subtotal 12.5/700; total 14/700; nome na
   assinatura 12.5/600; papel/data 11/400; rodape 10.5/400. Espacamento:
   folha com margem A4 64px topo/base, 60px direita, 74px esquerda (56px +
   régua de 3px em teal); blocos principais separados por 40px; cascata com
   padding lateral 16px por etapa; linha de tabela com 10px vertical.
   Cor com parcimonia: teal so na regua, no valor final, no nome do cliente
   agrupador e na linha do total; resto preto/cinza sobre branco. ===== */
#recibo-overlay{position:fixed;inset:0;background:#ececeb;z-index:200;overflow:auto;padding:40px 16px}
#recibo-overlay .recibo-acoes{max-width:700px;margin:0 auto 16px;display:flex;justify-content:flex-end;gap:10px}
#recibo-overlay .recibo-folha{position:relative;max-width:700px;margin:0 auto;background:#ffffff;color:#1A1A1A;padding:64px 60px 64px 74px;font-family:var(--font);box-shadow:0 1px 2px rgba(0,0,0,.06),0 14px 36px rgba(0,0,0,.09);overflow:hidden}
#recibo-overlay .recibo-folha::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#008C83}
#recibo-overlay .recibo-folha::after{content:'N';position:absolute;right:-38px;bottom:-70px;font-family:var(--font-title);font-weight:700;font-size:340px;line-height:1;color:#1A1A1A;opacity:.025;pointer-events:none;user-select:none}
#recibo-overlay .recibo-topo{position:relative;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #e6e6e6;padding-bottom:18px;margin-bottom:40px}
#recibo-overlay .recibo-topo img{height:28px}
#recibo-overlay .recibo-topo-doc{text-align:right}
#recibo-overlay .recibo-titulo{font-family:var(--font-title);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8a8a8a;margin:0 0 5px}
#recibo-overlay .recibo-topo-meta{color:#b3b3b3;font-size:11px;font-variant-numeric:tabular-nums}
#recibo-overlay .recibo-hero{position:relative;padding-bottom:32px;margin-bottom:36px;border-bottom:1px solid #e6e6e6}
#recibo-overlay .recibo-hero-sobre{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9a9a9a;margin-bottom:10px}
#recibo-overlay .recibo-hero-nome{font-family:var(--font-title);font-size:27px;font-weight:650;letter-spacing:-.01em;color:#1A1A1A}
#recibo-overlay .recibo-hero-periodo{margin-top:8px;font-size:12.5px;color:#8a8a8a}
#recibo-overlay .recibo-hero-valor{margin-top:22px;font-family:var(--font-title);font-variant-numeric:tabular-nums;color:#008C83}
#recibo-overlay .recibo-hero-valor .recibo-cifra{font-size:20px;font-weight:500}
#recibo-overlay .recibo-hero-valor .recibo-digitos{font-size:46px;font-weight:700}
/* Cascata da apuração: cada etapa carrega o próprio operador, então a linha
   nunca quebra deixando um sinal órfão no fim nem um número solto embaixo.
   Os passos alinham pela base do número, e a etiqueta fica acima. */
/* Cascata da apuração: a conta inteira precisa caber numa linha só, senão
   perde o sentido de leitura. A escala é apertada de propósito para as cinco
   etapas caberem na largura da folha. Se algum valor for grande demais, cada
   etapa carrega o próprio operador, então a quebra acontece entre contas
   completas, nunca deixando um sinal órfão no fim da linha. */
#recibo-overlay .recibo-cascata{position:relative;display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 0;margin-bottom:36px}
#recibo-overlay .cascata-passo{display:flex;align-items:flex-end;gap:9px}
#recibo-overlay .cascata-passo + .cascata-passo{padding-left:9px}
#recibo-overlay .cascata-item{display:flex;flex-direction:column;gap:5px}
#recibo-overlay .cascata-lbl{font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#9a9a9a;white-space:nowrap}
#recibo-overlay .cascata-num{font-family:var(--font-title);font-size:15px;font-weight:650;color:#1A1A1A;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.1}
#recibo-overlay .cascata-op{font-size:13px;color:#c7c7c7;line-height:1.1;padding-bottom:1px}
#recibo-overlay .cascata-final .cascata-lbl{color:#008C83}
#recibo-overlay .cascata-final .cascata-num{color:#008C83}
#recibo-overlay .recibo-assinatura{position:relative;margin-top:56px;text-align:center}
#recibo-overlay .recibo-assinatura-data{font-size:11.5px;color:#8a8a8a;margin-bottom:56px}
#recibo-overlay .recibo-assinatura-linha{width:260px;border-top:1px solid #999;margin:0 auto 10px}
#recibo-overlay .recibo-assinatura-nome{font-size:12.5px;font-weight:600;color:#1A1A1A}
#recibo-overlay .recibo-assinatura-papel{font-size:11px;color:#9a9a9a;margin-top:2px}
#recibo-overlay .recibo-detalhe{position:relative;margin:0 0 6px}
#recibo-overlay .recibo-detalhe-titulo{font-family:var(--font-title);font-weight:600;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#9a9a9a;margin-bottom:12px}
#recibo-overlay .recibo-detalhe-aviso{position:relative;margin:18px 0;padding:10px 12px;border:1px dashed #ccc;border-radius:6px;color:#8a8a8a;font-size:12px}
#recibo-overlay .recibo-tabela-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
#recibo-overlay .recibo-tabela{width:100%;min-width:420px;border-collapse:collapse;font-size:12.5px}
#recibo-overlay .recibo-tabela th{text-align:left;color:#9a9a9a;font-weight:600;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid #ddd;padding:0 4px 8px}
#recibo-overlay .recibo-tabela td{padding:10px 4px;border-bottom:1px solid #f2f2f2;vertical-align:top;font-variant-numeric:tabular-nums;font-size:12.5px}
#recibo-overlay .recibo-tabela tr.recibo-grupo-cliente td{padding:16px 4px 6px 12px;position:relative;font-weight:650;color:#008C83;border-bottom:none}
#recibo-overlay .recibo-tabela tr.recibo-grupo-cliente td::before{content:'';position:absolute;left:0;top:14px;bottom:6px;width:2px;background:#008C83}
#recibo-overlay .recibo-tabela tr.recibo-subtotal td{font-weight:700;color:#1A1A1A;border-bottom:1px solid #ddd;padding-bottom:10px}
#recibo-overlay .recibo-tabela tfoot td{font-family:var(--font-title);font-weight:700;font-size:14px;color:#008C83;border-top:2px solid #1A1A1A;border-bottom:none;padding-top:12px}
#recibo-overlay .recibo-rodape{position:relative;margin-top:32px;padding-top:16px;border-top:1px solid #f0f0f0;text-align:center;font-size:10.5px;color:#aaa}
@media print{
  @page{size:A4;margin:18mm 16mm}
  /* Só esconde o resto da página quando o recibo está aberto. Sem essa
     condição, esta regra e a do extrato se anulavam e a impressão saía em
     branco, porque cada uma escondia o overlay da outra. */
  body:has(#recibo-overlay)>*:not(#recibo-overlay){display:none!important}
  #recibo-overlay{position:static;background:#fff;padding:0}
  #recibo-overlay .recibo-acoes{display:none!important}
  /* A margem da folha vem do @page, mas a régua lateral ocupa espaço real,
     então o preenchimento à esquerda precisa sobreviver na impressão, senão o
     texto passa por baixo dela e sai cortado. */
  #recibo-overlay .recibo-folha{box-shadow:none;padding:0 0 0 16px;max-width:none;overflow:visible}
  /* Marca d'água fora da impressão: em papel ela vira uma mancha cinza que
     não acrescenta nada e ainda gasta tinta. */
  #recibo-overlay .recibo-folha::after{display:none}
  /* Aperta o vertical para o recibo comum caber em uma folha. */
  #recibo-overlay .recibo-hero{margin-bottom:22px}
  #recibo-overlay .recibo-hero-valor .recibo-digitos{font-size:38px}
  #recibo-overlay .recibo-hero-valor .recibo-cifra{font-size:17px}
  #recibo-overlay .recibo-cascata{margin-bottom:24px}
  #recibo-overlay .recibo-assinatura-data{margin-bottom:38px}
  #recibo-overlay .recibo-rodape{margin-top:26px}
  #recibo-overlay .recibo-folha::before,#recibo-overlay .recibo-hero-valor,#recibo-overlay .cascata-final .cascata-num,#recibo-overlay .recibo-tabela tr.recibo-grupo-cliente td,#recibo-overlay .recibo-tabela tr.recibo-grupo-cliente td::before,#recibo-overlay .recibo-tabela tfoot td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #recibo-overlay .recibo-tabela-wrap{overflow:visible}
  #recibo-overlay .recibo-tabela{font-size:10.5px;min-width:0}
  #recibo-overlay .recibo-tabela thead{display:table-header-group}
  #recibo-overlay .recibo-tabela tfoot{display:table-row-group}
  #recibo-overlay .recibo-tabela tr{break-inside:avoid;page-break-inside:avoid}
  #recibo-overlay .recibo-cascata{break-inside:avoid;page-break-inside:avoid}
  #recibo-overlay .recibo-assinatura{margin-top:44px;break-inside:avoid}
}
@media(max-width:480px){
  #recibo-overlay{padding:14px 8px}
  #recibo-overlay .recibo-folha{padding:32px 20px 32px 30px}
  #recibo-overlay .recibo-topo img{height:24px}
  #recibo-overlay .recibo-titulo{font-size:11px}
  #recibo-overlay .recibo-hero-nome{font-size:21px}
  #recibo-overlay .recibo-hero-valor .recibo-digitos{font-size:32px}
  #recibo-overlay .recibo-hero-valor .recibo-cifra{font-size:16px}
  /* No celular a cascata vira coluna: cinco etapas lado a lado não cabem em
     tela estreita, e quebrar no meio da conta atrapalha mais que empilhar. */
  #recibo-overlay .recibo-cascata{flex-direction:column;align-items:stretch;gap:10px}
  #recibo-overlay .cascata-passo{gap:10px;align-items:baseline}
  #recibo-overlay .cascata-passo + .cascata-passo{padding-left:0}
  #recibo-overlay .cascata-item{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;flex:1}
  #recibo-overlay .cascata-op{width:12px;text-align:center;flex-shrink:0}
}
.kanban-card:focus-visible,.tarefa-linha:focus-visible,.kanban-card-menu:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ---- Extrato ---- */
.check-lista{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto;border:1px solid var(--borda);border-radius:8px;padding:8px 10px;background:var(--bg-elevado)}
.check-lista label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--txt-2)}
.extrato-grupo-dia td{background:var(--bg-elevado);font-weight:700;color:var(--teal);padding:8px 10px}
.extrato-grupo-dia-mob{font-weight:700;color:var(--teal);font-size:13px;margin:14px 0 6px;display:flex;justify-content:space-between}
.extrato-grupo-dia-mob span{color:var(--txt-3);font-weight:400}
#extrato-overlay{position:fixed;inset:0;background:#f2f2f2;z-index:200;overflow:auto;padding:28px 16px}
#extrato-overlay .recibo-acoes{max-width:800px;margin:0 auto 16px;display:flex;justify-content:flex-end;gap:10px}
#extrato-overlay .recibo-folha{max-width:800px;margin:0 auto;background:#ffffff;color:#1A1A1A;border-radius:10px;padding:40px;font-family:var(--font);box-shadow:0 6px 24px rgba(0,0,0,.18)}
@media print{
  /* Mesma condição do recibo: só vale quando o extrato está aberto. Se os
     dois estiverem abertos, o recibo tem prioridade, porque é o que o usuário
     acabou de abrir por cima. */
  body:has(#extrato-overlay):not(:has(#recibo-overlay))>*:not(#extrato-overlay){display:none!important}
  #extrato-overlay{position:static;background:#fff;padding:0}
  #extrato-overlay .recibo-acoes{display:none!important}
  #extrato-overlay .recibo-folha{box-shadow:none;padding:0;max-width:none}
  #extrato-overlay .recibo-tabela tr{break-inside:avoid}
}
@media(max-width:480px){
  #extrato-overlay{padding:14px 8px}
  #extrato-overlay .recibo-folha{padding:20px 16px}
}

/* ---- Cobrança: seleção de lançamentos ---- */
.cobr-lista-wrap{margin-bottom:18px}
.cobr-lista-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.cobr-lista-topo>span:first-child{font-size:12px;color:var(--txt-2);font-weight:600}
.cobr-total-sel{font-size:13px;font-weight:700;color:var(--teal)}
.cobr-atalhos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.btn-sm{padding:7px 12px;font-size:12px;min-height:36px}
.cobr-lista-itens{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--raised)}
.cobr-item{display:flex;align-items:flex-start;gap:10px;padding:12px;border-bottom:1px solid var(--line);cursor:pointer;min-height:44px}
.cobr-item:last-child{border-bottom:none}
.cobr-item:hover{background:var(--card)}
.cobr-item-check{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--teal)}
.cobr-item-corpo{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.cobr-item-topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cobr-item-desc{font-size:13.5px;font-weight:600;color:var(--txt);word-break:break-word}
.cobr-item-valor{font-size:13.5px;font-weight:700;color:var(--txt);white-space:nowrap;font-family:var(--font-title)}
.cobr-item-baixo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cobr-item-venc{font-size:12px;color:var(--txt-3)}
.cobr-item-ultima{font-size:11px;color:var(--txt-3);font-style:italic}
.cobr-sel-vazia{color:var(--warn);font-size:12.5px;margin-top:10px}
.cobr-aviso-editado{background:var(--raised);border:1px solid var(--warn);border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px;color:var(--txt-2);margin:-4px 0 14px;display:flex;flex-direction:column;gap:6px}
.cobr-aviso-editado[hidden]{display:none}
.btn-link{color:var(--teal);font-weight:650;font-size:12.5px;text-decoration:underline;align-self:flex-start;min-height:32px}
@media(max-width:768px){
  .cobr-lista-itens{max-height:38vh}
  .cobr-atalhos{gap:6px}
  .btn-sm{flex:1;justify-content:center}
}

/* ===== Financeiro: bloco de atrasados ===== */
.fin-atraso-bloco{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--card);border:1px solid var(--err);border-radius:var(--r);padding:14px 18px;margin-bottom:18px;cursor:pointer;text-align:left;width:100%}
.fin-atraso-bloco:hover{background:rgba(229,97,94,.08)}
.fin-atraso-nums{display:flex;gap:26px;flex-wrap:wrap}
.fin-atraso-item b{display:block;font-size:17px;font-weight:700;color:var(--err)}
.fin-atraso-item span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-3);font-weight:600}
.fin-dias-atraso{color:var(--err);font-size:11.5px;font-weight:600;white-space:nowrap}
@media(max-width:768px){
  .fin-atraso-bloco{padding:12px 14px}
  .fin-atraso-nums{gap:14px}
}

/* ===== Financeiro: busca, ordenacao, periodo ===== */
.fin-ferramentas{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.fin-busca{flex:1;min-width:180px;position:relative}
.fin-busca input{padding-left:38px}
.fin-busca svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--txt-3);pointer-events:none}
.fin-ord-mobile{display:none}
@media(max-width:768px){
  .fin-ord-mobile{display:block;width:100%}
}
th.th-ord{cursor:pointer;user-select:none;white-space:nowrap}
th.th-ord:hover{color:var(--txt)}
th.th-ord .ord-seta{display:inline-block;margin-left:4px;opacity:.6}
th.th-ord.ativo{color:var(--teal)}
th.th-ord.ativo .ord-seta{opacity:1}

.fin-periodo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.fin-periodo-atalhos{display:flex;gap:6px;flex-wrap:wrap}
.fin-periodo-datas{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fin-periodo-datas input{width:150px}
.fin-periodo-tudo-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media(max-width:768px){
  .fin-periodo-datas input{width:130px}
}

/* ===== Financeiro: filtros abertos por padrao ===== */
.select-compacto{width:auto;min-width:140px}
/* ---- Painel de filtros ----
   Antes eram onze campos soltos na mesma fileira, quatro deles caixinhas de
   rolagem com listas dentro. Agora e uma grade de grupos, cada opcao uma
   pastilha que acende: nada rola dentro de nada e da para ler tudo de uma vez. */
.fin-filtros-painel{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:2px 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:4px 0;margin-bottom:14px}
.fc-grupo{padding:14px 18px;min-width:0}
.fc-grupo.largo{grid-column:span 2}
.fc-grupo+.fc-grupo{box-shadow:-1px 0 0 var(--line)}
.fc-grupo h3{font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--txt-3,var(--muted));margin:0 0 10px;font-family:inherit}
.fc-dica{margin:9px 0 0;font-size:11.5px;color:var(--txt-3,var(--muted))}

.fc-nuvem{display:flex;flex-wrap:wrap;gap:6px}
.fc-nuvem.recolhida{max-height:66px;overflow:hidden;-webkit-mask-image:linear-gradient(var(--bg) 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.fc-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 11px;border:1px solid var(--line);border-radius:99px;background:var(--raised);font-size:12.5px;color:var(--muted);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .13s,color .13s,background .13s}
.fc-chip input{position:absolute;opacity:0;width:0;height:0}
.fc-chip:hover{color:var(--txt);border-color:color-mix(in srgb,var(--teal) 40%,var(--line))}
.fc-chip.on{background:color-mix(in srgb,var(--teal) 16%,transparent);border-color:color-mix(in srgb,var(--teal) 55%,transparent);color:var(--teal);font-weight:600}
.fc-chip:focus-within{outline:2px solid var(--teal);outline-offset:2px}
.fc-cor{width:7px;height:7px;border-radius:50%;flex:none}
.fc-mais{margin-top:8px;font-size:11.5px;color:var(--teal);padding:0;background:none}
.fc-mais:hover{text-decoration:underline}

.fc-faixa{display:flex;align-items:center;gap:8px}
.fc-faixa i{font-style:normal;font-size:11.5px;color:var(--txt-3,var(--muted));flex:none}
.fc-faixa .campo-dinheiro{min-width:0;flex:1}
.fc-campos{display:flex;flex-direction:column;gap:10px}
.fc-campo label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px}
.fc-campo select{padding:8px 11px;font-size:13px}

@media (max-width:900px){
  .fin-filtros-painel{grid-template-columns:1fr;padding:0}
  .fc-grupo.largo{grid-column:auto}
  .fc-grupo+.fc-grupo{box-shadow:0 -1px 0 var(--line)}
  .fc-grupo{padding:14px 16px}
}
@media(max-width:768px){
  .filtros-bar{gap:8px}
  .select-compacto{min-width:0;flex:1 1 130px}

}

/* ===== Financeiro: caixinha de data ao marcar como pago ===== */
.modal.modal-pago{max-width:340px}
.fin-pago-atalhos{display:flex;gap:8px;margin:-4px 0 16px}

/* ===== Financeiro: selecao e acoes em lote ===== */
.chk-lanc{width:20px;height:20px;accent-color:var(--teal);cursor:pointer;min-width:20px}
th.th-chk,td.td-chk{width:40px;text-align:center}
.cartao-lanc{padding-left:42px}
.cartao-lanc-chk{position:absolute;left:10px;top:50%;transform:translateY(-50%);z-index:2}
.linha-selecionada{background:var(--teal-soft)}
.cartao-lanc.selecionado{border-color:var(--teal);background:var(--teal-soft)}

.lote-bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;background:var(--raised);border:1px solid var(--teal);border-radius:var(--r);box-shadow:0 12px 32px rgba(0,0,0,.45);padding:10px 14px;z-index:70;flex-wrap:wrap;max-width:calc(100vw - 24px)}
.lote-bar[hidden]{display:none}
.lote-bar-info{display:flex;flex-direction:column;gap:1px;white-space:nowrap}
.lote-bar-info b{font-size:13.5px}
.lote-bar-info span{font-size:11px;color:var(--txt-3)}
.lote-bar-acoes{display:flex;gap:6px;flex-wrap:wrap}
.lote-bar-acoes .btn{padding:8px 11px;font-size:12px;min-height:38px}
@media(max-width:768px){
  .lote-bar{left:14px;right:14px;transform:none;bottom:calc(74px + env(safe-area-inset-bottom) + 12px);max-width:none;padding:10px 12px}
  .lote-bar-acoes{width:100%;justify-content:flex-start}
  .lote-bar-acoes .btn{flex:1 1 auto;justify-content:center}
}

/* ===== Financeiro: visao do dia ===== */
.dia-secao{margin-bottom:20px}
.dia-secao-titulo{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:10px}
.dia-secao-titulo .tag{font-weight:600}

/* ===== Financeiro: blocos de vencimento do Painel ===== */
.painel-venc-card{display:flex;flex-direction:column}
.painel-venc-totais{display:flex;gap:10px;margin-bottom:6px}
.painel-venc-total{flex:1;display:flex;flex-direction:column;gap:2px;align-items:flex-start;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;cursor:pointer;font:inherit;color:inherit;text-align:left;min-height:44px;transition:border-color .15s}
.painel-venc-total:hover:not(:disabled){border-color:var(--teal)}
.painel-venc-total:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.painel-venc-total:disabled{opacity:.5;cursor:default}
.painel-venc-total span{font-size:11.5px;color:var(--txt-3)}
.painel-venc-total b{font-size:15px;font-variant-numeric:tabular-nums}
.painel-venc-total small{font-size:11px;color:var(--txt-3)}
.painel-venc-item{cursor:pointer;min-height:44px}
.painel-venc-item:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}
@media(max-width:768px){
  .painel-venc-totais{flex-direction:column}
}

/* ===== Tarefas: blocos de prazo do topo ===== */
.tar-venc-item{align-items:flex-start;gap:10px;flex-wrap:wrap}
.tar-venc-item span{font-size:12px;color:var(--txt-3);line-height:1.7}
.tar-venc-titulo{font-weight:600;font-size:13px;color:var(--txt);display:inline-flex;align-items:center;gap:6px}
.tar-venc-acoes{display:flex;gap:2px;flex-shrink:0;margin-left:auto}
@media(max-width:768px){
  .tar-venc-item{flex-direction:column;align-items:stretch}
  .tar-venc-acoes{margin-left:0;justify-content:flex-end}
}
@media(prefers-reduced-motion:no-preference){
  .lote-bar{animation:menuCtxIn .12s ease}
}

/* ---- Recibo de pagamento: link dentro da cobrança e marca discreta ---- */
.cobr-recibo-link{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:16px}
.cobr-recibo-link span{font-size:12.5px;color:var(--txt-2)}
.recibo-mini-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--teal);margin-left:8px;white-space:nowrap}
#recibo-overlay .recibo-quitacao{margin-top:22px;font-size:13px;color:#333;line-height:1.6;text-align:center}
#recibo-overlay .recibo-rodape{margin-top:10px;text-align:center;font-size:11.5px;color:#888}
@media(max-width:768px){
  .cobr-recibo-link{flex-direction:column;align-items:flex-start}
}

/* ---- Cronômetro flutuante (timesheet) ---- */
.cron-flutuante{position:fixed;left:14px;right:14px;bottom:16px;z-index:57;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--teal);border-radius:var(--r);padding:10px 14px;box-shadow:0 10px 26px rgba(0,0,0,.4);max-width:520px;margin:0 auto}
.cron-flutuante-dot{width:9px;height:9px;border-radius:99px;background:var(--ok);flex-shrink:0}
@media(prefers-reduced-motion:no-preference){.cron-flutuante-dot{animation:cronPulso 1.6s ease-in-out infinite}}
@keyframes cronPulso{0%,100%{opacity:1}50%{opacity:.35}}
.cron-flutuante-info{flex:1;min-width:0}
.cron-flutuante-titulo{font-size:12.5px;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cron-flutuante-tempo{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
.cron-flutuante-acoes{display:flex;gap:8px;flex-shrink:0}
@media(max-width:768px){
  .cron-flutuante{left:10px;right:10px;bottom:calc(160px + env(safe-area-inset-bottom));padding:9px 12px}
  .cron-flutuante-titulo{font-size:12px}
  .cron-flutuante-tempo{font-size:15px}
}
.ts-filtros .chips-filtro{margin-top:10px}
.ts-resumo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
@media(max-width:768px){.ts-resumo-grid{grid-template-columns:1fr}}
.ts-apont-linha{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:9px 0}
.ts-apont-linha:last-child{border-bottom:none}
.ts-apont-meta{font-size:12px;color:var(--txt-3)}

.menu-badge{position:absolute;left:26px;top:8px;width:8px;height:8px;border-radius:99px;background:var(--warn)}

/* Aviso central de check-in novo (MUDANÇA 2) */
.checkin-alerta-bg{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.checkin-alerta-card{background:var(--card);border:1px solid var(--teal);border-radius:var(--r);padding:22px;max-width:420px;width:100%;outline:none}
.ca-topo{display:flex;align-items:center;gap:10px;color:var(--teal);margin-bottom:14px}
.ca-topo h3{font-size:16px;color:var(--txt)}
.ca-nome{font-weight:650;font-size:15px;margin-bottom:4px}
.ca-quando{color:var(--txt-2);font-size:12.5px;margin-bottom:8px}
.ca-feito{color:var(--txt-2);font-size:13px;line-height:1.5}
.ca-acoes{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.ca-acoes .btn{width:auto;flex:1;min-width:120px;min-height:44px}
@media(prefers-reduced-motion:no-preference){
  .checkin-alerta-bg{animation:caFadeIn .18s ease}
  .checkin-alerta-card{animation:caPopIn .2s ease}
}
@keyframes caFadeIn{from{opacity:0}to{opacity:1}}
@keyframes caPopIn{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:520px){
  .checkin-alerta-card{padding:18px}
  .ca-acoes .btn{flex:1 1 100%}
}

/* ---------- Contratos (Autentique) ---------- */
.ctr-intro{color:var(--txt-2);font-size:13px;line-height:1.55;margin:0 0 16px}
.ctr-hint{color:var(--txt-3);font-size:12px;margin:6px 0 0}
.ctr-campos{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.ctr-campo{background:var(--raised);border:1px solid var(--line);color:var(--txt-2);border-radius:99px;padding:6px 11px;font-size:11.5px;font-weight:600;font-family:ui-monospace,monospace}
.ctr-campo:hover{border-color:var(--teal);color:var(--teal)}
.ctr-agencia{border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.ctr-agencia-tit{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.ctr-falta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:rgba(232,176,75,.10);border:1px solid var(--warn);border-radius:var(--r-sm);padding:13px 15px;margin-bottom:16px}
.ctr-falta b{display:block;color:var(--warn);font-size:13px;margin-bottom:2px}
.ctr-falta span{color:var(--txt-2);font-size:12.5px}
.ctro-ops{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.ctro-op{text-align:left;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 15px;transition:border-color .15s,background .15s}
.ctro-op:hover{border-color:var(--teal)}
.ctro-op.on{border-color:var(--teal);background:var(--teal-soft)}
.ctro-op b{display:block;font-size:13.5px;margin-bottom:4px}
.ctro-op span{display:block;color:var(--txt-3);font-size:12px;line-height:1.45}
.ctro-arquivo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--raised);border:1px dashed var(--line);border-radius:var(--r-sm);padding:13px 15px;margin-bottom:16px}
.ctro-arquivo input[type=file]{color:var(--txt-2);font-size:12.5px;max-width:100%}
.ctro-arq-nome{color:var(--txt-3);font-size:12px}
.ctrp-topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:16px 0 8px;flex-wrap:wrap}
.ctrp-topo>span:first-child{font-size:12px;font-weight:650;color:var(--txt-2)}
.ctrp-hint{color:var(--txt-3);font-size:11.5px}
.ctrp-box{position:relative;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#0f1413;height:340px}
.ctrp-box iframe{width:100%;height:100%;border:0;display:block}
.ctrp-expandir{position:absolute;top:10px;right:10px;z-index:2;background:rgba(0,0,0,.6);border:1px solid var(--line);color:#fff;border-radius:99px;padding:6px 12px;font-size:11.5px;font-weight:600}
.ctrp-expandir:hover{border-color:var(--teal);color:var(--teal)}
.ctr-chk{display:flex;align-items:center;gap:9px;color:var(--txt-2);font-size:13px;margin:14px 0}
.ctr-chk input{width:16px;height:16px;accent-color:var(--teal)}

/* leitor em tela cheia */
.ctrv-overlay{position:fixed;inset:0;z-index:210;background:#0f1413;display:flex;flex-direction:column}
.ctrv-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;background:var(--card);border-bottom:1px solid var(--line)}
.ctrv-tit{display:flex;align-items:center;gap:10px;font-size:13.5px;min-width:0}
.ctrv-tit b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctrv-dot{width:9px;height:9px;border-radius:50%;background:var(--teal);flex-shrink:0}
.ctrv-acoes{display:flex;align-items:center;gap:8px}
.ctrv-btn{background:var(--raised);border:1px solid var(--line);color:var(--txt-2);border-radius:var(--r-sm);padding:8px 13px;font-size:12.5px;font-weight:600;min-height:38px}
.ctrv-btn:hover{border-color:var(--teal);color:var(--teal)}
.ctrv-zoom{color:var(--txt-3);font-size:12px;min-width:44px;text-align:center}
.ctrv-palco{flex:1;overflow:auto}
.ctrv-palco iframe{width:100%;height:100%;border:0;display:block}

/* cartão da aba Contrato */
.ctr-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ctr-card-top b{font-size:14.5px}
.ctr-card-sub{color:var(--txt-3);font-size:12.5px;margin:6px 0 0}
.ctr-sigs{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.ctr-sig{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px}
.ctr-sig b{display:block;font-size:13px}
.ctr-sig>div>span{color:var(--txt-3);font-size:12px}
.ctr-sig-dir{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ctr-sig-est{font-size:12px;color:var(--txt-3);font-weight:600}
.ctr-sig-est.ok{color:var(--ok)}
.ctr-sig-est.viu{color:var(--warn)}
.ctr-sig-est.rec{color:var(--err)}
.btn-mini{padding:6px 11px;font-size:11.5px}
.ctr-card-acoes{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
@media(max-width:768px){
  .ctro-ops{grid-template-columns:1fr}
  .ctrp-box{height:260px}
  .ctr-card-acoes .btn{flex:1 1 auto;justify-content:center}
  .ctrv-btn{padding:8px 10px}
}

/* ---------- Contas e Cartões ---------- */
.fin-faixa{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:18px}
.faixa-item{background:var(--card);padding:14px 16px;display:flex;flex-direction:column;gap:5px}
.faixa-item span{color:var(--txt-3);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.faixa-item b{font-size:19px;font-family:var(--font-title);font-variant-numeric:tabular-nums}
.faixa-item b.neg{color:var(--err)}

.conta-card,.cartao-card{display:flex;flex-direction:column;gap:0;position:relative;overflow:hidden}
.conta-card{border-left:3px solid var(--cor-conta,var(--teal))}
.conta-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.conta-top b{display:flex;align-items:center;gap:9px;font-size:14.5px}
.conta-padrao{display:inline-flex;align-items:center;gap:4px;background:var(--teal-soft);color:var(--teal)}
.conta-saldo{font-size:27px;font-weight:700;font-family:var(--font-title);font-variant-numeric:tabular-nums;color:var(--ok);line-height:1.1}
.conta-saldo.neg{color:var(--err)}
.conta-sub{color:var(--txt-3);font-size:12px;margin-top:4px}
.conta-barra{display:flex;height:6px;border-radius:99px;overflow:hidden;background:var(--raised);margin:14px 0 12px}
.cb-e{background:var(--ok)}
.cb-s{background:var(--err)}
.cb-neutro{flex:1;background:var(--line)}
.conta-linhas{display:flex;flex-direction:column;gap:7px}
.conta-linhas>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px}
.conta-linhas span{color:var(--txt-3)}
.conta-linhas b{font-variant-numeric:tabular-nums}
.conta-previsto{border-top:1px solid var(--line);padding-top:9px;margin-top:3px}
.conta-previsto span{color:var(--txt-2);font-weight:550}
.conta-previsto b.neg{color:var(--err)}
.conta-acoes{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:16px}

.cartao-plastico{border-radius:12px;padding:16px 18px 15px;color:#fff;display:flex;flex-direction:column;gap:6px;margin-bottom:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.35);position:relative;overflow:hidden}
.cartao-plastico::after{content:'';position:absolute;right:-40px;top:-60px;width:180px;height:180px;border-radius:50%;
  background:rgba(255,255,255,.08)}
.cartao-plastico b{font-size:15px;position:relative;z-index:1}
.cartao-chip{width:30px;height:22px;border-radius:5px;background:linear-gradient(135deg,#f0d9a0,#c9a961);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);position:relative;z-index:1}
.cartao-venc{font-size:11px;opacity:.8;position:relative;z-index:1}
.cartao-fatura{font-size:27px;font-weight:700;font-family:var(--font-title);font-variant-numeric:tabular-nums;line-height:1.1}
.cartao-limite{margin-top:14px}
.cartao-limite-txt{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:7px;font-size:12px}
.cartao-limite-txt span{color:var(--txt-3)}
.cartao-limite-txt b{font-variant-numeric:tabular-nums}

/* ---- Cartao com fatura vencida ou vencendo ----
   Vencida: borda, valor e selo em vermelho, e o selo fica em cima do
   plastico, que e onde o olho bate primeiro. Vencendo hoje ou em ate 3
   dias: o mesmo, em ambar. */
.cartao-plastico{position:relative}
.cartao-selo{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.02em;backdrop-filter:blur(6px);max-width:calc(100% - 64px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cartao-selo svg{flex:none}
.cartao-selo.vencida{background:var(--err);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--err) 45%,transparent)}
.cartao-selo.hoje,.cartao-selo.perto{background:var(--warn);color:#1A1A1A}
.cartao-card.prazo-vencida{border-color:color-mix(in srgb,var(--err) 65%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--err) 35%,transparent)}
.cartao-card.prazo-vencida .cartao-fatura{color:var(--err)}
.cartao-card.prazo-vencida .conta-sub{color:var(--err)}
.cartao-card.prazo-hoje,.cartao-card.prazo-perto{border-color:color-mix(in srgb,var(--warn) 55%,var(--line))}
@media (prefers-reduced-motion:no-preference){
  .cartao-selo.vencida{animation:selo-pulso 2.4s ease-in-out infinite}
  @keyframes selo-pulso{0%,100%{box-shadow:0 4px 14px color-mix(in srgb,var(--err) 45%,transparent)}50%{box-shadow:0 4px 22px color-mix(in srgb,var(--err) 75%,transparent)}}
}

/* ---- Fatura do cartao ----
   O total e a manchete, com o estado da fatura ao lado (aberta, fechada,
   paga) e o limite embaixo. As compras vem agrupadas por dia, como no
   extrato do banco, e cada uma tem as proprias acoes. */
.fat-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;margin-bottom:14px}
.fat-mes{text-align:center}
.fat-mes b{display:block;font-size:14px}
.fat-mes span{color:var(--txt-3);font-size:11.5px}

.fat-hero{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:16px}
.fat-hero.e-fechada{border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
.fat-hero.e-paga{border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.fat-hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fat-hero-top span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fat-estado{font-style:normal;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;padding:2px 9px;color:var(--muted)}
.fat-hero.e-aberta .fat-estado{border-color:color-mix(in srgb,var(--teal) 45%,transparent);color:var(--teal)}
.fat-hero.e-fechada .fat-estado{border-color:color-mix(in srgb,var(--warn) 50%,transparent);color:var(--warn)}
.fat-hero.e-paga .fat-estado{border-color:color-mix(in srgb,var(--ok) 45%,transparent);color:var(--ok)}
.fat-hero>b{display:block;font-family:var(--font-title);font-size:30px;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:4px}
.fat-hero-pe{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px;font-size:12px;color:var(--txt-3,var(--muted))}
.fat-hero-pe .venceu{color:var(--err)}
.fat-limite{margin-top:12px}
.fat-barra{height:5px;border-radius:99px;background:var(--raised);overflow:hidden}
.fat-barra i{display:block;height:100%;background:var(--teal);border-radius:99px}
.fat-barra.estourou i{background:var(--err)}
.fat-estouro{color:var(--err);font-weight:600}
.fat-limite span{display:block;margin-top:5px;font-size:11px;color:var(--txt-3,var(--muted))}

.fat-lista{display:flex;flex-direction:column;gap:14px;max-height:46vh;overflow:auto;padding-right:2px}
.fat-dia-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 4px 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.fat-dia-cab span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fat-dia-cab b{font-size:12px;font-variant-numeric:tabular-nums;color:var(--txt-3,var(--muted))}
.fat-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;cursor:pointer;transition:background .12s}
.fat-item:hover{background:var(--raised)}
.fat-item:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.fat-desc{flex:1;min-width:0}
.fat-desc b{display:block;font-size:13.5px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fat-desc span{font-size:11.5px;color:var(--txt-3,var(--muted))}
.fat-valor{font-family:var(--font-title);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fat-item.quitado .fat-desc b,.fat-item.quitado .fat-valor{opacity:.6}
.fat-pago{color:var(--ok);font-size:12px}
/* Coluna de valor com acao ao lado (usada na compra parcelada). */
.fat-valor-col{display:flex;align-items:center;gap:8px;flex-shrink:0}
.fat-valor-col b{font-family:var(--font-title);font-variant-numeric:tabular-nums}
/* As acoes so aparecem no item sob o cursor: com dez compras na tela, vinte
   botoes competiriam com os valores. No toque ficam sempre visiveis. */
.fat-acoes{display:flex;gap:2px;opacity:0;transition:opacity .12s}
.fat-item:hover .fat-acoes,.fat-item:focus-within .fat-acoes{opacity:1}
.fat-acoes .btn-icone.perigo:hover{color:var(--err)}
@media (hover:none){.fat-acoes{opacity:1}}
@media (max-width:640px){
  .fat-lista{max-height:none}
  .fat-hero>b{font-size:25px}
}
}
/* campo travado: o valor vem de outra regra (ex.: vencimento da fatura do cartão) */
.input-travado{background:var(--card);color:var(--txt-2);cursor:not-allowed;border-style:dashed}

/* ---------- Links de pagamento (HyperCash) ---------- */
.pg-intro{color:var(--txt-2);font-size:13px;line-height:1.55;margin:0 0 16px}
.pg-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-bottom:18px}
.pg-resumo>div{background:var(--raised);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.pg-resumo span{color:var(--txt-3);font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.pg-resumo b{font-size:16px;font-family:var(--font-title);font-variant-numeric:tabular-nums}
.pg-metodos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.pg-metodo{text-align:left;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 13px;transition:border-color .15s,background .15s}
.pg-metodo:hover{border-color:var(--teal)}
.pg-metodo.on{border-color:var(--teal);background:var(--teal-soft)}
.pg-metodo b{display:block;font-size:13px;margin-bottom:3px}
.pg-metodo span{display:block;color:var(--txt-3);font-size:11.5px;line-height:1.4}
.pg-dica{color:var(--txt-2);font-size:12.5px;line-height:1.5;background:var(--raised);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:11px 13px;margin:0 0 4px}
.pg-pagador{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.pg-pagador-t{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.pg-pagador-t span{color:var(--txt-3);font-weight:600;letter-spacing:0;text-transform:none;font-size:11.5px;margin-left:6px}
.pg-chk{display:flex;align-items:center;gap:9px;color:var(--txt-2);font-size:12.5px;margin-top:4px}
.pg-chk input{width:16px;height:16px;accent-color:var(--teal)}
.pg-ok{background:var(--teal-soft);border:1px solid rgba(0,140,131,.4);border-radius:var(--r-sm);padding:16px}
.pg-ok-t{font-weight:650;font-size:14px;margin-bottom:10px}
.pg-ok-link{font-family:ui-monospace,monospace;font-size:12px;color:var(--txt-2);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;word-break:break-all;margin-bottom:12px}
.pg-ok-acoes{display:flex;gap:9px;flex-wrap:wrap}
.pg-ok-nota{color:var(--txt-3);font-size:12px;margin:12px 0 0;line-height:1.5}
.pg-taxas{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.pg-taxas .field{margin-bottom:0}
@media(max-width:768px){
  .pg-metodos{grid-template-columns:1fr}
  .pg-taxas{grid-template-columns:repeat(3,1fr)}
  .pg-ok-acoes .btn{flex:1 1 auto;justify-content:center}
}
.pg-alerta{border-color:var(--ok)}
.pg-alerta .ca-topo{color:var(--ok)}
.pg-alerta-valor{font-size:30px;font-weight:700;font-family:var(--font-title);font-variant-numeric:tabular-nums;
  color:var(--ok);line-height:1.1;margin-bottom:8px}

/* ---------- MCI (Mapa do Cliente Ideal) ---------- */
.mci-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.mci-top b{font-size:14.5px}
.mci-sub{color:var(--txt-3);font-size:12.5px;margin:0;line-height:1.55}
.mci-barra{height:6px;border-radius:99px;background:var(--raised);overflow:hidden;margin-top:14px}
.mci-barra div{height:100%;background:linear-gradient(90deg,var(--teal),var(--teal-hover))}
.mci-acoes{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.mci-resp{display:flex;flex-direction:column;gap:20px;max-height:60vh;overflow:auto;padding-right:4px}
.mci-resp-sec{display:flex;flex-direction:column;gap:12px}
.mci-resp-tit{font-family:var(--font-title);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-left:3px solid var(--teal);padding-left:10px}
.mci-resp-item span{display:block;color:var(--txt-3);font-size:12px;margin-bottom:3px}
.mci-resp-item p{margin:0;font-size:13.5px;line-height:1.6;background:var(--raised);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:11px 13px}
@media(max-width:768px){
  .mci-acoes .btn{flex:1 1 auto;justify-content:center}
  .mci-resp{max-height:none}
}
.mci-pasta{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--teal-soft);border:1px solid rgba(0,140,131,.4);color:var(--teal);font-size:13.5px;font-weight:600}
.mci-pasta:hover{background:rgba(0,140,131,.2)}
.mci-pasta span{flex:1}
.mci-link{display:inline-flex;align-items:center;gap:8px;color:var(--teal);word-break:break-all}
.mci-link:hover{text-decoration:underline}

/* ---------- Compras parceladas ---------- */
.parc-card{cursor:pointer;transition:border-color .15s}
.parc-card:hover{border-color:var(--teal)}
.parc-card.quitada{opacity:.72}
.parc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.parc-top b{display:block;font-size:14.5px;margin-bottom:3px}
.parc-top>div>span{color:var(--txt-3);font-size:12px}
.parc-valores{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.parc-valores span{display:block;color:var(--txt-3);font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:3px}
.parc-valores b{font-size:15px;font-family:var(--font-title);font-variant-numeric:tabular-nums}
.parc-rod{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;
  color:var(--txt-3);font-size:12px}
@media(max-width:768px){.parc-valores{grid-template-columns:1fr 1fr}}

/* ---------- Prazo editável direto no cartão ---------- */
.prazo-btn{background:none;border:0;padding:2px 6px;margin:-2px -2px -2px -4px;border-radius:7px;color:inherit;
  font-family:inherit;font-size:inherit;font-weight:inherit;cursor:pointer;border:1px dashed transparent;transition:border-color .15s,background .15s}
.prazo-btn:hover{border-color:var(--line);background:var(--raised)}
.prazo-btn.sem-prazo{color:var(--txt-3);font-style:italic}
.prazo-pop{position:fixed;z-index:130;width:246px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:14px;box-shadow:0 18px 48px rgba(0,0,0,.5)}
.prazo-pop-tit{font-size:12.5px;font-weight:650;margin-bottom:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prazo-atalhos{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.prazo-atalhos button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;
  color:var(--txt);font-family:inherit;font-size:13px;font-weight:550;cursor:pointer;transition:border-color .15s,background .15s}
.prazo-atalhos button:hover{border-color:var(--teal);color:var(--teal)}
.prazo-atalhos button.on{border-color:var(--teal);background:var(--teal-soft);color:var(--teal)}
.prazo-atalhos button span{color:var(--txt-3);font-size:11.5px;font-variant-numeric:tabular-nums}
.prazo-pop-lbl{display:block;color:var(--txt-3);font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:6px}
.prazo-pop .input{padding:9px 11px;font-size:13.5px}
.prazo-limpar{width:100%;margin-top:10px;background:none;border:0;color:var(--err);font-family:inherit;
  font-size:12.5px;font-weight:600;cursor:pointer;padding:6px}
.prazo-limpar:hover{text-decoration:underline}
@media(max-width:768px){.prazo-pop{width:min(280px,calc(100vw - 24px))}}
.cli-btn{background:none;border:1px dashed transparent;padding:2px 6px;margin:-2px -2px -2px -4px;border-radius:7px;
  color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.cli-btn:hover{border-color:var(--line);background:var(--raised)}
.cli-btn.sem-cliente{color:var(--txt-3);font-style:italic}
.cli-pop .cli-busca{padding:8px 11px;font-size:13px;margin-bottom:10px}
.cli-lista{max-height:220px;overflow:auto}
.cli-vazio{margin:0;color:var(--txt-3);font-size:12.5px;text-align:center;padding:8px}
.taxa-badge{display:block;color:var(--txt-3);font-size:11px;font-weight:500;margin-top:2px;white-space:nowrap}
.taxa-dica{color:var(--txt-3);font-size:12.5px;margin:6px 0 0;line-height:1.5}
.taxa-dica.com-taxa{color:var(--teal)}

/* ---------- Comissão de closer ---------- */
.com-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.com-top b{display:block;font-size:14.5px}
.com-top span{color:var(--txt-3);font-size:12px}
.com-total{font-size:27px;font-weight:700;font-family:var(--font-title);font-variant-numeric:tabular-nums;color:var(--teal);line-height:1.1}
.com-linhas{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.com-linhas>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px}
.com-linhas span{color:var(--txt-3)}
.com-linhas b{font-variant-numeric:tabular-nums}
.com-detalhe{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line);padding-top:12px}
.com-item{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--raised);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.com-item b{font-size:13px;font-variant-numeric:tabular-nums}
.com-item span{display:block;color:var(--txt-3);font-size:11.5px}
.com-acoes{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
@media(max-width:768px){.com-acoes .btn{flex:1 1 auto;justify-content:center}}
#recibo-overlay .recibo-nota{position:relative;margin:0 0 18px;color:#8a8a8a;font-size:11.5px;line-height:1.55}
#recibo-overlay .recibo-detalhe+.recibo-detalhe{margin-top:18px}
.com-aviso{background:rgba(232,176,75,.10);border:1px solid rgba(232,176,75,.45);border-radius:var(--r-sm);
  padding:11px 13px;color:#e8c98b;font-size:12.5px;line-height:1.5;margin-bottom:12px}

/* Dica curta abaixo de um campo, e a opcao de casar a entrada com a assinatura */
.field .dica{display:block;margin-top:5px;font-size:11.5px;color:var(--txt-3);line-height:1.45}
.field label.check{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:12.5px;
  color:var(--txt-2);font-weight:400;cursor:pointer}
.field label.check input{width:15px;height:15px;accent-color:var(--teal);cursor:pointer}
.field input[readonly]{opacity:.7;cursor:not-allowed}

/* Previa do contracheque: mesma folha, com a tarja que impede confundir com o
   documento fechado (inclusive impressa, se alguem imprimir a previa) */
#recibo-overlay .recibo-selo-previa{display:inline-block;margin-top:7px;
  background:#FBF0DA;color:#8a6a1f;border:1px solid #E8D6A8;border-radius:999px;
  font-family:var(--font-title);font-weight:700;font-size:10px;letter-spacing:.18em;padding:4px 12px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
#recibo-overlay .recibo-nota-previa{margin-top:26px;padding:12px 14px;border-radius:8px;
  background:#FBF3E2;border:1px solid #E8D6A8;color:#6b5626}

/* Painel de filtros de tarefas, ancorado no botao e aplicado na hora */
.tar-busca{display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:0 11px;min-height:40px;color:var(--txt-3)}
.tar-busca input{background:none;border:0;outline:none;color:var(--txt);font-size:13px;
  font-family:var(--font);width:170px;min-height:38px}
.tar-busca input::placeholder{color:var(--txt-3)}
.tar-busca:focus-within{border-color:var(--teal)}
.chip-limpar{color:var(--txt-3);font-size:12px;padding:4px 8px;border-radius:7px;text-decoration:underline}
.chip-limpar:hover{color:var(--txt);background:var(--raised)}

.tar-pop{position:fixed;z-index:180;width:376px;max-width:calc(100vw - 16px);background:var(--raised);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 16px 44px rgba(0,0,0,.5);
  display:flex;flex-direction:column;overflow:hidden}
.tar-pop-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--line)}
.tar-pop-head>span{display:flex;align-items:center;gap:8px;font-family:var(--font-title);font-weight:650;font-size:13.5px}
.tar-pop-limpar{color:var(--txt-3);font-size:12px;padding:5px 9px;border-radius:7px}
.tar-pop-limpar:hover{color:var(--err);background:rgba(229,97,94,.12)}
.tar-pop-corpo{overflow-y:auto;padding:4px 0 8px}
.tar-pop-sec{padding:12px 16px;border-bottom:1px solid var(--line)}
.tar-pop-sec:last-child{border-bottom:0}
.tar-pop-lbl{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--txt-3);font-family:var(--font-title);margin-bottom:9px}
.tar-pop-lbl span{font-weight:500;letter-spacing:0;text-transform:none;font-size:10.5px;opacity:.75;margin-left:6px}
.tar-pop-chips{display:flex;flex-wrap:wrap;gap:6px}
.tar-pop-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--txt-2);font-size:12.5px;min-height:34px}
.tar-pop-chip:hover{border-color:var(--txt-3);color:var(--txt)}
.tar-pop-chip.ativo{background:var(--teal-soft);border-color:var(--teal);color:var(--txt)}
.tar-pop-chip.perigo.ativo{background:rgba(229,97,94,.16);border-color:var(--err);color:var(--err)}
.tar-pop-datas{display:flex;gap:8px;margin-top:10px}
.tar-pop-datas label{flex:1;display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--txt-3);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 10px;min-height:38px}
.tar-pop-datas input{flex:1;background:none;border:0;outline:none;color:var(--txt);font-size:12.5px;
  font-family:var(--font);min-height:36px}
@media (max-width:640px){
  .tar-pop{left:8px !important;right:8px;width:auto}
  .tar-busca input{width:100%}
  .tar-busca{flex:1;min-width:150px}
}
/* Na lista, a data que vale (no cartao, o vencimento da fatura) com a data da
   compra logo abaixo, em segundo plano */
.fin-data-compra{font-size:10.5px;color:var(--txt-3);margin-top:2px;white-space:nowrap}
/* Recebimento a recebimento dentro do bloco do cliente, no recibo do closer */
#recibo-overlay .recibo-tabela tr.recibo-item td{color:#5a5a5a;padding-left:12px;border-bottom:1px dotted #e6e6e6}
#recibo-overlay .recibo-item-data{display:block;font-size:10px;color:#9a9a9a;margin-top:2px}
#recibo-overlay .recibo-tabela .recibo-desconto{color:#b0554f;white-space:nowrap}

/* Lancamento: aliquota do imposto e o caminho do dinheiro ate o liquido */
.lanc-imposto-linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lanc-imposto-pct{color:var(--txt-3);font-size:13px;margin-left:-4px}
.lanc-imposto-dica{color:var(--txt-3);font-size:11.5px}
.lanc-liquido{margin-top:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px}
.liq-linha{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--txt-2);padding:3px 0}
.liq-linha b{font-variant-numeric:tabular-nums}
.liq-desconto{color:var(--err)}
.liq-final{border-top:1px solid var(--line);margin-top:6px;padding-top:8px;color:var(--txt);font-weight:650}
.liq-final b{color:var(--ok);font-size:14px}

/* Recibo do closer: resumo em dois blocos, de onde sai a base e o que ele
   ganha sobre ela. A cascata horizontal nao comporta os dois caminhos. */
#recibo-overlay .recibo-resumo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 34px}
#recibo-overlay .rr-bloco{border:1px solid #e6e6e6;border-radius:8px;padding:14px 16px;background:#fbfbfb;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
#recibo-overlay .rr-bloco-tit{font-family:var(--font-title);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#9a9a9a;margin-bottom:10px}
#recibo-overlay .rr-linha{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:5px 0;
  font-size:12.5px;color:#4a4a4a}
#recibo-overlay .rr-linha b{font-family:var(--font-title);font-weight:650;color:#1A1A1A;
  font-variant-numeric:tabular-nums;white-space:nowrap}
#recibo-overlay .rr-menos,#recibo-overlay .rr-menos b{color:#b0554f}
#recibo-overlay .rr-parcial,#recibo-overlay .rr-total{border-top:1px solid #e0e0e0;margin-top:6px;padding-top:9px}
#recibo-overlay .rr-parcial b,#recibo-overlay .rr-total b{font-size:15px}
#recibo-overlay .rr-total{border-top:2px solid #1A1A1A}
#recibo-overlay .rr-total span{font-weight:650;color:#1A1A1A}
#recibo-overlay .rr-total b{color:#008C83;font-size:17px}

/* Tabela: colunas com largura propria, numeros que nao quebram linha */
/* Seis colunas em folha A4: largura fixa por coluna, para o cliente ficar
   legivel e os numeros nunca quebrarem no meio. */
#recibo-overlay .recibo-tabela-closer{table-layout:fixed;min-width:0;font-size:11.5px}
#recibo-overlay .recibo-tabela-closer td{font-size:11.5px;padding:9px 5px}
#recibo-overlay .recibo-tabela-closer th{padding:0 5px 8px}
#recibo-overlay .recibo-tabela-closer th:nth-child(1){width:30%}
#recibo-overlay .recibo-tabela-closer th:nth-child(2){width:18%}
#recibo-overlay .recibo-tabela-closer th:nth-child(3){width:15%}
#recibo-overlay .recibo-tabela-closer th:nth-child(4){width:16%}
#recibo-overlay .recibo-tabela-closer th:nth-child(5){width:7%}
#recibo-overlay .recibo-tabela-closer th:nth-child(6){width:14%}
#recibo-overlay .recibo-tabela-closer td:not(:first-child){white-space:nowrap}
#recibo-overlay .recibo-tabela-closer tfoot td{font-size:13px}
@media (max-width:760px){
  #recibo-overlay .recibo-resumo{grid-template-columns:1fr;gap:10px}
}
.lote-bar-info i{font-style:normal;opacity:.62;font-size:11px;margin-left:3px}
/* Alcance da alteracao de valor numa compra parcelada */
.parc-escopo{display:flex;flex-direction:column;gap:4px}
.parc-escopo label.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--txt-2);cursor:pointer;min-height:34px}
.parc-escopo input{width:15px;height:15px;accent-color:var(--teal);cursor:pointer}

/* ---------- MCI em papel ---------- */
/* Reaproveita a folha clara do recibo (#recibo-overlay), com a diagramacao
   propria de um documento longo: capa, sumario e secoes numeradas. */
#recibo-overlay.mci-doc .recibo-folha{max-width:760px}
.mcid-capa{margin:34px 0 30px}
.mcid-sobre{font-family:var(--font-title);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#9a9a9a;margin-bottom:8px}
.mcid-nome{font-family:var(--font-title);font-size:36px;font-weight:700;color:#1A1A1A;
  letter-spacing:-.02em;line-height:1.1;margin:0 0 14px}
.mcid-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;color:#8a8a8a}
.mcid-meta b{color:#008C83;font-family:var(--font-title);font-size:13px}

.mcid-sumario{border:1px solid #e6e6e6;border-radius:8px;padding:16px 18px;margin-bottom:40px;background:#fbfbfb;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid}
.mcid-sumario-tit{font-family:var(--font-title);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#9a9a9a;margin-bottom:10px}
.mcid-sumario ol{margin:0;padding:0;list-style:none;counter-reset:mcid}
.mcid-sumario li{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:12.5px;color:#4a4a4a}
.mcid-sumario li i{margin-left:auto;font-style:normal;font-size:11px;color:#9a9a9a;font-variant-numeric:tabular-nums}
.mcid-bolinha{width:8px;height:8px;border-radius:50%;flex:none;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}

.mcid-sec{margin-bottom:34px;break-inside:auto}
.mcid-sec-cab{display:flex;gap:14px;align-items:flex-start;padding-bottom:12px;margin-bottom:16px;
  border-bottom:2px solid var(--sec-cor);-webkit-print-color-adjust:exact;print-color-adjust:exact;
  break-after:avoid;page-break-after:avoid}
.mcid-sec-num{font-family:var(--font-title);font-size:26px;font-weight:700;line-height:1;color:var(--sec-cor);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.mcid-sec-cab h2{font-family:var(--font-title);font-size:17px;font-weight:650;color:#1A1A1A;margin:0 0 3px;letter-spacing:-.01em}
.mcid-sec-cab p{margin:0;font-size:11.5px;color:#9a9a9a;line-height:1.45}
.mcid-item{padding:0 0 15px;margin-bottom:15px;border-bottom:1px dotted #e8e8e8;break-inside:avoid;page-break-inside:avoid}
.mcid-item:last-child{border-bottom:none;margin-bottom:0}
.mcid-perg{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9a9a9a;margin-bottom:6px}
.mcid-resp{font-size:13px;color:#1A1A1A;line-height:1.65;white-space:normal}
.mcid-resp a{color:#008C83;word-break:break-all}
@media print{
  #recibo-overlay.mci-doc .recibo-folha{max-width:none}
  .mcid-nome{font-size:30px}
  .mcid-capa{margin:24px 0}
  .mcid-sumario{margin-bottom:30px}
  .mcid-sec{margin-bottom:26px}
  .mcid-sec-num,.mcid-sec-cab,.mcid-bolinha,.mcid-meta b{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.field .dica.com-taxa{color:var(--warn)}
.emp-contas{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--txt-3);font-size:12.5px;margin-bottom:12px}
.emp-contas span{display:inline-flex;align-items:center;gap:6px}
/* Abatimento na tabela de parcelas: e uma linha paga como outra qualquer,
   com um fio lateral que lembra que ele veio de fora do plano */
.emp-linha-extra td:first-child{box-shadow:inset 3px 0 0 var(--teal)}
.emp-linha-extra td{background:rgba(0,140,131,.05)}
/* Select com botao de criar ao lado, e o painel que abre embaixo */
.campo-com-botao{display:flex;gap:8px;align-items:center}
.campo-com-botao .input{flex:1;min-width:0}
.campo-com-botao .btn{min-width:44px;min-height:44px;padding:0;justify-content:center}
.cat-painel{background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:10px}
.cat-painel-acoes{display:flex;gap:8px;justify-content:flex-end}
.cof-movs{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.cof-movs .liq-linha{font-size:12px}

/* Tela de banco indisponivel: o app abriu, mas nao tem dados para mostrar */
.sem-banco{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.sem-banco-cartao{max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px;text-align:center}
.sem-banco-cartao h1{font-size:20px;margin-bottom:12px}
.sem-banco-cartao p{color:var(--txt-2);font-size:13.5px;line-height:1.6;margin:0 0 10px}
.sem-banco-hora{color:var(--txt-3) !important;font-size:12px !important}
.sem-banco-cartao .btn{margin-top:8px}

/* ---------- Campo de dinheiro ---------- */
/* O R$ fica fixo dentro do campo, em cinza, e o numero em fonte tabular, para
   os digitos nao dancarem enquanto se digita. */
.campo-dinheiro{position:relative;display:flex;align-items:center}
.campo-dinheiro>span{position:absolute;left:13px;color:var(--txt-3);font-size:12.5px;
  font-weight:600;pointer-events:none;letter-spacing:.02em}
.campo-dinheiro>input{flex:1;width:100%;padding-left:38px;text-align:right;padding-right:14px;
  font-variant-numeric:tabular-nums;font-family:var(--font-title);font-size:15px;font-weight:650;
  letter-spacing:-.01em}
.campo-dinheiro>input::placeholder{font-weight:400;color:var(--txt-3);letter-spacing:0}
.campo-dinheiro:focus-within>span{color:var(--teal)}
.campo-dinheiro>input:disabled,.campo-dinheiro>input[readonly]{opacity:.7}

/* ---------- Modal de lançamento: o valor é a manchete ---------- */
/* Nove campos com o mesmo peso não dizem por onde começar. Aqui o valor e o
   sinal (entra/sai) ocupam o topo em tamanho de manchete, e o resto do
   formulário fica deliberadamente quieto embaixo. */
.lanc-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--raised) 0%,var(--card) 100%);
  border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:18px}
.lanc-tipo{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px}
.lanc-tipo-op{padding:7px 15px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--txt-3);
  min-height:34px;transition:color .12s ease,background .12s ease}
.lanc-tipo-op:hover{color:var(--txt-2)}
.lanc-tipo-op.ativo{background:var(--raised);color:var(--txt)}
.lanc-tipo-op[data-tipo="receita"].ativo{color:var(--ok)}
.lanc-tipo-op[data-tipo="despesa"].ativo{color:var(--err)}
.lanc-tipo-op:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

.lanc-hero-valor{flex:1;min-width:190px}
/* O cifrao encosta no numero: "R$ 87,03" e uma coisa so, e nao um simbolo
   solto de um lado e o valor do outro. */
.lanc-hero-valor>span{left:0;font-size:15px;top:50%;transform:translateY(-40%)}
.lanc-hero-valor>input{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:4px 0 6px 30px;font-size:30px;font-weight:700;color:var(--ok);height:auto;min-height:0;
  letter-spacing:-.02em;text-align:left;transition:border-color .12s ease}
.lanc-hero-valor>input:focus{outline:none;border-bottom-color:var(--teal);box-shadow:none}
.lanc-hero-valor.saindo>input{color:var(--err)}
.lanc-hero-valor>input::placeholder{font-size:30px;color:var(--line)}

/* Descrição é o segundo nível da leitura: maior que os campos comuns, sem
   competir com o valor. */
.lanc-descricao{font-size:15px;font-weight:500}

@media (max-width:520px){
  .lanc-hero{gap:12px;padding:14px}
  .lanc-hero-valor>input,.lanc-hero-valor>input::placeholder{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .lanc-tipo-op,.lanc-hero-valor>input{transition:none}
}
/* Busca sem resultado no mes, mas com resultado fora dele */
.busca-fora{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
  background:rgba(232,176,75,.10);border:1px solid rgba(232,176,75,.40);border-radius:var(--r-sm);
  padding:12px 14px;margin:12px auto 16px;max-width:640px;color:#e8c98b;font-size:12.5px;line-height:1.5}
.busca-fora b{color:#f0d9a8}