/* =====================================================================
   RESENHAS BAR - estilos (mobile primeiro; funciona do celular ao desktop)
   ===================================================================== */
:root{
  --bg:#14100e; --bg2:#1c1612; --card:#241c17; --card2:#2d241e; --line:#3a2f27;
  --text:#f5ece1; --muted:#b0a193; --faint:#7f7164;
  --accent:#f2a33a; --accent-d:#d98b1f; --accent-ink:#1d1305;
  --ok:#5ccf8f; --ok-bg:#12281d; --warn:#f2c14e; --warn-bg:#2d2410;
  --danger:#f06a5b; --danger-bg:#34171a; --info:#6cb4f2; --info-bg:#122234;
  --r:14px; --r-sm:10px; --shadow:0 6px 22px rgba(0,0,0,.35);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  min-height:100vh;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
h1{font-size:1.5rem} h2{font-size:1.2rem} h3{font-size:1.02rem}
p{margin:0 0 .8em}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:.86rem}
.right{text-align:right} .center{text-align:center} .nowrap{white-space:nowrap}
.hidden,[hidden]{display:none!important}
.mt{margin-top:16px} .mb{margin-bottom:16px} .mt0{margin-top:0}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.grow{flex:1 1 auto;min-width:0}
.stack>*+*{margin-top:12px}

/* ---------- topo ---------- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0px));
  background:rgba(20,16,14,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:600;font-size:1.1rem;text-decoration:none!important}
.logo b{color:var(--accent)}
.logo img{border-radius:9px}
.tag-admin{font-style:normal;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;background:var(--accent);color:var(--accent-ink);
  padding:2px 7px;border-radius:99px;margin-left:8px;font-weight:700;vertical-align:middle}
.topbar-right{display:flex;align-items:center;gap:8px}
.user-chip{font-size:.88rem;color:var(--muted);max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.adminnav{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;background:var(--bg2);border-bottom:1px solid var(--line);
  position:sticky;top:55px;z-index:30;scrollbar-width:none}
.adminnav::-webkit-scrollbar{display:none}
.adminnav a{flex:0 0 auto;padding:9px 14px;border-radius:99px;color:var(--muted);font-weight:600;font-size:.95rem;text-decoration:none!important;border:1px solid transparent}
.adminnav a:hover{color:var(--text)}
.adminnav a.ativo{background:var(--accent);color:var(--accent-ink)}

/* ---------- estrutura ---------- */
.wrap{width:100%;max-width:960px;margin:0 auto;padding:16px 14px 28px;flex:1 0 auto}
.area-admin .wrap{max-width:1120px}
.rodape{flex-shrink:0;text-align:center;padding:18px 14px calc(18px + var(--safe-b));color:var(--faint);font-size:.82rem;border-top:1px solid var(--line);background:var(--bg2)}
.rodape p{margin:0}
.area-cliente.tem-carrinho .rodape{padding-bottom:calc(86px + var(--safe-b))}

