:root{
  /* ===== Brasil Copa 2026 ===== */
  --verde:#009C3B;         /* verde bandeira */
  --verde-2:#00813A;
  --verde-esc:#005C26;
  --amarelo:#FFDF00;       /* amarelo bandeira */
  --amarelo-2:#F5C518;
  --azul:#002776;          /* azul bandeira */
  --azul-2:#1849A8;
  --branco:#FFFFFF;
  --creme:#FFFBE9;         /* fundo claro com calor de arraial */
  --creme-2:#FFF3C7;
  --gramado:#0B7A36;       /* fundo gramado sutil */
  --kraft:#EAD7A6;

  /* texto / superfície */
  --tinta:#0E2A4E;         /* azul-marinho como tinta */
  --tinta-2:#1F3D6A;
  --card:#FFFFFF;
  --linha:#E5DCA6;
  --sombra:0 6px 18px rgba(0,39,118,.14);
  --raio:16px;

  /* funcionais */
  --dinheiro:#009C3B;      /* verde = dinheiro (combina) */
  --pix:#1849A8;           /* azul brasileiro = PIX */
  --vermelho:#E4322B;
  --laranja:#E8541E;
  --ok:#009C3B; --erro:#C9352B; --aguard:#C77B11;

  font-size:17px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--tinta);
  background:var(--creme);
  background-image:
    radial-gradient(rgba(255,223,0,.45) 1.3px,transparent 1.3px),
    radial-gradient(rgba(0,156,59,.10) 1.6px,transparent 1.6px);
  background-size:22px 22px, 44px 44px;
  background-position:0 0, 11px 11px;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
button{font-family:inherit;cursor:pointer;border:none}
img{display:block}

/* ---------- bandeirinhas Brasil ---------- */
.bunting{display:flex;height:26px;align-items:flex-start;gap:0;overflow:hidden;
  border-top:3px solid var(--verde-esc)}
.bunting .flag{flex:1 1 auto;height:22px;clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;animation:sway 3.5s ease-in-out infinite}
.flag:nth-child(4n+1){background:var(--verde)}
.flag:nth-child(4n+2){background:var(--amarelo)}
.flag:nth-child(4n+3){background:var(--azul)}
.flag:nth-child(4n+4){background:var(--branco);border:1px solid rgba(0,0,0,.06);border-top:none}
.flag:nth-child(2n){animation-delay:-1.2s}
.flag:nth-child(3n){animation-delay:-2.1s}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* ---------- topo: faixa verde→amarelo com losango azul ---------- */
header{position:sticky;top:0;z-index:30;color:#fff;box-shadow:var(--sombra);
  background:
    radial-gradient(ellipse 60% 120% at 50% 50%, rgba(0,39,118,.55) 0 38%, transparent 39%),
    linear-gradient(90deg, var(--verde) 0%, var(--verde) 45%, var(--amarelo) 55%, var(--amarelo) 100%);
}
.head-row{display:flex;align-items:center;gap:12px;padding:10px 16px}
.brand{font-weight:900;font-size:1.15rem;letter-spacing:.4px;
  text-shadow:1px 1px 0 rgba(0,0,0,.35);line-height:1.05;flex:1;min-width:0;
  text-transform:uppercase}
.brand small{display:block;font-weight:700;font-size:.7rem;opacity:.95;letter-spacing:.3px;
  text-transform:none}
.badge{font-size:.7rem;font-weight:800;background:rgba(255,255,255,.25);
  padding:5px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.35)}
.badge.demo{background:rgba(0,39,118,.7)}
.seller{display:flex;align-items:center;gap:6px}
.seller input{border:none;border-radius:10px;padding:8px 10px;font-size:.9rem;width:130px;
  background:rgba(255,255,255,.95);color:var(--tinta);font-weight:700}
.seller label{font-size:.7rem;opacity:.95;font-weight:800;text-transform:uppercase;letter-spacing:.5px}

