:root{
  --bg:#f3f4f6; --surface:#fff; --surface-2:#f8f9fa; --line:#e3e5e8; --line-2:#d0d4d9;
  --ink:#2b2d30; --ink-2:#4f5459; --ink-3:#80868d;
  --side:#ffffff; --side-2:#eaf7fd; --side-ink:#4f5459; --brand-dark:#333436;
  --amp:#0bb1ef; --amp-2:#0794cb; --amp-ink:#ffffff; --amp-soft:#e3f5fd;
  --ok:#14804a; --ok-soft:#e3f5ea; --warn:#b26a00; --warn-soft:#fff1d9; --bad:#c2321f; --bad-soft:#fde7e4; --info:#1f5fbf; --info-soft:#e4eefc;
  --r:8px; --shadow:0 1px 2px rgba(16,20,24,.06),0 2px 8px rgba(16,20,24,.05);
  --f:"IBM Plex Sans",system-ui,sans-serif; --fh:"Barlow Semi Condensed","IBM Plex Sans",sans-serif; --fm:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--f);font-size:14px;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--info);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--fh);font-weight:700;letter-spacing:.2px;margin:0}
input,select,textarea,button{font:inherit;color:inherit}
.mono{font-family:var(--fm);font-size:.92em}
.muted{color:var(--ink-3)} .small{font-size:12px} .right{text-align:right} .nowrap{white-space:nowrap}
.hidden{display:none!important}

