:root{--y:#FFB801;--y2:#FFF3CC;--k:#111;--k2:#1C1C1C;--bg:#F5F4F0;--card:#fff;--line:#ECEAE3;--mut:#6E6C66;--ok:#16A05D;--ok2:#DFF5E9;--bad:#D64545;--bad2:#FCE4E4;--warn:#B7791F;--warn2:#FFF1D6;--sh:0 1px 2px rgba(17,17,17,.04),0 4px 14px rgba(17,17,17,.04)}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--k);font-size:15px;-webkit-font-smoothing:antialiased}
a{color:inherit}
svg.i{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* layout */
.app{display:flex;min-height:100vh}
.side{width:236px;background:var(--k);color:#fff;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:22px 14px}
.logo{font-weight:800;font-size:20px;letter-spacing:-.3px;padding:0 10px 22px}
.logo b{color:var(--y)}
.logo small{display:block;font-size:11.5px;font-weight:500;color:#8a8a8a;letter-spacing:.2px;margin-top:2px}
.side nav{display:flex;flex-direction:column;gap:3px}
.side nav a{display:flex;align-items:center;gap:11px;text-decoration:none;color:#BDBDBD;padding:10px 12px;border-radius:11px;font-weight:500;font-size:14.5px}
.side nav a:hover{background:var(--k2);color:#fff}
.side nav a.on{background:var(--y);color:var(--k);font-weight:700}
.side .sep{font-size:11px;color:#6d6d6d;text-transform:uppercase;letter-spacing:.8px;padding:16px 12px 6px}
.side .cta{margin:4px 0 14px;justify-content:center;background:var(--y)!important;color:var(--k)!important;font-weight:700!important}
.me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:var(--k2);text-decoration:none}
.av{width:34px;height:34px;border-radius:50%;background:var(--y);color:var(--k);display:flex;align-items:center;justify-content:center;font-weight:800}
.me div{font-size:13.5px;font-weight:600;line-height:1.25}.me small{color:#8a8a8a;font-weight:500;font-size:12px}
.content{flex:1;margin-left:236px;min-width:0}
main{max-width:1120px;margin:0 auto;padding:28px 28px 70px}
.top,.tabs{display:none}

@media(max-width:900px){
  .side{display:none}
  .content{margin-left:0}
  main{padding:16px 16px 100px}
  .top{display:flex;align-items:center;gap:10px;background:var(--k);color:#fff;padding:12px 16px;position:sticky;top:0;z-index:5}
  .top .logo{padding:0;font-size:18px}
  .top a.av{margin-left:auto;text-decoration:none}
  .top .adm{display:flex;gap:6px}
  .top .adm a{color:#cfcfcf;text-decoration:none;font-size:13px;padding:6px 9px;border-radius:8px;background:var(--k2)}
  .tabs{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:5;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--mut);font-size:11px;font-weight:600;padding:4px 0}
  .tabs a.on{color:var(--k)}
  .tabs a.on svg{stroke:var(--k)}
  .tabs a.plus span{width:46px;height:46px;border-radius:15px;background:var(--y);display:flex;align-items:center;justify-content:center;margin-top:-20px;box-shadow:0 6px 16px rgba(255,184,1,.45)}
  .tabs a.plus svg{stroke:var(--k);width:24px;height:24px}
}

/* tipografia e blocos */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
h1{font-size:25px;font-weight:800;letter-spacing:-.5px;margin:0}
.ph p{margin:4px 0 0;color:var(--mut);font-size:14px}
h2{font-size:16.5px;font-weight:700;margin:28px 0 12px;letter-spacing:-.2px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--sh)}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.g2,.g3{grid-template-columns:1fr}.g4{gap:10px}.card{padding:15px}}
.kpi{position:relative}
.kpi .lbl{color:var(--mut);font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px}
.kpi .val{font-size:25px;font-weight:800;margin-top:8px;letter-spacing:-.6px}
.kpi .sub{color:var(--mut);font-size:12.5px;margin-top:3px}
.chip{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--y2);color:#8A6200}
.chip svg{width:16px;height:16px}
.chip.dark{background:var(--k);color:var(--y)}
.kpi.hl{background:var(--k);color:#fff;border-color:var(--k)}
.kpi.hl .lbl,.kpi.hl .sub{color:#a9a9a9}
.kpi.hl .chip{background:var(--y);color:var(--k)}
.bar{height:8px;background:#EFEDE6;border-radius:6px;overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;background:var(--y);border-radius:6px}
.bar i.done{background:var(--ok)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
tr:last-child td{border-bottom:0}
th{color:var(--mut);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px}
.tbl{overflow-x:auto;padding:6px 8px}
.pos{display:inline-flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;background:#F0EEE8;font-weight:700;font-size:13px}
.pos.p1{background:var(--y)}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;background:#F0EEE8;white-space:nowrap}
.pill.blk{background:var(--k);color:var(--y)}
.pill.ok{background:var(--ok2);color:var(--ok)}.pill.bad{background:var(--bad2);color:var(--bad)}.pill.warn{background:var(--warn2);color:var(--warn)}
label{display:block;font-size:13px;font-weight:600;color:#45433F;margin:14px 0 6px}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid #DDDAD1;border-radius:11px;font-size:16px;background:#fff;font-family:inherit;color:var(--k)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--y);box-shadow:0 0 0 3px rgba(255,184,1,.25)}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--k);color:#fff;border:0;border-radius:11px;padding:12px 18px;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;font-family:inherit}
.btn.y,button.y{background:var(--y);color:var(--k)}
.btn.s,button.s{background:#F0EEE8;color:var(--k);padding:8px 12px;font-size:13px;font-weight:600}
.btn.s:hover,button.s:hover{background:#E6E3DA}
.msg{padding:12px 15px;border-radius:12px;background:var(--warn2);margin:0 0 16px;font-weight:500}
.msg.ok{background:var(--ok2);color:#0E6B3E}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mut{color:var(--mut)}
.seg{display:flex;gap:8px}
.seg label{flex:1;margin:0}
.seg input{display:none}
.seg span{display:block;text-align:center;padding:13px;border:1px solid #DDDAD1;border-radius:11px;font-weight:700;color:var(--k);background:#fff;cursor:pointer}
.seg input:checked+span{background:var(--k);color:var(--y);border-color:var(--k)}
.chart{display:flex;align-items:flex-end;gap:4px;height:160px;padding-top:10px}
.chart div{flex:1;background:var(--y);border-radius:5px 5px 2px 2px;min-height:3px;position:relative;opacity:.9}
.chart div:hover{opacity:1}
.chart div:hover::after{content:attr(data-t);position:absolute;bottom:100%;left:50%;transform:translate(-50%,-4px);background:var(--k);color:#fff;font-size:11px;padding:4px 7px;border-radius:7px;white-space:nowrap}
.axis{display:flex;gap:4px;font-size:10.5px;color:var(--mut);margin-top:6px}
.axis span{flex:1;text-align:center}
.empty{text-align:center;color:var(--mut);padding:26px 10px}

/* menu no celular (gaveta) */
.burger,.fechar{display:none;background:none;border:0;color:#fff;padding:6px;border-radius:9px}
.burger svg,.fechar svg{width:24px;height:24px}
.veu{display:none}
.placar-link{color:var(--y)!important}
@media(max-width:900px){
  .burger{display:inline-flex}
  .top .av{margin-left:auto}
  .side{display:flex;transform:translateX(-105%);transition:transform .22s ease;z-index:20;width:280px;overflow-y:auto}
  .fechar{display:inline-flex;margin:-6px -4px 0 0}
  body.menu-aberto .side{transform:none}
  body.menu-aberto .veu{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:15}
  .me{margin-top:18px}
}
/* passo a passo */
.passo{display:flex;gap:14px;align-items:flex-start}
.passo .num{flex:none;width:34px;height:34px;border-radius:50%;background:var(--y);font-weight:800;display:flex;align-items:center;justify-content:center}
.passo h3{margin:4px 0 6px;font-size:16px}
.passo p,.passo li{color:#3d3b37;font-size:14.5px;line-height:1.55;margin:0 0 6px}
.passo ol,.passo ul{padding-left:18px;margin:4px 0}
.kbd{display:inline-block;background:var(--k);color:var(--y);border-radius:7px;padding:1px 8px;font-weight:700;font-size:13px}
.aj-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.aj-nav a{background:#fff;border:1px solid var(--line);border-radius:20px;padding:7px 13px;text-decoration:none;font-size:13.5px;font-weight:600}
.aj-nav a:hover{border-color:var(--y)}
.check{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-weight:600;color:var(--k);font-size:14.5px}
.check input{width:20px;height:20px;accent-color:#111}

/* contador no menu e menu lateral com rolagem */
.badge{margin-left:auto;background:var(--bad);color:#fff;font-size:11px;font-weight:800;min-width:20px;height:20px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.side nav a.on .badge{background:var(--k);color:var(--y)}
.side{overflow-y:auto}
.side .sep{padding-top:12px}
.side nav a{padding:8px 12px}