/* ---------- layout ---------- */
main{max-width:1200px;margin:0 auto;padding:14px 14px 100px}
.view{display:none}
.view.active{display:block}
h2.section{margin:6px 2px 12px;font-size:1.15rem;color:var(--verde-esc)}

/* ---------- PDV ---------- */
.pdv{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{background:var(--card);border:2px solid var(--linha);border-radius:999px;
  padding:8px 16px;font-weight:800;font-size:.88rem;color:var(--tinta-2);transition:.15s}
.chip.active{background:var(--verde);color:#fff;border-color:var(--verde-2);
  box-shadow:0 2px 0 var(--verde-esc)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.pcard{background:var(--card);border-radius:var(--raio);box-shadow:var(--sombra);
  overflow:hidden;text-align:left;display:flex;flex-direction:column;
  border:1px solid var(--linha);transition:transform .06s;position:relative}
.pcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--verde) 0 33%,var(--amarelo) 33% 66%,var(--azul) 66% 100%);z-index:2}
.pcard:active{transform:scale(.97)}
.pcard .cap{height:96px;display:flex;align-items:center;justify-content:center;
  font-size:3rem;background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), transparent 60%),
    linear-gradient(135deg,var(--creme-2),var(--amarelo-2));overflow:hidden}
.pcard .cap img{width:100%;height:100%;object-fit:cover}
.pcard .info{padding:10px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.pcard .nm{font-weight:800;font-size:.95rem;line-height:1.15}
.pcard .pr{font-weight:900;color:var(--verde-esc);font-size:1.05rem}
.pcard .st{font-size:.7rem;color:var(--tinta-2);opacity:.8}
.pcard.out{opacity:.5}

/* carrinho / comanda */
.cart{background:var(--card);border-radius:var(--raio);box-shadow:var(--sombra);
  border:2px solid var(--amarelo-2);position:sticky;top:104px;display:flex;flex-direction:column;
  max-height:calc(100vh - 130px)}
.cart h3{margin:0;padding:14px 16px;border-bottom:2px dashed var(--linha);font-size:1rem;
  background:linear-gradient(90deg, var(--amarelo) 0%, var(--amarelo-2) 100%);color:var(--tinta);
  border-radius:14px 14px 0 0;font-weight:900;letter-spacing:.3px}
.cart .lines{overflow-y:auto;flex:1;min-height:60px}
.cart .empty{padding:28px 16px;text-align:center;color:var(--tinta-2);opacity:.7;font-size:.9rem}
.line{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--linha)}
.line .lnm{flex:1;font-weight:700;font-size:.9rem}
.line .lsub{font-weight:800;width:64px;text-align:right;color:var(--verde-esc)}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:34px;height:34px;border-radius:9px;background:var(--creme-2);
  font-size:1.2rem;font-weight:800;color:var(--tinta);border:1px solid var(--amarelo-2)}
