/* Financeiro 2 — porte das duas interfaces do handoff (HANDOFF FINANCEIRO/cartoes e /contas).
   O desenho segue o padrao do CRM: mesmas cores, mesma altura de campo, mesmo espacamento.
   As cores de serie (--f2-s*) ficam proprias porque sao cor de dado, nao de interface, e o
   grafico as le do CSS como no original. */
#financeiro2-module{
 --f2-surface:var(--sur); --f2-ink:var(--ink); --f2-ink2:var(--mut); --f2-muted:var(--mut);
 --f2-grid:var(--line); --f2-axis:var(--line); --f2-border:var(--line); --f2-hover:#f0f7fa;
 --f2-s1:#2a78d6; --f2-s2:#eb6834; --f2-s3:#1baf7a; --f2-s4:#eda100; --f2-s5:#e87ba4;
 --f2-s6:#008300; --f2-s7:#4a3aa7; --f2-s8:#e34948;
 --f2-seq:var(--acc); --f2-surface2:#f6f8f9;
 --f2-good:#2f8f6b; --f2-warn:#c9a227; --f2-crit:#b34137; --f2-goodtext:#23835e;
 color:var(--f2-ink);
}
#financeiro2-module *{box-sizing:border-box}
/* O conteudo mora num <main> dentro do #main do CRM, e o styles.css limita todo <main> a
   1280px com 28px de recuo. Sem isto os cartoes e os graficos ficavam mais estreitos que a
   barra de filtros logo acima deles. */
#financeiro2-module #f2-main{max-width:none;width:auto;padding:0;display:block}
#financeiro2-module .f2-top{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;justify-content:space-between;margin-bottom:.75rem}
#financeiro2-module .f2-top h1{font-size:1.3125rem;margin:0;font-weight:650}
#financeiro2-module .f2-sub{color:var(--f2-muted);font-size:.75rem;margin-top:.1875rem}
#financeiro2-module .f2-kicker{color:var(--acc);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:.375rem}
#financeiro2-module .f2-nav{display:flex;gap:.375rem;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:1rem}
#financeiro2-module .f2-nav button{background:none;border:0;border-bottom:2px solid transparent;padding:.5rem .75rem;color:var(--f2-ink2);font:inherit;cursor:pointer}
#financeiro2-module .f2-nav button.f2-on{color:var(--acc);border-bottom-color:var(--acc);font-weight:600}
#financeiro2-module .f2-filtros{display:flex;flex-wrap:wrap;gap:.75rem .875rem;align-items:end;margin-bottom:1.125rem}
#financeiro2-module .f2-filtros label{display:flex;flex-direction:column;gap:.3125rem;font-size:.6875rem;color:var(--mut)}
#financeiro2-module .f2-filtros label[hidden]{display:none}
#financeiro2-module .f2-filtros label.chk{flex-direction:row;align-items:center;gap:.375rem;align-self:flex-end;padding-bottom:.375rem;font-size:.75rem}
#financeiro2-module select,#financeiro2-module input[type=search],#financeiro2-module input[type=text],#financeiro2-module input[type=date],#financeiro2-module input[type=month],#financeiro2-module input[type=number]{box-sizing:border-box;font:inherit;font-size:.7812rem;height:2.375rem;padding:0 .625rem;border:1px solid var(--line);border-radius:.5625rem;background:#fff;color:var(--ink);min-width:9.375rem}
#financeiro2-module input[type=search]{min-width:12.5rem}
#financeiro2-module .f2-btn{font:inherit;font-size:.7812rem;height:2.375rem;padding:0 .875rem;border:1px solid var(--line);border-radius:.5625rem;background:#fff;color:var(--acc);cursor:pointer;align-self:flex-end}
#financeiro2-module .f2-btn:hover{border-color:var(--acc);background:#f3f7fb}
#financeiro2-module .f2-btn.primario{border-color:var(--acc);background:var(--acc);color:#fff;font-weight:600}
#financeiro2-module .f2-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem;margin-bottom:1.125rem}
#financeiro2-module .f2-tiles.resp{grid-template-columns:repeat(2,1fr)}
/* Tres linhas fixas: rotulo, numero, apoio. Assim os numeros dos seis cartoes ficam na mesma
   altura mesmo quando a linha de apoio de um deles ocupa duas linhas. */
#financeiro2-module .f2-tile{background:var(--sur);border:1px solid var(--line);border-radius:.75rem;padding:.875rem 1rem;display:grid;grid-template-rows:auto auto 1fr;gap:2px}
#financeiro2-module .f2-tile .f2-k{font-size:.6875rem;color:var(--f2-muted);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#financeiro2-module .f2-tile .f2-v{font-size:1.375rem;font-weight:600;color:var(--acc);font-variant-numeric:tabular-nums;white-space:nowrap}
#financeiro2-module .f2-tile .f2-d{font-size:.75rem;color:var(--f2-ink2);align-self:end;line-height:1.35}
#financeiro2-module .f2-tile.neg .f2-v{color:var(--f2-crit)}
#financeiro2-module .f2-tile.pos .f2-v{color:var(--f2-goodtext)}
#financeiro2-module .grid2{display:grid;grid-template-columns:3fr 2fr;gap:.875rem;margin-bottom:1.125rem}
#financeiro2-module .f2-card{background:var(--sur);border:1px solid var(--line);border-radius:.75rem;padding:1rem 1.125rem;min-width:0}
#financeiro2-module .f2-card h2{font-size:.875rem;margin:0 0 2px;font-weight:600;text-transform:none;letter-spacing:normal}
#financeiro2-module .f2-card .hint{font-size:.75rem;color:var(--f2-muted);margin-bottom:.5rem}
#financeiro2-module .chart{position:relative;height:17.5rem}
#financeiro2-module .tbl{overflow:auto;max-width:100%}
#financeiro2-module table{border-collapse:collapse;width:100%;font-size:.8125rem;font-variant-numeric:tabular-nums}
#financeiro2-module th,#financeiro2-module td{padding:.375rem .5rem;border-bottom:1px solid var(--f2-grid);text-align:left;white-space:nowrap;vertical-align:top}
#financeiro2-module th{color:var(--f2-muted);font-weight:500;font-size:.6875rem;text-transform:uppercase;letter-spacing:.03em;position:sticky;top:0;background:var(--f2-surface);z-index:1}
#financeiro2-module td.num,#financeiro2-module th.num{text-align:right}
#financeiro2-module td.desc{white-space:normal;min-width:16.25rem}
#financeiro2-module tr.click{cursor:pointer}
#financeiro2-module tr.click:hover td{background:var(--f2-hover)}
#financeiro2-module tr.total td{font-weight:600;border-top:2px solid var(--f2-axis)}
#financeiro2-module td.sel,#financeiro2-module th.sel{background:var(--f2-hover)}
#financeiro2-module th.sticky,#financeiro2-module td.sticky{position:sticky;left:0;background:var(--f2-surface);z-index:2}
#financeiro2-module th.sticky{z-index:3}
#financeiro2-module .badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.6875rem;padding:1px .4375rem;border-radius:6.1875rem;border:1px solid var(--f2-border);color:var(--f2-ink2);white-space:nowrap}
#financeiro2-module .badge i{width:.5rem;height:.5rem;border-radius:50%;display:inline-block;background:var(--f2-muted)}
#financeiro2-module .badge.pago i{background:var(--f2-good)}
#financeiro2-module .badge.agendado i{background:var(--f2-warn)}
#financeiro2-module .badge.vencido i{background:var(--f2-crit)}
#financeiro2-module .badge.aberto i{background:var(--f2-muted)}
#financeiro2-module .dot{display:inline-block;width:.5625rem;height:.5625rem;border-radius:2px;margin-right:.375rem;vertical-align:-1px}
#financeiro2-module .neg{color:var(--f2-goodtext)}
#financeiro2-module .dim{color:var(--f2-muted)}
#financeiro2-module td.val.entrada{color:var(--f2-goodtext)}
#financeiro2-module td.val.saida{color:var(--f2-crit)}
#financeiro2-module .flag{display:inline-block;margin-left:.3125rem;width:.875rem;height:.875rem;line-height:.875rem;text-align:center;border-radius:50%;font-size:.625rem;font-weight:700;background:var(--f2-warn);color:#0b0b0b;cursor:help;vertical-align:1px}
#financeiro2-module .section{margin-bottom:1.125rem}
#financeiro2-module .caret{background:none;border:0;color:var(--f2-muted);font:inherit;font-size:.625rem;line-height:1;cursor:pointer;padding:2px .375rem 2px 0;width:1.25rem;text-align:left}
#financeiro2-module .caret:hover{color:var(--f2-ink)}
#financeiro2-module tr.sub td{background:var(--f2-surface2);font-size:.75rem;color:var(--f2-ink2)}
#financeiro2-module tr.sub td.sticky{background:var(--f2-surface2);padding-left:2rem}
#financeiro2-module tr.sub:hover td{background:var(--f2-hover)}
#financeiro2-module td.forn{max-width:11.875rem;white-space:normal}
#financeiro2-module td.forn span{cursor:pointer;border-bottom:1px dotted var(--f2-axis)}
#financeiro2-module td.memo{white-space:normal;min-width:16.25rem;font-size:.75rem;color:var(--f2-ink2)}
#financeiro2-module .small{font-size:.75rem;color:var(--f2-ink2)}
/* O dialogo nasce em document.body, fora do #financeiro2-module: tudo que ele usa precisa
   valer nos dois lugares, senao a regra existe e nao pinta nada. Foi o que aconteceu com o
   "Vai para" e com o "Dividir em partes" — o radio voltou ao tamanho do sistema e o rotulo
   caiu embaixo dele, colado na descricao. */
