.num{font-variant-numeric:tabular-nums}
/* estrutura */
.side{display:none}
.main{max-width:1080px;margin:0 auto;padding:0 16px 110px;min-height:100vh}
.bar{display:flex;align-items:center;gap:var(--sp-4);padding:14px 0;position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);z-index:6}
.brand{display:flex;align-items:center;gap:var(--sp-3);font:800 var(--fs-lg) var(--font-display);letter-spacing:-.02em}
.brand .lg{width:30px;height:30px;border-radius:var(--r-sm);background:var(--ink);color:var(--bg);display:grid;place-items:center;font:800 var(--fs-sm) var(--font-display)}
.brand em{font-style:normal;color:var(--brand)}
.bar .sp{flex:1}
.seg{display:inline-grid;grid-auto-flow:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:3px;gap:var(--sp-0)}
.seg button{padding:7px 12px;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;color:var(--muted);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.iconbtn{width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);background:var(--brand);color:var(--brand-fg);font-weight:700;border-radius:var(--r-md);padding:11px 16px;white-space:nowrap}
.btn.sm{padding:7px 12px;font-size:var(--fs-sm);border-radius:var(--r-sm)}
.btn.ghost{background:var(--brand-soft);color:var(--brand)}
.btn.line{background:var(--surface);border:1px solid var(--line);color:var(--fg)}
.btn.danger{background:var(--neg-soft);color:var(--neg)}
.btn.block{width:100%}.btn:disabled{opacity:.5}
.only-d{display:none}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.g3{grid-template-columns:1fr}}
@media(max-width:520px){.bar{gap:var(--sp-2)}.seg button{padding:6px 8px;font-size:var(--fs-sm)}.iconbtn{width:34px;height:34px}.bar .brand img{width:32px!important;height:30px!important}}
.bottom{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));z-index:8}
.bottom div{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);align-items:end}
.bottom button{display:flex;flex-direction:column;align-items:center;gap:var(--sp-0);padding:6px 0;font-size:var(--fs-2xs);font-weight:600;color:var(--muted)}
.bottom button[aria-current="page"]{color:var(--brand)}
.bottom .add{margin-top:-22px}.bottom .add i{width:54px;height:54px;border-radius:50%;background:var(--brand);color:var(--brand-fg);display:grid;place-items:center;box-shadow:0 8px 22px rgba(91,18,244,.4);font-style:normal}
@media(min-width:900px){
  .side{display:flex;flex-direction:column;gap:var(--sp-1);position:fixed;inset:0 auto 0 0;width:244px;background:var(--surface);border-right:1px solid var(--line);padding:22px 14px;z-index:7}
  .side .brand{padding:0 8px 22px;font-size:var(--fs-xl)}
  .side button.nv{display:flex;align-items:center;gap:var(--sp-5);padding:10px 12px;border-radius:var(--r-md);font-weight:600;color:var(--muted)}
  .side button.nv[aria-current="page"]{background:var(--brand-soft);color:var(--brand)}
  .side button.nv:hover{background:var(--surface2)}
  .side .grow{flex:1}
  .main{margin-left:244px;max-width:none;padding:0 32px 60px}
  .main>*{max-width:1080px}
  .bottom{display:none}.only-d{display:inline-flex}.only-m{display:none!important}
  .bar{padding:18px 0}
}
/* conteúdo */
.ph{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;margin:6px 0 16px}
.ph h1{font:800 var(--fs-3xl)/1.15 var(--font-display);letter-spacing:-.03em}
.ph .sub{color:var(--muted);font-size:var(--fs-md);margin-top:4px}
.grid{display:grid;gap:var(--sp-6)}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl);padding:18px;box-shadow:var(--shadow);min-width:0}
.card h2,.insh2,.cp-grp>b{font:var(--title-block);letter-spacing:var(--title-block-ls)}
.card .hd{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-bottom:12px}
.link{color:var(--brand);font-weight:600;font-size:var(--fs-sm)}
.lbl{font-size:var(--fs-sm);color:var(--muted);font-weight:500}
.big{font:800 var(--fs-4xl)/1.1 var(--font-display);letter-spacing:-.03em;margin:6px 0 4px;overflow-wrap:anywhere}
.mid{font:700 var(--fs-2xl2)/1.1 var(--font-display);letter-spacing:-.02em;margin:6px 0 4px;overflow-wrap:anywhere}
.hint{font-size:var(--fs-sm);color:var(--muted)}
.pos{color:var(--pos)}.neg{color:var(--neg)}.warn{color:var(--warn)}
.hero{background:linear-gradient(140deg,var(--hero-a),var(--hero-b));color:var(--white);border:0;position:relative;overflow:hidden}
.hero .lbl,.hero .hint{color:rgba(255,255,255,.78)}
.hero .big{font-size:var(--fs-6xl)}
.pill{display:inline-block;font-size:var(--fs-xs);font-weight:700;padding:2px 9px;border-radius:var(--r-pill);white-space:nowrap}
.pill.ok{background:var(--pos-soft);color:var(--pos)}.pill.pend{background:var(--warn-soft);color:var(--warn)}
.pill.late{background:var(--neg-soft);color:var(--neg)}.pill.sched{background:var(--brand-soft);color:var(--brand)}
.pill.ctx{background:var(--surface2);color:var(--muted)}
.chips{display:flex;gap:var(--sp-3);overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.chip{flex:none;padding:7px 14px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);font-size:var(--fs-md);font-weight:600;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.rowi{display:flex;align-items:center;gap:var(--sp-5);padding:12px 0}
.rowi+.rowi{border-top:1px solid var(--line)}
.rowi .main2{flex:1;min-width:0;display:flex;align-items:center;gap:var(--sp-5);text-align:left}
.ico{flex:none;width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--surface2);color:var(--fg)}
.ico.in{background:var(--pos-soft);color:var(--pos)}.ico.late{background:var(--neg-soft);color:var(--neg)}.ico.pend{background:var(--warn-soft);color:var(--warn)}.ico.tr{background:var(--brand-soft);color:var(--brand)}
.t{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s{font-size:var(--fs-sm);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx{min-width:0}
.rs{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-1);flex:none;text-align:right}
.v{font:700 var(--fs-base) var(--font-display);white-space:nowrap}
.v.in{color:var(--pos)}
.day{font:700 var(--fs-xs) var(--font-body);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:18px 4px 8px;display:flex;justify-content:space-between}
.empty{text-align:center;color:var(--muted);padding:26px 10px}
.empty b{display:block;color:var(--fg);font:700 var(--fs-lg) var(--font-display);margin-bottom:6px}
.search{display:flex;align-items:center;gap:var(--sp-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:0 12px;color:var(--muted);flex:1;min-width:200px}
.search input{flex:1;min-width:0;border:0;background:none;padding:11px 0;outline:none;color:var(--fg)}
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:12px}
.filters select,.filters input[type=date]{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;min-width:0;max-width:100%}
.monthnav{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:3px}
.monthnav b{font:700 var(--fs-md) var(--font-display);text-transform:capitalize;min-width:120px;text-align:center}
.monthnav .iconbtn{border:0;width:32px;height:32px}
.bar2{height:8px;border-radius:var(--r-pill);background:var(--surface2);overflow:hidden;display:flex}
.bar2 i{display:block;height:100%}
.legend{display:flex;flex-direction:column;gap:var(--sp-2)}
.legend button{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:5px 0;font-size:var(--fs-md)}
.legend i{width:10px;height:10px;border-radius:var(--r-2xs);flex:none}
.legend .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donutw{display:grid;grid-template-columns:150px 1fr;gap:var(--sp-7);align-items:center}
@media(max-width:420px){.donutw{grid-template-columns:1fr;justify-items:center}.legend{width:100%}}
.kv{display:flex;justify-content:space-between;gap:var(--sp-4);padding:8px 0;border-top:1px solid var(--line);font-size:var(--fs-md)}
.kv:first-of-type{border-top:0}.kv b{font-weight:700}
.insight{display:flex;gap:var(--sp-4);padding:10px 0;font-size:var(--fs-md)}.insight+.insight{border-top:1px solid var(--line)}
.insight i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--brand);margin-top:7px}
.acc{border-left:0;position:relative}
.acc .dot{width:12px;height:12px;border-radius:50%;flex:none}
.acts{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:12px}
.banner{background:var(--brand-soft);color:var(--brand);border-radius:var(--r-lg);padding:12px 14px;font-size:var(--fs-md);font-weight:600;display:flex;gap:var(--sp-4);align-items:center;justify-content:space-between;flex-wrap:wrap}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-1)}
.cal .h{font-size:var(--fs-xs);color:var(--muted);font-weight:700;text-align:center;padding:4px 0;text-transform:uppercase}
.cal button.d{aspect-ratio:1/1.05;border-radius:var(--r-md);background:var(--surface2);padding:6px;display:flex;flex-direction:column;justify-content:space-between;font-weight:700;font-size:var(--fs-sm);min-width:0}
.cal button.d.off{background:transparent;pointer-events:none}
.cal button.d.today{outline:2px solid var(--brand)}
.cal .dots{display:flex;gap:var(--sp-0);flex-wrap:wrap}.cal .dots i{width:7px;height:7px;border-radius:50%}
.scrim{position:fixed;inset:0;background:rgba(8,4,20,.55);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);width:100%;max-width:560px;border-radius:var(--r-3xl) 24px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom,0px));max-height:92vh;overflow-y:auto}
@media(min-width:900px){.scrim{align-items:center}.sheet{border-radius:var(--r-3xl)}.sheet.side-r{max-width:440px}}
.sheet h3{font:800 var(--fs-2xl) var(--font-display);letter-spacing:-.02em;margin-bottom:14px}
.choice{display:grid;gap:var(--sp-4)}
.choice button{display:flex;align-items:center;gap:var(--sp-6);padding:16px;border-radius:var(--r-xl);background:var(--surface2);border:1px solid var(--line);font-weight:700}
.choice button small{display:block;color:var(--muted);font-weight:500;font-size:var(--fs-sm)}
.choice .ico{width:46px;height:46px}
.f{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:12px;min-width:0}
.f label{font-size:var(--fs-sm);color:var(--muted);font-weight:600}
.f input,.f select,.f textarea{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-md);padding:12px;width:100%;min-width:0}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.valor{font:800 var(--fs-4xl) var(--font-display)!important;letter-spacing:-.02em}
.sw{display:flex;align-items:center;justify-content:space-between;padding:4px 0 14px;gap:var(--sp-4)}
.sw button{width:50px;height:30px;border-radius:var(--r-pill);background:var(--line);position:relative;transition:background .15s;flex:none}
.sw button::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--white);transition:transform .15s}
.sw button[aria-checked="true"]{background:var(--pos)}.sw button[aria-checked="true"]::after{transform:translateX(20px)}
.btns{display:flex;gap:var(--sp-4);flex-wrap:wrap}.btns .grow{flex:1}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:var(--r-md);z-index:40;font-weight:600;max-width:90vw}
@media(min-width:900px){.toast{bottom:28px}}
.exp{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.exp button{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:14px 6px;border-radius:var(--r-lg);background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:var(--fs-md);text-align:center}
.exp button small{font-weight:500;color:var(--muted);font-size:var(--fs-xs)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-4)}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:14px}
.kpi .mid{font-size:var(--fs-xl)}
.chk{display:flex;gap:var(--sp-4);flex-wrap:wrap}.chk label{display:flex;align-items:center;gap:var(--sp-2);background:var(--surface2);border-radius:var(--r-sm);padding:8px 12px;font-weight:600;font-size:var(--fs-md)}
table.mini{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
table.mini td{padding:8px 0;border-top:1px solid var(--line)}table.mini td:last-child{text-align:right;font-weight:700}
svg text{fill:var(--muted);font:11px var(--font-body)}
.note{font-size:var(--fs-sm);color:var(--muted)}

/* topo estilo app de banco (celular) + tela de login */
.nutop{background:linear-gradient(140deg,var(--hero-a),var(--hero-b));color:var(--white);border-radius:var(--r-3xl);padding:20px;margin-bottom:14px}
.nutop .hi{font:700 var(--fs-base) var(--font-display);opacity:.95}.nutop .lbl,.nutop .hint{color:rgba(255,255,255,.78)}
.nutop .big{font:800 var(--fs-6xl)/1.1 var(--font-display);letter-spacing:-.03em;margin:8px 0 4px;overflow-wrap:anywhere}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin:2px 0 16px}
.quick button{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:600;text-align:center}
.quick i{width:56px;height:56px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--brand);font-style:normal;box-shadow:var(--shadow)}
.badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:var(--r-pill);background:var(--neg);color:var(--white);font-size:var(--fs-2xs);font-weight:800;display:grid;place-items:center;padding:0 4px}
.iconbtn{position:relative}
.bar .brand img{flex:none}
#view{padding-top:6px}
@media(max-width:899px){.bar .only-d-icon{display:none}}
@media(max-width:899px){
  .bar{background:var(--topbg);margin:0 -16px;padding:12px 16px}
  .bar .seg{background:rgba(255,255,255,.14);border-color:transparent}
  .bar .seg button{color:rgba(255,255,255,.82)}
  .bar .seg button[aria-pressed="true"]{background:var(--white);color:var(--brand-deep)}
  .bar .iconbtn{background:rgba(255,255,255,.14);border-color:transparent;color:var(--white)}
  .nutop{margin:0 -16px 14px;border-radius:0 0 28px 28px;padding:6px 20px 24px}
}
.quick{max-width:100%}
@media(min-width:900px){.quick{grid-template-columns:repeat(4,96px);gap:var(--sp-9)}}
.locked .main,.locked .side,.locked .bottom{display:none!important}
#lock{display:none}
.locked #lock{display:grid;min-height:100vh;grid-template-columns:1fr;background:linear-gradient(150deg,var(--hero-a),var(--hero-b));color:var(--white);place-items:center;padding:24px 16px}
.lk{width:100%;max-width:420px;display:flex;flex-direction:column;gap:var(--sp-7)}
.lk .logo{background:var(--white);border-radius:var(--r-2xl);padding:10px;align-self:center;width:170px}
.lk .logo img{width:100%;display:block}
.lk h1{font:800 var(--fs-3xl2)/1.15 var(--font-display);letter-spacing:-.03em;margin:0;text-align:center}
.lk p.sub{margin:0;text-align:center;opacity:.85}
.lk .box{background:var(--surface);color:var(--fg);border-radius:var(--r-3xl);padding:20px;box-shadow:0 20px 50px rgba(10,0,40,.35)}
.lk .link{background:none}
.lk .err{color:var(--neg);font-weight:600;font-size:var(--fs-md);min-height:18px;margin:-4px 0 8px}
.code{font:800 var(--fs-2xl2)/1.3 var(--font-display);letter-spacing:.08em;text-align:center;background:var(--surface2);border-radius:var(--r-lg);padding:16px;margin:10px 0;user-select:all}
.pwrow{display:flex;gap:var(--sp-3);align-items:center}.pwrow input{flex:1}
.danger-z{border:1px solid var(--neg);border-radius:var(--r-2xl);padding:18px;background:var(--surface)}
.radio{display:flex;gap:var(--sp-4);align-items:flex-start;padding:10px 12px;background:var(--surface2);border-radius:var(--r-md);margin-bottom:8px;font-weight:600}
.radio small{display:block;color:var(--muted);font-weight:500}
@media(min-width:900px){.locked #lock{grid-template-columns:1fr 1fr;gap:40px;padding:40px}.lk{max-width:440px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* o atributo hidden precisa vencer .f{display:flex} etc. */
[hidden]{display:none!important}
/* campos calculados (somente leitura) da recorrência */
input.ro{background:var(--surface2);color:var(--muted);cursor:default;font-weight:600}
.f .auto{font-weight:500;color:var(--muted);font-size:var(--fs-xs);margin-left:4px}
#frecHint.recerr{color:var(--neg,#d33)}