/* Layout: barra lateral em azul profundo (menu por papel) + área de trabalho neutra.
   Página de empresa ganha faixa com logotipo e a cor da empresa; o resto fica nas cores do Foco.GB.
   Tokens do Design System Foco.GB v1.0. */
:root{
  --azul:#12278F; --azul-2:#1C36A8; --azul-soft:#E7EBF8; --profundo:#0B1A63; --ciano:#22C3F0; --ciano-txt:#0E6E8C;
  --ground:#F4F6FB; --surface:#FFFFFF; --surface-2:#EEF1F7; --surface-3:#DDE3F0;
  --ink:#101828; --ink-2:#5A6785; --ink-3:#8892A8; --line:#DDE3F0; --line-strong:#C3CCE2;
  --on-azul:#FFFFFF; --side-ink:#A9B4CC;
  --pend:#A15C00; --pend-bg:#FBF0DC; --apr:#0E6E8C; --apr-bg:#EAF7FD;
  --pago:#1D7A46; --pago-bg:#E4F3EA; --div:#C62828; --div-bg:#FDECEC;
  --serie-a:#2C46B8; --serie-b:#1D7A46;
  --e-mcm:#FFB240; --e-hoab:#C3DC2C; --e-amalab:#F07068; --e-clube:#36D1FF; --sobre-e:#101828;
  --s-mcm:#FFB240; --s-hoab:#5E7A00; --s-amalab:#F07068; --s-clube:#36D1FF;
  --shadow:0 1px 2px rgba(11,26,99,.06),0 8px 24px rgba(11,26,99,.08);
  --f-tit:"Poppins","Inter",system-ui,sans-serif; --f-txt:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --azul:#7E9CEE; --azul-2:#9AB2F3; --azul-soft:#1A2646; --ciano:#4FD3F5; --ciano-txt:#4FBDD8;
  --ground:#080D1A; --surface:#111A2E; --surface-2:#18233B; --surface-3:#24314D;
  --ink:#E9EDF6; --ink-2:#A9B4CC; --ink-3:#7E8BA5; --line:#223050; --line-strong:#384766;
  --on-azul:#080D1A;
  --pend:#DCA33F; --pend-bg:#2D2412; --apr:#4FBDD8; --apr-bg:#10242C;
  --pago:#5CC493; --pago-bg:#12291E; --div:#EE8578; --div-bg:#2D1917;
  --serie-a:#5A80DE; --serie-b:#2AA37B; --s-hoab:#6F8E0A;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.35); color-scheme:dark}}
:root[data-theme="dark"]{
  --azul:#7E9CEE; --azul-2:#9AB2F3; --azul-soft:#1A2646; --ciano:#4FD3F5; --ciano-txt:#4FBDD8;
  --ground:#080D1A; --surface:#111A2E; --surface-2:#18233B; --surface-3:#24314D;
  --ink:#E9EDF6; --ink-2:#A9B4CC; --ink-3:#7E8BA5; --line:#223050; --line-strong:#384766;
  --on-azul:#080D1A;
  --pend:#DCA33F; --pend-bg:#2D2412; --apr:#4FBDD8; --apr-bg:#10242C;
  --pago:#5CC493; --pago-bg:#12291E; --div:#EE8578; --div-bg:#2D1917;
  --serie-a:#5A80DE; --serie-b:#2AA37B; --s-hoab:#6F8E0A;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.35); color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-txt);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:6px}
.num,td.v,.afb{border:0;cursor:pointer;font:inherit}
.cov td.cv{text-align:center;padding:6px 4px;font-size:12px;font-variant-numeric:tabular-nums}.cov td.cv svg{width:14px;height:14px;vertical-align:-2px;margin-right:2px}
.cov td.ok{color:var(--pago)}.cov td.dv{color:var(--div)}.cov td.vazio{color:var(--ink-3)}
.imp{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:0 18px 14px}.imp label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-2)}
.imp select{font:inherit;padding:7px 10px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);color:var(--ink)}
.imp .up{flex-direction:row;align-items:center;gap:8px;border:1px dashed var(--line-strong);border-radius:9px;padding:8px 12px;cursor:pointer;color:var(--azul);font-weight:600}.imp .up svg{width:16px;height:16px}.imp .up input{position:absolute;width:1px;height:1px;opacity:0}
.prev{margin:0 18px 16px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;background:var(--surface-2)}
.sempre{display:flex;align-items:center;gap:6px;white-space:nowrap}
.mono{font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--f-tit);letter-spacing:-.02em;text-wrap:balance;margin:0}

