/* layout: celular = conteudo + abas fixas embaixo; PC (>= 900px) = menu lateral roxo + conteudo largo */
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}
:root{
  --bg:#F6F4F8;
  --surface:#FFFFFF;
  --ink:#1D1424;
  --muted:#6E6478;
  --line:#E7E2EC;
  --line-soft:#F0ECF3;
  --plum:#4B1D5E;
  --plum-2:#6B2E85;
  --plum-soft:#F3ECF7;
  --plum-txt:#E6D7EE;
  --accent:#FFC233;
  --ok:#17724A; --ok-bg:#E3F5EC;
  --atencao:#8A5300; --atencao-bg:#FFF1D6;
  --ruim:#C2352B; --ruim-bg:#FDE6E3;
  --font:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%}
a{color:var(--plum);text-decoration:none;font-weight:700}
a:hover{color:var(--plum-2)}
h1,h2,h3{margin:0;line-height:1.2;text-wrap:balance}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:13px}
.xs{font-size:12px}
.icone{width:22px;height:22px;flex-shrink:0}

/* ---------- estrutura ---------- */
.app{display:flex;min-height:100vh}
.lateral{display:none}
.principal{flex:1;min-width:0;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.conteudo{max-width:1080px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-left,0px)) 24px max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:14px}
.cabecalho{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px max(16px,env(safe-area-inset-left,0px)) 12px max(16px,env(safe-area-inset-right,0px));background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.cabecalho h1{font-size:19px;font-weight:800}
.cabecalho .voltar{width:44px;height:44px;margin-left:-10px;display:flex;align-items:center;justify-content:center;border-radius:12px;color:var(--ink)}
.cabecalho .esq{display:flex;align-items:center;gap:4px;min-width:0}
.usuario-mini{display:flex;align-items:center;gap:8px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--plum);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.abas{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--surface);border-top:1px solid var(--line);display:flex;align-items:flex-end;padding:6px max(8px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
.abas a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;color:var(--muted);font-size:11px;font-weight:700}
.abas a.ativo{color:var(--plum);font-weight:800}
.abas a.central{margin-top:-26px;color:var(--ink);font-weight:800}
.abas a.central span.bola{width:58px;height:58px;border-radius:18px;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(75,29,94,.28)}

@media (min-width:900px){
  .lateral{display:flex;flex-direction:column;width:248px;flex-shrink:0;background:var(--plum);color:#fff;padding:22px 14px;position:sticky;top:0;height:100vh;gap:4px}
  .lateral .marca{font-size:18px;font-weight:800;padding:4px 10px 18px}
  .lateral .marca small{display:block;font-size:12px;font-weight:600;color:var(--plum-txt);margin-top:2px}
  .lateral a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:var(--plum-txt);font-weight:700;font-size:14px}
  .lateral a:hover{background:var(--plum-2);color:#fff}
  .lateral a.ativo{background:#fff;color:var(--plum)}
  .lateral a.vender{background:var(--accent);color:var(--ink);margin:6px 0}
  .lateral .rodape-lateral{margin-top:auto;border-top:1px solid var(--plum-2);padding-top:12px;display:flex;flex-direction:column;gap:4px}
  .lateral .rodape-lateral .quem{padding:6px 12px;font-size:13px;color:var(--plum-txt)}
  .lateral .rodape-lateral button{background:none;border:none;width:100%;text-align:left;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:var(--plum-txt);font-weight:700;font-size:14px;cursor:pointer}
  .lateral .rodape-lateral button:hover{background:var(--plum-2);color:#fff}
  .abas{display:none}
  .principal{padding-bottom:0}
  .so-celular{display:none !important}
  .conteudo{padding:24px 32px 40px}
  .cabecalho{padding:18px 32px}
  .cabecalho h1{font-size:22px}
}
@media (max-width:899px){ .so-pc{display:none !important} }

/* ---------- blocos ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.card > h2,.card .titulo{font-size:15px;font-weight:800}
.card-topo{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.grade{display:grid;gap:14px}
@media (min-width:900px){ .grade.duas{grid-template-columns:repeat(2,minmax(0,1fr))} .grade.tres{grid-template-columns:repeat(3,minmax(0,1fr))} }

.destaque{background:var(--plum);color:#fff;border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px}
.destaque .rotulo{font-size:12px;color:var(--plum-txt)}
.destaque .grande{font-size:30px;font-weight:800;letter-spacing:-.01em}
.destaque .mini{background:var(--plum-2);border-radius:12px;padding:10px 12px}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stats.quatro{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){ .stats.quatro{grid-template-columns:repeat(4,minmax(0,1fr))} }
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat .rotulo{font-size:12px;color:var(--muted)}
.stat .valor{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat.roxo{background:var(--plum);border-color:var(--plum);color:#fff}
.stat.roxo .rotulo{color:var(--plum-txt)}
.valor.ok{color:var(--ok)} .valor.ruim{color:var(--ruim)}

.linha{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.linha:last-child{border-bottom:none}
.linha .meio{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.linha .meio .nome{font-weight:700}
.linha .fim{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.linha.cancelada{opacity:.55}
.linha.cancelada .nome{text-decoration:line-through}

.selo{width:40px;height:40px;border-radius:12px;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.selo.g{width:52px;height:52px;border-radius:14px;font-size:15px}

.pill{display:inline-block;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.atencao{background:var(--atencao-bg);color:var(--atencao)}
.pill.ruim{background:var(--ruim-bg);color:var(--ruim)}
.pill.neutro{background:var(--line-soft);color:var(--muted)}

.barra{height:8px;border-radius:999px;background:var(--line-soft);overflow:hidden}
.barra > div{height:100%;border-radius:999px;background:var(--plum)}

.aviso{display:flex;gap:12px;align-items:flex-start;border-radius:16px;padding:14px}
.aviso .meio{display:flex;flex-direction:column;gap:3px;min-width:0}
.aviso strong{font-size:14px}
.aviso.atencao{background:var(--atencao-bg)} .aviso.atencao a{color:var(--atencao)}
.aviso.ruim{background:var(--ruim-bg)} .aviso.ruim a{color:var(--ruim)}
.aviso.ok{background:var(--ok-bg)}
.flash{border-radius:12px;padding:12px 14px;font-weight:700;font-size:14px}
.flash.ok{background:var(--ok-bg);color:var(--ok)}
.flash.erro{background:var(--ruim-bg);color:var(--ruim)}

/* ---------- controles ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:14px;border:none;font-weight:800;font-size:15px;cursor:pointer;text-align:center}
.btn.primario{background:var(--accent);color:var(--ink)}
.btn.roxo{background:var(--plum);color:#fff}
.btn.secundario{background:var(--surface);color:var(--plum);border:1px solid var(--line)}
.btn.perigo{background:var(--surface);color:var(--ruim);border:1px solid var(--ruim-bg)}
.btn.pequeno{min-height:38px;padding:0 12px;font-size:13px;border-radius:10px}
.btn.cheio{width:100%}
.btn:hover{filter:brightness(.97)}
.acoes{display:flex;gap:10px;flex-wrap:wrap}

.seg{display:flex;gap:4px;padding:4px;background:var(--line-soft);border-radius:12px}
.seg a{flex:1;min-height:40px;display:flex;align-items:center;justify-content:center;border-radius:9px;color:var(--muted);font-size:14px;font-weight:700;text-align:center}
.seg a.ativo{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(29,20,36,.12)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--plum);font-size:14px;font-weight:700;display:inline-flex;align-items:center;cursor:pointer}
.chip.ativo,.chip:has(input:checked){background:var(--plum);border-color:var(--plum);color:#fff}
.chip input{position:absolute;opacity:0;pointer-events:none}

form{margin:0}
.campos{display:flex;flex-direction:column;gap:14px}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo label,.rotulo-campo{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.campo .ajuda{font-size:12px;color:var(--muted)}
input[type=text],input[type=password],input[type=number],input[type=color],select,textarea{width:100%;min-height:48px;border:1px solid var(--line);border-radius:12px;padding:0 14px;background:var(--surface);font-size:16px}
textarea{padding:12px 14px;min-height:120px;resize:vertical;line-height:1.5}
input[type=color]{padding:4px;width:64px}
.dupla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.check{display:flex;align-items:center;gap:10px;font-weight:700}
.check input{width:20px;height:20px}

.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--plum);font-size:22px;font-weight:700;cursor:pointer}
.stepper button.mais{background:var(--plum);border-color:var(--plum);color:#fff}
.stepper input{width:52px;min-height:44px;text-align:center;font-weight:800;font-size:18px;padding:0;border-radius:10px}
.stepper.grande button{width:56px;height:56px;font-size:26px;border-radius:14px}
.stepper.grande input{width:80px;min-height:56px;font-size:30px}

.produto-venda{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px}
.produto-venda.escolhido{border:2px solid var(--plum);padding:11px}
.produto-venda.esgotado{opacity:.5}

.barra-total{position:sticky;bottom:calc(84px + env(safe-area-inset-bottom,0px));background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 -6px 20px rgba(29,20,36,.06)}
@media (min-width:900px){ .barra-total{bottom:16px} }

.tabela-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tr:last-child td{border-bottom:none}
td.dir,th.dir{text-align:right}

.linha-item{display:grid;grid-template-columns:minmax(0,1fr) 110px 44px;gap:8px;align-items:end}
.linha-item.compra{grid-template-columns:minmax(0,1fr) 96px 104px 44px}
@media (max-width:520px){ .linha-item.compra{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px} .linha-item.compra .campo:first-child{grid-column:1 / -1} }
.remover{width:44px;height:48px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ruim);font-size:20px;cursor:pointer}

.senha-gerada{background:var(--plum-soft);border:2px dashed var(--plum);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:6px}
.senha-gerada code{font-size:24px;font-weight:800;letter-spacing:.08em;color:var(--plum)}

.login-pagina{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:var(--plum)}
.login-caixa{width:100%;max-width:380px;background:var(--surface);border-radius:24px;padding:28px 22px;display:flex;flex-direction:column;gap:18px}
.login-caixa .logo{width:56px;height:56px;border-radius:18px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px}
.login-caixa h1{font-size:24px;font-weight:800}

.vazio{padding:22px 0;text-align:center;color:var(--muted);font-size:14px}
.preparo{white-space:pre-line;line-height:1.6}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}