.qty b{width:22px;text-align:center}
.cart .foot{padding:14px 16px;border-top:2px dashed var(--linha)}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.total .v{font-size:1.7rem;font-weight:900;color:var(--verde-esc)}
.recv{display:flex;gap:8px;align-items:center;margin-bottom:10px;font-size:.85rem}
.recv input{flex:1;padding:9px;border-radius:10px;border:2px solid var(--linha);font-size:1rem;width:100%}
.troco{font-weight:800;color:var(--verde)}
.pay{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay.pay-3{grid-template-columns:1fr 1fr 1fr}
.btn-pay{padding:16px 4px;border-radius:14px;color:#fff;font-weight:900;font-size:.95rem;
  display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:var(--sombra);
  text-transform:uppercase;letter-spacing:.4px}
.btn-pay .ic{font-size:1.4rem}
.btn-pay.cash{background:linear-gradient(180deg, var(--verde) 0%, var(--verde-2) 100%)}
.btn-pay.pix{background:linear-gradient(180deg, var(--azul-2) 0%, var(--azul) 100%)}
.btn-pay.card{background:linear-gradient(180deg, var(--amarelo) 0%, var(--amarelo-2) 100%);
  color:var(--tinta);text-shadow:none}
.btn-pay:disabled{opacity:.4}
.clear{margin-top:10px;width:100%;background:none;color:var(--erro);font-weight:700;
  padding:8px;border-radius:10px;font-size:.85rem}

/* ---------- produtos (admin) ---------- */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.btn{background:var(--verde);color:#fff;border-radius:12px;padding:12px 18px;font-weight:800;
  text-transform:uppercase;letter-spacing:.4px;box-shadow:0 2px 0 var(--verde-esc)}
.btn.primary{background:var(--amarelo);color:var(--tinta);box-shadow:0 2px 0 var(--amarelo-2)}
.btn.ghost{background:var(--card);color:var(--tinta);border:2px solid var(--linha);box-shadow:none}
.btn.sm{padding:8px 12px;font-size:.78rem;border-radius:10px}
.plist{display:flex;flex-direction:column;gap:8px}
.prow{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--linha);
  border-radius:12px;padding:10px 12px;box-shadow:var(--sombra);border-left:5px solid var(--verde)}
.prow .pemoji{font-size:1.6rem;width:44px;height:44px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;background:var(--creme-2);overflow:hidden;flex:0 0 auto;
  border:1px solid var(--amarelo-2)}