.app{display:flex;height:100%}
/* ---------- barra lateral ---------- */
.side{width:244px;flex:none;background:#0B1A63;color:#fff;display:flex;flex-direction:column;min-height:0}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.brand svg{width:30px;height:30px;flex:none}
.brand b{font-family:var(--f-tit);font-size:21px;font-weight:700;letter-spacing:-.03em}
.brand b i{font-style:normal;color:#22C3F0}
.brand small{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#A9B4CC;margin-top:2px}
.nav{flex:1 1 auto;overflow-y:auto;padding:6px 10px 12px;display:flex;flex-direction:column;gap:2px}
.nav .grp{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7E8BA5;padding:14px 10px 6px}
.nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;color:#C9D2E6;padding:8px 10px;border-radius:9px;font-size:13.5px}
.nav button svg{width:18px;height:18px;flex:none;opacity:.85}
.nav button:hover{background:rgba(255,255,255,.08);color:#fff}
.nav button[aria-current="page"]{background:#12278F;color:#fff;font-weight:600}
.nav button .cnt{margin-left:auto;font-size:11px;font-weight:700;min-width:20px;text-align:center;padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff}
.nav button .cnt.hot{background:#C62828}
.who{border-top:1px solid rgba(255,255,255,.12);padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.who label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7E8BA5}
.who select{width:100%;background:#12278F;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:7px 8px;font-size:13px}
.who .papel{font-size:11.5px;color:#A9B4CC;line-height:1.4}

/* ---------- área principal ---------- */
.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;min-height:0}
.demo{background:var(--pend-bg);color:var(--pend);font-size:12.5px;padding:7px max(16px,env(safe-area-inset-right,0px)) 7px max(16px,env(safe-area-inset-left,0px));display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.demo b{font-weight:700}
.demo .sp{flex:1 1 auto}
.demo button{border:1px solid currentColor;background:none;border-radius:7px;padding:3px 10px;font-size:12px;font-weight:600;color:inherit}
.top{background:var(--surface);border-bottom:1px solid var(--line);padding:12px max(20px,env(safe-area-inset-right,0px)) 12px max(20px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.top .menu{display:none;border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;width:36px;height:36px;align-items:center;justify-content:center}
.top h1{font-size:20px;font-weight:600}
.top .sub{font-size:12.5px;color:var(--ink-2)}
.top .grow{flex:1 1 auto}
.emp{display:flex;gap:4px;background:var(--surface-2);padding:3px;border-radius:10px;flex-wrap:wrap}
.emp button{border:0;background:none;padding:6px 11px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.emp button i{width:8px;height:8px;border-radius:50%;display:inline-block}
.emp button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.emp button:disabled{opacity:.4;cursor:not-allowed}
.scroll{flex:1 1 auto;overflow-y:auto;min-height:0}
.wrap{max-width:1240px;margin:0 auto;padding:20px max(20px,env(safe-area-inset-right,0px)) 40px max(20px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:18px}

/* faixa da empresa (manual: logotipo + cor da empresa só no cabeçalho e nos filetes) */
.faixa{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.faixa .in{display:flex;align-items:center;gap:18px;padding:14px 18px;flex-wrap:wrap}
.faixa img{height:64px;width:auto;border-radius:8px;display:block;max-width:100%}
.faixa .t{flex:1 1 220px;min-width:0}
.faixa .t b{display:block;font-family:var(--f-tit);font-size:17px;font-weight:600}
.faixa .t span{font-size:12.5px;color:var(--ink-2)}
.faixa .strip{height:8px}

/* ---------- blocos ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.card.pad{padding:16px 18px}
.chead{display:flex;align-items:baseline;gap:10px;padding:14px 18px 10px;flex-wrap:wrap}
.chead h2{font-size:15px;font-weight:600}
.chead .hint{font-size:12px;color:var(--ink-2)}
.chead .grow{flex:1 1 auto}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi .l{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.kpi .v{font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .s{font-size:12px;color:var(--ink-2)}
.kpi.fil{border-left:6px solid var(--emp,var(--line))}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:18px}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:var(--surface-2);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.v,th.v{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.sm{font-size:12px;color:var(--ink-2)}
tbody tr:hover{background:var(--surface-2)}
tr.sel{background:var(--azul-soft)!important}
tr.tot td{font-weight:700;background:var(--surface-2)}
.fluxo{display:flex;align-items:stretch;gap:6px;padding:0 18px 12px;flex-wrap:wrap}
.fluxo .et{flex:1;min-width:110px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--ink-2)}
.fluxo .et .n{font-size:22px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.fluxo .et.fim{background:var(--surface-2)}.fluxo .et.fim .n svg{width:22px;height:22px;color:var(--azul)}
.fluxo .seta{display:flex;align-items:center;color:var(--ink-3)}
.fluxo .seta svg{width:16px;height:16px;flex:none}@media (max-width:640px){.fluxo .seta{display:none}}
.canais{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 14px}
.cn{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}
.cn.on{background:var(--azul);border-color:var(--azul);color:var(--on-azul);font-weight:600}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:11.5px}
tr.sub td{padding-top:6px;padding-bottom:6px;background:transparent}tr.sub td:first-child{padding-left:34px}
.cn-t{margin-top:2px}
tr.grp td{background:var(--surface-2);border-top:2px solid var(--line-strong);padding-top:10px}
tr.sub td{font-weight:600}
tr.elim td{color:var(--ink-2);font-style:italic}
.empty{padding:28px;text-align:center;color:var(--ink-2)}

/* estados: cor + ícone + nome, sempre juntos */
.st{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px 3px 7px;border-radius:999px;white-space:nowrap}
.st svg{width:13px;height:13px;flex:none}
.st.pend{background:var(--pend-bg);color:var(--pend)}
.st.apr{background:var(--apr-bg);color:var(--apr)}
.st.pago{background:var(--pago-bg);color:var(--pago)}
.st.div{background:var(--div-bg);color:var(--div)}
.st.neu{background:var(--surface-2);color:var(--ink-2)}
.etq{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);white-space:nowrap}
.etq i{width:8px;height:8px;border-radius:2px;display:inline-block;flex:none}
.flag{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--div-bg);color:var(--div);white-space:nowrap}
.flag.w{background:var(--pend-bg);color:var(--pend)}
.flag.i{background:var(--surface-2);color:var(--ink-2)}
.adef{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:5px;border:1px dashed var(--pend);color:var(--pend);white-space:nowrap}

.btn{border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;padding:7px 13px;font-size:13px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn.pri{background:var(--azul);border-color:var(--azul);color:var(--on-azul);font-weight:600}
.btn.pri:hover{filter:brightness(1.08)}
.btn.sm{padding:4px 10px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 14px;overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 10px 9px;font-size:13px;font-weight:600;color:var(--ink-2);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--azul);border-bottom-color:var(--azul)}
.fbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:0 18px 12px}
.fbar select,.fbar input{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:6px 8px;font-size:12.5px}
.note{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.regra{display:flex;gap:10px;align-items:flex-start;background:var(--azul-soft);border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--ink);line-height:1.5}
.regra svg{width:16px;height:16px;flex:none;color:var(--azul);margin-top:2px}
.alert{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;border-top:1px solid var(--line)}
.alert:first-child{border-top:0}
.alert .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none}
.alert .ic svg{width:16px;height:16px}
.alert .ic.d{background:var(--div-bg);color:var(--div)}
.alert .ic.p{background:var(--pend-bg);color:var(--pend)}
.alert .ic.a{background:var(--apr-bg);color:var(--apr)}
.alert .tx{flex:1 1 auto;min-width:0}
.alert .tx b{display:block;font-size:13.5px;font-weight:600}
.alert .tx span{font-size:12.5px;color:var(--ink-2)}
.alert .val{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px;padding:0 18px 16px}
.meta .m{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.meta .m .h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px;color:var(--ink-2)}
.meta .m .h b{font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.bar{height:8px;border-radius:4px;background:var(--surface-3);position:relative;overflow:visible}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--ink-2)}
.bar .alvo{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink)}

/* kanban de compras */
.kan{display:grid;grid-template-columns:repeat(5,minmax(196px,1fr));gap:12px;overflow-x:auto;padding:0 18px 18px}
.col{background:var(--surface-2);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.col h3{font-family:var(--f-txt);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);display:flex;justify-content:space-between;padding:2px 4px}
.sol{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;text-align:left;width:100%}
.sol:hover{border-color:var(--line-strong)}
.sol b{font-size:13px;font-weight:600}
.sol .r{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-2);flex-wrap:wrap}

/* gaveta de detalhe */
.dr-bg{position:fixed;inset:0;background:rgba(8,13,26,.45);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--surface);z-index:41;display:flex;flex-direction:column;box-shadow:var(--shadow);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px)}
.drawer .dh{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer .dh h2{font-size:17px;font-weight:600;flex:1 1 auto}
.drawer .db{flex:1 1 auto;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.drawer .df{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;background:var(--surface-2)}
.x{border:0;background:none;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--ink-2)}
.x:hover{background:var(--surface-2)}
dl.kv{display:grid;grid-template-columns:150px 1fr;gap:7px 12px;margin:0;font-size:13px}
dl.kv dt{color:var(--ink-2)}
dl.kv dd{margin:0;min-width:0}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .full{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--ink-2)}
.form input,.form select,.form textarea{border:1px solid var(--line-strong);background:var(--ground);border-radius:8px;padding:8px 10px;font-size:13px;font-weight:400;color:var(--ink)}
.form textarea{min-height:64px;resize:vertical}
.trail{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--line);margin-left:6px}
.trail .s{position:relative;padding:0 0 12px 16px;font-size:12.5px}
.trail .s::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong)}
.trail .s.ok::before{background:var(--pago);border-color:var(--pago)}
.trail .s.now::before{background:var(--pend);border-color:var(--pend)}
.trail .s b{display:block;font-size:13px}
.trail .s span{color:var(--ink-2)}


/* resultados */
.rhero{background:#0B1A63;color:#fff;border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.rhero::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;border:11px solid rgba(255,255,255,.06);pointer-events:none}
.rh-t span{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7FDDF7}
.rh-t b{display:block;font-family:var(--f-tit);font-size:24px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.rh-k{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;position:relative;z-index:1}
.rh-k>div{background:#0B1A63;padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.rh-k .l{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#A9B4CC}
.rh-k .v{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.02em}
.rh-k .s{font-size:12px;color:#C9D2E6}
.rh-k .vr{color:#fff}
.rh-st{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:11.5px;padding:2px 8px 2px 6px;border-radius:999px}
.rh-st svg{width:12px;height:12px}
.rh-st.ok{background:#E4F3EA;color:#1D7A46}.rh-st.wa{background:#FBF0DC;color:#A15C00}
.vr{display:inline-flex;align-items:center;gap:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.vr svg{width:12px;height:12px}
.alert .ic.o{background:var(--pago-bg);color:var(--pago)}
.lei .alert{padding:11px 18px}
.chart.wide{overflow-x:auto}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px;padding:0 18px 16px}
.mcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.mcard .mh{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);font-weight:600}
.mcard .mv{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.mcard .mv b{font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mcard .ms{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-2)}
.spk{display:block;flex:none;overflow:visible}
.mix{display:flex;height:22px;border-radius:6px;overflow:hidden;margin:0 18px 12px;background:var(--surface-3)}
.mix span{display:block;height:100%;border-right:2px solid var(--surface)}
.mix span:last-child{border-right:0}
.mixl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:6px 18px;padding:0 18px 16px}
.mixl div{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.mixl i{width:10px;height:10px;border-radius:3px;flex:none}
.mixl span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mixl b{font-variant-numeric:tabular-nums}
.mixl em{font-style:normal;color:var(--ink-2);font-variant-numeric:tabular-nums;font-size:12px;min-width:76px;text-align:right}
.lnk{border:0;background:none;padding:0;color:var(--azul);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.obs{display:flex;flex-direction:column;gap:8px;padding:0 18px 16px}
.obs textarea{width:100%;border:1px solid var(--line-strong);border-radius:9px;padding:9px 11px;background:var(--surface);resize:vertical;min-height:72px}
.obs-s{background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:13px}
.obs-s p{margin:0 0 4px}.obs-s span{font-size:12px;color:var(--ink-2)}
/* gráficos */
.chart{padding:0 18px 14px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .gx{stroke:var(--line);stroke-width:1}
.chart .gt{fill:var(--ink-2);font-size:11px;font-family:var(--f-txt)}
.chart .gv{fill:var(--ink);font-size:11.5px;font-weight:600;font-family:var(--f-txt);font-variant-numeric:tabular-nums}
.chart .hit{fill:transparent}
.chart .hit:hover{fill:var(--ink);fill-opacity:.05}
.legend{display:flex;gap:14px;flex-wrap:wrap;padding:0 18px 8px;font-size:12px;color:var(--ink-2)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}
.tip{position:fixed;z-index:60;pointer-events:none;background:var(--surface);border:1px solid var(--line-strong);border-radius:9px;box-shadow:var(--shadow);padding:8px 10px;font-size:12px;min-width:150px}
.tip b{display:block;margin-bottom:4px}
.tip .r{display:flex;gap:8px;align-items:center;color:var(--ink-2)}
.tip .r i{width:9px;height:9px;border-radius:2px;flex:none}
.tip .r em{margin-left:auto;font-style:normal;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

.cal-wrap{overflow-x:auto;padding:0 18px 18px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(118px,1fr));gap:4px;min-width:860px}
.cal-h{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding:4px 6px}
.cal-d{min-height:104px;border:1px solid var(--line);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:3px;background:var(--surface)}
.cal-d.out{border:0;background:none}
.cal-d.fds{background:var(--surface-2)}
.cal-d.hoje{border:2px solid var(--azul)}
.cal-n{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--ink-2)}
.cal-n b{color:var(--ink);font-size:13px}
.cal-i{display:flex;justify-content:space-between;gap:4px;width:100%;border:1px solid transparent;border-radius:5px;padding:2px 5px;font-size:11px;text-align:left;background:var(--surface-2);color:var(--ink)}
.cal-i span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cal-i span:last-child{flex:none}
.cal-i.pend{background:var(--pend-bg);border-color:var(--pend)}
.cal-i.apr{background:var(--apr-bg);border-color:var(--apr)}
.cal-i.pago{background:var(--pago-bg);border-color:var(--pago);opacity:.8}
.cal-i.div{background:var(--div-bg);border-color:var(--div)}
.cal-i.prev{background:none;border:1px dashed var(--ink-3);color:var(--ink-2)}
.cal-i.prev.lembrete{border-color:var(--pend);color:var(--pend);font-weight:600}
.cal-i.prev.atrasada{border-color:var(--div);color:var(--div);font-weight:600}
.cal-i.prev.pago,.cal-i.prev.agendado{border-style:solid}
.sino{position:relative;width:38px;height:38px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);display:grid;place-items:center;color:var(--ink-2)}
.sino svg{width:19px;height:19px}
.sino span{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--div);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.sino span:empty{display:none}
.elo{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.elo .b{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-left:3px solid var(--azul);border-radius:9px;padding:9px 11px;font-size:13px;line-height:1.45}
.elo .b.u{border-left-color:var(--pend)}
.elo .b b{display:flex;justify-content:space-between;gap:8px;color:var(--azul);font-size:12px;margin-bottom:2px}
.elo .b b em{font-style:normal;color:var(--ink-3);font-weight:500}
.elo .b .lk{display:inline-block;margin-top:6px;color:var(--ciano-txt);font-weight:600}
.elo .q{font-size:12px;color:var(--ink-3);text-align:right}
.tog{width:38px;height:22px;border-radius:999px;border:0;background:var(--surface-3);position:relative;flex:none}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.tog[aria-pressed="true"]{background:var(--azul)}
.tog[aria-pressed="true"]::after{left:19px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;background:var(--ink);color:var(--ground);padding:10px 16px;border-radius:10px;font-size:13px;box-shadow:var(--shadow);max-width:min(560px,calc(100% - 32px))}
.toast.err{background:var(--div);color:#fff}
.lock{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-2)}
.lock svg{width:13px;height:13px}
.pill2{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.ok-t{color:var(--pago);font-weight:600}
.bad-t{color:var(--div);font-weight:600}

@media (max-width:860px){
  .side{position:fixed;left:0;top:0;bottom:0;z-index:50;transform:translateX(-100%);transition:transform .18s;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px)}
  .side.open{transform:none}
  .top .menu{display:inline-flex}
  .kan{grid-template-columns:repeat(5,minmax(230px,1fr))}
  dl.kv{grid-template-columns:120px 1fr}
  .form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- entrada (login, senha, duas etapas) ---------- */
.entrada{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--ground)}
.entrada .lado{background:#0B1A63;color:#fff;padding:48px max(32px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.entrada .lado::after{content:"";position:absolute;right:-90px;bottom:-90px;width:340px;height:340px;border-radius:50%;border:22px solid rgba(255,255,255,.06)}
.entrada .lado .brand{padding:0}
.entrada .lado h2{font-size:30px;font-weight:600;max-width:420px;line-height:1.2;position:relative;z-index:1}
.entrada .lado p{color:#C9D2E6;max-width:420px;position:relative;z-index:1}
.entrada .lado small{color:#A9B4CC;font-size:12px;position:relative;z-index:1}
.entrada .caixa{display:flex;align-items:center;justify-content:center;padding:32px max(20px,env(safe-area-inset-right,0px)) 32px 20px}
.entrada form,.entrada .painel{width:min(400px,100%);display:flex;flex-direction:column;gap:14px}
.entrada .etapa{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.entrada h1{font-size:24px;font-weight:600}
.entrada label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.entrada input{border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;padding:11px 12px;font-size:15px;color:var(--ink)}
.entrada input.codigo{font-size:24px;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums}
.entrada .btn.pri{justify-content:center;padding:11px 14px;font-size:14px}
.entrada .link{border:0;background:none;color:var(--azul);font-weight:600;padding:0;align-self:flex-start;text-decoration:underline;text-underline-offset:3px}
.entrada .erro{background:var(--div-bg);color:var(--div);border-radius:9px;padding:9px 12px;font-size:13px}
.entrada .ok{background:var(--pago-bg);color:var(--pago);border-radius:9px;padding:9px 12px;font-size:13px}
.entrada .qr{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;align-self:center}
.entrada .qr img{width:180px;height:180px;display:block}
.entrada .segredo{font-family:ui-monospace,Menlo,monospace;font-size:12px;word-break:break-all;background:var(--surface-2);border-radius:8px;padding:8px 10px;color:var(--ink)}
.entrada .rodape{font-size:12px;color:var(--ink-3)}
@media (max-width:860px){.entrada{grid-template-columns:1fr}.entrada .lado{padding:28px 20px;gap:18px}.entrada .lado h2{font-size:22px}}
.carregando{min-height:100%;display:grid;place-items:center;color:var(--ink-2)}
.breve{opacity:.5;cursor:not-allowed!important}
.breve .cnt{background:rgba(255,255,255,.08)!important;font-weight:600!important}
.vazio-tab{padding:18px;color:var(--ink-2);font-size:13px}

#raiz{height:100%}
.entrada{height:100%;overflow:auto}
/* fornecedores */
.fbar{align-items:center}
.fbar input,.fbar select{border:1px solid var(--line-strong);background:var(--ground);border-radius:8px;padding:7px 10px;font-size:13px;color:var(--ink)}
.fbar input{flex:1 1 260px;min-width:0}
.lnk{border:0;background:none;padding:0;text-align:left;color:var(--ink);cursor:pointer;font:inherit}
.lnk:hover b{color:var(--azul);text-decoration:underline}
.drawer .erro{background:var(--div-bg);color:var(--div);border-radius:9px;padding:9px 12px;font-size:13px}
/* extratos e conciliação */
.tabs .grow{flex:1 1 auto}
.mesSel{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap;padding:4px 0}
.mesSel select,.saldoIn input{border:1px solid var(--line-strong);background:var(--ground);border-radius:8px;padding:5px 8px;font-size:13px;color:var(--ink)}
.kpis.inset{padding:14px 18px 0}
.chead.acoes{align-items:center;padding-top:0}
table.movs td{vertical-align:top}
table.movs tr.classificado td,table.movs tr.anulado td{opacity:.78}
.sug{display:block;font-size:11.5px;color:var(--ink-2);font-style:italic;margin-top:2px}
.neg{color:var(--div)}
.posv{color:var(--pago)}
.nowrap{white-space:nowrap}
.resumoMov{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;background:var(--surface-2)}
.resumoMov b{font-size:18px}
.form label.chk{flex-direction:row;align-items:center;gap:8px;font-weight:500}
.saldoIn{display:flex;gap:6px;justify-content:flex-end;margin-top:6px}
.saldoIn input{width:110px;text-align:right}
.arquivos{display:inline-flex;align-items:center;gap:10px;margin-top:10px;cursor:pointer}
.arquivos input{font-size:13px}
.btn.perigo{background:var(--div);border-color:var(--div);color:#fff}
.pad{padding:14px 18px}
.sm{font-size:12px;color:var(--ink-2)}
.arquivos input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.arquivos span{display:inline-flex;align-items:center;padding:9px 16px;border-radius:9px;background:var(--azul);color:var(--on-azul);font-weight:600;font-size:14px}
.arquivos:focus-within span{outline:2px solid var(--azul);outline-offset:2px}
table.fech td:first-child{min-width:170px}
table.fech .saldoIn{flex-wrap:wrap}