/* base */
html{-webkit-text-size-adjust:100%}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

/* Layout: app de lanchonete — barra de abas no topo, cardápio + sacola no cliente, quadros operacionais nas outras abas. Tema: preto, vermelho e dourado (bandeira alemã) + mostarda */
:root{
  --bg:#f6f2ea; --panel:#ffffff; --ink:#1b1714; --ink2:#5b524a; --ink3:#8e8378; --line:#e6ded2;
  --red:#d62718; --gold:#f5b800; --mus:#ffcf1f; --black:#0e0c0b; --ok:#2f8f4e; --warn:#c77a00; --bad:#c8261e;
  --chip:#f1e9dc; --onred:#ffffff;
  --f-d:"Alfa Slab One",Georgia,serif; --f-b:"Rubik","Segoe UI",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141110; --panel:#1f1a17; --ink:#f5efe6; --ink2:#cbbfb1; --ink3:#958a7e; --line:#352d27;
  --red:#e0463c; --gold:#f0b52a; --mus:#f2c230; --black:#0b0908; --ok:#4bb86d; --warn:#e8a23a; --bad:#ef5b51; --chip:#2a231f; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141110; --panel:#1f1a17; --ink:#f5efe6; --ink2:#cbbfb1; --ink3:#958a7e; --line:#352d27;
  --red:#e0463c; --gold:#f0b52a; --mus:#f2c230; --black:#0b0908; --ok:#4bb86d; --warn:#e8a23a; --bad:#ef5b51; --chip:#2a231f; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-b);font-size:15px;line-height:1.45}
button{font-family:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.top{background:var(--black);color:#fff;padding-inline:16px;padding-block:14px 0;position:relative}
.flag{position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,#d62718 0 60%,#f5b800 60%)}
.brand{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px}
.mark{width:52px;height:52px;border-radius:50%;background:var(--red);display:grid;place-items:center;border:3px solid var(--gold)}
.logo h1{margin:0;font-family:var(--f-d);font-weight:400;font-size:clamp(22px,4vw,30px);letter-spacing:.5px;line-height:1}
.logo h1 span{color:var(--mus)}
.logo p{margin:2px 0 0;font-size:12.5px;color:#bfb3a5}
.demo{font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid #6d6158;color:#cbbfb1;padding:3px 8px;border-radius:4px}
nav{max-width:1180px;margin:12px auto 0;display:flex;gap:4px;overflow-x:auto;padding-bottom:5px}
nav button{background:transparent;border:0;color:#cbbfb1;font-weight:600;font-size:14.5px;padding:10px 14px;border-radius:8px 8px 0 0;white-space:nowrap;display:flex;align-items:center;gap:6px}
nav button[aria-selected="true"]{background:var(--bg);color:var(--ink)}
.badge{background:var(--red);color:#fff;font-size:11.5px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:inline-grid;place-items:center;padding:0 6px}
.badge.g{background:var(--gold);color:#1b1714}
main{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:18px 60px}
.view{display:grid;gap:16px}
h2{font-family:var(--f-d);font-weight:400;font-size:24px;margin:0;letter-spacing:.3px}
h3{margin:0;font-size:16px}
.sub{color:var(--ink2);margin:0;font-size:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;min-width:0}
.grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:860px){.grid2{grid-template-columns:1fr}}
.cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.cats button{border:1.5px solid var(--line);background:var(--panel);color:var(--ink2);font-weight:600;padding:8px 14px;border-radius:999px;white-space:nowrap}
.cats button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.item{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start}
.ico{width:56px;height:56px;border-radius:12px;background:#0e0c0b;overflow:hidden}.ico img{width:100%;height:100%;object-fit:cover}
.item h4{margin:0;font-size:15.5px}
.item p{margin:3px 0 8px;color:var(--ink2);font-size:13px}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.price{font-weight:700;font-variant-numeric:tabular-nums}
.btn{border:0;border-radius:10px;padding:9px 14px;font-weight:600;background:var(--red);color:var(--onred)}
.btn.sec{background:var(--chip);color:var(--ink)}
.btn.gold{background:var(--gold);color:#1b1714}
.btn.ok{background:var(--ok);color:#fff}
.btn.sm{padding:6px 10px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.cart{position:sticky;top:12px;display:grid;gap:10px}
.cl{display:grid;gap:8px;max-height:300px;overflow:auto}
.ci{display:grid;grid-template-columns:1fr auto;gap:2px 10px;border-bottom:1px dashed var(--line);padding-bottom:8px;font-size:14px}
.ci small{color:var(--ink3);grid-column:1/2}
.qty{display:inline-flex;align-items:center;gap:6px}
.qty button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-weight:700}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{flex:1;border:0;background:var(--panel);color:var(--ink2);padding:8px 6px;font-weight:600;font-size:13.5px;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
label.f{display:grid;gap:4px;font-size:12.5px;color:var(--ink2);font-weight:600}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 10px;width:100%;min-width:0}
.tot{display:grid;gap:4px;font-variant-numeric:tabular-nums}
.tot div{display:flex;justify-content:space-between}
.tot .big{font-size:20px;font-weight:700}
.empty{color:var(--ink3);font-size:14px;text-align:center;padding:16px 8px}
/* modal */
.ov{position:fixed;inset:0;background:rgba(10,8,7,.55);display:grid;place-items:center;padding:16px;z-index:20}
.modal{background:var(--panel);color:var(--ink);border-radius:16px;max-width:520px;width:100%;max-height:90vh;overflow:auto;padding:18px;display:grid;gap:12px}
.chk{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.chk label{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:14px;cursor:pointer}
.chk input{width:auto}
/* board */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
@media (max-width:980px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.board{grid-template-columns:1fr}}
.col{background:var(--chip);border-radius:14px;padding:10px;display:grid;gap:10px;min-height:120px}
.col>h3{display:flex;justify-content:space-between;align-items:center;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2)}
.tk{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--ink3);border-radius:12px;padding:10px;display:grid;gap:6px;font-size:13.5px}
.tk.novo{border-left-color:var(--red);animation:pulse 1.6s ease 3}
.tk.chapa{border-left-color:var(--gold)}.tk.pronto{border-left-color:var(--ok)}.tk.saiu{border-left-color:#3d7bd1}
@keyframes pulse{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 35%,transparent)}}
.tk b.n{font-size:16px}
.tk ul{margin:0;padding-left:18px}
.tag{display:inline-block;font-size:11.5px;font-weight:700;border-radius:6px;padding:2px 7px;background:var(--chip);color:var(--ink2)}
.tag.ent{background:color-mix(in srgb,#3d7bd1 20%,transparent);color:#3d7bd1}
.tag.bal{background:color-mix(in srgb,var(--gold) 25%,transparent);color:var(--warn)}
.tag.ret{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok)}
.tag.paid{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok)}
.tag.unpaid{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.time{color:var(--ink3);font-size:12px}
/* tables & kpis */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:2px}
.kpi .l{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);font-weight:600}
.kpi .v{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.kpi .d{font-size:12.5px;color:var(--ink2)}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);border-bottom:1px solid var(--line);padding:7px 8px}
td{border-bottom:1px solid var(--line);padding:8px}
td.n,th.n{text-align:right}
.bar{height:10px;border-radius:5px;background:var(--chip);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok)}
.bar i.low{background:var(--bad)}.bar i.mid{background:var(--warn)}
.st{font-weight:700;font-size:12.5px}
.st.ok{color:var(--ok)}.st.mid{color:var(--warn)}.st.low{color:var(--bad)}
svg text{fill:var(--ink2);font-family:var(--f-b)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--black);color:#fff;padding:12px 18px;border-radius:12px;border-left:5px solid var(--gold);z-index:30;font-weight:600;max-width:92vw;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.wa{background:#e9f9ee;color:#12301c;border-radius:12px;padding:12px;font-size:13.5px;white-space:pre-wrap;border:1px solid #bfe8cc;max-height:260px;overflow:auto}
.note{font-size:12.5px;color:var(--ink3)}
.trk-tools{display:grid;gap:10px;max-width:620px}
.lookup{display:flex;gap:8px;align-items:end}
.simc{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px;font-weight:500;background:var(--chip);border-radius:10px;padding:10px 12px;cursor:pointer}
.simc input{width:18px;height:18px;accent-color:var(--red)}
.track{max-width:620px;display:grid;gap:16px}
.trk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap}
.trk-head .code{font-family:var(--f-d);font-size:34px;line-height:1;color:var(--red)}
.trk-eta{text-align:right;font-size:13px;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.trk-eta b{display:block;font-size:24px;color:var(--ink);letter-spacing:0;font-variant-numeric:tabular-nums}
.steps{list-style:none;margin:0;padding:0;display:grid}
.steps li{display:grid;grid-template-columns:30px 1fr auto;gap:12px;position:relative;padding-bottom:20px}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:"";position:absolute;left:14px;top:28px;bottom:0;width:2px;background:var(--line)}
.steps li:last-child::before{display:none}
.steps li.done::before{background:var(--ok)}
.steps .b{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--panel);display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--ink3);z-index:1}
.steps li.done .b{background:var(--ok);border-color:var(--ok);color:#fff}
.steps li.now .b{background:var(--gold);border-color:var(--gold);color:#1b1714;animation:ping 1.4s ease-in-out infinite}
@keyframes ping{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--gold) 30%,transparent)}}
.steps strong{display:block;font-size:15.5px}
.steps small{color:var(--ink2);font-size:13px}
.steps li.todo strong{color:var(--ink3);font-weight:500}
.steps .t{color:var(--ink3);font-size:13px;font-variant-numeric:tabular-nums;padding-top:5px}
.rider{display:flex;gap:12px;align-items:center;background:var(--chip);border-radius:12px;padding:10px 12px}
.rider .av{width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-family:var(--f-d);font-size:18px;flex:0 0 auto}
.mesabox{display:flex;align-items:end;justify-content:space-between;gap:10px;flex-wrap:wrap;background:color-mix(in srgb,var(--gold) 18%,transparent);border-radius:10px;padding:10px 12px;font-size:14px}
.mesabox select{width:auto}
.tag.mes{background:color-mix(in srgb,#8a4fd1 18%,transparent);color:#8a4fd1}
.wa-chat{background:#efe7dd;border-radius:14px;padding:12px;display:grid;gap:8px;max-width:620px}
:root[data-theme="dark"] .wa-chat{background:#0b141a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wa-chat{background:#0b141a}}
.wa-top{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2);padding-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--ink3) 30%,transparent)}
.wa-top .av{width:34px;height:34px;border-radius:50%;overflow:hidden;background:#000;flex:0 0 auto}
.wa-top .av img{width:100%;height:100%;object-fit:contain}
.bub{background:#fff;color:#111b21;border-radius:0 10px 10px 10px;padding:8px 10px 6px;max-width:88%;font-size:14px;line-height:1.4;box-shadow:0 1px 1px rgba(0,0,0,.08);white-space:pre-wrap}
:root[data-theme="dark"] .bub{background:#202c33;color:#e9edef}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bub{background:#202c33;color:#e9edef}}
.bub small{display:block;text-align:right;font-size:11px;opacity:.6;margin-top:2px}
.bub.new{animation:bubin .35s ease-out}
@keyframes bubin{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.avisar{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:600;font-size:13px;color:#128c4a;background:color-mix(in srgb,#25d366 16%,transparent);border-radius:8px;padding:6px 10px}
.avisar.sent{color:var(--ink3);background:var(--chip)}
.qrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.qrc{background:#fff;color:#1b1714;border:2px solid #1b1714;border-radius:14px;padding:14px;display:grid;gap:8px;justify-items:center;text-align:center}
.qrc h3{font-family:var(--f-d);font-weight:400;font-size:24px;margin:0}
.qrc .q{width:140px;height:140px;display:grid;place-items:center}
.qrc .q svg{width:100%;height:100%}
.qrc p{margin:0;font-size:12.5px;color:#5b524a}
.pin{width:96px;padding:6px 8px;text-align:right}
.sw{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto}
.sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.sw span{position:absolute;inset:0;border-radius:12px;background:var(--line);transition:background .15s}
.sw span::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.sw input:checked+span{background:var(--ok)}
.sw input:checked+span::after{transform:translateX(18px)}
.sw input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
tr.off td{opacity:.55}
.ico.gen{display:grid;place-items:center;color:var(--gold);font-family:var(--f-d);font-size:20px}
.ico.gen svg{width:34px;height:34px}
.item.esg{opacity:.55}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:480px){.fgrid{grid-template-columns:1fr}}
.ck{display:flex;gap:8px;align-items:center;font-size:14px;cursor:pointer}
.ck input{width:18px;height:18px;accent-color:var(--red)}
.fotobox{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fotobox .ico{width:72px;height:72px;border-radius:14px;flex:0 0 auto}
.fotobox .ico.gen svg{width:44px;height:44px}
.fotobox .bts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fotobox input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.thumb{width:40px;height:40px;border-radius:8px;flex:0 0 auto}
.thumb.ico.gen svg{width:24px;height:24px}
.pcell{display:flex;gap:10px;align-items:center}
.ico.des{padding:4px}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;max-height:220px;overflow:auto;padding:2px}
.galeria button{border:2px solid transparent;border-radius:12px;padding:0;background:#0e0c0b;aspect-ratio:1;overflow:hidden;display:grid;place-items:center}
.galeria button img{width:100%;height:100%;object-fit:cover}
.galeria button svg{width:86%;height:86%}
.galeria button[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.pix{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;border:2px solid #32bcad;border-radius:14px;padding:12px}
@media (max-width:480px){.pix{grid-template-columns:1fr;justify-items:center;text-align:center}}
.pix .q{width:150px;height:150px;background:#fff;border-radius:10px;padding:8px}
.pix .q svg{width:100%;height:100%}
.pix code{display:block;font-size:11px;word-break:break-all;background:var(--chip);border-radius:8px;padding:6px 8px;max-height:48px;overflow:hidden;color:var(--ink2)}
.pixst{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px}
.pixst i{width:10px;height:10px;border-radius:50%;background:var(--warn);animation:ping 1.4s infinite}
.pixst.ok{color:var(--ok)}.pixst.ok i{background:var(--ok);animation:none}
.nfc{background:#fff;color:#111;font:13px/1.35 ui-monospace,Menlo,Consolas,monospace;padding:16px 14px;border-radius:6px;max-width:360px;margin:0 auto;box-shadow:0 2px 10px rgba(0,0,0,.18);position:relative;overflow:hidden}
.nfc .c{text-align:center}.nfc hr{border:0;border-top:1px dashed #999;margin:8px 0}
.nfc table{width:100%;font:inherit;border-collapse:collapse}.nfc td,.nfc th{padding:1px 0;border:0;font-size:12px;text-align:left}.nfc td.n,.nfc th.n{text-align:right}
.nfc .nftot td{font-weight:700;font-size:15px}
.nfc th{text-transform:none;letter-spacing:0;color:#111;font-weight:700;padding-right:6px}.nfc td{padding-right:6px}.nfc td.n,.nfc th.n{white-space:nowrap;padding-right:0;padding-left:8px}
.nfc .nfwm{position:absolute;left:-40px;right:-40px;top:46%;transform:rotate(-24deg);text-align:center;font:700 22px Rubik,sans-serif;color:rgba(214,39,24,.22);letter-spacing:.08em;pointer-events:none}
.nfc .qr{width:120px;height:120px;margin:6px auto}.nfc .qr svg{width:100%;height:100%}
.nfc .k{word-spacing:4px;font-size:11.5px;text-align:center}
#printArea{display:none}
.tp{font:12px/1.35 ui-monospace,Menlo,Consolas,monospace;color:#000;background:#fff;width:var(--pw,72mm)}
.tp .c{text-align:center}.tp .b{font-weight:700}.tp .big{font-size:17px;font-weight:700}.tp hr{border:0;border-top:1px dashed #000;margin:5px 0}
.tp table{width:100%;border-collapse:collapse;font:inherit}.tp td{padding:1px 0;border:0;font-size:12px}.tp td.n{text-align:right;white-space:nowrap;padding-left:6px}
.tp .sm{font-size:11px}
@media print{html,body{background:#fff!important;padding:0!important}body>*:not(#printArea){display:none!important}#printArea{display:block!important}#printArea .nfc{box-shadow:none;max-width:none;width:var(--pw,72mm);padding:0;border-radius:0}}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;align-content:start}
.mesa{border:2px solid var(--line);background:var(--panel);border-radius:14px;padding:12px;text-align:left;color:var(--ink);display:grid;gap:2px}
.mesa b{font-family:var(--f-d);font-weight:400;font-size:22px}
.mesa.oc{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--panel))}
.mesa[aria-pressed="true"]{outline:3px solid var(--red);outline-offset:1px}
.mesa small{color:var(--ink2);font-size:12.5px}
.mcard{background:var(--panel);border:1px solid var(--line);border-left:5px solid #3d7bd1;border-radius:12px;padding:12px;display:grid;gap:8px}
.mcard.pronto{border-left-color:var(--ok)}
.mcard .addr{font-size:16px;font-weight:600}
.cobrar{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);border-radius:8px;padding:6px 10px;font-weight:700;font-size:14px}
.cobrar.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.saldo.dev{color:var(--bad);font-weight:700}.saldo.ok{color:var(--ok);font-weight:600}
tr.click{cursor:pointer}tr.click:hover td{background:var(--chip)}tr.sel td{background:color-mix(in srgb,var(--gold) 16%,transparent)}
.ficha{display:grid;gap:6px}.frow{display:grid;grid-template-columns:1fr 92px 34px;gap:6px;align-items:center}
.frow select,.frow input{padding:6px 8px}.frow .x{border:0;background:var(--chip);border-radius:8px;height:34px;color:var(--ink)}
.fcusto{display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;background:var(--chip);border-radius:8px;padding:8px 10px}
.mg-b{color:var(--bad);font-weight:700}.mg-m{color:var(--warn);font-weight:700}.mg-g{color:var(--ok);font-weight:700}
.cin{width:80px;padding:5px 7px;text-align:right}
.rolebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-radius:12px;padding:10px 14px;font-size:14px;border:1px solid var(--line);background:var(--panel)}
.rolebar b{font-size:15px;text-transform:uppercase;letter-spacing:.05em}
.rolebar .ri{font-size:22px;line-height:1}
.rolebar.r-cli{border-color:#3d7bd1;background:color-mix(in srgb,#3d7bd1 10%,var(--panel))}.rolebar.r-cli b{color:#3d7bd1}
.rolebar.r-coz{border-color:var(--red);background:color-mix(in srgb,var(--red) 9%,var(--panel))}.rolebar.r-coz b{color:var(--red)}
.rolebar.r-gar{border-color:#8a4fd1;background:color-mix(in srgb,#8a4fd1 10%,var(--panel))}.rolebar.r-gar b{color:#8a4fd1}
.rolebar.r-mot{border-color:#e07b12;background:color-mix(in srgb,#e07b12 10%,var(--panel))}.rolebar.r-mot b{color:#c76a0a}
.rolebar.r-cx{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--panel))}.rolebar.r-cx b{color:var(--ok)}
.rolebar.r-don{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,var(--panel))}.rolebar.r-don b{color:var(--warn)}
nav button .re{font-size:15px}
.vercomo{background:#1d1917;color:#f5efe6;padding:10px 16px 8px;border-bottom:1px solid #352d27}
.vc-in{max-width:1180px;margin:0 auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.vc-l{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#f0b52a}
.vc-b{display:flex;gap:6px;flex-wrap:wrap}
.vc-b button{border:1px solid #4a3f37;background:#2a2320;color:#e8ded2;border-radius:999px;padding:6px 12px;font-weight:600;font-size:13.5px}
.vc-b button[aria-pressed="true"]{background:#f5b800;border-color:#f5b800;color:#1b1714}
.vc-d{max-width:1180px;margin:6px auto 0;font-size:13.5px;color:#cbbfb1}
body[data-dev=phone] main{max-width:410px;margin:22px auto 60px;border:12px solid #111;border-radius:42px;padding:22px 14px 40px;min-height:780px;box-shadow:0 24px 60px rgba(0,0,0,.35),inset 0 0 0 1px #333;position:relative}
body[data-dev=phone] main::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:90px;height:6px;border-radius:3px;background:#222}
body[data-dev=phone] .grid2,body[data-dev=phone] .board,body[data-dev=phone] .fgrid,body[data-dev=phone] .menu{grid-template-columns:1fr}
body[data-dev=phone] .kpis{grid-template-columns:1fr 1fr}
body[data-dev=phone] .mgrid{grid-template-columns:repeat(3,1fr)}
body[data-dev=phone] .cart{position:static}
body[data-dev=tablet] main{max-width:1080px;margin:22px auto 60px;border:16px solid #111;border-radius:30px;padding:20px 18px 40px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
body[data-role=motoboy] #v-motoboy .grid2>.card,body[data-role=motoboy] #v-motoboy .rolebar+div .sub{display:none}
.devside{position:fixed;top:270px;width:300px;left:calc(50% - 560px);z-index:5}
@media (max-width:1180px){.devside{position:static;width:auto;max-width:410px;margin:18px auto 0;padding-inline:16px}}
.devside h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3)}
.plaq{background:#fff;color:#1b1714;border:3px solid #1b1714;border-radius:16px;padding:16px;text-align:center;display:grid;gap:8px;justify-items:center;box-shadow:0 10px 30px rgba(0,0,0,.18);transform:rotate(-2deg)}
.plaq h3{font-family:var(--f-d);font-weight:400;font-size:26px;margin:0}.plaq .q{width:170px;height:170px}.plaq .q svg{width:100%;height:100%}
.arrow{font-size:14px;color:var(--ink2);margin-top:12px;text-align:center}
.vc-dev{display:flex;gap:4px;margin-left:auto}.vc-dev button{border:1px solid #4a3f37;background:transparent;color:#cbbfb1;border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:600}
.vc-dev button[aria-pressed="true"]{background:#f5efe6;color:#1b1714}
@media (max-width:600px){.logo p{display:none}.logo img{width:58px;height:auto}.brand{gap:6px}.demo{font-size:9.5px;padding:2px 6px}
 .vercomo{padding:8px 12px}.vc-in{flex-wrap:nowrap}.vc-l{display:none}.vc-b{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.vc-b button{flex:0 0 auto}.vc-d{display:none}.vc-dev{display:none}
 .tw table{min-width:520px}main{padding-block:12px 60px}h2{font-size:21px}.rolebar{padding:8px 10px}.rolebar .note{display:none}}
body[data-dev=phone] .tw table{min-width:520px}
body[data-dev=phone] .rolebar .note{display:none}
#tMotos td:nth-child(2),#tCli td:nth-child(2){white-space:nowrap}
@media (max-width:600px){#tProd .pcell .note{display:none}#tProd td:first-child{min-width:150px}}
body[data-dev=phone] #tProd .pcell .note{display:none}body[data-dev=phone] #tProd td:first-child{min-width:150px}
.trk-sum{border-top:1px dashed var(--line);padding-top:12px;display:grid;gap:4px;font-size:14px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== versão real: complementos ===== */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--bg) 35%);display:none}
.cartbar button{width:100%;max-width:520px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:10px;border:0;border-radius:14px;background:var(--red);color:#fff;font-weight:700;font-size:16px;padding:14px 18px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
@media (max-width:860px){.cartbar.on{display:block}main.cli{padding-bottom:110px}}
.closed{background:color-mix(in srgb,var(--red) 12%,var(--panel));border:1px solid var(--red);color:var(--ink);border-radius:12px;padding:12px 14px;font-weight:600}
.pixbox{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;border:2px solid #32bcad;border-radius:14px;padding:12px;background:var(--panel)}
@media (max-width:480px){.pixbox{grid-template-columns:1fr;justify-items:center;text-align:center}}
.pixbox .q{width:150px;height:150px;background:#fff;border-radius:10px;padding:8px}.pixbox .q svg{width:100%;height:100%}
.pixbox code{display:block;font-size:11px;word-break:break-all;background:var(--chip);border-radius:8px;padding:6px 8px;max-height:52px;overflow:hidden;color:var(--ink2)}
.login{max-width:420px;margin:40px auto;display:grid;gap:12px}
.banner{border-radius:12px;padding:10px 14px;font-size:14px;font-weight:600;border:1px solid var(--gold);background:color-mix(in srgb,var(--gold) 16%,var(--panel))}
.banner.bad{border-color:var(--red);background:color-mix(in srgb,var(--red) 12%,var(--panel))}
.locked{position:relative;opacity:.75}
.locked::after{content:"🔒 Bloqueado";position:absolute;top:12px;right:12px;font-size:12px;font-weight:700;background:var(--chip);border-radius:6px;padding:3px 8px;color:var(--ink2)}
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--red);border-radius:50%;animation:sp 1s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}