:root{
  --papel:#F6EEDB; --papel-2:#FBF7EC; --branco:#FFFDF7; --tinta:#12291C; --musgo:#4D5E53;
  --placa:#1C5636; --placa-escura:#0F2318; --letreiro:#EFC93F; --tijolo:#A63F27; --ok:#2E7A4C;
  --linha:rgba(18,41,28,.15); --linha-forte:rgba(18,41,28,.32);
  --display:"Bebas Neue","Oswald","Arial Narrow",Impact,sans-serif;
  --rotulo:"Barlow Condensed","Arial Narrow",sans-serif;
  --texto:"Barlow","Helvetica Neue",Arial,sans-serif;
  --demo-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--placa-escura);color:var(--tinta);font:16px/1.45 var(--texto);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:not-allowed}
input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--letreiro);outline-offset:2px;border-radius:4px}
h1,h2,h3,p{margin:0}

/* ---------- barra da demonstração ---------- */
.demo{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;padding:12px 24px;background:var(--placa-escura);color:var(--papel);border-bottom:1px solid rgba(246,238,219,.12)}
.demo-tag{font:500 16px/1.25 var(--rotulo);color:#c9d4cb}
.demo-tag b{color:var(--letreiro);font-weight:700}
.demo-acoes{display:flex;flex-wrap:wrap;gap:8px}
.bt-demo{border:1px solid rgba(246,238,219,.35);color:var(--papel);border-radius:6px;padding:8px 14px;font:600 16px/1 var(--rotulo)}
.bt-demo:hover{border-color:var(--papel)}
.bt-demo.forte{background:var(--letreiro);color:var(--tinta);border-color:var(--letreiro)}
a.bt-demo{display:inline-block;text-decoration:none}
.curto{display:none}

/* ---------- palco: cada página mostra um lado só ---------- */
.palco{display:grid;justify-content:center;max-width:1520px;margin:0 auto;padding:24px 24px 40px}
body[data-modo="bar"] .palco{justify-content:stretch}
.legenda{margin:12px 4px 0;text-align:center;color:#9fb2a5;font:500 15px/1.3 var(--rotulo)}
.fone{position:relative;width:392px;height:min(820px,calc(100dvh - var(--demo-h) - 90px));min-height:620px;padding:10px;border-radius:46px;background:#050d09;box-shadow:0 0 0 2px #2a4537,0 30px 60px rgba(0,0,0,.35)}
.fone-tela{position:relative;height:100%;overflow-y:auto;overscroll-behavior:contain;border-radius:36px;background:var(--papel)}
.fone-camada{position:absolute;inset:10px;border-radius:36px;overflow:hidden;pointer-events:none}
.fone-camada>*{pointer-events:auto}
.painel{background:var(--papel-2);border-radius:18px;min-height:min(820px,calc(100dvh - var(--demo-h) - 90px));overflow:hidden}

@media (max-width:1000px){
  .demo{padding:8px 16px 10px;gap:8px}
  .demo-tag{flex-basis:100%;font-size:15px}
  .longo{display:none}.curto{display:inline}
  .bt-demo{padding:8px 11px;font-size:15px}
  .palco{display:block;padding:0}
  .fone{width:100%;height:calc(100dvh - var(--demo-h));min-height:0;padding:0;border-radius:0;box-shadow:none}
  .fone-tela,.fone-camada{border-radius:0}
  .fone-camada{inset:0}
  .fone .fone-site,.fone .fone-carrega{top:0;left:0;width:100%;height:calc(100% - var(--tab));border-radius:0}
  .painel{border-radius:0;min-height:calc(100dvh - var(--demo-h))}
  .legenda{display:none}
}

/* ---------- botões comuns ---------- */
.bt-forte{background:var(--placa);color:var(--papel);border-radius:8px;padding:12px 18px;font:700 17px/1.1 var(--rotulo);letter-spacing:.01em}
.bt-forte:hover{background:#174a2e}
.bt-forte:disabled{background:#9aa79d;color:#eef0ea}
.bt-linha{border:1.5px solid var(--linha-forte);border-radius:8px;padding:10px 16px;font:600 16px/1.1 var(--rotulo)}
.bt-linha:hover{border-color:var(--tinta)}
.bt-perigo{background:var(--tijolo);color:#fff;border-radius:8px;padding:12px 18px;font:700 17px/1.1 var(--rotulo)}
.largo{width:100%}
.link{color:var(--placa);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.miudo{font-size:14px;color:var(--musgo)}
.passo{display:inline-flex;align-items:center;border:1.5px solid var(--linha-forte);border-radius:8px}
.passo button{width:40px;height:40px;font:600 22px/1 var(--texto)}
.passo button:disabled{opacity:.35}
.passo output{min-width:28px;text-align:center;font:700 18px var(--rotulo)}
.demo-box{border:1.5px dashed var(--linha-forte);border-radius:10px;padding:12px;margin-top:18px;background:rgba(239,201,63,.12)}
.demo-box p{font:600 14px/1.35 var(--rotulo);color:var(--musgo)}
.demo-box div{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.demo-box button{border-radius:8px;padding:10px 14px;font:700 16px/1 var(--rotulo);background:var(--letreiro);color:var(--tinta)}
.demo-box button+button{background:transparent;border:1.5px solid var(--linha-forte)}

/* ---------- cliente: o site do Sotaque dentro do celular + caminhos ---------- */
.fone{--tab:0px}
.fone[data-tela="site"],.fone[data-tela="cardapio"],.fone[data-tela="agenda"]{--tab:62px}
.fone-site,.fone-carrega{position:absolute;top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 20px - var(--tab));border:0;border-radius:36px 36px 0 0;visibility:hidden}
.fone-site{opacity:0;transition:opacity .3s}
.fone-site.pronto{opacity:1}
.fone-carrega{display:grid;place-items:center;margin:0;background:var(--papel);color:var(--musgo);font:600 17px var(--rotulo)}
.fone[data-tela="site"] .fone-site,.fone[data-tela="site"] .fone-carrega{visibility:visible}
.fone[data-tela="site"] .fone-tela{visibility:hidden}
.fone-tela{padding-bottom:var(--tab)}
.c-nav{position:absolute;left:0;right:0;bottom:0;height:var(--tab);display:none;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--placa)}
.fone[data-tela="site"] .c-nav,.fone[data-tela="cardapio"] .c-nav,.fone[data-tela="agenda"] .c-nav{display:grid}
.c-nav button{padding:6px 4px 10px;border-top:3px solid transparent;color:#cfdccf;font:600 15px/1.1 var(--rotulo)}
.c-nav button:hover{color:var(--papel)}
.c-nav button[aria-current="true"]{color:var(--papel);border-top-color:var(--letreiro)}
.c-nav .c-nav-sacola{background:var(--letreiro);color:var(--tinta)}
.c-nav-sacola span{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:5px;border-radius:10px;background:var(--tinta);color:var(--letreiro);font-size:13px}
.pt{flex:none;width:10px;height:10px;border-radius:50%;background:#6fdc96;box-shadow:0 0 0 4px rgba(111,220,150,.22);transform:translateY(-1px)}

/* ---------- cliente: rota do cardápio (e o topo que a agenda também usa) ---------- */
.c-topo{background:var(--placa);color:var(--papel);padding:40px 22px 20px}
.c-onde{font:500 16px/1.3 var(--rotulo);color:#cfdccf}
.letreiro{font:400 64px/.88 var(--display);letter-spacing:.035em;color:var(--letreiro);margin:10px 0 12px}
.c-status{display:flex;gap:10px;align-items:baseline;font:600 17px/1.3 var(--rotulo)}
.c-status.pausado .pt{background:var(--letreiro);box-shadow:0 0 0 4px rgba(239,201,63,.25)}
.c-cats{position:sticky;top:0;z-index:2;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;background:var(--papel);border-bottom:1px solid var(--linha);padding:0 12px}
.c-cats button{flex:none;padding:14px 10px 12px;font:600 17px/1 var(--rotulo);color:var(--musgo);border-bottom:3px solid transparent}
.c-cats button:hover{color:var(--tinta)}
.c-cats button[aria-current="true"]{color:var(--tinta);border-bottom-color:var(--letreiro)}
.c-lista{padding:6px 22px 24px}
.c-secao{padding-top:22px}
.c-secao h2{font:400 34px/1 var(--display);letter-spacing:.03em;color:var(--placa);margin-bottom:4px}
.c-nota{font:500 15px var(--rotulo);color:var(--musgo);margin-bottom:6px}
.c-item{display:flex;align-items:baseline;width:100%;text-align:left;padding:12px 0;border-bottom:1px solid var(--linha)}
.c-item:hover .c-nome{text-decoration:underline;text-decoration-color:var(--letreiro);text-decoration-thickness:3px;text-underline-offset:4px}
.c-nome{flex:0 1 auto;font:600 17px/1.25 var(--texto)}
.c-nome small{display:block;font:400 14px/1.35 var(--texto);color:var(--musgo);margin-top:2px;max-width:30ch}
.q{display:inline-block;background:var(--letreiro);border-radius:4px;padding:0 5px;margin-right:6px;font:700 15px/1.35 var(--rotulo)}
.c-pontos{flex:1 1 20px;min-width:20px;margin:0 8px;border-bottom:2px dotted var(--linha-forte);transform:translateY(-4px)}
.c-preco{flex:none;font:700 18px/1 var(--rotulo)}
.c-item.off,.c-especial.off{opacity:.55}
.c-item.off .c-preco{color:var(--tijolo)}
.c-especial{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:center;width:100%;text-align:left;padding:10px 0 14px;border-bottom:1px solid var(--linha)}
.c-especial img{width:104px;height:104px;object-fit:cover;border-radius:8px}
.c-especial b{display:block;font:600 17px/1.25 var(--texto)}
.c-especial small{display:block;font-size:14px;color:var(--musgo);margin:2px 0 6px}
.c-especial em{font:700 18px var(--rotulo);font-style:normal}
.c-fonte{margin-top:20px;font-size:14px;color:var(--musgo)}

/* ---------- cliente: jogos e eventos ---------- */
.ag{list-style:none;margin:0;padding:0}
.ag li{display:grid;grid-template-columns:58px 1fr;gap:4px 14px;padding:16px 0;border-bottom:1px solid var(--linha)}
.ag-dia{grid-row:span 3;text-align:center;font:600 14px/1.1 var(--rotulo);color:var(--musgo)}
.ag-dia b{display:block;font:400 34px/1 var(--display);color:var(--placa)}
.ag h2{font:700 20px/1.15 var(--rotulo)}
.ag p{font-size:15px;color:var(--musgo)}
.ag img{width:100%;max-height:150px;object-fit:cover;border-radius:8px;margin-top:6px}
.ag .bt-forte{justify-self:start;margin-top:8px}
.ag-ex{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:5px;background:rgba(239,201,63,.35);font:600 13px/1.4 var(--rotulo);color:var(--tinta);vertical-align:2px}

/* ---------- cliente: telas internas ---------- */
.c-barra{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:30px 12px 12px;background:var(--papel);border-bottom:1px solid var(--linha)}
.c-barra h1{font:700 22px/1.1 var(--rotulo)}
.voltar{width:40px;height:40px;font:400 30px/1 var(--texto);border-radius:8px}
.voltar:hover{background:rgba(18,41,28,.07)}
.c-corpo{padding:18px 22px 28px}
.c-corpo.centro{text-align:center}
.c-lead{font-size:17px;margin-bottom:10px}
.s-linha{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--linha)}
.s-linha b{font-weight:600}
.s-linha small{display:block;font-size:14px;color:var(--musgo)}
.s-linha .aviso{color:var(--tijolo);font-weight:600}
.s-linha .s-preco{grid-column:2;grid-row:1;font:700 17px var(--rotulo);text-align:right}
.s-linha .passo{grid-column:1;justify-self:start}
.s-linha.off b{text-decoration:line-through}
.s-retira{margin:18px 0 6px;padding:14px 16px;border-radius:10px;background:var(--placa);color:var(--papel)}
.s-retira b{display:block;font:700 18px var(--rotulo);color:var(--letreiro)}
.s-retira span{font-size:15px}
.s-total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 16px;font:700 20px var(--rotulo)}
.s-total b{font-size:26px}
.erro{color:var(--tijolo);font-weight:600;font-size:15px;margin:6px 0 10px}
.vazio{padding:30px 0;color:var(--musgo)}
.campo{display:block;margin-top:14px;font:600 16px var(--rotulo)}
.campo input{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1.5px solid var(--linha-forte);border-radius:8px;background:var(--branco);font:500 17px var(--texto)}
.campo input:focus{border-color:var(--placa);outline:none;box-shadow:0 0 0 3px rgba(28,86,54,.18)}
.campo input[readonly]{background:#efe7d3;color:var(--musgo)}
.campo .erro{display:block;margin:6px 0 0;font:600 14px var(--texto)}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pagto{border:0;padding:0;margin:22px 0 6px}
.pagto legend{font:700 18px var(--rotulo);margin-bottom:8px}
.op{display:flex;gap:12px;align-items:center;padding:14px;border:1.5px solid var(--linha-forte);border-radius:10px;margin-top:8px;cursor:pointer}
.op:has(input:checked){border-color:var(--placa);background:rgba(28,86,54,.07);box-shadow:inset 4px 0 0 var(--placa)}
.op input{accent-color:var(--placa);width:20px;height:20px}
.op b{display:block;font:700 18px var(--rotulo)}
.op small{color:var(--musgo);font-size:14px}
.valor{font:400 64px/1 var(--display);letter-spacing:.02em;margin:6px 0 14px}
.qr{display:inline-block;padding:10px;background:#fff;border-radius:12px;border:1.5px solid var(--linha)}
.qr svg{display:block}
.c-corpo.centro .bt-linha{margin:14px 0 16px}
.c-corpo.centro p{margin-bottom:10px}
.prazo b{font:700 19px var(--rotulo)}
.carregando{display:inline-block;width:16px;height:16px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gira .7s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes gira{to{transform:rotate(1turn)}}

/* ---------- a ficha: o código do pedido como letreiro ---------- */
.ficha{position:relative;background:var(--letreiro);color:var(--tinta);text-align:center;padding:26px 18px 24px;
  -webkit-mask:radial-gradient(circle 7px at 50% 0,#0000 97%,#000) top/18px 51% repeat-x,radial-gradient(circle 7px at 50% 100%,#0000 97%,#000) bottom/18px 51% repeat-x;
  mask:radial-gradient(circle 7px at 50% 0,#0000 97%,#000) top/18px 51% repeat-x,radial-gradient(circle 7px at 50% 100%,#0000 97%,#000) bottom/18px 51% repeat-x}
.ficha .f-rot{font:600 16px/1.2 var(--rotulo)}
.ficha .codigo{font:400 96px/.9 var(--display);letter-spacing:.03em;margin:6px 0 4px}
.ficha.pronto{animation:acende 1.1s ease-out 2}
.ficha.cancelado,.ficha.retirado{background:#ddd3bb}
.ficha.cancelado .codigo{text-decoration:line-through;text-decoration-thickness:5px}
@keyframes acende{0%{filter:brightness(1)}35%{filter:brightness(1.18) drop-shadow(0 0 18px rgba(239,201,63,.9))}100%{filter:brightness(1)}}
.p-titulo{font:700 26px/1.15 var(--rotulo);margin:22px 0 6px}
.p-eta{font-size:17px}
.p-eta b{font:700 20px var(--rotulo)}
.etapas{list-style:none;margin:20px 0 6px;padding:0}
.etapas li{position:relative;display:flex;justify-content:space-between;padding:0 0 18px 30px;color:var(--musgo);font:600 17px/1.2 var(--rotulo)}
.etapas li::before{content:"";position:absolute;left:4px;top:3px;width:12px;height:12px;border-radius:50%;border:2px solid var(--linha-forte);background:var(--papel)}
.etapas li::after{content:"";position:absolute;left:10px;top:19px;bottom:1px;width:2px;background:var(--linha)}
.etapas li:last-child::after{display:none}
.etapas li.feito{color:var(--tinta)}
.etapas li.feito::before{background:var(--placa);border-color:var(--placa)}
.etapas li.feito::after{background:var(--placa)}
.etapas li.atual::before{border-color:var(--placa);box-shadow:0 0 0 4px rgba(28,86,54,.18)}
.etapas time{font-weight:500}
.p-itens{margin-top:12px;padding:14px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);font-size:15px}
.p-itens li{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.p-itens ul{list-style:none;margin:0;padding:0}
.p-itens em{color:var(--musgo)}
.p-itens .tot{display:flex;justify-content:space-between;margin-top:8px;font:700 18px var(--rotulo)}
.p-cancela{margin:16px 0}
.p-cancela p{margin-top:8px;font-size:15px;color:var(--musgo)}
.p-cancela b{font:700 17px var(--rotulo);color:var(--tinta)}
.c-corpo.pedido>.bt-forte{margin:16px 0 12px}

/* ---------- cliente: folha, notificações ---------- */
.c-veu{position:absolute;inset:0;background:rgba(15,35,24,.45)}
.c-folha{position:absolute;left:0;right:0;bottom:0;background:var(--papel);border-radius:18px 18px 0 0;padding:22px 22px 24px;box-shadow:0 -10px 30px rgba(0,0,0,.2);animation:sobe .22s ease-out}
@keyframes sobe{from{transform:translateY(40px);opacity:.4}}
.c-folha h2{font:700 24px/1.15 var(--rotulo)}
.c-folha>p{color:var(--musgo);font-size:15px;margin-top:4px}
.c-folha label{display:block;margin-top:16px;font:600 16px var(--rotulo)}
.c-folha textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1.5px solid var(--linha-forte);border-radius:8px;background:var(--branco);resize:none}
.f-linha{display:flex;gap:12px;align-items:center;margin-top:18px}
.f-linha .bt-forte{flex:1}
.f-bts{display:grid;gap:10px;margin-top:18px}
.c-notifs{position:absolute;left:10px;right:10px;top:12px;display:grid;gap:8px}
.notif{display:block;width:100%;text-align:left;background:rgba(255,253,247,.97);border-radius:16px;padding:10px 14px;box-shadow:0 8px 24px rgba(0,0,0,.22);animation:desce .3s ease-out;font-size:15px;line-height:1.3}
.notif b{display:block;font:700 14px var(--rotulo);color:var(--musgo)}
.notif.zap b{color:#0b7a5a}
.notif.zap span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@keyframes desce{from{transform:translateY(-30px);opacity:0}}
/* a conversa que o cliente recebe: lembra o WhatsApp sem copiar a marca */
.c-folha.zap{display:flex;flex-direction:column;max-height:88%;padding:0;overflow:hidden;background:#EFEAE2}
.z-topo{padding:16px 20px 12px;background:#0b7a5a;color:#fff}
.z-topo h2{font:700 20px/1.1 var(--rotulo)}
.z-topo small{font-size:13px;opacity:.85}
.z-conversa{flex:1;overflow-y:auto;padding:14px 14px 4px;display:grid;gap:8px;align-content:start}
.z-msg{justify-self:start;max-width:88%;padding:8px 10px 6px;border-radius:0 10px 10px 10px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.12);font-size:15px;line-height:1.35}
.z-msg time{display:block;text-align:right;margin-top:2px;font-size:12px;color:#667781}
.z-msg time b{color:#34a0d8;font-weight:600}
.z-pe{padding:0 14px 16px}
.z-pe .demo-box{margin-top:8px}
.z-pe .bt-linha{margin-top:12px;background:var(--papel)}
.op-zap{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font:500 15px/1.35 var(--texto);cursor:pointer}
.op-zap input{accent-color:#0b7a5a;width:20px;height:20px;margin:0;flex:none}

/* ---------- painel do bar ---------- */
.b-topo{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding:16px 22px;background:var(--placa);color:var(--papel)}
.b-marca{display:flex;align-items:baseline;gap:10px;font:500 17px var(--rotulo);color:#cfdccf}
.b-marca span{font:400 38px/1 var(--display);letter-spacing:.035em;color:var(--letreiro)}
.b-loja{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.b-pausa{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:8px;border:1.5px solid rgba(246,238,219,.4);font:700 17px/1 var(--rotulo)}
.b-pausa.pausado{background:var(--letreiro);color:var(--tinta);border-color:var(--letreiro)}
.b-pausa.pausado .pt{background:var(--tinta);box-shadow:none}
.b-prep{display:flex;align-items:center;gap:4px;border:1.5px solid rgba(246,238,219,.4);border-radius:8px;padding:2px 4px 2px 12px;font:600 16px var(--rotulo)}
.b-prep b{min-width:56px;text-align:center;font-size:17px}
.b-prep button{width:34px;height:34px;font:600 22px/1 var(--texto);border-radius:6px}
.b-prep button:hover{background:rgba(246,238,219,.12)}
.b-som{padding:9px 12px;border-radius:8px;border:1.5px solid rgba(246,238,219,.4);font:600 16px/1 var(--rotulo)}
.b-som[aria-pressed="false"]{opacity:.65;text-decoration:line-through}
.b-quem{display:flex;align-items:center;gap:10px;font:500 16px var(--rotulo);color:#cfdccf}
.b-sair{padding:7px 12px;border-radius:8px;border:1.5px solid rgba(246,238,219,.4);font:600 15px/1 var(--rotulo);color:var(--papel)}

/* ---------- login do proprietário (/bar-admin) ---------- */
.login{display:grid;place-items:center;min-height:inherit;padding:32px 16px;background:var(--placa)}
.login form{width:min(400px,100%);background:var(--papel-2);border-radius:16px;padding:28px 24px 24px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.login .letreiro{font-size:72px;color:var(--placa);margin:0}
.login h1{font:700 22px/1.2 var(--rotulo);margin-top:4px}
.login .campo input{background:var(--branco)}
.login .bt-forte{margin-top:20px}
.login .demo-box{margin-top:20px}
.realce{animation:realce .5s ease-in-out 4}
@keyframes realce{50%{box-shadow:0 0 0 5px var(--letreiro)}}
.b-abas{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding:0 14px;border-bottom:1px solid var(--linha);background:var(--papel-2)}
.b-abas button{flex:none;padding:14px 12px 12px;font:600 18px/1 var(--rotulo);color:var(--musgo);border-bottom:3px solid transparent}
.b-abas button:hover{color:var(--tinta)}
.b-abas button[aria-current="true"]{color:var(--tinta);border-bottom-color:var(--placa)}
.b-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:11px;background:var(--letreiro);color:var(--tinta);font-size:15px;margin-left:4px}
.b-corpo{padding:20px 22px 30px}
.b-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.b-col h2{display:flex;justify-content:space-between;align-items:baseline;font:700 19px var(--rotulo);padding-bottom:8px;margin-bottom:10px;border-bottom:3px solid var(--linha-forte)}
.b-col-recebido h2{border-color:var(--letreiro)}
.b-col-pronto h2{border-color:var(--placa)}
.b-col h2 span{font-size:16px;color:var(--musgo)}
.b-vazio{padding:18px 4px;color:var(--musgo);font-size:15px}
.b-ficha{background:var(--branco);border:1.5px solid var(--linha);border-radius:10px;padding:14px;margin-bottom:12px}
.b-ficha.novo{background:#fff6d1;border-color:var(--letreiro);animation:chama 1.4s ease-in-out infinite}
@keyframes chama{50%{box-shadow:0 0 0 5px rgba(239,201,63,.55)}}
.b-ficha header{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.b-ficha .codigo{font:400 38px/1 var(--display);letter-spacing:.03em}
.b-tempo{font:600 15px var(--rotulo);color:var(--musgo)}
.b-cli{font-weight:600;margin:2px 0 8px}
.b-cli span{font:600 14px var(--rotulo);color:var(--ok);margin-left:6px}
.b-itens{list-style:none;margin:0;padding:0;font-size:16px}
.b-itens li{padding:3px 0}
.b-itens em{display:block;margin-left:26px;font-style:normal;font-weight:600;color:var(--tijolo);font-size:15px}
.b-prev{margin-top:8px;font:600 15px var(--rotulo);color:var(--musgo)}
.b-prev.ok{color:var(--ok)}
.b-zap{margin-top:8px;font:600 14px/1.3 var(--rotulo);color:#0b7a5a}
.b-ficha footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--linha-forte)}
.b-total{font:700 18px var(--rotulo)}
.b-bts{display:flex;gap:8px;flex-wrap:wrap}
.b-ficha .bt-linha{padding:10px 12px}
.b-hist{margin-top:18px;border-top:1px solid var(--linha);padding-top:12px}
.b-hist summary{cursor:pointer;font:600 17px var(--rotulo)}
.b-hist ul{list-style:none;margin:10px 0 0;padding:0}
.b-hist li{display:flex;gap:10px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--linha);font-size:15px}
.b-hist li span{color:var(--musgo)}
.b-planilha{display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center;padding:18px;border-radius:12px;background:var(--placa);color:var(--papel);margin-bottom:18px}
.b-planilha h2{font:700 21px var(--rotulo);color:var(--letreiro)}
.b-planilha p{max-width:56ch;font-size:15px;margin-top:4px}
.b-planilha .bt-linha{border-color:rgba(246,238,219,.5);color:var(--papel)}
.b-planilha .bt-forte{background:var(--letreiro);color:var(--tinta)}
.b-planilha .bt-forte:disabled{background:rgba(246,238,219,.25);color:var(--papel)}
.b-dica{font-size:15px;color:var(--musgo);margin-bottom:6px}
.b-cat h3{font:400 28px/1 var(--display);letter-spacing:.03em;color:var(--placa);margin:18px 0 4px}
.b-prod{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--linha)}
.b-prod.off>span:first-child{text-decoration:line-through;color:var(--musgo)}
.b-preco{font:700 17px var(--rotulo)}
.chave{display:flex;align-items:center;gap:8px;font:600 15px var(--rotulo);cursor:pointer;color:var(--musgo)}
.chave input{appearance:none;width:44px;height:26px;border-radius:13px;background:#cfc6b0;position:relative;cursor:pointer;margin:0;transition:background .15s}
.chave input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}
.chave input:checked{background:var(--tijolo)}
.chave input:checked::after{transform:translateX(18px)}
.chave input:checked+span{color:var(--tijolo)}
.b-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:3px solid var(--tinta);border-bottom:1px solid var(--linha);margin-bottom:22px}
.b-kpis.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.b-kpis div{padding:12px 14px 14px 0}
.b-kpis div+div{padding-left:14px;border-left:1px solid var(--linha)}
.b-kpis span{display:block;font:600 15px/1.2 var(--rotulo);color:var(--musgo)}
.b-kpis b{display:block;font:400 40px/1.05 var(--display);letter-spacing:.02em;margin-top:4px}
.b-sec h2{font:700 20px var(--rotulo);margin-bottom:10px}
.b-dois{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px}
.b-graf svg{display:block;width:100%;height:auto}
.b-top{list-style:none;margin:0;padding:0;counter-reset:t}
.b-top li{display:grid;grid-template-columns:22px 1fr auto;gap:2px 8px;align-items:center;padding:7px 0;counter-increment:t;font-size:15px}
.b-top li::before{content:counter(t);font:700 16px var(--rotulo);color:var(--musgo)}
.b-top .barra{grid-column:2/4;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--placa) var(--w),rgba(18,41,28,.08) var(--w))}
.b-top b{font:700 16px var(--rotulo)}
.b-conta{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;padding:18px;border-radius:12px;background:var(--placa);color:var(--papel);margin-bottom:20px}
.b-conta h2{font:700 21px var(--rotulo);color:var(--letreiro);margin-bottom:6px}
.b-conta p{font-size:15px}
.b-movs{list-style:none;margin:0 0 22px;padding:0}
.b-movs li{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--linha)}
.b-movs time{font:600 15px var(--rotulo);color:var(--musgo)}
.b-movs small{display:block;color:var(--musgo);font-size:14px}
.b-movs b{font:700 17px var(--rotulo);color:var(--ok)}
.b-movs b.neg{color:var(--tijolo)}
.b-nota{padding:16px;border:1.5px dashed var(--linha-forte);border-radius:12px}
.b-nota h3{font:700 18px var(--rotulo);margin-bottom:4px}
.b-equipe{list-style:none;margin:0 0 16px;padding:0}
.b-equipe li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 0;border-bottom:1px solid var(--linha)}
.b-equipe b{font:700 19px var(--rotulo)}
.b-equipe span{font:600 15px var(--rotulo);padding:2px 10px;border-radius:5px;background:rgba(28,86,54,.1);color:var(--placa);align-self:center}
.b-equipe small{grid-column:1/-1;color:var(--musgo);font-size:15px}
.b-papel{margin-top:24px;padding:18px;border-radius:12px;background:#fff6d1;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
/* o painel divide a tela com o celular, então mede a si mesmo, não a janela */
.painel{container-type:inline-size}
@container (max-width:980px){
  .b-cols{grid-template-columns:1fr 1fr}.b-col-pronto{grid-column:1/-1}
  .b-dois{grid-template-columns:1fr}
  .b-kpis{grid-template-columns:1fr 1fr}
  .b-kpis:not(.tres) div:nth-child(3){padding-left:0;border-left:0}
  .b-kpis:not(.tres) div:nth-child(n+3){border-top:1px solid var(--linha)}
}
@container (max-width:560px){
  .b-topo{padding:14px 16px}.b-corpo{padding:16px}
  .b-cols,.b-conta{grid-template-columns:1fr}
  .b-kpis.tres{grid-template-columns:1fr}
  .b-kpis.tres div{padding-left:0;border-left:0}
  .b-kpis.tres div+div{border-top:1px solid var(--linha)}
  .b-prod{grid-template-columns:1fr auto;gap:6px 12px}
  .b-prod .chave{grid-column:1/-1}
}

/* ---------- modais e painel lateral ---------- */
.veu{position:fixed;inset:0;z-index:40;background:rgba(8,20,14,.55)}
.modal{position:fixed;z-index:41;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;background:var(--papel-2);border-radius:14px;padding:24px}
.modal h2{font:700 24px/1.15 var(--rotulo);margin-bottom:8px}
.modal fieldset{border:0;padding:0;margin:16px 0 0}
.modal legend{font:700 17px var(--rotulo);margin-bottom:6px}
.modal fieldset label{display:flex;gap:10px;align-items:center;padding:8px 0;font-size:16px}
.modal input[type=radio]{accent-color:var(--placa);width:18px;height:18px}
.m-bts{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:22px}
.m-dif{list-style:none;margin:14px 0 0;padding:0}
.m-dif li{padding:10px 12px;border-left:4px solid var(--placa);background:var(--branco);margin-bottom:8px;border-radius:0 8px 8px 0}
.m-dif li b{display:block;font:700 17px var(--rotulo)}
.m-dif li span{font-size:15px}
.m-dif li.sai{border-color:var(--musgo)}
.m-dif li.erro{border-color:var(--tijolo);background:#fbe9e3;color:var(--tinta);font-weight:400}
.m-dif li.erro b{color:var(--tijolo)}
.gaveta{position:fixed;z-index:41;top:0;right:0;bottom:0;width:min(520px,100vw);overflow:auto;background:var(--papel);padding:26px 26px 40px;box-shadow:-20px 0 50px rgba(0,0,0,.3);animation:entra .25s ease-out}
@keyframes entra{from{transform:translateX(40px);opacity:.5}}
.gaveta>header{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:6px}
.gaveta h2{font:400 40px/.95 var(--display);letter-spacing:.03em;color:var(--placa)}
.gaveta>p{color:var(--musgo);margin-bottom:10px}
.sol{padding:16px 0;border-bottom:1px solid var(--linha);display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:start}
.sol h3{font:700 20px/1.15 var(--rotulo)}
.sol p{grid-column:1;font-size:15px;color:#2c3f33}
.sol button{grid-column:2;grid-row:1/3;align-self:center}
.toasts{position:fixed;z-index:50;right:20px;bottom:20px;display:grid;gap:8px;justify-items:end;max-width:min(420px,calc(100vw - 40px))}
.toast{background:var(--tinta);color:var(--papel);padding:12px 16px;border-radius:10px;font-size:15px;line-height:1.35;box-shadow:0 10px 30px rgba(0,0,0,.3);animation:sobe .25s ease-out}
.toast b{color:var(--letreiro);font:700 14px var(--rotulo);display:block}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .b-ficha.novo{box-shadow:0 0 0 4px rgba(239,201,63,.7)}
}