:root{--bg:#f3f5f4;--card:#fff;--ink:#17211e;--mut:#66736e;--line:#dfe5e2;--acc:#0b6b57;--acc2:#e3f1ed;--red:#b3261e;--redbg:#fbeae8;--amb:#8a5a00;--ambbg:#fdf3dc;--ok:#1a7a3c}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
#app{max-width:520px;margin:0 auto;padding-bottom:132px}
header{background:var(--acc);color:#fff;padding:12px 14px}
.top{display:flex;justify-content:space-between;align-items:center;gap:8px}
h1{font-size:18px;margin:0}
.sub{font-size:13px;opacity:.88}
.role{border:1px solid rgba(255,255,255,.5);background:none;color:#fff;border-radius:8px;padding:6px 9px;font-size:13px}
.role2{border:1px solid var(--acc);background:none;color:var(--acc);border-radius:8px;padding:8px;font-size:14px}
.proto{background:var(--ambbg);color:var(--amb);font-size:13px;padding:7px 14px}
.sub2{display:flex;justify-content:space-between;align-items:center;padding:8px 14px 0;font-size:13px}
.link{border:0;background:none;color:var(--acc);font:600 14px system-ui,sans-serif;padding:4px 0}
.sinc{color:var(--ok)}
.sinc.pend{color:var(--amb);font-weight:600}
main{padding:12px}
.login{padding:48px 20px;display:grid;gap:12px}
.login h1{font-size:24px;color:var(--acc)}
.login p{margin:0}
details,.card{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:13px 14px;font-weight:650}
summary::-webkit-details-marker{display:none}
summary small{display:block;color:var(--mut);font-weight:400;font-size:13px}
.gnet{font-variant-numeric:tabular-nums;white-space:nowrap}
.m{border-top:1px solid var(--line);padding:9px 12px}
.mt{font-size:13px;font-weight:650;color:var(--mut);margin-bottom:5px}
.r{display:grid;grid-template-columns:48px 68px minmax(0,1fr) 78px;gap:5px;align-items:center;margin-bottom:5px;font-size:13px}
.r input{padding:9px 6px}
.r .ini,.r .res{font-variant-numeric:tabular-nums}
.r .ini{color:var(--mut)}
.r .res{text-align:right;font-weight:600}
.ini-b{border:0;background:none;padding:9px 0;color:var(--acc);font:13px system-ui,sans-serif;font-variant-numeric:tabular-nums;text-align:left;text-decoration:underline dotted}
.modal{position:fixed;inset:0;background:rgba(15,25,22,.55);display:flex;align-items:flex-end;justify-content:center;z-index:8}
.janela{background:#fff;width:100%;max-width:520px;border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));display:grid;gap:10px}
.janela h2{margin:0;font-size:18px}
.janela p{margin:0;color:var(--mut)}
.janela .al{border:0;border-radius:9px}
.janela label{display:grid;gap:4px;font-size:14px}
.janela b{font-size:18px;font-variant-numeric:tabular-nums}
.janela .go.sec{margin-top:0}
.mech{color:var(--mut)}
input,select{width:100%;min-width:0;border:1px solid #b9c5c0;border-radius:8px;padding:9px 8px;font:16px system-ui,sans-serif;font-variant-numeric:tabular-nums;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--acc);outline-offset:0;border-color:var(--acc)}
input.bad{border-color:var(--red);background:var(--redbg)}
input:disabled{background:#eef1f0;color:var(--ink);opacity:1;-webkit-text-fill-color:var(--ink)}
.f{display:grid;grid-template-columns:1fr 132px;gap:10px;align-items:center;padding:8px 14px;border-top:1px solid var(--line)}
.f.um{grid-template-columns:1fr}
.f.um .go{margin:0}
.f output,.f .ro{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.f small{display:block;color:var(--mut);font-size:12px}
.card h2{font-size:15px;margin:0;padding:12px 14px 6px}
.big{background:var(--acc2)}
.big output{font-size:18px;color:var(--acc)}
.neg{color:var(--red)!important}
.al{padding:10px 14px;border-top:1px solid var(--line);font-size:14px}
.al.e{background:var(--redbg);color:var(--red)}
.al.w{background:var(--ambbg);color:var(--amb)}
.al.k{color:var(--ok)}
.pessoa{border-top:1px solid var(--line);padding:11px 14px}
.pessoa small{color:var(--mut);font-size:13px;word-break:break-all}
.pt{display:flex;justify-content:space-between;align-items:center;gap:8px}
.selo{font-size:12px;font-weight:650;padding:2px 8px;border-radius:10px}
.selo.ok{background:var(--acc2);color:var(--acc)}
.selo.off{background:var(--redbg);color:var(--red)}
.pessoa dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:8px 0 10px;font-size:14px}
.pessoa dt{color:var(--mut)}
.pessoa dd{margin:0;text-align:right;font-weight:600}
.item{display:flex;justify-content:space-between;width:100%;border:0;border-top:1px solid var(--line);background:none;padding:13px 14px;font:15px system-ui,sans-serif;color:var(--ink)}
.go{width:100%;border:0;background:var(--acc);color:#fff;font:650 16px system-ui,sans-serif;padding:14px;border-radius:11px}
.go[disabled]{background:#9db3ac}
.go.sec{background:#fff;color:var(--acc);border:1px solid var(--acc);margin-top:8px}
.go.wa{background:#128c4a}
.tg{appearance:none;-webkit-appearance:none;justify-self:end;width:52px;height:30px;padding:0;border:0;border-radius:15px;background:#b9c5c0;position:relative}
.tg::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff}
.tg:checked{background:var(--acc)}
.tg:checked::after{left:25px}
.foot{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.foot>div{max-width:520px;margin:0 auto}
.bar{display:flex;justify-content:space-between;padding:8px 14px;font-size:14px;border-bottom:1px solid var(--line)}
.bar b{font-variant-numeric:tabular-nums}
nav{display:flex}
nav button{flex:1;border:0;background:none;padding:12px 4px;font:600 15px system-ui,sans-serif;color:var(--mut);border-top:3px solid transparent}
nav button.on{color:var(--acc);border-top-color:var(--acc)}
.badge{display:inline-block;min-width:19px;padding:0 5px;margin-left:4px;border-radius:10px;background:var(--red);color:#fff;font-size:12px;line-height:19px}
.badge[hidden]{display:none}
.toast{position:fixed;left:50%;bottom:136px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 14px;border-radius:9px;font-size:14px;width:max-content;max-width:90vw;z-index:9}
