/* ============================================================
   filtros.css — a BARRA de filtros (v0.7.0): branca, borda fina, 40 px no PC e 44 no celular. Nenhum filtro é amarelo (o amarelo é só o botão principal e a pílula do topo).
   Cor só por token de tema.css (a borda fina e o verde do check são tokens daqui). Só transform e opacity se mexem. O efeito fica LIGADO mesmo com "Reduzir movimento" (decisão da dona).
   Carregado depois de cara.css; o calendário (popover e folha) está em calendario.css.
   ============================================================ */
:root{--fl-ln:rgba(26,36,32,.12);--fl-off:52px;--fl-mola:cubic-bezier(.2,1.15,.35,1)}
.corpo{--gut:16px}
.fl-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* ---- a barra gruda no topo; com a lista rolando ganha vidro ---- */
.fl-sent{position:absolute;left:0;top:var(--fl-off);width:1px;height:1px;pointer-events:none}
.fl-bar{position:sticky;top:var(--h-proto);z-index:20;margin-top:var(--fl-off)}
.fl-in{display:flex;flex-direction:column;gap:10px}
.fl-lin{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fl-bar.preso{margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);padding:8px var(--gut) 2px;border-radius:0 0 18px 18px;background:color-mix(in srgb,var(--card) 82%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 8px 24px rgba(5,39,14,.12);animation:fl-enc .22s var(--curva-entrada)}
.fl-bar.preso .fl-abas{display:none}
@media (max-width:1023px){.fl-bar.preso .fl-bsc{display:none}}
/* ---- abas do Financeiro ---- */
.fl-abas{display:flex;gap:2px;border-bottom:1px solid var(--fl-ln)}
.fl-aba{margin-bottom:-1px;min-height:44px;padding:0 14px;border:0;border-bottom:2px solid transparent;background:none;font-family:var(--fonte-titulo);font-weight:700;font-size:14px;color:var(--tinta-2);cursor:pointer;transition:color .2s,border-color .2s}
.fl-aba.on{color:var(--tinta);border-bottom-color:var(--marca)}
/* ---- busca, botão-select, botão Filtros ---- */
.fl-bsc{position:relative;display:block;flex:1 1 100%;min-width:0}
.fl-bsc .fl-ic{position:absolute;left:13px;top:50%;margin-top:-10px;color:var(--tinta-2);pointer-events:none}
.fl-bsc input{width:100%;height:44px;padding:0 14px 0 42px;border:1px solid var(--fl-ln);border-radius:12px;background:#fff;color:var(--tinta);font:inherit;font-size:16px;outline:0;-webkit-appearance:none;appearance:none}
.fl-bsc input:focus{border-color:var(--marca);box-shadow:0 0 0 3px rgba(15,99,39,.12)}
.fl-sw{position:relative;display:none;flex:none}
.fl-sw.fl-per{display:block;flex:1 1 0;min-width:0}
.fl-sw.oculto{display:none!important}
.fl-sel,.fl-fbt{display:flex;align-items:center;gap:6px;height:44px;padding:0 10px 0 14px;border:1px solid var(--fl-ln);border-radius:12px;background:#fff;color:var(--tinta);font:inherit;font-size:14px;white-space:nowrap;cursor:pointer;transition:transform .18s ease,border-color .2s,background .2s}
.fl-sel:active,.fl-fbt:active{transform:scale(.97)}
.fl-sel:hover,.fl-fbt:hover{border-color:rgba(26,36,32,.28)}
.fl-sel.on,.fl-fbt.on{border-color:var(--marca)}.fl-sel.on .fl-sv{font-weight:800}
.fl-lb{color:var(--tinta-2)}
.fl-sv{overflow:hidden;text-overflow:ellipsis;max-width:150px}
.fl-chev{width:16px;height:16px;color:var(--tinta-2);transition:transform .2s}.fl-sw.open .fl-chev{transform:rotate(180deg)}
.fl-pg{display:flex;align-items:stretch;height:40px;border:1px solid var(--fl-ln);border-radius:12px;background:#fff;overflow:hidden;transition:border-color .2s}.fl-pg:has(.fl-sel.on){border-color:var(--marca)}
.fl-pa{flex:none;width:40px;border:0;background:none;color:var(--tinta);font-size:22px;line-height:1;cursor:pointer;transition:transform .18s,background .2s}.fl-pa:hover{background:var(--card-2)}.fl-pa:active{transform:scale(.9)}
.fl-pa[aria-disabled=true]{color:var(--cinza-2);pointer-events:none;cursor:default}
.fl-pg .fl-sel,.fl-pg .fl-sel.on{flex:1;min-width:0;height:100%;border:0;border-left:1px solid var(--fl-ln);border-right:1px solid var(--fl-ln);border-radius:0}
.fl-sv.desl{animation:fl-desl .16s ease backwards}@keyframes fl-desl{from{opacity:0;transform:translateX(var(--dx,8px))}}
.fl-per .fl-sel{width:100%;justify-content:flex-start;gap:9px;padding:0 12px}.fl-per .fl-sv{flex:1;min-width:0;max-width:none;text-align:left;font-family:var(--fonte-titulo);font-weight:600}.fl-per .fl-sel.on .fl-sv{font-weight:800}
.fl-ci{display:grid;place-items:center;color:var(--tinta-2)}
.fl-fbt{flex:none;padding:0 14px;gap:8px;font-weight:600}
.fl-bd{min-width:20px;height:20px;padding:0 5px;border-radius:99px;display:grid;place-items:center;background:var(--marca);color:#fff;font:700 11px var(--fonte-titulo);font-style:normal}.fl-bd[hidden]{display:none}
.fl-lim{min-height:36px;padding:0 4px;border:0;background:none;color:var(--tinta-2);font:inherit;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}.fl-lim[hidden]{display:none}
.fl-lim.pc{display:none}
/* ---- o resultado ---- */
.fl-fim{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:22px;margin:12px 0 2px}
.fl-bar.preso .fl-fim{margin:8px 0 4px}
.fl-rs{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:13px;color:var(--tinta-2)}
.fl-v{font-size:13px;color:var(--tinta)}
.fl-pt{color:var(--cinza-2)}.fl-ex{color:var(--tinta-2)}
.fl-sk{display:inline-block;height:14px;border-radius:6px;background:var(--linha);animation:fl-pulso 1.1s ease-in-out infinite alternate}
.fl-vz-a{display:flex;justify-content:center;margin-top:12px}
/* ---- o menu de cada botão (PC) ---- */
.fl-mn{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:230px;max-width:340px;padding:6px;border:1px solid var(--fl-ln);border-radius:12px;background:#fff;box-shadow:0 14px 34px rgba(5,39,14,.18),0 2px 6px rgba(5,39,14,.08);transform-origin:top left;animation:fl-menu .16s var(--curva-entrada) backwards}
.fl-mn.dir{left:auto;right:0;transform-origin:top right}
.fl-mn.saindo{opacity:0;transition:opacity .1s}
.fl-mn.mais{min-width:320px;max-height:72vh;overflow:auto;padding:4px 10px 8px}
.fl-lista{display:flex;flex-direction:column;max-height:288px;overflow:auto}
.fl-it{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--tinta);font:inherit;font-size:15px;text-align:left;cursor:pointer;transition:transform .18s,background .15s}
.fl-it:hover,.fl-it:focus-visible{background:var(--card-2);outline:none}.fl-it:active{transform:scale(.98)}
.fl-it.on{font-weight:700}
.fl-it-t{flex:1;min-width:0}
.fl-it>.fl-ck{margin-left:auto;color:var(--verde-acao);stroke-width:2.4;opacity:0}.fl-it.on>.fl-ck{opacity:1}
.fl-box{display:grid;place-items:center;width:20px;height:20px;border:1.5px solid rgba(26,36,32,.35);border-radius:6px;background:#fff;flex:none;transition:background .15s,border-color .15s}
.fl-box .fl-ck{width:14px;height:14px;color:#fff;stroke-width:3;opacity:0}
.fl-it.ck.on .fl-box{background:var(--verde-acao);border-color:var(--verde-acao)}.fl-it.ck.on .fl-box .fl-ck{opacity:1}
.fl-mqw{position:relative;display:block;margin:2px 2px 6px}.fl-mqw .fl-ic{position:absolute;left:11px;top:50%;margin-top:-8px;width:16px;height:16px;color:var(--tinta-2)}
.fl-mq{width:100%;height:38px;padding:0 10px 0 34px;border:1px solid var(--fl-ln);border-radius:10px;background:#fff;color:var(--tinta);font:inherit;font-size:14px;outline:0;-webkit-appearance:none;appearance:none}
.fl-mq:focus{border-color:var(--marca)}
.fl-nada{margin:0;padding:14px 12px;font-size:14px;color:var(--tinta-2)}
.fl-mf{display:flex;justify-content:flex-end;padding:2px 6px 0}.fl-mf .fl-lim{min-height:32px}
.fl-sec h3{margin:0 0 4px;font:700 12px var(--fonte-titulo);letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-2)}
.fl-mn.mais .fl-sec{padding:12px 0 6px}.fl-mn.mais .fl-sec+.fl-sec{border-top:1px solid var(--fl-ln)}
/* ---- a folha de baixo (celular): seções com título, rodapé fixo ---- */
.fl-fundo{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;background:rgba(5,39,14,.55);animation:fl-fundo .2s ease backwards}
.fl-folha{display:flex;flex-direction:column;width:100%;max-height:88vh;padding-top:10px;border-radius:24px 24px 0 0;background:#fff;box-shadow:0 80px 0 #fff;animation:fl-sobe .5s var(--fl-mola) backwards}
.fl-alca{display:block;width:40px;height:4px;margin:0 auto 10px;border-radius:99px;background:var(--fl-ln)}
.fl-fh{display:flex;align-items:center;justify-content:space-between;padding:0 20px 6px}.fl-fh b{font:800 20px var(--fonte-titulo)}
.fl-fx{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--card-2);color:var(--tinta);cursor:pointer}
.fl-fc{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 20px 8px}
.fl-folha .fl-sec{padding:16px 0 8px}.fl-folha .fl-sec+.fl-sec{border-top:1px solid var(--fl-ln)}
.fl-folha .fl-lista{max-height:none;overflow:visible}
.fl-folha .fl-it{min-height:48px;padding:0 4px;border-radius:0}
.fl-folha .fl-it.on{font-weight:700}
.fl-folha .fl-mqw{margin:4px 0 8px}
.fl-ff{display:flex;align-items:center;gap:16px;padding:14px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--fl-ln);background:#fff}
.fl-ff .fl-lim{font-size:14px}
.fl-go{flex:1;height:50px;padding:0 12px;border:0;border-radius:14px;background:var(--marca);color:#fff;font:700 16px var(--fonte-titulo);cursor:pointer;transition:transform .18s}.fl-go:active{transform:scale(.97)}
.fl-fundo.saindo{opacity:0;transition:opacity .2s}.fl-fundo.saindo>*{transform:translateY(100%);transition:transform .2s ease-in}
html.fl-trava{overflow:hidden}
/* ---- a lista sai e entra num fade de 150 ms ---- */
#fl-lz{display:contents}
.fl-ent{animation:fl-ent .15s ease backwards}
@keyframes fl-ent{from{opacity:0}}
@keyframes fl-menu{from{opacity:0;transform:scale(.96)}}
@keyframes fl-sobe{from{transform:translateY(100%)}}
@keyframes fl-fundo{from{opacity:0}}
@keyframes fl-enc{from{opacity:.55}}
@keyframes fl-pulso{from{opacity:.45}to{opacity:1}}
/* ---- PC: uma linha só — busca à esquerda, um botão-select por filtro, "Limpar filtros" no fim ---- */
@media (min-width:1024px){
  .corpo{--gut:28px}
  .fl-lin{flex-wrap:nowrap}
  .fl-bsc{flex:0 0 280px}.fl-bsc input{height:40px;font-size:15px}
  .fl-sw{display:block}.fl-sw.fl-per{flex:none}.fl-sw.fl-mais{display:block}.fl-sw[hidden]{display:none}
  .fl-sel{height:40px;border-radius:10px}.fl-per .fl-sel{width:auto}.fl-pg{border-radius:10px}.fl-per .fl-sv{flex:none}
  .fl-fbt{display:none}
  .fl-lim.pc{display:block;margin-left:auto}.fl-lim.pc[hidden]{display:none}.fl-lim.cel{display:none}
  .fl-fim{margin:12px 0 0}
  .fl-bar.preso{margin-left:-28px;margin-right:-28px;padding:8px 28px 2px}
}
/* período agrupado no celular: setas mais estreitas e sem a setinha ▾ (o centro continua abrindo o calendário) pra "Novembro 2026" caber inteiro */
@media (max-width:1023px){.fl-pa{width:34px}.fl-pg .fl-sel{padding:0 6px;gap:6px}.fl-pg .fl-chev{display:none}.fl-pg .fl-sv{font-size:14px}}