.prow .pemoji img{width:100%;height:100%;object-fit:cover}
.prow .pd{flex:1;min-width:0}
.prow .pd .n{font-weight:800}
.prow .pd .m{font-size:.78rem;color:var(--tinta-2)}
.prow .pp{font-weight:900;color:var(--verde-esc)}
.tag{font-size:.68rem;padding:3px 8px;border-radius:999px;font-weight:800}
.tag.off{background:#eadfca;color:var(--tinta-2)}

/* ---------- vendas ---------- */
.totals{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px}
.tcard{background:var(--card);border:1px solid var(--linha);border-radius:14px;padding:12px;
  box-shadow:var(--sombra);border-top:4px solid var(--linha)}
.tcard .l{font-size:.72rem;color:var(--tinta-2);font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.tcard .v{font-size:1.35rem;font-weight:900;margin-top:2px}
.tcard.cash{border-top-color:var(--verde)} .tcard.cash .v{color:var(--verde-esc)}
.tcard.pix{border-top-color:var(--azul)}   .tcard.pix .v{color:var(--azul)}
.tcard.card{border-top-color:var(--amarelo-2)} .tcard.card .v{color:var(--amarelo-2)}
.tcard.tot{border-top-color:var(--amarelo)} .tcard.tot .v{color:var(--tinta)}
.srow{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--linha);
  border-radius:12px;padding:10px 12px;margin-bottom:8px;box-shadow:var(--sombra)}
.srow .meth{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;flex:0 0 auto;color:#fff}
.meth.CASH{background:var(--verde)} .meth.PIX{background:var(--azul)}
.meth.CARD{background:var(--amarelo-2);color:var(--tinta)}
.srow .sd{flex:1;min-width:0}
.srow .sd .si{font-weight:800;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .sd .sm{font-size:.74rem;color:var(--tinta-2)}
.srow .sv{font-weight:900;text-align:right}
.status{font-size:.68rem;font-weight:800;padding:3px 8px;border-radius:999px;display:inline-block}
.status.PAID{background:#d8f0e2;color:var(--ok)}
.status.PENDING{background:#fbe6c3;color:var(--aguard)}
.status.REFUNDED{background:#f3d6d3;color:var(--erro)}
.status.CANCELLED{background:#e6ddca;color:var(--tinta-2)}

/* ---------- abas inferiores ---------- */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;background:var(--card);
  border-top:3px solid var(--amarelo);box-shadow:0 -4px 14px rgba(0,39,118,.12)}
.tabbar button{flex:1;padding:10px 4px 12px;background:none;color:var(--tinta-2);
  display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:800;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.4px}
.tabbar button .ti{font-size:1.4rem}
.tabbar button.active{color:var(--verde)}

/* ---------- modal / qr ---------- */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(0,39,118,.55);display:none;
  align-items:center;justify-content:center;padding:18px}
.overlay.show{display:flex}
.modal{background:var(--card);border-radius:20px;max-width:420px;width:100%;box-shadow:var(--sombra);
  max-height:92vh;overflow-y:auto;border-top:6px solid var(--amarelo)}
.modal .mh{padding:16px 18px;border-bottom:2px dashed var(--linha);display:flex;align-items:center;
  justify-content:space-between}
.modal .mh h3{margin:0;font-size:1.1rem;color:var(--verde-esc)}
.modal .mb{padding:18px}
.x{background:none;font-size:1.5rem;color:var(--tinta-2);width:36px;height:36px}
.qrwrap{text-align:center}
.qrwrap img{width:260px;max-width:80vw;height:auto;margin:0 auto;border:6px solid #fff;
  border-radius:14px;box-shadow:var(--sombra)}
.qr-val{font-size:1.8rem;font-weight:900;color:var(--azul);margin:6px 0}
.copia{display:flex;gap:8px;margin-top:12px}
.copia input{flex:1;padding:10px;border-radius:10px;border:2px solid var(--linha);font-size:.8rem}
.waiting{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;
  font-weight:800;color:var(--aguard)}
.spin{width:18px;height:18px;border:3px solid var(--linha);border-top-color:var(--aguard);
  border-radius:50%;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.paid-ok{text-align:center;padding:14px}
.paid-ok .chk{font-size:3.4rem}
.paid-ok .t{font-size:1.3rem;font-weight:900;color:var(--ok)}

/* form */
.field{margin-bottom:12px}
.field label{display:block;font-weight:800;font-size:.82rem;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:11px;border-radius:11px;
  border:2px solid var(--linha);font-size:1rem;font-family:inherit;background:#fff}
.field .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.emoji-pick{display:flex;gap:6px;flex-wrap:wrap}
.emoji-pick button{font-size:1.3rem;width:42px;height:42px;border-radius:10px;background:var(--creme-2);
  border:1px solid var(--amarelo-2)}
.emoji-pick button.sel{outline:3px solid var(--verde)}
.modal .mf{padding:14px 18px;border-top:2px dashed var(--linha);display:flex;gap:10px;justify-content:space-between}

/* toast */
#toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);z-index:80;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--tinta);color:#fff;padding:12px 18px;border-radius:12px;font-weight:800;
  box-shadow:var(--sombra);animation:pop .25s ease;max-width:88vw;text-align:center}
.toast.ok{background:var(--ok)} .toast.err{background:var(--erro)}
@keyframes pop{from{transform:translateY(10px);opacity:0}}

/* responsivo (retrato / celular) */
@media(max-width:820px){
  .pdv{grid-template-columns:1fr}
  .cart{position:fixed;left:0;right:0;bottom:64px;top:auto;border-radius:18px 18px 0 0;
    max-height:62vh;z-index:35;transform:translateY(calc(100% - 58px));transition:transform .25s}
  .cart.open{transform:translateY(0)}
  .cart h3{cursor:pointer;border-radius:14px 14px 0 0}
  .cart h3::after{content:" ▲";font-size:.7rem}
  .cart.open h3::after{content:" ▼"}
  main{padding-bottom:130px}
  .totals{grid-template-columns:repeat(2,1fr)}
  .pay.pay-3{grid-template-columns:1fr 1fr;}
  .pay.pay-3 .btn-pay.card{grid-column:1 / -1}
}
@media(prefers-reduced-motion:reduce){
  .flag{animation:none}.spin{animation-duration:0s}
}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px}