/* JoySystem · Delivery — painel da loja */
*{box-sizing:border-box}
:root{--c1:#e8432e;--c2:#ffb21e;--escuro:#1d1512;--bg:#f6f2ee;--linha:#eadfd7;--suave:#7a6c66;--ok:#12a150;--ruim:#d92d20;--alerta:#b45309}
body{margin:0;background:var(--bg);color:var(--escuro);font:14.5px/1.45 'Outfit',system-ui,sans-serif}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.2}
.mini{font-size:12.5px;color:var(--suave)}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;padding:10px 16px;background:var(--c1);color:#fff;font-weight:700;cursor:pointer;white-space:nowrap}
.bt:hover{filter:brightness(1.05)}
.bt-l{background:#fff;color:var(--escuro);border:1.5px solid var(--linha)}
.bt-mini{padding:7px 11px;font-size:13px;border-radius:10px}
.bt-largo{width:100%}
.bt-zap{background:#25d366}
.perigo{color:var(--ruim)}
input,select,textarea{width:100%;border:1.5px solid var(--linha);background:#fff;border-radius:11px;padding:9px 11px;outline:0}
input:focus,select:focus,textarea:focus{border-color:var(--c1)}
label{display:block;font-size:12.5px;font-weight:700;color:var(--suave);margin:10px 0 4px}
.chk{display:flex;align-items:center;gap:7px;color:var(--escuro);font-size:14px;font-weight:600;margin:6px 0;cursor:pointer}
.chk input{width:17px;height:17px;accent-color:var(--c1)}
.erro{background:#fde9e7;color:#b42318;border-radius:10px;padding:9px 12px;margin-top:10px}
.linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.linha>input,.linha>select,.linha>textarea{flex:1;min-width:120px}
.linha2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.linha3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px}
.linha4{display:grid;grid-template-columns:1.3fr .6fr 1fr 1fr auto;gap:8px;margin-top:12px}
.chks{gap:18px}
.carrega{display:grid;place-items:center;height:50vh}
.carrega i{width:32px;height:32px;border-radius:50%;border:3.5px solid var(--linha);border-top-color:var(--c1);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.vazio{padding:40px;text-align:center;color:var(--suave)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 15% 10%,var(--c2) 0,var(--c1) 40%,var(--escuro) 100%)}
.login-box{width:100%;max-width:400px;background:#fff;border-radius:24px;padding:30px 26px}
.login-ic{width:60px;height:60px;border-radius:18px;margin-bottom:12px}
.login-box h1{font-size:24px}.login-box>p{color:var(--suave);margin:4px 0 8px}
.login-box .bt{margin-top:16px}
.demo-box{margin-top:18px;background:#fff6e5;border:1px dashed #f2c46b;border-radius:14px;padding:12px;display:grid;gap:6px;font-size:13.5px}
.demo-box .bt{margin-top:4px}
.voltar{display:block;text-align:center;margin-top:16px;font-size:13px;color:var(--suave)}

/* topo */
.topo{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;padding:10px 18px;background:var(--escuro);color:#fff}
.topo-l{display:flex;align-items:center;gap:10px;min-width:0}
.topo-ic{width:38px;height:38px;border-radius:11px}
.topo-l b{display:block;font-size:16px;white-space:nowrap}
.topo-l small{display:block;font-size:12px;font-weight:600}
.on{color:#4ade80}.off{color:#fb7185}
.abas{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.abas a{position:relative;padding:9px 13px;border-radius:11px;font-weight:600;color:rgba(255,255,255,.75);white-space:nowrap}
.abas a:hover{background:rgba(255,255,255,.07);color:#fff}
.abas a.ativo{background:rgba(255,255,255,.12);color:#fff}
.abas em{position:absolute;top:2px;right:2px;background:var(--c1);color:#fff;font-style:normal;font-size:11px;font-weight:800;min-width:19px;height:19px;border-radius:99px;display:grid;place-items:center;animation:pul 1s infinite}
@keyframes pul{50%{transform:scale(1.2)}}
.topo-r{display:flex;gap:6px}
.chip{border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer;white-space:nowrap}
.chip.alerta{background:var(--c2);color:var(--escuro)}
.faixa-demo{background:#fff6e5;color:#7a4b00;padding:8px 18px;font-size:13px;text-align:center}
.faixa-demo a{font-weight:800;color:var(--c1)}
.vista{padding:18px}

/* quadro de pedidos */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 1px 0 var(--linha)}
.kpi small{display:block;color:var(--suave);font-size:12px;font-weight:600}.kpi b{font-size:22px}
.quadro{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(270px,1fr);gap:14px;overflow-x:auto;padding-bottom:10px;align-items:start}
.col{background:#ede5de;border-radius:18px;padding:10px;min-height:200px}
.col h2{font-size:15px;padding:4px 6px 10px;display:flex;justify-content:space-between}
.col h2 em{font-style:normal;background:#fff;border-radius:99px;padding:0 9px;font-size:13px}
.col-novo{background:#ffe9e4}.col-ag{background:#fff3dc}
.col-vazia{text-align:center;color:var(--suave);font-size:13px;padding:20px 0}
.pc{background:#fff;border-radius:14px;padding:12px;margin-bottom:10px;cursor:pointer;box-shadow:0 2px 6px -3px rgba(0,0,0,.15);border-left:4px solid transparent}
.pc:hover{box-shadow:0 6px 16px -8px rgba(0,0,0,.3)}
.pc.pisca{border-left-color:var(--c1);animation:brilha 1.6s infinite}
@keyframes brilha{50%{box-shadow:0 0 0 3px rgba(232,67,46,.25)}}
.pc.atraso{border-left-color:var(--alerta)}
.pc-cab{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.pc-cab b{font-size:17px}
.tipo{font-size:11.5px;font-weight:700;border-radius:8px;padding:2px 7px;background:#f2ece7}
.tipo.entrega{background:#e8f1ff;color:#1d4ed8}
.tempo{margin-left:auto;font-size:12px;color:var(--suave)}
.pc.atraso .tempo{color:var(--alerta);font-weight:800}
.pc-agenda{display:inline-block;background:#fff3dc;color:#9a5b00;border-radius:8px;padding:2px 8px;font-size:12.5px;font-weight:800;margin:2px 0 4px}
.difs-ed{display:grid;gap:6px}
.dif-l{display:grid;grid-template-columns:56px 1fr 2fr;gap:6px}
.dif-l.passo{grid-template-columns:28px 1fr 2fr;align-items:center}
.dif-l .ic{text-align:center}
.pc-nome{font-weight:600}.pc-nome small{color:var(--suave);font-weight:500}
.pc-itens{list-style:none;padding:0;margin:6px 0;font-size:13.5px;display:grid;gap:2px}
.pc-itens small{display:block;color:var(--suave);font-size:12px;padding-left:20px}
.obs{color:#b45309!important;font-weight:600}
.pc-obs{background:#fff6e5;border-radius:8px;padding:5px 8px;font-size:12.5px;margin:4px 0}
.pc-pe{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px}
.pc-pe strong{font-size:16px}
.tag{font-size:11.5px;font-weight:700;border-radius:8px;padding:2px 8px;background:#f2ece7;text-align:right}
.tag.ok{background:#e6f7ee;color:#047857}.tag.alerta{background:#fff3dc;color:#b45309}
.pc-moto{font-size:12.5px;color:var(--suave);margin-top:4px}
.pc-acoes{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.pc-acoes .bt{flex:1}
.sel-prev,.sel-moto{flex:1;min-width:0;padding:6px 8px;font-size:13px;border-radius:9px}
.feitos{margin-top:14px;background:#fff;border-radius:16px;padding:10px 14px}
.feitos summary{cursor:pointer;font-weight:700}
.feito-l{display:grid;grid-template-columns:60px 1fr 100px 110px 60px;gap:8px;padding:8px 0;border-bottom:1px solid var(--linha);cursor:pointer;align-items:center}
.st{font-size:12px;font-weight:700;border-radius:99px;padding:3px 10px;background:#f2ece7;white-space:nowrap}
.st-entregue{background:#e6f7ee;color:#047857}.st-cancelado{background:#fde9e7;color:#b42318}.st-saiu{background:#f1e9ff;color:#6d28d9}.st-novo,.st-aguardando_pag{background:#fff3dc;color:#b45309}.st-preparo,.st-pronto{background:#e8f1ff;color:#1d4ed8}

/* modal */
.modal{border:0;border-radius:22px;padding:24px;width:min(560px,calc(100% - 24px));max-height:calc(100vh - 40px)}
.modal.largo{width:min(900px,calc(100% - 24px))}
.modal::backdrop{background:rgba(20,10,5,.5)}
.modal-x{position:absolute;right:12px;top:10px;margin:0}
.modal-x button{border:0;background:#f2ece7;width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer}
.modal h2{font-size:21px;margin-bottom:10px}
.det-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;padding-right:40px}
.det-cab small{color:var(--suave)}
.det-g{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
.det-g h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--suave);margin:12px 0 6px}
.di{display:grid;grid-template-columns:1fr auto;padding:6px 0;border-bottom:1px solid var(--linha)}
.di small{grid-column:1/-1;color:var(--suave);font-size:12.5px}
.tot{display:flex;justify-content:space-between;padding:4px 0;color:var(--suave)}
.tot b{color:var(--escuro)}.tot.total{border-top:1px solid var(--linha);margin-top:4px;padding-top:8px}.tot.total b{font-size:19px}
.det-acoes{display:flex;gap:8px;margin:10px 0}
.hist{list-style:none;padding:0;margin:0 0 8px;font-size:13px;display:grid;gap:4px}
.hist span{color:var(--suave);margin-right:8px}
.acoes-m{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.form h3{font-size:16px;margin:14px 0 4px}

/* cardápio */
.barra-acoes{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.barra-acoes .busca{flex:1;min-width:180px}
.cat-bloco{margin-bottom:22px}
.cat-bloco h2{font-size:18px;margin-bottom:10px}.cat-bloco h2 small{font-size:13px;color:var(--suave);font-weight:500}
.grade-p{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.prod{background:#fff;border-radius:16px;overflow:hidden;cursor:pointer;box-shadow:0 1px 0 var(--linha);display:flex}
.prod.off{opacity:.55}
.prod-f{width:86px;flex-shrink:0;background:#eee center/cover}
.prod-c{padding:10px 12px;display:grid;gap:2px;flex:1;min-width:0}
.prod-c b{font-size:14.5px}.prod-c span{font-size:12.5px;color:var(--suave)}
.prod-t{display:flex;align-items:center;justify-content:space-between;margin-top:4px;font-size:12.5px}
.prod-t em{font-style:normal;color:var(--suave)}
.sw{display:inline-flex!important;align-items:center;gap:6px;margin:0!important;cursor:pointer;font-size:12.5px;color:var(--escuro)!important}
.sw input{display:none}
.sw span{width:36px;height:21px;border-radius:99px;background:#d6cbc4;position:relative;transition:.2s;flex-shrink:0}
.sw span::after{content:"";position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:#fff;transition:.2s}
.sw input:checked+span{background:var(--ok)}
.sw input:checked+span::after{left:18px}
.sw.grande span{width:52px;height:30px}.sw.grande span::after{width:24px;height:24px}.sw.grande input:checked+span::after{left:25px}
.grupos-ed{border:2px dashed var(--linha);border-radius:16px;padding:12px;margin-top:14px}
.ge-cab h3{margin:0}
.ge{background:#f8f3ef;border-radius:12px;padding:10px;margin:10px 0}
.ge-l{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ge-l>input:first-child{flex:1;min-width:160px;font-weight:700}
.ge-l select{width:auto}
.ge-it{display:grid;grid-template-columns:1fr auto 90px 30px;gap:6px;align-items:center;margin-top:6px}
.ge-it span{font-size:12.5px;color:var(--suave)}
.ge-it button,.br button{border:0;background:none;color:var(--suave);font-size:16px;cursor:pointer}
.mais-op{border:0;background:none;color:var(--c1);font-weight:700;cursor:pointer;margin-top:6px}
.cats-ed{display:grid;gap:6px;margin:10px 0}
.ce{display:grid;grid-template-columns:52px 1fr auto auto auto auto;gap:6px;align-items:center}
.ce .ic{text-align:center}

/* entregadores, vendas, config */
.grade2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.card{background:#fff;border-radius:18px;padding:16px;box-shadow:0 1px 0 var(--linha);margin-bottom:16px}
.grade2 .card{margin-bottom:0}
.card-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.card-cab h2{font-size:17px}
.lista-m{display:grid;gap:8px}
.lm{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:#f8f3ef}
.lm>div{flex:1}.lm small{display:block;color:var(--suave);font-size:12.5px}
.lm-av{width:40px;height:40px;border-radius:50%;background:#e5dcd5;display:grid;place-items:center;font-size:20px}
.lm-av.on{background:#d1fae5;box-shadow:0 0 0 3px #4ade80}
.mapa-m{height:340px;border-radius:14px;overflow:hidden}
.pin{display:grid!important;place-items:center;font-size:19px;background:#fff;border-radius:50%;box-shadow:0 3px 10px rgba(0,0,0,.3)}
.app-moto .linha,.app-div .linha{margin-top:10px}
.qr-m{padding:8px;background:#fff;border:1px solid var(--linha);border-radius:12px;display:inline-block}
.app-div{display:grid;gap:8px;justify-items:start}
.app-div code,.url code{font-size:12.5px;background:#f6f2ee;border-radius:8px;padding:6px 10px;word-break:break-all}
.url{display:flex;gap:6px;align-items:center}
.barras{display:flex;align-items:flex-end;gap:6px;height:170px}
.barras div{flex:1;display:grid;grid-template-rows:1fr auto;height:100%;text-align:center;font-size:11px;color:var(--suave)}
.barras i{align-self:end;height:max(4px,var(--h));background:linear-gradient(var(--c1),var(--c2));border-radius:6px 6px 2px 2px}
.top{padding-left:18px;margin:0;display:grid;gap:6px}
.top li span{float:right;color:var(--suave)}
.tab-wrap{overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;font-size:13.5px}
.tabela th{text-align:left;color:var(--suave);font-size:12px;text-transform:uppercase;padding:8px;border-bottom:1px solid var(--linha)}
.tabela td{padding:8px;border-bottom:1px solid var(--linha)}
.sub-abas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.sub-abas button{border:1.5px solid var(--linha);background:#fff;border-radius:99px;padding:8px 14px;font-weight:600;cursor:pointer}
.sub-abas button.on{background:var(--escuro);color:#fff;border-color:var(--escuro)}
.cores{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.cor{display:flex!important;align-items:center;gap:6px;background:#f8f3ef;border-radius:99px;padding:4px 12px 4px 4px;margin:0!important;color:var(--escuro)!important}
.cor input{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.hr{display:grid;grid-template-columns:150px 120px 24px 120px;gap:8px;align-items:center;padding:4px 0}
.bairros{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px;margin:8px 0}
.br{display:grid;grid-template-columns:1fr auto 80px 26px;gap:6px;align-items:center;background:#f8f3ef;border-radius:10px;padding:6px 8px}
#cupons .br{grid-template-columns:auto 1fr 26px;margin:6px 0}
.gws{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.gws .card{margin:0}
.gw-cab{display:flex;justify-content:space-between;align-items:center}
.gw-cab h3{margin:0}
.bt-ajuda{border:0;background:#fff3dc;color:#9a5b00;font-weight:700;border-radius:10px;padding:8px 11px;cursor:pointer;margin-right:auto;margin-top:12px}
.gw .linha{margin-top:4px}
.nota{background:#fff3dc;color:#7a4b00;border-radius:14px;padding:12px 16px;margin-bottom:14px}
.ajuda ol{padding-left:20px;display:grid;gap:8px}
.ajuda a{color:var(--c1);font-weight:700}
.modulo .mod-cab{display:flex;gap:14px;align-items:flex-start}
.mod-cab>span{font-size:36px}
.mod-cab>div{flex:1}
.aviso{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--escuro);color:#fff;padding:11px 18px;border-radius:14px;font-weight:600;opacity:0;pointer-events:none;transition:.3s;z-index:90;max-width:calc(100% - 32px);text-align:center}
.aviso.ver{opacity:1;transform:translate(-50%,0)}
.aviso.ruim{background:var(--ruim)}
@media (max-width:900px){
  .topo{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .abas{order:3;flex-basis:100%}
  .topo-r{margin-left:auto}
  .vista{padding:12px}
  .quadro{grid-auto-columns:85%}
  .grade2,.det-g,.gws,.linha2,.linha3{grid-template-columns:1fr}
  .linha4{grid-template-columns:1fr 1fr}
  .hr{grid-template-columns:1fr 1fr 20px 1fr}
  .feito-l{grid-template-columns:50px 1fr 90px}
  .feito-l span:nth-child(4),.feito-l span:nth-child(5){display:none}
}