/* ---------- layout ---------- */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:var(--side);color:var(--side-ink);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;justify-content:center;padding:18px 18px 16px;border-bottom:1px solid var(--line)}
.brand img{width:100%;max-width:190px;height:auto;display:block}
.brand svg{flex:none}
.brand b{font-family:var(--fh);font-size:20px;color:#fff;letter-spacing:.4px;line-height:1}
.brand b span{color:var(--amp)}
.brand small{display:block;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#6f7782;margin-top:3px}
.nav{padding:12px 10px;flex:1;overflow:auto}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:6px;color:var(--side-ink);font-weight:500;margin-bottom:2px;text-decoration:none}
.nav a svg{width:18px;height:18px;opacity:.8}
.nav a:hover{background:#f3f5f7;color:var(--ink)}
.nav a.on{background:var(--side-2);color:var(--amp-2);font-weight:600;box-shadow:inset 3px 0 0 var(--amp)}
.nav a.on svg{opacity:1;color:var(--amp)}
.nav .sep{font-size:10.5px;text-transform:uppercase;letter-spacing:1.3px;color:#9aa1a8;padding:14px 10px 6px}
.me{border-top:1px solid var(--line);padding:12px 16px;font-size:12.5px}
.me b{color:var(--ink);display:block} .me a{color:var(--side-ink);margin-right:10px;cursor:pointer}
.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:18px 28px 0}
.top h1{font-size:26px;color:var(--brand-dark)}
.top .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.content{padding:18px 28px 40px}
.burger{display:none;background:none;border:0;padding:6px;cursor:pointer}

/* ---------- componentes ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--surface);padding:8px 14px;border-radius:6px;cursor:pointer;font-weight:500;white-space:nowrap;line-height:1.2}
.btn:hover{border-color:var(--ink-3)}
.btn.pri{background:var(--amp);border-color:var(--amp);color:var(--amp-ink);font-weight:600}
.btn.pri:hover{background:var(--amp-2);border-color:var(--amp-2)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.danger{color:var(--bad);border-color:#efc2bb}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn.ghost{border-color:transparent;background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:16px;height:16px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card>.hd{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.card>.hd h3{font-size:16px}
.card>.hd .acts{margin-left:auto;display:flex;gap:6px}
.card>.bd{padding:16px}
.card>.bd.flush{padding:0}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;align-items:start}

.kpi{padding:14px 16px}
.kpi .l{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-3);font-weight:600}
.kpi .v{font-family:var(--fh);font-size:28px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12px;color:var(--ink-3);margin-top:2px}
.kpi.amp{border-top:3px solid var(--amp)} .kpi.okb{border-top:3px solid var(--ok)} .kpi.badb{border-top:3px solid var(--bad)} .kpi.infob{border-top:3px solid var(--brand-dark)}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line-2);margin-bottom:16px;overflow-x:auto}
.tabs a{padding:9px 14px;color:var(--ink-2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;text-decoration:none}
.tabs a.on{color:var(--ink);border-color:var(--amp)}

.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.bar .grow{flex:1;min-width:180px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:5px 11px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;font-size:12.5px;white-space:nowrap}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip b{font-weight:600;margin-left:4px;opacity:.75}

table.t{width:100%;border-collapse:collapse}
.t th{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-3);font-weight:600;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
.t td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tbody tr.click{cursor:pointer} .t tbody tr.click:hover{background:#fafbfc}
.t .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t tfoot td{font-weight:600;background:var(--surface-2)}
.tw{overflow-x:auto}
.empty{padding:34px;text-align:center;color:var(--ink-3)}

.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11.5px;font-weight:600;white-space:nowrap;background:#eceef1;color:var(--ink-2)}
.tag.ok{background:var(--ok-soft);color:var(--ok)} .tag.warn{background:var(--warn-soft);color:var(--warn)} .tag.bad{background:var(--bad-soft);color:var(--bad)}
.tag.info{background:var(--info-soft);color:var(--info)} .tag.amp{background:var(--amp-soft);color:#05729c} .tag.dark{background:var(--ink);color:#fff}

/* ---------- formulários ---------- */
.f{display:grid;grid-template-columns:repeat(12,1fr);gap:12px 14px}
.fld{grid-column:span 12;display:flex;flex-direction:column;gap:5px;min-width:0}
.fld label{font-size:12px;font-weight:600;color:var(--ink-2)}
.fld label i{color:var(--bad);font-style:normal}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c8{grid-column:span 8}.c9{grid-column:span 9}
input.in,select.in,textarea.in{width:100%;border:1px solid var(--line-2);border-radius:6px;padding:8px 10px;background:#fff;outline:none;min-width:0}
textarea.in{resize:vertical;min-height:70px}
.in:focus{border-color:var(--amp);box-shadow:0 0 0 3px rgba(11,177,239,.2)}
.in[readonly]{background:var(--surface-2)}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--amp)}
.fsec{grid-column:span 12;font-family:var(--fh);font-size:15px;font-weight:700;padding-top:6px;border-top:1px solid var(--line);margin-top:4px}

/* autocomplete */
.ac{position:relative}
.ac-list{position:absolute;z-index:60;left:0;right:0;top:100%;margin-top:3px;background:#fff;border:1px solid var(--line-2);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:280px;overflow:auto}
.ac-list div{padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--line)}
.ac-list div:last-child{border:0}
.ac-list div.on,.ac-list div:hover{background:var(--amp-soft)}
.ac-list small{display:block;color:var(--ink-3);font-size:11.5px}

/* modal */
.ov{position:fixed;inset:0;background:rgba(14,17,21,.5);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;z-index:50;overflow:auto;animation:fade .12s}
.md{background:#fff;border-radius:10px;width:100%;max-width:640px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.md.lg{max-width:900px} .md.sm{max-width:440px}
.md .mh{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.md .mh h3{font-size:19px} .md .mh button{margin-left:auto;border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--ink-3)}
.md .mb{padding:18px 20px}
.md .mf{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 10px 10px}
@keyframes fade{from{opacity:0}}

#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:100}
.toast{background:var(--ink);color:#fff;padding:11px 16px;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:360px;animation:fade .15s;border-left:4px solid var(--amp)}
.toast.err{border-color:#ff6b57} .toast.ok{border-color:#3ccf7c}

/* login */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login .art{background:linear-gradient(150deg,#ffffff 0%,#eaf7fd 55%,#c9ecfb 100%);color:var(--ink);border-right:1px solid var(--line);padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login .art h2{font-size:44px;line-height:1.05;max-width:440px}
.login .art h2 span{color:var(--amp)}
.login .art p{color:var(--ink-2);max-width:400px;line-height:1.6}
.login .art .wave{position:absolute;right:-30px;bottom:-150px;opacity:.25;width:460px}
.login .art>div{position:relative;z-index:1}
.login .frm{background:#fff}
.login .art .logo{width:300px;max-width:80%}
.login .frm .logo{display:none;width:220px;margin:0 auto 8px}
.login .frm{display:flex;align-items:center;justify-content:center;padding:32px}
.login form{width:100%;max-width:340px;display:flex;flex-direction:column;gap:14px}
.login form h1{font-size:28px}

/* kanban */
.kb{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px}
.kb-col{background:#e9ebee;border-radius:8px;padding:10px;min-height:300px}
.kb-col.drag{background:var(--amp-soft);outline:2px dashed var(--amp)}
.kb-col h4{margin:0 0 4px;font-family:var(--fh);font-size:15px;display:flex;justify-content:space-between}
.kb-col .tt{font-size:12px;color:var(--ink-3);margin-bottom:10px}
.kb-card{background:#fff;border-radius:6px;padding:10px 12px;margin-bottom:8px;box-shadow:var(--shadow);cursor:grab;border-left:3px solid var(--amp)}
.kb-card b{display:block;font-weight:600} .kb-card small{color:var(--ink-3)}
.kb-card .v{font-family:var(--fh);font-weight:700;font-size:16px;margin-top:4px}

/* timeline */
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding:0 0 14px 22px;border-left:2px solid var(--line);margin-left:6px}
.tl li:last-child{border-color:transparent}
.tl li::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--amp)}
.tl .when{font-size:12px;color:var(--ink-3)}

/* pipeline OS */
.pipe{display:flex;gap:4px;overflow-x:auto;padding-bottom:4px}
.pipe span{flex:1;min-width:92px;text-align:center;font-size:11.5px;font-weight:600;padding:8px 6px;background:#eceef1;color:var(--ink-3);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%,8px 50%)}
.pipe span:first-child{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%)}
.pipe span.done{background:#d9dde2;color:var(--ink-2)}
.pipe span.cur{background:var(--amp);color:#fff}

.dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px}
.dl div b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-3);font-weight:600;margin-bottom:2px}
.totbox{display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding:14px 16px;border-top:1px solid var(--line)}
.totbox .big{font-family:var(--fh);font-size:26px;font-weight:700}
.bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:10px}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;font-size:11px;color:var(--ink-3)}
.bars i{display:block;width:100%;max-width:46px;background:var(--amp);border-radius:4px 4px 0 0;min-height:2px}
.bars em{font-style:normal;font-weight:600;color:var(--ink-2);font-size:11px}
.hbar{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px}
.hbar .lb{width:150px;flex:none} .hbar .tr{flex:1;background:#eceef1;border-radius:3px;height:10px;overflow:hidden} .hbar .tr i{display:block;height:100%;background:var(--ink)}
.hbar .n{width:28px;text-align:right;font-weight:600}
.warnbox{padding:10px 14px;border-radius:6px;background:var(--warn-soft);color:#6b4100;margin-bottom:12px}
.okbox{padding:10px 14px;border-radius:6px;background:var(--ok-soft);color:#0b5130;margin-bottom:12px}
.itens td .in{padding:6px 8px}

@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}.dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:40;transform:translateX(-100%);transition:transform .2s}
  .side.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .burger{display:block}
  .top{padding:14px 16px 0}.top h1{font-size:22px}.content{padding:14px 16px 32px}
  .g2,.g3,.g4{grid-template-columns:1fr 1fr}
  .f .c2,.f .c3,.f .c4,.f .c5,.f .c6,.f .c8,.f .c9{grid-column:span 12}
  .login{grid-template-columns:1fr}.login .art{display:none}.login .frm .logo{display:block}
  .kb{grid-template-columns:repeat(4,240px)}
}
@media (max-width:520px){.g2,.g3,.g4{grid-template-columns:1fr}.dl{grid-template-columns:1fr 1fr}}