:root{
  --laranja:#F5A21B; --rosa:#D81B60; --verde:#1B8F3A; --verde-esc:#0F5F25;
  --fundo:#FFF6E6; --card:#fff; --texto:#2b1a0e; --cinza:#7a6a5a; --linha:#f0dcc0;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
body{margin:0;font-family:'Baloo 2',system-ui,sans-serif;background:var(--fundo);color:var(--texto)}
h2,h3{margin:0 0 8px}

/* Login */
#login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;gap:8px}
.logo-grande{width:180px;border-radius:24px}
#login h1{margin:0;font-size:24px}
.pin-pontos{display:flex;gap:12px;height:24px}
.pin-pontos i{width:20px;height:20px;border-radius:50%;border:3px solid var(--verde)}
.pin-pontos i.on{background:var(--verde)}
.teclado{display:grid;grid-template-columns:repeat(3,80px);gap:12px;margin-top:8px}
.teclado button{height:72px;border-radius:20px;border:0;background:#fff;font:inherit;font-size:30px;font-weight:800;box-shadow:0 3px 0 var(--linha);cursor:pointer}
.teclado button:active{transform:translateY(2px);box-shadow:none}
.teclado .ok{background:var(--verde);color:#fff}
.erro-login{color:var(--rosa);font-weight:800;min-height:24px}

/* Cabeçalho */
header{background:var(--verde);color:#fff;display:flex;align-items:center;gap:12px;padding:8px 16px;flex-wrap:wrap;position:sticky;top:0;z-index:5}
header img{height:52px;border-radius:12px;background:#fff}
header h1{margin:0;font-size:22px;line-height:1}
header small{opacity:.85}
.treino{background:var(--laranja);color:var(--texto);border-radius:99px;padding:2px 12px;font-weight:800}
.sair{border:0;background:rgba(255,255,255,.15);color:#fff;border-radius:12px;width:40px;height:40px;font-size:20px;cursor:pointer;order:9}
nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
nav button{border:0;border-radius:12px;padding:8px 14px;font:inherit;font-weight:700;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;position:relative}
nav button.ativo{background:var(--laranja);color:var(--texto)}
.badge{position:absolute;top:-6px;right:-6px;background:var(--rosa);color:#fff;border-radius:99px;font-size:12px;padding:0 7px}
main{padding:16px;max-width:1200px;margin:auto}
.tela{display:none}.tela.ativa{display:block}

/* Caixa */
.caixa{display:grid;grid-template-columns:1fr 360px;gap:16px}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;align-content:start}
.prod{background:var(--card);border:3px solid var(--linha);border-radius:20px;padding:12px;text-align:center;cursor:pointer;user-select:none;transition:transform .08s;position:relative}
.prod:active{transform:scale(.95)}
.prod .emoji{font-size:54px;line-height:1.1}
.prod .nome{font-weight:800;font-size:18px;line-height:1.1;margin:4px 0}
.prod .preco{background:var(--rosa);color:#fff;border-radius:99px;display:inline-block;padding:0 12px;font-weight:800;font-size:20px}
.prod.bebida .preco{background:var(--verde)}
.prod .qtd{position:absolute;top:-8px;right:-8px;background:var(--laranja);border-radius:99px;padding:0 10px;font-weight:800;font-size:20px;border:3px solid #fff}
.painel{background:var(--card);border-radius:20px;padding:16px;border:3px solid var(--linha);align-self:start;position:sticky;top:90px}
.item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--linha)}
.item .n{flex:1;font-weight:700;line-height:1.1}
.item .n small{display:block;color:var(--cinza);font-weight:500}
.mm{width:44px;height:44px;border-radius:12px;border:0;font-size:22px;font-weight:800;cursor:pointer;background:var(--fundo)}
.mm.mais{background:var(--verde);color:#fff}
.total{display:flex;justify-content:space-between;font-size:28px;font-weight:800;margin:10px 0}
.btn{display:block;width:100%;border:0;border-radius:16px;padding:14px;font:inherit;font-size:20px;font-weight:800;cursor:pointer;text-align:center;text-decoration:none;color:inherit}
.btn.prim{background:var(--rosa);color:#fff}
.btn.verde{background:var(--verde);color:#fff}
.btn.sec{background:var(--fundo);color:var(--texto);margin-top:8px;border:2px solid var(--linha)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.vazio{color:var(--cinza);text-align:center;padding:24px 0}
input[type=text],input[type=number],input[type=password],select{width:100%;font:inherit;font-size:20px;padding:10px 12px;border-radius:12px;border:2px solid var(--linha);background:#fff}
label{font-weight:700}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:16px;z-index:20}
.modal.aberto{display:flex}
.caixa-modal{background:#fff;border-radius:24px;padding:20px;width:100%;max-width:520px;max-height:95vh;overflow:auto}
.formas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.forma{border:3px solid var(--linha);border-radius:18px;padding:12px 4px;text-align:center;cursor:pointer;font-weight:800;font-size:18px;background:#fff}
.forma .i{font-size:40px;display:block}
.forma.sel{border-color:var(--verde);background:#e7f6ec}
.qr{display:flex;justify-content:center;margin:10px 0}
.qr img{width:250px;max-width:80vw;image-rendering:pixelated;border:3px solid var(--verde);border-radius:12px}
.aviso{background:#fff3cd;border-radius:12px;padding:8px 12px;font-size:16px;margin:8px 0}
.erro-box{background:#fde2ea;color:#8a0f3a;border-radius:12px;padding:8px 12px;margin:8px 0;font-weight:700}
.troco{font-size:26px;font-weight:800;color:var(--verde)}
.notas{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap}
.notas button{border:0;background:var(--fundo);border-radius:12px;padding:8px 12px;font:inherit;font-weight:800;font-size:18px;cursor:pointer}
.esperando{display:flex;align-items:center;justify-content:center;gap:10px;font-size:20px;font-weight:800;color:var(--cinza);margin:8px 0}
.spin{width:22px;height:22px;border:4px solid var(--linha);border-top-color:var(--verde);border-radius:50%;animation:g 1s linear infinite}
@keyframes g{to{transform:rotate(360deg)}}
.sucesso{text-align:center}
.sucesso .grande{font-size:90px;line-height:1}
.sucesso h2{font-size:34px;color:var(--verde)}
.sucesso .troco{font-size:34px}

/* Cartões e listas */
.card{background:var(--card);border-radius:20px;padding:16px;border:3px solid var(--linha);margin-bottom:16px}
.card.centro{text-align:center;max-width:480px;margin:24px auto}
.card.perigo{border-color:#f7c3d4}
.rolar{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{padding:8px;text-align:left;border-bottom:1px solid var(--linha);white-space:nowrap}
th{color:var(--cinza);font-weight:700}
td.r,th.r{text-align:right}
tr.tot td{font-weight:800;border-top:2px solid var(--texto)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border-radius:18px;padding:12px 16px;border:3px solid var(--linha)}
.kpi b{display:block;font-size:26px}
.kpi span{color:var(--cinza)}
.kpi.lucro{border-color:var(--verde)}.kpi.lucro b{color:var(--verde)}
.kpi.alerta{border-color:var(--laranja)}
.acoes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.linha{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;background:var(--fundo);margin-bottom:8px;flex-wrap:wrap}
.linha .num{font-size:24px;font-weight:800;background:var(--laranja);border-radius:12px;padding:0 12px}
.linha .info{flex:1;min-width:170px;line-height:1.2}
.linha .info b{font-size:20px}
.linha .bts{display:flex;gap:6px;flex-wrap:wrap}
.linha button{border:0;border-radius:12px;padding:10px 12px;font:inherit;font-weight:800;cursor:pointer;background:#fff}
.linha button.ok{background:var(--verde);color:#fff}
.nota{font-size:15px;color:var(--cinza)}
.tag{border-radius:99px;padding:0 10px;font-size:14px;font-weight:700;display:inline-block}
.tag.pago{background:#e7f6ec;color:var(--verde-esc)}.tag.aguardando{background:#fff3cd;color:#8a5a00}.tag.cancelado{background:#fde2ea;color:var(--rosa)}
.produto-ed{display:grid;grid-template-columns:70px 1fr 120px 110px 110px 90px auto;gap:8px;align-items:end;padding:10px 0;border-bottom:1px dashed var(--linha)}
.produto-ed label{font-size:13px;color:var(--cinza);display:block}
.produto-ed input,.produto-ed select{font-size:17px;padding:8px}
.produto-ed .lu{font-weight:800;padding-bottom:10px}
.produto-ed button{border:0;border-radius:12px;padding:10px 14px;font:inherit;font-weight:800;background:var(--verde);color:#fff;cursor:pointer}
.chk{display:flex;align-items:center;gap:6px;padding-bottom:10px}
.chk input{width:22px;height:22px}
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:var(--verde);color:#fff;padding:12px 20px;border-radius:16px;font-weight:800;font-size:20px;display:none;z-index:30;text-align:center;max-width:92vw;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.toast.ruim{background:var(--rosa)}
#barra,.fechaCarrinho{display:none}

/* Tablet */
@media(max-width:1024px){
  .caixa{grid-template-columns:1fr 320px}
  .grade{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .produto-ed{grid-template-columns:repeat(3,1fr)}
  .produto-ed .nomecol{grid-column:span 2}
  .produto-ed > div:last-child{grid-column:span 2;display:flex;align-items:center;justify-content:space-between;gap:8px}
  .produto-ed .lu{padding:0}
  .produto-ed select{padding:8px 4px}
}
/* Celular */
@media(max-width:760px){
  header{padding:8px 12px;gap:8px}
  header img{height:40px}
  header small{display:none}
  header h1{font-size:20px}
  .sair{margin-left:auto;order:0}
  nav{margin:0;width:100%;flex-wrap:nowrap;overflow-x:auto;padding:2px 0 4px}
  nav button{white-space:nowrap;padding:8px 12px;flex:0 0 auto}
  main{padding:12px 12px 110px}
  .caixa{grid-template-columns:1fr}
  .grade{grid-template-columns:repeat(2,1fr);gap:12px}
  .prod{padding:10px 6px;border-radius:18px}
  .prod .emoji{font-size:46px}
  .prod .nome{font-size:16px}
  .prod .preco{font-size:18px}
  .painel{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:15;border-radius:24px 24px 0 0;max-height:85vh;overflow:auto;
          transform:translateY(110%);transition:transform .25s;box-shadow:0 -10px 30px rgba(0,0,0,.25)}
  .painel.aberto{transform:none}
  .fechaCarrinho{display:block;position:absolute;right:12px;top:10px;border:0;background:var(--fundo);border-radius:12px;font:inherit;font-weight:800;padding:6px 12px}
  #barra{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:14;background:var(--rosa);color:#fff;border:0;border-radius:20px;
         padding:14px 18px;font:inherit;font-size:20px;font-weight:800;align-items:center;gap:10px;box-shadow:0 6px 20px rgba(216,27,96,.4);cursor:pointer}
  #barra .qt{background:#fff;color:var(--rosa);border-radius:99px;padding:0 10px}
  #barra .tt{margin-left:auto}
  .modal{align-items:flex-end;padding:0}
  .caixa-modal{border-radius:24px 24px 0 0;max-height:94vh;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .forma .i{font-size:34px}
  .kpi b{font-size:22px}
  table{font-size:14px}
  .acoes{grid-template-columns:1fr}
  .produto-ed{grid-template-columns:repeat(3,1fr)}
  .produto-ed .nomecol{grid-column:span 2}
  .produto-ed > div:last-child{grid-column:span 2;display:flex;align-items:center;justify-content:space-between;gap:8px}
  .produto-ed .lu{padding:0}
  .produto-ed select{padding:8px 4px}
}