/* DMF Hub — moldura comum da identidade 2: barra superior de tinta (sem barra lateral, a largura
   toda fica para os números), botões, controles, diálogos e avisos. */
*{box-sizing:border-box}
html,body{margin:0}
body.app{background:var(--bg);color:var(--ink);font:var(--fs-md)/1.5 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11";min-height:100vh;display:flex;flex-direction:column}
button,select,input{font:inherit;color:inherit}
.fld select{padding-right:32px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
.num{font-variant-numeric:tabular-nums lining-nums}
.muted{color:var(--muted)}

/* barra superior de tinta: marca · voltar às empresas · empresa · ferramentas */
.appbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;height:56px;padding:0 28px;background:var(--night);color:var(--night-ink)}
.ab-brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;flex:none}
.ab-brand{gap:10px}
.ab-mark{display:block;width:28px;height:28px;flex:none;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.ab-name{font:500 18px/1 var(--font);letter-spacing:-.025em}
.ab-name b{font-weight:700;color:var(--accent,#F2A541)}
.ab-tag{margin-left:6px;padding-left:12px;border-left:1px solid var(--night-3);color:var(--night-muted);font-size:var(--fs-sm);font-weight:500;white-space:nowrap}
.ab-back{display:inline-flex;align-items:center;gap:6px;color:var(--night-ink);text-decoration:none;font-size:var(--fs-sm);font-weight:500;padding:6px 10px;border-radius:var(--r-md);flex:none}
.ab-back:hover{background:var(--night-2);color:#fff}
.ab-co{font:600 15px/1.2 var(--display);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;padding-left:16px;border-left:1px solid var(--night-3)}
.ab-tabs{display:flex;gap:2px;margin-left:auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.ab-tabs::-webkit-scrollbar{display:none}
.ab-tabs a{position:relative;display:flex;align-items:center;height:56px;padding:0 12px;color:var(--night-ink);text-decoration:none;font-size:var(--fs-sm);font-weight:500;white-space:nowrap}
.ab-tabs a:hover{color:#fff}
.ab-tabs a[aria-current="page"]{color:#fff}
.ab-tabs a[aria-current="page"] .ab-ind{position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--mark);view-transition-name:sv-tab}
.ab-theme{margin-left:auto;flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-md);border:1px solid var(--night-3);background:transparent;color:var(--night-ink);cursor:pointer}
.ab-tabs+.ab-theme{margin-left:6px}
.ab-theme:hover{background:var(--night-2);color:#fff}

/* página com cabeçalho próprio (título + ações da ferramenta) */
.page{min-width:0;display:flex;flex-direction:column;flex:1}
.topline{position:sticky;top:56px;z-index:30;display:flex;align-items:center;gap:20px;min-height:60px;padding:10px 40px;background:var(--glass);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.topline h1.tl{margin:0;font:600 var(--fs-xl)/1.2 var(--display);letter-spacing:-.012em}
.period{color:var(--muted);font-size:var(--fs-sm)}
.top-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
main{padding:40px 40px 96px;max-width:1480px;width:100%;margin:0 auto}

/* botões e controles */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border:1px solid transparent;border-radius:var(--r-md);background:none;cursor:pointer;font-weight:500;font-size:var(--fs-sm);line-height:1;text-decoration:none;white-space:nowrap;transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease)}
.btn.primary{background:var(--solid);color:var(--on-solid);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(18,26,43,.2)}
.btn.primary:hover{background:var(--solid-hover)}
.btn.brand{background:var(--brand);color:var(--on-brand)}
.btn.brand:hover{background:var(--brand-hover)}
.btn.ghost{background:var(--surface);border-color:var(--line-strong);color:var(--ink);box-shadow:var(--shadow-1)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--faint)}
.btn.danger{background:var(--surface);border-color:var(--line-strong);color:var(--neg)}
.btn.danger:hover{background:var(--neg-soft);border-color:#E7B7B2}
.btn.small{height:30px;padding:0 12px;font-size:var(--fs-xs)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.icon-btn{width:34px;height:34px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:20px;line-height:1;color:var(--muted)}
.icon-btn:hover{color:var(--ink);border-color:var(--line-strong)}
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--surface-3);border-radius:var(--r-md)}
.seg button{border:0;background:none;height:28px;padding:0 11px;border-radius:6px;font-size:var(--fs-sm);font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-checked="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(18,26,43,.08),0 0 0 1px var(--line)}
.fld{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);font-weight:500;min-width:0}
.fld input,.fld select{height:40px;border:1px solid var(--line-strong);border-radius:var(--r-md);padding:0 12px;background-color:var(--surface);font-weight:400;font-size:var(--fs-md);width:100%;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.fld small{font-weight:400;color:var(--muted);font-size:var(--fs-xs)}
.fld .opt{font-weight:400;color:var(--muted);font-size:11px;margin-left:6px}

/* diálogo e aviso */
.dialog{border:0;border-radius:var(--r-xl);padding:0;max-width:540px;width:calc(100% - 32px);box-shadow:var(--shadow-pop);color:var(--ink)}
.dialog.wide{max-width:780px}
.dialog[open]{animation:pop .2s var(--ease)}
.dialog::backdrop{background:rgba(18,26,43,.38);backdrop-filter:blur(3px)}
.dialog form{padding:28px;display:flex;flex-direction:column;gap:14px}
.dialog h2{margin:0;font:600 var(--fs-xl)/1.2 var(--display);letter-spacing:-.01em}
.dialog p{margin:0}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin:8px -28px -28px;padding:16px 28px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--r-xl) var(--r-xl)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}}
.toast{position:fixed;right:24px;bottom:24px;background:var(--solid);color:var(--on-solid);padding:12px 16px;border-radius:var(--r-md);max-width:460px;z-index:80;font-size:var(--fs-sm);box-shadow:var(--shadow-pop);animation:pop .2s var(--ease)}
.toast.err{background:#7E1F18}

/* relatórios importados (lista com excluir) */
.rep-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rep-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.rep-list b{font-weight:600;font-size:var(--fs-sm)}
.rep-list span{color:var(--muted);font-size:var(--fs-xs)}
.rep-list .inuse{display:inline-block;margin-left:8px;font-size:11px;font-weight:600;color:var(--brand-ink);background:var(--brand-soft);padding:1px 8px;border-radius:var(--r-pill)}
.rep-empty{color:var(--muted);font-size:var(--fs-sm);padding:8px 0}

@media (max-width:1100px){.ab-co{display:none}}
@media (max-width:760px){
  .appbar{padding:0 12px;gap:8px}
  .ab-name,.ab-back span,.ab-tag{display:none}
  .topline{padding:10px 16px;gap:10px;flex-wrap:wrap}
  .top-actions{width:100%}
  .top-actions .btn{flex:1;min-width:0;padding:0 8px}
  main{padding:24px 16px 64px}
}
@media print{.appbar{display:none!important}.topline{position:static}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:760px){.ab-tabs{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}}

/* v1.9: busca geral ("onde está esse valor?") */
.ab-find{flex:none;display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;margin-left:10px;border-radius:var(--r-md);border:1px solid var(--night-3);background:transparent;color:var(--night-ink);font:500 var(--fs-sm) var(--font);cursor:pointer}
.ab-find:hover{background:var(--night-2);color:#fff}
.ab-find kbd{font:500 10.5px var(--font);padding:2px 5px;border-radius:4px;border:1px solid var(--night-3);color:var(--night-ink);opacity:.8}
.ab-tabs+.ab-find+.ab-theme{margin-left:6px}
.sv-find{position:fixed;inset:0;z-index:90;background:rgba(18,26,43,.38);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;padding:9vh 16px 16px}
.sv-find[hidden]{display:none}
.svf-panel{width:min(820px,100%);max-height:78vh;display:flex;flex-direction:column;background:var(--surface);color:var(--ink);border-radius:var(--r-xl,16px);box-shadow:var(--shadow-pop);overflow:hidden}
.svf-q{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);color:var(--muted)}
.svf-q input{flex:1;border:0;outline:0;background:transparent;color:var(--ink);font:400 18px var(--font)}
.svf-q kbd{font:500 11px var(--font);padding:2px 6px;border-radius:4px;border:1px solid var(--line-strong);color:var(--muted)}
.svf-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 18px 0}
.svf-chips:empty{display:none}
.svf-chips button{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:4px 10px;font:500 var(--fs-xs) var(--font);cursor:pointer}
.svf-chips button.on{background:var(--solid);color:var(--on-solid);border-color:var(--solid)}
.svf-chips b{font-weight:600;margin-left:3px}
.svf-list{overflow-y:auto;padding:8px 8px 12px}
.svf-row{display:grid;grid-template-columns:118px 84px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border-radius:var(--r-md);color:inherit;text-decoration:none}
a.svf-row:hover,a.svf-row:focus{background:var(--brand-soft);outline:none}
.svf-src{justify-self:start;font-size:var(--fs-xs);font-weight:600;padding:3px 8px;border-radius:999px;background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
.svf-src.s-extrato{background:var(--brand-soft);color:var(--brand)}
.svf-src.s-razao{background:#FFF3D1;color:#7A5300}
.svf-src.s-balancete{background:#E3F4EC;color:#16714A}
.svf-d{font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums}
.svf-t{min-width:0}
.svf-t b{display:block;font-weight:500;font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svf-t small{display:block;color:var(--muted);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svf-v{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.svf-v.neg{color:var(--neg,#C2362B)}
.svf-hint{margin:14px 10px;color:var(--muted);font-size:var(--fs-sm);line-height:1.6}
body.svf-open{overflow:hidden}
@media screen{:root[data-theme="dark"] .svf-src.s-razao{background:#3A3016;color:#F2CF6B}:root[data-theme="dark"] .svf-src.s-balancete{background:#163A2A;color:#7BD8A8}}
@media (max-width:900px){.ab-find span,.ab-find kbd{display:none}.svf-row{grid-template-columns:minmax(0,1fr) auto}.svf-src,.svf-d{display:none}}

/* ---------------------------------------------------------------- movimento (v1.9.4)
   Referências: IBM Carbon (movimento "produtivo": 70–240 ms, curvas de entrada/saída) e Windows Fluent
   (83/167/250 ms; entra desacelerando, sai acelerando). Telas de trabalho: movimento curto e discreto. */
:root{--dur-1:90ms;--dur-2:160ms;--dur-3:240ms;
  --ease-std:cubic-bezier(.2,0,.38,.9);--ease-in:cubic-bezier(0,0,.38,.9);--ease-out:cubic-bezier(.2,0,1,.9)}
/* a barra superior é desenhada antes da primeira pintura (nav.js logo após #appbar); reserva a altura por segurança */
#appbar:empty{display:block;height:56px;background:var(--night)}
/* troca de ferramenta com transição do navegador (opcional, theme.js liga com ?transicao=1): a barra fica
   parada, o sublinhado amarelo desliza até a aba nova e só o conteúdo esmaece. Custa ~0,2 s na troca. */
.appbar{view-transition-name:sv-appbar}
::view-transition-group(sv-appbar){animation:none}
::view-transition-old(sv-appbar){display:none}
::view-transition-new(sv-appbar){animation:none}
::view-transition-group(sv-tab){animation-duration:var(--dur-3);animation-timing-function:var(--ease-std)}
::view-transition-old(root){animation:var(--dur-1) var(--ease-out) both sv-sai}
::view-transition-new(root){animation:var(--dur-2) var(--ease-in) both sv-entra}
@keyframes sv-sai{to{opacity:0}}
@keyframes sv-entra{from{opacity:0}}
/* claro/escuro: esmaecimento simples de toda a tela */
html.sv-theme-swap::view-transition-old(root){animation:var(--dur-3) var(--ease-std) both sv-sai}
html.sv-theme-swap::view-transition-new(root){animation:var(--dur-3) var(--ease-std) both sv-entra}
/* revelação: o conteúdo só aparece com os dados prontos (theme.js), sem empurrar nada na frente do usuário */
html.sv-wait main{visibility:hidden}
html.sv-in main{animation:sv-revela var(--dur-2) var(--ease-in) both}
@keyframes sv-revela{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html.sv-wait main{visibility:visible}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media print{html.sv-wait main{visibility:visible}}

/* v1.9.10 — menu "Mais" para as abas que não cabem */
.ab-tabs a[hidden]{display:none}
.ab-more{position:relative;flex:none}
.ab-more[hidden]{display:none}
.ab-more-b{display:flex;align-items:center;gap:4px;height:56px;padding:0 12px;background:none;border:0;color:var(--night-ink);font-family:inherit;font-size:var(--fs-sm);font-weight:500;line-height:1;cursor:pointer}
.ab-more-b:hover,.ab-more-b[aria-expanded="true"]{color:#fff}
.ab-more-m{position:absolute;right:0;top:calc(100% - 4px);min-width:200px;padding:6px;background:var(--night-2,#13303b);border:1px solid var(--night-3);border-radius:var(--r-md,10px);box-shadow:var(--shadow-pop,0 12px 32px rgba(0,0,0,.3));z-index:60;display:grid}
.ab-more-m[hidden]{display:none}
.ab-more-m a{padding:9px 12px;border-radius:8px;color:var(--night-ink);text-decoration:none;font-size:var(--fs-sm);white-space:nowrap}
.ab-more-m a:hover{background:var(--night-3);color:#fff}

/* v2.0: barra estável. As abas começam no mesmo ponto em todas as telas de empresa (o nome da
   empresa tem largura fixa e corta com reticências; o nome completo fica no title) e alinham à
   esquerda, perto do que o olho lê primeiro. Nas telas de empresa, a marca fica só no símbolo. */
.ab-tabs{margin-left:16px;margin-right:auto}
.ab-empresa .ab-name{display:none}
.ab-empresa .ab-co{flex:0 0 172px;max-width:172px}

/* v2.0: um sistema de botões em todas as telas. Três papéis: principal (preenchido, uma ação por
   área), secundário (contornado) e texto (link). Duas alturas: 34 px e 30 px em listas e barras.
   Dentro de uma tabela de lançamentos, a ação da linha é secundária: só a ação da tela é preenchida. */
.btn.link{height:auto;padding:4px 6px;border:0;background:none;color:var(--brand);font-weight:500;box-shadow:none}
.btn.link:hover{background:var(--surface-3)}
table .btn.primary.small{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:none}
table .btn.primary.small:hover{background:var(--surface-2);border-color:var(--muted)}

/* v2.0: celular e zoom de 200%: nada passa da largura da tela. O símbolo já leva à lista de empresas,
   então o "Empresas" escrito sai abaixo de 480 px e os botões da barra ficam mais juntos. */
@media (max-width:480px){.ab-empresa .ab-back{display:none}.vera-btn.na-barra{margin-left:2px}.vera-btn.na-barra+.ab-find,.ab-find{margin-left:4px}.appbar{gap:6px}}
.top-actions select{max-width:100%;min-width:0}
@media (max-width:760px){.top-actions{flex-wrap:wrap}.top-actions .btn{flex:1 1 auto;min-width:max-content}}
.btn.link:focus-visible{box-shadow:var(--ring)}
/* v2.0.0: 9 ferramentas cabem a 1.440 px (a aba Apuração entrou) */
.ab-empresa .ab-tabs a{padding:0 9px}
.ab-empresa .ab-tabs a[aria-current="page"] .ab-ind{left:9px;right:9px}