/* ---------- cartoes ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card+.card{margin-top:14px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.card-h h2,.card-h h3{margin:0}
.card.flat{background:transparent}
details.card>summary{cursor:pointer;font-weight:600;list-style:none}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::before{content:"＋ ";color:var(--accent)}
details.card[open]>summary::before{content:"－ "}
details.card[open]>summary{margin-bottom:12px}

.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:minmax(0,1fr)}
.grid>*{min-width:0}
.grid-kpi{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.kpi .l{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.kpi .v{font-size:1.45rem;font-weight:700;margin-top:4px;word-break:break-word}
.kpi .s{font-size:.8rem;color:var(--faint);margin-top:2px}
.kpi.destaque{border-color:var(--accent)} .kpi.destaque .v{color:var(--accent)}
.kpi.ok .v{color:var(--ok)} .kpi.warn .v{color:var(--warn)} .kpi.bad .v{color:var(--danger)}
@media(min-width:720px){.grid-kpi{grid-template-columns:repeat(4,1fr)}}
@media(min-width:860px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}

/* ---------- alertas / selos ---------- */
.alert{padding:12px 14px;border-radius:var(--r-sm);margin:0 0 14px;border:1px solid;font-size:.95rem}
.alert-ok{background:var(--ok-bg);border-color:#245c3f;color:#bdf0d3}
.alert-erro{background:var(--danger-bg);border-color:#6a2b2f;color:#ffc9c2}
.alert-aviso{background:var(--warn-bg);border-color:#66531c;color:#fbe3a2}
.alert-info{background:var(--info-bg);border-color:#27496b;color:#c3e0fb}
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.76rem;font-weight:700;background:var(--card2);color:var(--muted);white-space:nowrap}
.badge-ok{background:var(--ok-bg);color:var(--ok)} .badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-info{background:var(--info-bg);color:var(--info)} .badge-bad{background:var(--danger-bg);color:var(--danger)}

/* ---------- botoes ---------- */
.btn{appearance:none;border:1px solid var(--line);background:var(--card2);color:var(--text);font:inherit;font-weight:600;
  padding:11px 18px;border-radius:var(--r-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  text-decoration:none!important;touch-action:manipulation;min-height:44px;line-height:1.1}
.btn:hover{border-color:var(--faint)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn-ok{background:var(--ok);border-color:var(--ok);color:#052313}
.btn-danger{background:transparent;border-color:#6a2b2f;color:var(--danger)}
.btn-danger:hover{background:var(--danger-bg);border-color:var(--danger)}
.btn-ghost{background:transparent}
.btn-sm{padding:7px 12px;min-height:36px;font-size:.88rem;border-radius:9px}
.btn-lg{padding:16px 22px;font-size:1.08rem;min-height:54px}
.btn-block{display:flex;width:100%}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- formularios ---------- */
label{display:block;font-size:.88rem;color:var(--muted);margin-bottom:5px;font-weight:600}
input[type=text],input[type=password],input[type=number],input[type=search],input[type=date],input[type=email],select,textarea{
  width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 13px;font:inherit;font-size:16px;min-height:46px;-webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 20px,calc(100% - 14px) 20px;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
input[type=file]{width:100%;font:inherit;color:var(--muted)}
input[type=file]::file-selector-button{background:var(--card2);color:var(--text);border:1px solid var(--line);padding:9px 14px;border-radius:9px;margin-right:10px;font:inherit;cursor:pointer}
.field{margin-bottom:14px}
.field .hint{font-size:.8rem;color:var(--faint);margin-top:4px}
.form-grid{display:grid;gap:0 14px;grid-template-columns:1fr}
@media(min-width:640px){.form-grid.c2{grid-template-columns:1fr 1fr}.form-grid.c3{grid-template-columns:1fr 1fr 1fr}}
.inline-form{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.inline-form input,.inline-form select{flex:1 1 120px;min-width:0}
.inline-form .btn{flex:0 0 auto}
.pw-row{display:flex;gap:8px}.pw-row input{flex:1}
.check{display:flex;align-items:center;gap:10px;font-size:1rem;color:var(--text);font-weight:500}
.check input{width:22px;height:22px;accent-color:var(--accent);flex:0 0 auto}

/* ---------- login ---------- */
.login-wrap{max-width:420px;margin:6vh auto 0}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 22px;box-shadow:var(--shadow)}
.login-hero{text-align:center;margin-bottom:18px}
.login-hero img{margin:0 auto 10px;border-radius:18px}
.login-hero h1{font-size:1.7rem;margin:0}
.login-hero h1 b{color:var(--accent)}
.login-hero p{color:var(--muted);margin:6px 0 0}

/* ---------- tabelas ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-sm)}
table.tbl{width:100%;border-collapse:collapse;font-size:.92rem;min-width:420px}
.tbl th,.tbl td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--bg2);white-space:nowrap;position:sticky;top:0}
.tbl tr:last-child td{border-bottom:0}
.tbl td.num,.tbl th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl tfoot td{font-weight:700;background:var(--bg2)}
.tbl tr.cancelado td{color:var(--faint);text-decoration:line-through}
.tbl tr.cancelado td.keep{text-decoration:none}

/* ---------- abas / chips ---------- */
.tabs{display:flex;gap:6px;overflow-x:auto;margin:0 0 14px;padding-bottom:2px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a,.chip{flex:0 0 auto;padding:9px 15px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--muted);
  font-weight:600;font-size:.92rem;text-decoration:none!important;cursor:pointer;font-family:inherit;min-height:40px;display:inline-flex;align-items:center}
.tabs a.on,.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}

/* ================= CARDAPIO (cliente) ================= */
.menu-top{position:sticky;top:55px;z-index:20;background:var(--bg);padding:8px 0 0;margin:-4px 0 0}
.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:620px){.menu-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.menu-grid{grid-template-columns:repeat(4,1fr)}}
.cat-titulo{grid-column:1/-1;margin:10px 0 0;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:700}
.prod{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:border-color .15s}
.prod.tem{border-color:var(--accent)}
.prod-corpo{cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;flex:1}
.prod-foto{aspect-ratio:4/3;background:var(--card2);position:relative;overflow:hidden}
.prod-foto img{width:100%;height:100%;object-fit:cover}
.prod-info{padding:10px 12px 6px}
.prod-info h3{margin:0 0 2px;font-size:1rem;overflow-wrap:anywhere}
.prod-preco{color:var(--accent);font-weight:700;font-size:1.05rem}
.prod-acao{padding:8px 10px 12px}
.prod-acao .btn{width:100%}
.stepper{display:flex;align-items:center;justify-content:space-between;background:var(--bg);border:1px solid var(--accent);border-radius:var(--r-sm);overflow:hidden}
.stepper button{appearance:none;border:0;background:transparent;color:var(--accent);font-size:1.6rem;font-weight:700;width:52px;height:46px;cursor:pointer;line-height:1;touch-action:manipulation}
.stepper button:active{background:var(--card2)}
.stepper .q{font-size:1.2rem;font-weight:700}
.prod-sel{position:absolute;top:8px;right:8px;min-width:30px;height:30px;padding:0 9px;border-radius:99px;background:var(--accent);color:var(--accent-ink);
  font-weight:800;display:none;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.prod.tem .prod-sel{display:flex}
.prod.esgotado .prod-foto img{filter:grayscale(1) brightness(.55)}
.prod.esgotado .prod-corpo{cursor:not-allowed}
.sel-esg{position:absolute;left:8px;top:8px;background:var(--danger);color:#fff;font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:99px;display:none;text-transform:uppercase;letter-spacing:.04em}
.prod.esgotado .sel-esg{display:block}
.prod.esgotado:not(.tem) .prod-acao .btn{opacity:.4;pointer-events:none}
.travado .prod-acao{display:none}
.travado .prod-corpo{cursor:default}

.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 14px calc(10px + var(--safe-b));background:linear-gradient(to top,var(--bg) 60%,rgba(20,16,14,0))}
.cartbar a{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:560px;margin:0 auto;background:var(--accent);color:var(--accent-ink);
  border-radius:16px;padding:14px 18px;font-weight:700;box-shadow:var(--shadow);text-decoration:none!important;min-height:56px}
.cartbar small{display:block;font-weight:600;opacity:.75;font-size:.76rem}
.cartbar .tot{font-size:1.25rem}
.no-results{grid-column:1/-1;text-align:center;color:var(--muted);padding:30px 0}

/* ================= CONTA / PIX ================= */
.conta-linha{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.conta-linha:last-child{border-bottom:0}
.conta-linha .qtd{flex:0 0 auto;min-width:42px;height:34px;border-radius:9px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-weight:700}
.conta-linha .nm{flex:1;min-width:0;overflow-wrap:anywhere}
.conta-linha .nm small{display:block;color:var(--faint)}
.conta-linha .vl{font-weight:700;white-space:nowrap}
.total-box{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 4px;font-size:1.1rem}
.total-box b{font-size:1.9rem;color:var(--accent)}
.pix-box{text-align:center}
.pix-valor{font-size:2.1rem;font-weight:800;color:var(--accent);margin:4px 0 12px}
.qr-holder{background:#fff;border-radius:16px;padding:10px;display:inline-block;max-width:100%}
.qr-holder canvas{display:block;max-width:100%;height:auto}
.pix-code{width:100%;min-height:110px;font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;resize:none;word-break:break-all;color:var(--muted)}
.passos{text-align:left;padding-left:22px;color:var(--muted);margin:10px 0 0}
.passos li{margin:4px 0}
.pulso{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--warn);margin-right:8px;animation:pulso 1.4s infinite}
@keyframes pulso{0%{opacity:1}50%{opacity:.25}100%{opacity:1}}
.ok-grande{font-size:3.4rem;line-height:1}

/* ================= ADMIN ================= */
.list-item{display:flex;gap:12px;align-items:center;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);flex-wrap:wrap}
.list-item+.list-item{margin-top:10px}
.list-item.off{opacity:.55}
.thumb{width:60px;height:60px;border-radius:10px;object-fit:cover;background:var(--card2);flex:0 0 auto}
.li-main{flex:1 1 160px;min-width:0}
.li-main .t{font-weight:700;overflow-wrap:anywhere}
.li-actions{display:flex;gap:6px;flex-wrap:wrap}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.78rem;font-weight:700;background:var(--card2);color:var(--muted)}
.pill.low{background:var(--warn-bg);color:var(--warn)} .pill.zero{background:var(--danger-bg);color:var(--danger)} .pill.good{background:var(--ok-bg);color:var(--ok)}
.foto-prev{width:110px;height:110px;border-radius:12px;object-fit:cover;background:var(--card2);margin-bottom:8px}

.cred-box{border:2px dashed var(--accent);border-radius:var(--r);padding:16px;background:var(--bg2);margin-bottom:16px}
.cred-box .cred{font-size:1.15rem;margin:6px 0;word-break:break-all}
.cred-box .cred b{color:var(--accent);font-size:1.35rem;letter-spacing:.04em}

.launch-row{display:flex;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.launch-row:last-child{border-bottom:0}
.launch-row .nm{flex:1;min-width:0}
.launch-row .nm small{display:block;color:var(--faint)}
.launch-row input[type=number]{width:70px;flex:0 0 70px;text-align:center;padding:8px}
.estoque-row{padding:12px 0;border-bottom:1px solid var(--line)}
.estoque-row:last-child{border-bottom:0}
.estoque-row .head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.estoque-row .head .nm{flex:1;min-width:0;font-weight:700}
.estoque-row .acoes{display:flex;gap:6px;flex-wrap:wrap;align-items:stretch}
.estoque-row .acoes input{width:84px;flex:0 0 84px;text-align:center;padding:8px}

/* graficos simples */
.bars{display:flex;flex-direction:column;gap:8px}
.bar-row{display:grid;grid-template-columns:78px 1fr 92px;gap:8px;align-items:center;font-size:.88rem}
.bar-row.wide{grid-template-columns:minmax(80px,32%) 1fr 92px}
.bar-track{background:var(--bg);border-radius:6px;height:20px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--accent-d),var(--accent));border-radius:6px;min-width:2px}
.bar-row .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.bar-row .vv{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

.toast{position:fixed;left:50%;bottom:calc(90px + var(--safe-b));transform:translate(-50%,20px);background:#fff;color:#111;padding:12px 18px;border-radius:12px;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s;z-index:100;font-weight:600;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.erro{background:var(--danger);color:#fff}

/* ---------- impressao (relatorios) ---------- */
@media print{
  body{background:#fff;color:#000}
  .topbar,.adminnav,.rodape,.no-print,.tabs,.btn,form.no-print,.toast{display:none!important}
  .card,.kpi{background:#fff;border-color:#bbb;color:#000}
  .kpi .v,.tbl th,.tbl td{color:#000}
  .tbl th{background:#eee}
  .wrap{max-width:none;padding:0}
  .bar-track{background:#eee}.bar-fill{background:#888}
}

/* estados do cartão do cardápio */
.prod .stepper{display:none}
.prod.tem .stepper{display:flex}
.prod.tem .btn-add{display:none}
.prod-corpo:active{opacity:.85}