:is(#financeiro2-module,.f2-dialog) .f2-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
:is(#financeiro2-module,.f2-dialog) .f2-empty{color:var(--mut);padding:1.25rem;text-align:center}
@media (max-width:1100px){#financeiro2-module .f2-tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
 #financeiro2-module .grid2{grid-template-columns:1fr}
 #financeiro2-module .f2-tiles.resp{grid-template-columns:1fr}
}
@media (max-width:600px){#financeiro2-module .f2-tiles{grid-template-columns:repeat(2,1fr)}}

/* Edicao: dialogo no padrao dos dialogos do CRM e a linha que abre a edicao. */
#financeiro2-module tr.editavel{cursor:pointer}
#financeiro2-module tr.editavel:hover td{background:var(--f2-hover)}
#financeiro2-module .f2-fixado{display:inline-block;margin-left:.375rem;padding:1px .4375rem;border-radius:62.4375rem;background:#eef2f6;color:var(--acc);font-size:.625rem;font-weight:600}
.f2-dialog{width:min(42.5rem,calc(100vw - 2rem))}
.f2-dialog .f2-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.f2-dialog .f2-form .wide{grid-column:1/-1}
.f2-dialog .f2-form label{display:flex;flex-direction:column;gap:.375rem;font-size:.6875rem;color:var(--mut)}
.f2-dialog .f2-form input,.f2-dialog .f2-form select{box-sizing:border-box;width:100%;height:2.375rem;padding:0 .625rem;border:1px solid var(--line);border-radius:.5625rem;background:#fff;font:inherit;font-size:.8125rem;color:var(--ink)}
.f2-dialog .f2-form .marcar{flex-direction:row;align-items:center;gap:.5rem;font-size:.7812rem;color:var(--ink)}
.f2-dialog .f2-form .marcar input{width:1rem;height:1rem;accent-color:var(--acc)}
.f2-dialog .f2-origem{grid-column:1/-1;padding:.75rem .875rem;border:1px solid var(--line);border-radius:.625rem;background:var(--bg);font-size:.7812rem;line-height:1.5;color:var(--mut)}
.f2-dialog .f2-origem b{color:var(--ink)}
:is(#financeiro2-module,.f2-dialog) .f2-par{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:center;padding:.75rem .875rem;border:1px solid var(--line);border-radius:.625rem;background:var(--sur);margin-bottom:.5rem}
:is(#financeiro2-module,.f2-dialog) .f2-par small{display:block;color:var(--mut);font-size:.6875rem;margin-top:.1875rem}
#financeiro2-module .f2-cabeca{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.75rem}
#financeiro2-module .f2-cabeca h2{margin:0 0 .1875rem}
#financeiro2-module .f2-cabeca .hint{margin:0}
#financeiro2-module td .f2-btn{height:1.875rem;padding:0 .6875rem;font-size:.7188rem}
#financeiro2-module td{vertical-align:middle}

/* Status da fatura editavel: o ponto colorido continua sendo o estado lido da tela e o
   select por cima e a escolha da gestao. */
#financeiro2-module .f2-status{display:inline-flex;align-items:center;gap:.375rem;padding:1px .375rem 1px .5rem;border:1px solid var(--f2-border);border-radius:6.1875rem;background:#fff}
#financeiro2-module .f2-status i{width:.5rem;height:.5rem;border-radius:50%;background:var(--f2-muted);flex:none}
#financeiro2-module .f2-status.pago i{background:var(--f2-good)}
#financeiro2-module .f2-status.agendado i{background:var(--f2-warn)}
#financeiro2-module .f2-status.parcial i,#financeiro2-module .badge.parcial i{background:var(--f2-warn)}
#financeiro2-module .f2-status.vencido i{background:var(--f2-crit)}
#financeiro2-module .f2-status select{height:1.625rem;min-width:0;width:auto;padding:0 .25rem;border:0;background:transparent;font:inherit;font-size:.7188rem;color:var(--f2-ink2);cursor:pointer}
#financeiro2-module .f2-status:hover{border-color:var(--acc)}
#financeiro2-module .f2-status select:focus-visible{outline:2px solid var(--acc);outline-offset:1px;border-radius:.375rem}
#financeiro2-module .f2-venc-erro{margin:.625rem 0 0;font-size:.75rem;color:var(--f2-crit)}
#financeiro2-module .f2-venc-erro:empty{display:none}

/* Prazo da fatura ao lado da data, so enquanto ela nao foi paga. */
#financeiro2-module .f2-venc-cel{white-space:nowrap;font-variant-numeric:tabular-nums}
#financeiro2-module .f2-prazo{display:inline-block;margin-left:.5rem;padding:2px .5rem;border-radius:6.1875rem;font-size:.6562rem;font-weight:600;background:#f1f4f5;color:var(--f2-muted)}
#financeiro2-module .f2-prazo.atrasado{background:#fdeceb;color:var(--f2-crit)}
#financeiro2-module .f2-prazo.hoje{background:#fdf4e0;color:#8a6a15}
#financeiro2-module .f2-prazo.perto{background:#eef2f6;color:var(--acc)}

#financeiro2-module .f2-link{border:0;background:none;padding:0;font:inherit;font-size:.75rem;color:var(--acc);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
#financeiro2-module .f2-link:hover{text-decoration-thickness:2px}
#financeiro2-module .f2-aviso{margin:0 0 .5rem;padding:.5rem .75rem;border-radius:.5625rem;background:#eef2f6;color:var(--acc);font-size:.7812rem}
/* Mes e ano no mesmo seletor, com uma seta de cada lado para andar mes a mes. */
#financeiro2-module .f2-mes-nav{display:inline-flex;align-items:center;gap:.375rem}
#financeiro2-module .f2-mes-nav select{min-width:8.25rem}
#financeiro2-module .f2-passo{width:2.125rem;height:2.375rem;flex:none;border:1px solid var(--line);border-radius:.5625rem;background:#fff;color:var(--acc);font:inherit;font-size:1.0625rem;line-height:1;cursor:pointer}
#financeiro2-module .f2-passo:hover:not(:disabled){border-color:var(--acc);background:#f3f7fb}
#financeiro2-module .f2-passo:disabled{color:var(--f2-muted);cursor:default;opacity:.5}
/* A janela de parcelas e so leitura: a tabela ocupa a largura inteira do dialogo. */
.f2-dialog .f2-form .tbl{grid-column:1/-1;max-height:50vh;overflow:auto}
.f2-dialog .f2-form table{width:100%;border-collapse:collapse;font-size:.8125rem;font-variant-numeric:tabular-nums}
.f2-dialog .f2-form th,.f2-dialog .f2-form td{padding:.4375rem .625rem;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.f2-dialog .f2-form th{font-size:.6875rem;text-transform:uppercase;letter-spacing:.03em;color:var(--mut);position:sticky;top:0;background:#fff}
.f2-dialog .f2-form td.num,.f2-dialog .f2-form th.num{text-align:right}
.f2-dialog .f2-form tr.total td{font-weight:600;border-top:2px solid var(--line)}

/* Quadro: o status da fatura e a cor da propria celula, bem clara, em vez de um ponto. */
#financeiro2-module .f2-quadro td.q-pago{background:#f1f8f3}
#financeiro2-module .f2-quadro td.q-agendado{background:#fdf8ea}
#financeiro2-module .f2-quadro td.q-aberto{background:#f5f7f8}
#financeiro2-module .f2-quadro td.sticky,#financeiro2-module .f2-quadro th.sticky{background:#f7f9fa}
#financeiro2-module .f2-quadro tr.click:hover td{background:var(--f2-hover)}
#financeiro2-module .f2-quadro th.sel{background:var(--f2-surface);box-shadow:inset 0 -2px 0 var(--acc)}
#financeiro2-module .f2-quadro td.sel{background:transparent}
#financeiro2-module .f2-quadro td.sel.q-pago{background:#e8f4ec}
#financeiro2-module .f2-quadro td.sel.q-agendado{background:#faf2dd}
#financeiro2-module .f2-quadro td.sel.q-aberto{background:#eef1f3}
#financeiro2-module td small{display:block;font-size:.6562rem;color:var(--f2-muted);margin-top:2px;font-weight:400}
#financeiro2-module .f2-rec-erro{margin:.625rem 0 0;font-size:.7812rem;color:var(--f2-crit);font-weight:600}
#financeiro2-module .f2-rec-erro.ok{color:var(--f2-goodtext);font-weight:500}
#financeiro2-module .f2-rec-erro:empty{display:none}
/* Valor do periodo escolhido: ultima coluna antes da acao, com fundo leve para se achar. */
#financeiro2-module td.f2-col-mes,#financeiro2-module th.f2-col-mes{background:#eef2f6}
#financeiro2-module td.f2-col-mes{font-weight:600}
#financeiro2-module tr.total td.f2-col-mes{background:#e6ecf1}

/* Decisao da recorrencia: o que e a cobranca em cima, projetar embaixo. Antes tudo ficava numa
   linha so e o campo de mes aparecia sem moldura, parecendo texto solto. */
#financeiro2-module td.f2-rec-decisao{display:flex;flex-direction:column;gap:.5rem;min-width:20.625rem}
#financeiro2-module .f2-rec-tipos{display:flex;gap:.375rem;flex-wrap:wrap}
#financeiro2-module .f2-rec-proj{display:flex;gap:.5rem;align-items:center}
#financeiro2-module .f2-rec-proj label{display:flex;align-items:center;gap:.375rem;font-size:.7188rem;color:var(--mut);margin:0}
#financeiro2-module .f2-rec-proj input[type=month]{height:2rem;min-width:0;width:8.125rem;font-size:.75rem}
#financeiro2-module .f2-rec-proj .f2-btn{height:2rem;padding:0 .75rem;font-size:.75rem}
#financeiro2-module .f2-rec-tipos .f2-btn{height:2rem;padding:0 .75rem;font-size:.75rem}
#financeiro2-module .f2-btn:disabled{opacity:.45;cursor:default}
#financeiro2-module .f2-rec-decisao+td,#financeiro2-module table th:last-child{width:auto}
/* Decisao numa linha so; a projecao ativa entra numa segunda linha, quando existe. */
#financeiro2-module .f2-rec-linha{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
#financeiro2-module .f2-rec-sep{width:1px;height:1.375rem;background:var(--line);margin:0 2px}
#financeiro2-module .f2-rec-ate{display:flex;align-items:center;gap:.375rem;font-size:.7188rem;color:var(--mut);margin:0}
#financeiro2-module .f2-rec-ate input[type=month]{height:2rem;min-width:0;width:7.875rem;font-size:.75rem}
#financeiro2-module .f2-rec-ativa{font-size:.7188rem;color:var(--mut)}
#financeiro2-module .f2-rec-ativa .f2-link{font-size:.7188rem}
/* Linha do projetado nos vencimentos: e estimativa, entao nao se veste de fatura. */
#financeiro2-module tr.f2-linha-proj td{background:#f7fafb;font-style:normal}
#financeiro2-module tr.f2-linha-proj .f2-status i{background:#bccddd}
/* Sub-abas de Recorrentes: classificar primeiro, ver o que ficou valendo depois. */
#financeiro2-module .f2-subnav{display:inline-flex;padding:.1875rem;border:1px solid var(--line);border-radius:.5625rem;background:var(--bg);margin-bottom:.875rem}
#financeiro2-module .f2-subnav button{padding:.375rem 1rem;border:0;border-radius:.4375rem;background:transparent;font:inherit;font-size:.8125rem;color:var(--f2-ink2);cursor:pointer}
#financeiro2-module .f2-subnav button.f2-on{background:var(--sur);color:var(--acc);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
/* Quem ja esta projetando fica em evidencia: e a linha que muda o numero dos meses a frente. */
#financeiro2-module tr.f2-projetando td{background:#f2f6f9}
#financeiro2-module tr.f2-projetando td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
#financeiro2-module tr.f2-projetando td.f2-col-mes{background:#e6edf3}
#financeiro2-module tr.f2-projetando .f2-rec-ativa{color:var(--acc);font-weight:600}
#financeiro2-module tr.f2-projetando .f2-rec-ativa .f2-link{font-weight:500}
/* Cabecalho que ordena: so isso ja diz que da para clicar. */
#financeiro2-module th.f2-ord{cursor:pointer;user-select:none;white-space:nowrap}
#financeiro2-module th.f2-ord:hover{color:var(--acc)}

/* Selecao em massa nos lancamentos */
#financeiro2-module .f2-selbar{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;padding:.5rem .625rem;
 border:1px solid var(--f2-linha,#e4e7eb);border-radius:.5625rem;background:var(--f2-fundo2,#f6f8f9)}
#financeiro2-module .f2-selbar[hidden]{display:none}
#financeiro2-module th.f2-selcol,#financeiro2-module td.f2-selcol{width:2.125rem;padding-right:0;text-align:center}
/* A caixa nativa em 15px some dentro da tabela: aqui ela e desenhada, com marca branca sobre
   o verde do sistema quando marcada. */
#financeiro2-module .f2-selcol input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;
 width:1.125rem;height:1.125rem;margin:0;border:1.5px solid #9faab3;border-radius:.3125rem;background:var(--sur,#fff);
 display:inline-block;vertical-align:middle;cursor:pointer}
#financeiro2-module .f2-selcol input[type=checkbox]:hover{border-color:var(--acc,#1d5b92)}
#financeiro2-module .f2-selcol input[type=checkbox]:checked{background:var(--acc,#1d5b92);border-color:var(--acc,#1d5b92)}
#financeiro2-module .f2-selcol input[type=checkbox]:checked::after{content:"";position:absolute;left:.3125rem;top:1px;
 width:.3125rem;height:.625rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
#financeiro2-module .f2-selcol input[type=checkbox]:focus-visible{outline:2px solid var(--acc,#1d5b92);outline-offset:2px}
#financeiro2-module tr.cat .f2-selcol input[type=checkbox]{border-color:#7f9296}
#financeiro2-module .f2-btn.f2-forte{background:var(--acc,#1d5b92);border-color:var(--acc,#1d5b92);color:#fff}

/* Para onde o lancamento vai: destino no lugar de caçar o nome da categoria na lista */
:is(#financeiro2-module,.f2-dialog) .f2-rot{display:block;font-size:.75rem;color:var(--mut);margin-bottom:.375rem}
/* Radio, nao botao: o destino e escolha unica, e botao aceso nao se distingue de botao que
   executa. A marca redonda repete a caixinha da tabela, para a tela ter um jeito so de escolher. */
:is(#financeiro2-module,.f2-dialog) .f2-destinos{display:grid;gap:.375rem;grid-template-columns:repeat(auto-fit,minmax(13.4375rem,1fr))}
:is(#financeiro2-module,.f2-dialog) label.f2-destino{display:flex;gap:.5625rem;align-items:flex-start;margin:0;
 border:1px solid var(--line);background:var(--sur);border-radius:.625rem;padding:.625rem .75rem;cursor:pointer}
:is(#financeiro2-module,.f2-dialog) label.f2-destino:hover{border-color:var(--acc)}
:is(#financeiro2-module,.f2-dialog) label.f2-destino.f2-on{border-color:var(--acc);background:rgba(29,91,146,.05)}
:is(#financeiro2-module,.f2-dialog) label.f2-destino span{display:flex;flex-direction:column;gap:2px;min-width:0}
:is(#financeiro2-module,.f2-dialog) label.f2-destino b{font-size:.8125rem;font-weight:600;line-height:1.25}
:is(#financeiro2-module,.f2-dialog) label.f2-destino small{font-size:.7188rem;color:var(--mut);line-height:1.35}
:is(#financeiro2-module,.f2-dialog) label.f2-destino input[type=radio]{appearance:none;-webkit-appearance:none;position:relative;
 box-sizing:border-box;flex:0 0 1.125rem;width:1.125rem;height:1.125rem;min-width:1.125rem;max-width:1.125rem;margin:1px 0 0;
 border:1.5px solid #9faab3;border-radius:50%;background:var(--sur,#fff);cursor:pointer}
/* O ponto do meio e um ::after, e nao uma borda grossa: com borda, o box-sizing do dialogo
   (que nao herda o do modulo) somava a espessura a largura e o circulo virava um oval. */
:is(#financeiro2-module,.f2-dialog) label.f2-destino input[type=radio]:checked{border-color:var(--acc,#1d5b92)}
:is(#financeiro2-module,.f2-dialog) label.f2-destino input[type=radio]:checked::after{content:"";position:absolute;
 inset:.1875rem;border-radius:50%;background:var(--acc,#1d5b92)}
:is(#financeiro2-module,.f2-dialog) label.f2-destino input[type=radio]:focus-visible{outline:2px solid var(--acc,#1d5b92);outline-offset:2px}

/* Matriz de categorias: a coluna do nome nao pode empurrar os meses para fora da tela, e nao
   pode mudar de largura quando a categoria abre -- senao a grade escorrega a cada clique. */
#financeiro2-module table .sticky{width:16.875rem;min-width:16.875rem;max-width:16.875rem;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Dividir um lancamento em partes */
:is(#financeiro2-module,.f2-dialog) .f2-parte{display:grid;grid-template-columns:7.5rem 1fr 1fr 2.125rem;gap:.5rem;margin-bottom:.5rem;align-items:center}
:is(#financeiro2-module,.f2-dialog) .f2-parte .f2-parte-x{padding:.5rem 0;text-align:center}
@media(max-width:700px){:is(#financeiro2-module,.f2-dialog) .f2-parte{grid-template-columns:1fr 1fr;grid-auto-rows:auto}}
#financeiro2-module .f2-prazo.ok{background:#e8f5ee;color:#1b6b45;border-color:#bfe3cf}

/* Quadro da divida: cada situacao com a sua cor, e a legenda dizendo qual e qual. */
/* Tres cores no quadro das dividas, e so tres: azul ja conciliado, amarelo falta conciliar,
   neutro ainda vai vencer. Cinco tons no mesmo quadro nao se distinguem de relance. */
#financeiro2-module .f2-quadro td.q-conciliado{background:#e4eefb}
#financeiro2-module .f2-quadro td.q-naoconc{background:#fdf3dd}
#financeiro2-module .f2-quadro td.sel.q-conciliado{background:#d3e3f7}
#financeiro2-module .f2-quadro td.sel.q-naoconc{background:#f7e9c8}
#financeiro2-module .f2-legenda{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.625rem;font-size:.6875rem;color:var(--f2-dim,#667)}
#financeiro2-module .f2-legenda span{padding:.1875rem .5rem;border-radius:.25rem;border:1px solid rgba(0,0,0,.08)}
#financeiro2-module .f2-legenda span.q-conciliado{background:#e4eefb}
#financeiro2-module .f2-legenda span.q-naoconc{background:#fdf3dd}
#financeiro2-module .f2-legenda span.q-aberto{background:#f5f7f8}

/* Subtelas do cadastro: a navegacao fica acima do conteudo, e some numa linha no celular. */
#financeiro2-module .f2-subnav{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:.875rem}

/* Evolucao do guardado: colunas simples, sem biblioteca de grafico. */
#financeiro2-module .f2-barras{display:flex;align-items:flex-end;gap:.5rem;min-height:9.375rem;overflow-x:auto;padding-top:.25rem;margin-top:.625rem}
#financeiro2-module .f2-barra-col{flex:1 0 2.875rem;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.3125rem;min-height:8.75rem}
#financeiro2-module .f2-barra{width:100%;max-width:2.375rem;min-height:2px;border-radius:.3125rem .3125rem 0 0;background:var(--f2-acento,#16456f)}
#financeiro2-module .f2-barra-valor,#financeiro2-module .f2-barra-mes{font-size:.625rem;color:var(--f2-dim,#667);white-space:nowrap;font-variant-numeric:tabular-nums}

/* Recorrentes: nome largo à esquerda, números alinhados à direita, ações no fim e sem esticar.
   A tabela estava com todas as colunas do mesmo peso, e o nome do fornecedor — que é o que se
   procura com o olho — competia com "4 de 6". */
.f2 .f2-col-nome{min-width:14.375rem}
.f2 .f2-col-nome small{display:block;font-size:.6875rem;margin-top:2px}
.f2 .f2-col-acoes{width:1%;white-space:nowrap;text-align:right}
.f2 .f2-btn.f2-x{padding:2px .5rem;font-weight:700;line-height:1.4}
.f2 .f2-btn.f2-x:hover{border-color:var(--f2-neg,#b3261e);color:var(--f2-neg,#b3261e)}

/* A linha de rendimento no quadro de dívidas: entra abatendo, então é verde e vem com sinal. */
.f2 tr.f2-rend td{background:var(--f2-ok-soft,rgba(16,122,88,.06))}
.f2 .f2-pos{color:var(--f2-pos,#174873);font-weight:600}

/* Grade de categorias x mes ------------------------------------------------
   Tres estados, tres pesos de cor. O mes fechado recua, o mes corrente e o unico com destaque
   e o futuro fica apagado, porque ali ainda nao ha fato -- so previsao. Sem isso a grade e uma
   parede de numeros iguais e o olho precisa ler o cabecalho para achar onde esta o hoje. */
#financeiro2-module td.f2-m-pass{color:var(--f2-pass,#8a949f)}
#financeiro2-module th.f2-m-pass{color:var(--f2-pass,#8a949f);font-weight:500}
#financeiro2-module td.f2-m-hoje,#financeiro2-module th.f2-m-hoje{
 background:var(--f2-hoje-bg,rgba(29,91,146,.07));font-weight:600;color:var(--f2-ink);
 border-left:1px solid rgba(29,91,146,.18);border-right:1px solid rgba(29,91,146,.18)}
#financeiro2-module th.f2-m-hoje{box-shadow:inset 0 -2px 0 var(--acc,#1d5b92)}
#financeiro2-module td.f2-m-fut,#financeiro2-module th.f2-m-fut{
 color:var(--f2-dim,#9aa3ad);background:var(--f2-fut-bg,rgba(0,0,0,.015))}

/* Largura igual para todo mes: com coluna elastica, um mes de sete digitos empurra os vizinhos
   e a grade "dança" a cada filtro. Fixa, a linha do olho fica reta de janeiro a dezembro. */
#financeiro2-module td.num.f2-m-pass,#financeiro2-module td.num.f2-m-hoje,#financeiro2-module td.num.f2-m-fut,
#financeiro2-module th.num.f2-m-pass,#financeiro2-module th.num.f2-m-hoje,#financeiro2-module th.num.f2-m-fut{
 width:6.5rem;min-width:6.5rem;max-width:6.5rem;font-variant-numeric:tabular-nums}

/* Provisao no mes futuro: numero em italico e apagado, para nunca ser lido como extrato. O "+"
   so aparece no hover da celula -- uma grade com dezenas de "+" acesos vira ruido. */
#financeiro2-module td.f2-prov{font-style:italic;color:var(--f2-prov,#6b7f8a)}
#financeiro2-module td.f2-prov-vazia{padding:0}
#financeiro2-module button.f2-mais{border:1px dashed var(--line);background:transparent;color:var(--mut);
 border-radius:.4375rem;width:1.625rem;height:1.5rem;line-height:1;font-size:.9375rem;cursor:pointer;opacity:0;
 transition:opacity .12s}
#financeiro2-module tr:hover button.f2-mais,#financeiro2-module button.f2-mais:focus-visible{opacity:1}
#financeiro2-module button.f2-mais:hover{border-style:solid;border-color:var(--acc,#1d5b92);
 color:var(--acc,#1d5b92)}
#financeiro2-module button.f2-mais:disabled{opacity:1;cursor:default}

/* Provisao editavel: o numero e o X dividem a celula, e o X so aparece no hover para nao
   poluir uma grade que ja tem muito numero. Em toque nao ha hover, entao ele fica sempre
   visivel abaixo de 900px -- sem isso, no iPad nao havia como remover. */
#financeiro2-module .f2-prov-edit{position:relative;cursor:text}
#financeiro2-module .f2-prov-edit .f2-prov-x{position:absolute;top:50%;right:2px;transform:translateY(-50%);
  display:none;width:1.125rem;height:1.125rem;padding:0;border:0;border-radius:50%;
  background:rgba(0,0,0,.06);color:#8a3b31;font-size:.8125rem;line-height:1;cursor:pointer}
#financeiro2-module .f2-prov-edit:hover .f2-prov-x{display:block}
#financeiro2-module .f2-prov-edit .f2-prov-x:hover{background:#f3ded9}
#financeiro2-module .f2-prov-edit:hover .f2-prov-num{opacity:.45}
#financeiro2-module input[type=text].f2-prov-campo{display:block;box-sizing:border-box;width:100%;min-width:0;height:1.375rem;padding:0 .3125rem;
  border:1px solid var(--acc,#1D5B92);border-radius:.3125rem;background:#fff;font:inherit;font-style:normal;
  font-variant-numeric:tabular-nums;line-height:1.25rem;text-align:right}
@media (max-width:900px){#financeiro2-module .f2-prov-edit .f2-prov-x{display:block}#financeiro2-module .f2-prov-edit:hover .f2-prov-num{opacity:1}}
#financeiro2-module button.f2-ir-lanc{border:0;background:none;padding:0;font:inherit;color:inherit;
  text-align:left;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#financeiro2-module button.f2-ir-lanc:hover{color:var(--acc,#1d5b92);text-decoration:underline}

/* Faixa clara em linha sim, linha nao (o nome e f2-faixa porque .f2-par ja e o cartao com
   display:grid la de cima -- reusar o nome virava a <tr> em caixa e empilhava os numeros): a grade tem treze colunas e o olho sai da linha no meio
   do caminho. A cor vai na <tr>, nao na celula -- assim o mes corrente, o periodo marcado e a
   coluna futura continuam por cima com o tom deles. A celula grudada precisa da propria regra
   porque ela e opaca de proposito, para os numeros passarem por baixo ao rolar. */
#financeiro2-module tr.f2-faixa{background:var(--f2-zebra,#f7f9fa)}
#financeiro2-module tr.f2-faixa>td.sticky{background:var(--f2-zebra,#f7f9fa)}
#financeiro2-module tr.sub.f2-faixa>td,#financeiro2-module tr.sub.f2-faixa>td.sticky{background:var(--f2-zebra2,#eef2f4)}
#financeiro2-module tr.cat:hover>td,#financeiro2-module tr.cat:hover>td.sticky,
#financeiro2-module tr.sub:hover>td,#financeiro2-module tr.sub:hover>td.sticky{background:var(--f2-hover)}

/* A setinha de abrir a categoria nao e informacao: e um convite. Em azul bem claro ela some no
   fundo ate o olho procurar por ela, e escurece quando o ponteiro chega. */
#financeiro2-module .caret{color:var(--f2-caret,#a9c9e2)}
#financeiro2-module tr.cat:hover .caret,#financeiro2-module .caret:hover{color:var(--acc,#1d5b92)}
#financeiro2-module .caret[aria-expanded=true]{color:var(--f2-caret-on,#7fa9c9)}

/* Aviso de conta sem extrato: amarelo de atencao, nao vermelho de erro -- nada esta quebrado,
   e dado que falta. Fica colado no titulo da grade, onde o buraco aparece. */
#financeiro2-module .f2-cobertura{margin:0 0 .625rem;padding:.5625rem .75rem;border-radius:.5rem;font-size:.75rem;line-height:1.5;
  background:#fdf6e3;border:1px solid #e8d9a8;color:#6b5320}
#financeiro2-module .f2-cobertura b{color:#4a3813}
/* O bloco da nota no cabecalho nao pode encolher quando o titulo cresce. */
#financeiro2-module .f2-top .indicator-note-actions{flex:0 0 auto}
/* Aviso de conta: amarelo. Aviso de explicacao de numero: cinza -- nada esta errado ali. */
#financeiro2-module .f2-cobertura.f2-cobertura-calma{background:var(--f2-surface2);border-color:var(--line);color:var(--f2-ink2)}

/* Extrato por conta e mês (Transferências · Contas). Conferir contra o extrato do banco pede
   uma conta por vez e o mês fechando; a coluna da direita é a única resposta que a tela deve. */
#financeiro2-module .f2-contas-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.625rem 0 .875rem}
#financeiro2-module .f2-conta-chip{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
 border:1px solid var(--line);background:var(--sur);border-radius:.625rem;padding:.5rem .75rem;cursor:pointer;text-align:left}
#financeiro2-module .f2-conta-chip:hover{border-color:var(--acc)}
#financeiro2-module .f2-conta-chip.f2-on{border-color:var(--acc);background:rgba(29,91,146,.06)}
#financeiro2-module .f2-conta-chip b{font-size:.8125rem;font-weight:600}
#financeiro2-module .f2-conta-chip small{font-size:.7188rem;color:var(--mut)}
#financeiro2-module .f2-conta-resumo{display:flex;flex-wrap:wrap;gap:.375rem 1.125rem;align-items:baseline;
 padding:.625rem .75rem;border:1px solid var(--line);border-radius:.625rem;background:#f7f9fa;margin-bottom:.875rem;font-size:.7812rem;color:var(--f2-ink2)}
#financeiro2-module .f2-conta-resumo b{font-size:.875rem;color:var(--f2-ink)}
#financeiro2-module .f2-mes-bloco{border:1px solid var(--line);border-radius:.625rem;margin-bottom:.625rem;overflow:hidden}
#financeiro2-module .f2-mes-cabeca{display:flex;align-items:baseline;gap:.625rem;width:100%;padding:.625rem .75rem;
 background:#f7f9fa;border:0;cursor:pointer;text-align:left;font:inherit}
#financeiro2-module .f2-mes-cabeca:hover{background:var(--f2-hover,#eef2f4)}
#financeiro2-module .f2-mes-cabeca b{font-size:.8438rem}
#financeiro2-module .f2-mes-cabeca small{font-size:.75rem;color:var(--mut);margin-left:auto}
#financeiro2-module .f2-mes-cabeca .caret{color:var(--mut);font-size:.6875rem}
/* Conciliado é a informação que a pessoa procura: verde quando achou o outro lado, apagado quando não. */
#financeiro2-module .f2-conc{display:inline-block;font-size:.7188rem;padding:2px .5rem;border-radius:62.4375rem;white-space:nowrap}
#financeiro2-module .f2-conc.ok{background:#dcf0e9;color:#1d5b92}
#financeiro2-module .f2-conc-n{display:inline-flex;align-items:center;justify-content:center;min-width:.9375rem;height:.9375rem;margin-right:.3125rem;border-radius:62.4375rem;background:#1d5b92;color:#fff;font-style:normal;font-size:.625rem;font-weight:600;vertical-align:1px}
#financeiro2-module .f2-conc.nao{background:#f0f2f3;color:#7f8c92}
#financeiro2-module .f2-card > label.chk{display:inline-flex;align-items:center;gap:.375rem;margin:.25rem 0 .625rem;font-size:.75rem;color:var(--f2-ink2)}
#financeiro2-module button.f2-conc{border:0;cursor:pointer;font:inherit;font-size:.7188rem}
#financeiro2-module button.f2-conc:hover{filter:brightness(.95);text-decoration:underline}
#financeiro2-module .f2-conta-resumo label.chk{margin-left:auto;display:flex;gap:.375rem;align-items:center;font-size:.7812rem;cursor:pointer}
/* Barra de filtros padrão do CRM (hw-fcaixa) no lugar das listas suspensas de período. */
#financeiro2-module .f2-fcaixa{margin-bottom:1.125rem}
#financeiro2-module .f2-periodo{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.375rem}
#financeiro2-module .f2-fcaixa label.chk{display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;color:var(--mut)}
/* Status da fatura: menu de botões em vez de lista suspensa. */
#financeiro2-module .f2-stmenu{position:relative;padding:0;cursor:pointer}
#financeiro2-module .f2-stmenu summary{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem .25rem .5rem;list-style:none;font-size:.7188rem;color:var(--f2-ink2);white-space:nowrap}
#financeiro2-module .f2-stmenu summary::-webkit-details-marker{display:none}
#financeiro2-module .f2-stmenu summary::after{content:'';width:.3125rem;height:.3125rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px;opacity:.6}
#financeiro2-module .f2-stmenu-op{position:absolute;z-index:20;top:calc(100% + .25rem);left:0;display:flex;flex-direction:column;min-width:8.125rem;padding:.25rem;border:1px solid var(--f2-border);border-radius:.625rem;background:var(--sur,#fff);box-shadow:0 8px 24px rgba(0,0,0,.12)}
#financeiro2-module .f2-stmenu-op button{border:0;background:none;text-align:left;padding:.4375rem .625rem;border-radius:.4375rem;font:inherit;font-size:.7812rem;color:var(--ink);cursor:pointer}
#financeiro2-module .f2-stmenu-op button:hover{background:var(--sur2,#f3f5f6)}
#financeiro2-module .f2-stmenu-op button.on{font-weight:700}
#financeiro2-module .f2-stbotao{font:inherit;font-size:.7188rem;color:var(--f2-ink2);padding:.25rem .625rem .25rem .5rem;cursor:pointer}
#financeiro2-module button.f2-conc{border:0;font:inherit;font-size:.7188rem;cursor:pointer}
#financeiro2-module button.f2-conc.nao{border:1px dashed var(--acc);background:#fff;color:var(--acc);font-weight:600}
#financeiro2-module button.f2-conc:hover{text-decoration:underline}
.f2-dialog .f2-wide{grid-column:1/-1}
/* Dentro do Financeiro novo o título já está no topo da página. */
.bx-f2 .f2-top h1,.bx-f2 .f2-kicker{display:none}
#financeiro2-module .hw-fcaixa .hw-fc-busca input[type=search]{height:auto;min-width:0;padding:0;border:0;background:transparent;font-size:.8125rem}
#financeiro2-module .hw-fcaixa select.hw-select-curto{min-width:0;width:auto;max-width:15rem;height:2.125rem}
/* Busca de pagamento da fatura: cartões de escolha, não campos de formulário. */
.f2-dialog .f2-form .bx-lista{max-height:none;overflow:visible}
.f2-dialog .f2-form label.bx-opcao{flex-direction:row;align-items:center;gap:.625rem;font-size:.8125rem;color:var(--ink)}
.f2-dialog .f2-form label.bx-opcao input{width:1rem;height:1rem;flex:none;padding:0;accent-color:var(--acc)}
.f2-dialog .f2-form label.hw-fc-busca{flex-direction:row;align-items:center;gap:.5rem;padding:0 .75rem;height:2.5rem;border:1px solid var(--line);border-radius:.625rem;background:var(--sur,#fff)}
.f2-dialog .f2-form label.hw-fc-busca input{height:auto;border:0;padding:0;background:transparent}
.f2-dialog .f2-form .bx-origem{font-size:.8125rem}
/* Endividamento: filtro por centro de custo e célula clicável para trocar o centro. */
#financeiro2-module .f2-centros-filtro{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;margin:.25rem 0 .75rem}
#financeiro2-module .f2-rot-filtro{font-size:.75rem;color:var(--mut);margin-right:.25rem}
#financeiro2-module button.f2-centro{white-space:nowrap;text-align:left}
.f2-dialog .f2-centro-opcoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(11.25rem,1fr));gap:.5rem}
/* Barra padrão (26/10): tudo numa linha, a busca estica, "Limpar" só com filtro ligado. */
#financeiro2-module .f2-fcaixa .hw-fc-linha{flex-wrap:wrap}
#financeiro2-module .f2-fcaixa .hw-fc-busca{flex:1 1 16.25rem}
#financeiro2-module .f2-fcaixa .f2-limpar{margin-left:auto}
/* Nada de descrição sob o título (regra do Guilherme, 27/10). */
#financeiro2-module .f2-card>h2+.hint,#financeiro2-module .f2-cabeca h2+.hint{display:none}
/* Importar fatura com IA (27/10): revisão larga, conferência do total em cartões. */
.f2-dialog.f2-fat-ia{width:min(67.5rem,calc(100vw - 2rem))}
.f2-fat-ia .f2-origem input[type=date]{display:inline-block;width:auto;height:1.875rem;padding:0 .375rem}
.f2-fat-ia .f2-fat-conf{display:grid;grid-template-columns:repeat(4,1fr);gap:.625rem}
.f2-fat-ia .f2-fat-conf>div{display:flex;flex-direction:column;gap:2px;padding:.625rem .75rem;border:1px solid var(--line);border-radius:.625rem;font-size:.75rem;color:var(--mut)}
.f2-fat-ia .f2-fat-conf b{font-size:1.0625rem;color:var(--ink);white-space:nowrap}
.f2-fat-ia .f2-fat-conf .ok{border-color:#9fd3bf;background:#eef8f3}
.f2-fat-ia .f2-fat-conf .ok small{color:#1f7a55}
.f2-fat-ia .f2-fat-conf .dif{border-color:#f0b8ad;background:#fdf1ee}
.f2-fat-ia .f2-fat-conf .dif small{color:#b4432c}
.f2-fat-ia .f2-fat-aviso{padding:.625rem .75rem;border-radius:.625rem;background:#fff8e6;font-size:.7812rem;line-height:1.5;color:var(--ink)}
.f2-fat-ia .f2-fat-h{margin:.25rem 0 .5rem;font-size:.8125rem;font-weight:600;color:var(--ink)}
.f2-fat-ia table{width:100%;border-collapse:collapse;font-size:.7812rem}
.f2-fat-ia th{text-align:left;font-size:.6875rem;font-weight:500;color:var(--mut);padding:.375rem .5rem;border-bottom:1px solid var(--line)}
.f2-fat-ia td{padding:.4375rem .5rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink)}
.f2-fat-ia .num{text-align:right;white-space:nowrap}
.f2-fat-ia td small{display:block;font-size:.6875rem;color:var(--mut)}
.f2-fat-ia td input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--acc)}
.f2-fat-ia td select{height:2rem;font-size:.75rem}
.f2-fat-ia .f2-fat-cls{display:grid;grid-template-columns:1fr 1fr;gap:.375rem;margin-top:.375rem}
.f2-fat-ia .f2-fat-chip{display:inline-block;padding:2px .5rem;border-radius:62.4375rem;font-size:.6875rem;white-space:nowrap}
.f2-fat-ia .f2-fat-chip.nova{background:#e3eef8;color:#1d5b92}
.f2-fat-ia .f2-fat-chip.alt{background:#fff1d6;color:#8a5a00}
.f2-fat-ia .f2-fat-chip.igual{background:#f0f2f3;color:#7f8c92}
.f2-fat-ia details summary{cursor:pointer;font-size:.7812rem;color:var(--mut);padding:.375rem 0}
.f2-fat-ia .dim{color:var(--mut)}
@media (max-width:720px){.f2-fat-ia .f2-fat-conf{grid-template-columns:1fr 1fr}.f2-fat-ia .f2-fat-cls{grid-template-columns:1fr}}
/* Lápis do cartão em Vencimentos e controles do Conciliar fatura (4480). */
#financeiro2-module .f2-lapis{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-left:.375rem;vertical-align:middle;border:1px solid transparent;border-radius:.375rem;background:transparent;color:var(--mut);cursor:pointer;opacity:.55}
#financeiro2-module tr:hover .f2-lapis,#financeiro2-module .f2-lapis:focus-visible{opacity:1}
#financeiro2-module .f2-lapis:hover{border-color:var(--line);color:var(--acc);background:var(--sur2,#f6f8f9)}
.f2-dialog .f2-fat-ctrl{display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap}
.f2-dialog .f2-fat-ctrl>label{flex:1;min-width:12.5rem}
.f2-dialog .f2-fat-janela{display:flex;flex-direction:column;gap:.375rem;font-size:.6875rem;color:var(--mut)}
.f2-dialog .f2-fat-janela>div{display:flex;align-items:center;height:2.5rem;border:1px solid var(--line);border-radius:.5rem;overflow:hidden}
.f2-dialog .f2-fat-janela button{width:2.25rem;height:100%;border:0;background:transparent;font-size:1rem;cursor:pointer;color:var(--ink)}
.f2-dialog .f2-fat-janela button:hover{background:#f0f7fa}
.f2-dialog .f2-fat-janela b{min-width:4.75rem;text-align:center;font-size:.8125rem;color:var(--ink);font-weight:600}
.f2-dialog .f2-fat-tag{display:inline-block;margin-left:.375rem;padding:1px .4375rem;border-radius:62.4375rem;background:#dcf0e9;color:#1d5b92;font-size:.6875rem;font-weight:600;vertical-align:1px}
.f2-dialog .f2-fat-tag.leve{background:#eef3f7;color:#5a6b75;font-weight:500}
.f2-dialog .f2-fat-sug{border-color:#1d5b92}
.f2-dialog .f2-dica-campo{font-size:.7188rem;color:var(--mut)}
/* Cartões › Vencimentos: coluna Observação (atraso e juros/multa) */
#financeiro2-module th.f2-col-venc{width:1%;white-space:nowrap}
#financeiro2-module .f2-obs{display:inline-block;font-size:.7188rem;padding:2px .5rem;border-radius:62.4375rem;white-space:nowrap;background:#f0f2f3;color:#5b6b72}
#financeiro2-module button.f2-obs{border:0;cursor:pointer;font:inherit;font-size:.7188rem}
#financeiro2-module .f2-obs.emdia{background:#e8f5ee;color:#1b6b45}
#financeiro2-module .f2-obs.atraso{background:#fdeceb;color:var(--f2-crit)}
#financeiro2-module .f2-obs.vazio{background:transparent;color:var(--f2-muted)}
#financeiro2-module .f2-obs-man{font-style:normal;opacity:.7;margin-left:.25rem}
#financeiro2-module .f2-obs-juros{font-size:.75rem;font-weight:600;color:var(--f2-crit);white-space:nowrap}
.f2-dialog .f2-obs-tit{font-size:.75rem;font-weight:600;color:var(--muted,#6b7a80);margin:.25rem 0 .375rem}
.f2-dialog .f2-obs-soma{font-weight:600}
/* Lápis do cartão em coluna própria, alinhado em todas as linhas; prazo na Observação */
#financeiro2-module th.f2-col-lapis,#financeiro2-module td.f2-col-lapis{width:1%;padding-left:0;padding-right:.25rem;text-align:right}
#financeiro2-module td.f2-col-lapis .f2-lapis{margin-left:0}
#financeiro2-module button.f2-obs.prazo{background:transparent;padding:0}
#financeiro2-module button.f2-obs.prazo .f2-prazo{margin-left:0}
/* Recorrentes com IA (27/10, mig 4650) */
#financeiro2-module .f2-rec-tab td small{display:block;font-size:.7188rem;color:var(--mut);font-weight:400}
#financeiro2-module .f2-rec-tab .f2-prazo{margin-left:0}
#financeiro2-module .f2-prazo.f2-moeda{background:#eaf4ee;color:#2f6b45}
#financeiro2-module .f2-rec-acoes{white-space:nowrap;text-align:right}
#financeiro2-module .f2-rec-acoes .f2-btn{height:1.75rem;padding:0 .625rem}
#financeiro2-module .f2-rec-tab tr.sel td{background:color-mix(in srgb,var(--acc) 6%,transparent)}
#financeiro2-module .fgh-kpis{margin:.75rem 0}
#financeiro2-module tr.f2-linha-proj.click{cursor:pointer}
.f2-dialog .f2-chips-linha{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem}
.f2-dialog .f2-chips-linha .f2-obs-tit{flex:0 0 100%;margin:0 0 2px}
.f2-dialog .f2-form label.f2-chip-op{flex-direction:row;cursor:pointer}
.f2-dialog .f2-form label.f2-chip-op input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.f2-dialog .f2-chip-op span{display:inline-flex;align-items:center;height:2rem;padding:0 .75rem;border:1px solid var(--line);border-radius:6.1875rem;font-size:.7812rem;color:var(--ink);background:#fff}
.f2-dialog .f2-chip-op input:checked+span{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,#fff);color:var(--acc);font-weight:600}
.f2-dialog .f2-chip-op input:focus-visible+span{outline:2px solid var(--acc);outline-offset:1px}
.f2-dialog .f2-rec-ia{margin:0;padding:.625rem .75rem;border-radius:.5625rem;background:var(--bg);font-size:.7812rem;color:var(--mut)}
.f2-dialog .bx-item-dir small{font-weight:500;color:var(--f2-goodtext,#2f6b45);margin-left:.25rem}
.f2-dialog .bx-item-dir small.neg{color:var(--f2-crit,#b42318)}
.f2-dialog .f2-proj-lista .bx-item{cursor:default}
.f2-dialog .f2-form input.f2-proj-valor{width:6.875rem;height:2rem;text-align:right;flex:none}
.f2-dialog .f2-form label.f2-proj-tirar{flex-direction:row;align-items:center;gap:.25rem;font-size:.75rem;white-space:nowrap}
.f2-dialog .f2-form label.f2-proj-tirar input{width:.9375rem;height:.9375rem}
.f2-dialog .f2-form label.chk{flex-direction:row;align-items:center;gap:.5rem;font-size:.7812rem;color:var(--ink)}
.f2-dialog .f2-form label.chk input{width:1rem;height:1rem}
#financeiro2-module .f2-rec-tab td{vertical-align:middle}

/* Endividamento (1.141.0): a tabela é a área de rolagem, do tamanho da tela. Cabeçalho dos
   meses e coluna da dívida ficam presos; a barra horizontal fica sempre à vista no pé da caixa.
   O mês escolhido é marcado por faixa com borda (não só cor) e por ▾ no cabeçalho. */
#financeiro2-module .f2-div-tbl{max-height:calc(100vh - 9.375rem);min-height:20rem;overflow:auto;overscroll-behavior-y:auto;
 border:1px solid var(--f2-grid);border-radius:.5rem}
#financeiro2-module .f2-div-quadro thead th{position:sticky;top:0;z-index:4;background:var(--f2-surface);box-shadow:inset 0 -1px 0 var(--f2-axis)}
#financeiro2-module .f2-div-quadro thead th.sticky{z-index:6;left:0}
#financeiro2-module .f2-div-quadro td.sticky{z-index:3;box-shadow:inset -1px 0 0 var(--f2-grid)}
/* Faixa discreta (1.146.3): cinza suave, não o azul da marca — ele pediu menos evidente. */
#financeiro2-module .f2-div-quadro th.sel{color:var(--f2-ink,#1f2a33);font-weight:700;background:#f3f1ec;border-left:1.5px solid #c9ccd0;border-right:1.5px solid #c9ccd0;border-top:1.5px solid #c9ccd0}
#financeiro2-module .f2-div-quadro td.sel{border-left:1.5px solid #c9ccd0;border-right:1.5px solid #c9ccd0}
#financeiro2-module .f2-div-quadro tr:last-child td.sel{border-bottom:1.5px solid #c9ccd0}
#financeiro2-module .f2-div-quadro td.sticky{display:table-cell}
#financeiro2-module .f2-div-quadro .f2-div-nome{display:inline-block;max-width:13.75rem;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
#financeiro2-module .f2-div-quadro .f2-div-lapis{float:right;margin-top:2px}
#financeiro2-module .f2-padrao{font-size:.625rem;font-style:italic;color:var(--f2-muted);border:1px dashed var(--f2-border);border-radius:6.1875rem;padding:0 .3125rem;margin-left:.1875rem}
#financeiro2-module button.f2-link.f2-pos{font:inherit}
#financeiro2-module .f2-div-quadro small .f2-centro{font-size:inherit;padding:0}
/* Sócios › Visão geral: status de retirada/aporte avulso (já saiu do extrato, não tem menu). */
#financeiro2-module .f2-st-fixo{padding:.25rem .625rem .25rem .5rem;font-size:.7188rem;color:var(--f2-ink2);white-space:nowrap}
/* Sócios: item do mês dividido pela fatura importada (um sócio por linha). */
#financeiro2-module .f2-soc-partes{font-size:.75rem;color:var(--f2-ink2)}
#financeiro2-module .f2-soc-partes>summary{list-style:none;cursor:pointer;white-space:nowrap}
#financeiro2-module .f2-soc-partes>summary::-webkit-details-marker{display:none}
#financeiro2-module .f2-soc-partes .f2-seta{display:inline-block;margin-left:.25rem;transition:transform .15s}
#financeiro2-module .f2-soc-partes[open] .f2-seta{transform:rotate(180deg)}
#financeiro2-module .f2-soc-det{display:flex;flex-direction:column;gap:.375rem;margin-top:.375rem;padding:.375rem .5rem;border:1px solid var(--f2-line);border-radius:.375rem;background:var(--f2-card,#fff)}
#financeiro2-module .f2-soc-grp{display:flex;flex-direction:column;gap:1px}
#financeiro2-module .f2-soc-grp span{display:flex;justify-content:space-between;gap:.75rem;padding-left:.5rem}
#financeiro2-module .f2-soc-grp i{font-style:normal;font-variant-numeric:tabular-nums}
#financeiro2-module .f2-soc-det .f2-link{align-self:flex-start;border:0;background:none;padding:0;font:inherit;color:var(--f2-s2,#1d5b92);text-decoration:underline;cursor:pointer}
.f2-dialog .f2-aviso-ia{margin:0 0 .5rem;padding:.5rem .625rem;border-left:3px solid var(--f2-warn,#c98a1b);background:#fdf6e8;font-size:.7812rem}
.f2-dialog [data-soc-rev] small{display:block;color:var(--muted,#6b7a80);font-size:.7188rem}
.f2-dialog [data-soc-rev] select{min-width:8.75rem}
/* Conciliar parcela (27/10): Extrato | Pedido HW | Protocolo, barra padrão numa linha, rolagem única (só a lista). */
dialog.f2-conc-dlg{width:min(47.5rem,calc(100vw - 2rem))}
/* Rolagem única (27/10): só o corpo rola; sem cadeia de flex, que no Safari esmagava o diálogo. */
.f2-conc-dlg .conversation-body{max-height:min(68vh,calc(100vh - 13.75rem));overflow:auto}
.f2-conc-dlg .f2-form{display:flex;flex-direction:column;gap:.75rem}
.f2-conc-dlg .f2-form .bx-lista{flex:none;max-height:none;overflow:visible}
.f2-conc-dlg .comment-error{min-height:0}
.f2-conc-dlg .comment-error:empty{display:none}
.f2-conc-ctrl{display:flex;flex-direction:column;gap:.625rem}
.f2-conc-seg{display:inline-flex;align-self:flex-start;padding:.1875rem;border:1px solid var(--line);border-radius:.625rem;background:var(--sur2,#f4f6f7)}
.f2-conc-seg button{border:0!important;background:transparent!important;padding:.4375rem .875rem!important;border-radius:.5rem!important;font:inherit;font-size:.8125rem;color:var(--mut);cursor:pointer}
.f2-conc-seg button.on{background:#fff!important;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.f2-conc-barra{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}
.f2-dialog .f2-form .f2-conc-barra label.hw-fc-busca{flex:1 1 auto;min-width:0;height:2.5rem}
.f2-conc-barra .hw-fc-busca svg{flex:none;color:var(--mut)}
.f2-dialog .f2-form .f2-conc-barra label.f2-conc-conta{flex:0 0 13.125rem;display:block}
.f2-conc-barra .f2-conc-conta .fgh-sel{height:2.5rem;border-radius:.625rem}
.f2-conc-barra .f2-fat-janela>div{height:2.5rem}
.f2-conc-jan{flex:none;font-size:.75rem;color:var(--mut);white-space:nowrap}
.f2-conc-resumo{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .875rem;padding:.625rem .75rem;border:1px solid var(--line);border-radius:.625rem;font-size:.8125rem;color:var(--ink)}
.f2-conc-resumo[hidden]{display:none}
.f2-conc-resumo .f2-int-ok{color:#1f7a55;font-weight:600}
.f2-conc-resumo .f2-int-mais{color:#1d5b92;font-weight:600}
.f2-conc-resumo .f2-int-falta{color:#b4432c;font-weight:600;border-bottom:2px dashed currentColor}
.f2-dialog .f2-form label.bx-opcao.f2-usado{opacity:.55}
@media (max-width:640px){.f2-conc-barra{flex-wrap:wrap}.f2-dialog .f2-form .f2-conc-barra label.f2-conc-conta{flex:1 1 100%}.f2-conc-seg{align-self:stretch}.f2-conc-seg button{flex:1}}
.f2-dialog .f2-form .f2-conc-barra label.hw-fc-busca:focus-within{outline:2px solid var(--acc,#1d5b92);outline-offset:-1px}
.f2-dialog .f2-form .f2-conc-barra label.hw-fc-busca input:focus{outline:none;box-shadow:none}
/* Contas de reserva (27/10): linha clicável abre o movimento da conta; "Pago com reserva" nos diálogos de conciliar. */
#financeiro2-module tr.f2-res-linha{cursor:pointer}
#financeiro2-module tr.f2-res-linha:hover td,#financeiro2-module tr.f2-res-linha.on td{background:var(--f2-hover)}
#financeiro2-module tr.f2-res-linha.on td:first-child{box-shadow:inset 3px 0 0 var(--acc);font-weight:600}
.f2-dialog .f2-res-bloco{display:grid;gap:.5rem;border-top:1px solid var(--line,#e3e8ee);padding-top:.75rem}
.f2-dialog .f2-res-campos{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.625rem}
.f2-dialog .f2-res-bloco .bx-item .f2-btn{margin-left:.5rem}
@media (max-width:640px){.f2-dialog .f2-res-campos{grid-template-columns:1fr}}
.f2-conc-dlg .f2-form .f2-res-bloco,.f2-conc-dlg .f2-form .f2-res-bloco .bx-lista{flex:none}
/* Sócios: os outros débitos do mesmo item (um por linha), sem repetir status e observação. */
#financeiro2-module tr.f2-soc-sub td{border-top-color:transparent;color:var(--f2-ink2)}
/* Parcela do mês (27/10): resumo em quatro colunas */
.f2-dialog .f2-parc-resumo{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;padding:.625rem .75rem;border-radius:.5625rem;background:var(--bg,#f4f6f7)}
.f2-dialog .f2-parc-resumo small{display:block;font-size:.6875rem;color:var(--mut,#6b7a80)}
.f2-dialog .f2-parc-resumo b{font-size:.8438rem;white-space:nowrap}
.f2-dialog .f2-parc-resumo i{display:block;font-style:normal;font-size:.6875rem;color:var(--mut,#6b7a80)}
@media (max-width:560px){.f2-dialog .f2-parc-resumo{grid-template-columns:repeat(2,1fr)}}
/* Crédito da dívida (5620): linha marcável no Conciliar parcela e saldo sob o nome da dívida. */
.f2-dialog .f2-form label.bx-opcao.f2-conc-cred{padding:.625rem .75rem;border:1px dashed var(--acc,#1d5b92);border-radius:.625rem}
.f2-dialog .f2-form label.bx-opcao.f2-conc-cred:has(input:checked){border-style:solid;background:#eef4fa}
#financeiro2-module small.f2-cred-saldo{display:block;color:var(--acc,#1d5b92);font-weight:600}
#financeiro2-module .f2-res-saldo{display:inline-flex;align-items:center;gap:.375rem;justify-content:flex-end}

/* Lista curta nos Conciliar (27/10, lista-curta.js): 3 candidatos + "Ver mais"; reserva recolhida; ajuste de centavos. */
.bx-lista>.bx-opcao[hidden]{display:none!important}
.f2-dialog details.f2-res-bloco{display:block}
.f2-dialog details.f2-res-bloco[open]>*+*{margin-top:.5rem}
.f2-dialog .f2-res-sum{cursor:pointer;font-size:.8125rem;color:var(--acc,#1d5b92);list-style:none;width:max-content}
.f2-dialog .f2-res-sum::-webkit-details-marker{display:none}
.f2-dialog .f2-res-sum::before{content:'+ '}
.f2-dialog details[open]>.f2-res-sum::before{content:'− '}
.f2-fat-ajuste{display:flex;align-items:center;justify-content:space-between;gap:.625rem;padding:.5rem .75rem;border:1px dashed var(--line,#d6dde3);border-radius:.625rem;font-size:.8125rem}
.f2-fat-ajuste[hidden]{display:none}