:root{--verde:#629A41;--verde-esc:#517F36;--castanho:#724E32;--fundo:#F5F5F5;--card:#fff;--tinta:#2b2b2b;--suave:#7a7a7a;--linha:#e6e6e6;--erro:#c0392b;--r:10px;
--fonte:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{font-family:var(--fonte);background:var(--fundo);color:var(--tinta);overflow:hidden;user-select:none}
button{font:inherit;cursor:pointer;border:0;color:inherit}
input,select{font:inherit}
.app{display:grid;grid-template-columns:1fr 420px;grid-template-rows:64px 1fr;height:100%}
header{grid-column:1/3;background:#fff;border-bottom:1px solid var(--linha);display:flex;align-items:center;gap:12px;padding:0 18px}
header img{height:38px}
.pesquisa{flex:1;max-width:560px;position:relative}
.pesquisa input{width:100%;height:44px;border-radius:999px;border:2px solid var(--linha);padding:0 20px 0 46px;font-size:16px;outline:0;background:var(--fundo);transition:.15s}
.pesquisa input:focus{border-color:var(--verde);background:#fff}
.pesquisa svg{position:absolute;left:16px;top:12px;width:20px;height:20px;stroke:var(--suave);fill:none;stroke-width:2}
.espaco{flex:1}
.btn-h{height:40px;padding:0 16px;border-radius:999px;background:var(--fundo);font-weight:600;font-size:13px;white-space:nowrap}
.btn-h:hover{background:#e9e9e9}
.btn-h .n{background:var(--castanho);color:#fff;border-radius:999px;padding:1px 7px;margin-left:6px;font-size:11px}
main{display:flex;flex-direction:column;min-height:0;padding:14px 14px 0 18px}
.familias{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none;flex:none}
.familias::-webkit-scrollbar{display:none}
.fam{flex:none;height:42px;padding:0 20px;border-radius:999px;background:#fff;font-weight:600;font-size:14px;transition:.12s}
.fam.on{background:var(--verde);color:#fff}
.fam:active{transform:scale(.96)}
.grelha{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;align-content:start;padding:2px 4px 18px 2px}
.tile{background:var(--card);border-radius:var(--r);text-align:left;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:transform .08s,box-shadow .15s;min-height:128px}
.tile:active{transform:scale(.96)}
.tile:hover{box-shadow:0 4px 14px rgba(0,0,0,.1)}
.tile .topo{height:6px;flex:none}
.tile .corpo{padding:12px 14px;display:flex;flex-direction:column;flex:1;gap:4px}
.tile .nome{font-weight:600;font-size:14px;line-height:1.25;flex:1}
.tile .cod{font-size:11px;color:var(--suave)}
.tile .preco{font-weight:700;font-size:19px;color:var(--castanho)}
.vazio{grid-column:1/-1;text-align:center;color:var(--suave);padding:60px 0}
aside{background:#fff;border-left:1px solid var(--linha);display:flex;flex-direction:column;min-height:0}
.t-cab{padding:12px 18px;display:grid;grid-template-columns:1fr 1fr;gap:8px;border-bottom:1px solid var(--linha)}
.t-cab button{height:44px;border-radius:var(--r);background:var(--fundo);font-weight:600;font-size:13px;text-align:left;padding:0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-cab button small{display:block;font-weight:500;color:var(--suave);font-size:10px}
.t-cab button:hover{background:#e9e9e9}
.linhas{flex:1;overflow-y:auto;padding:6px 10px}
.linha{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 8px;border-radius:8px;align-items:center}
.linha.novo{animation:flash .7s}
@keyframes flash{from{background:#e6f1df}to{background:transparent}}
.linha .d{font-weight:600;font-size:14px}
.linha .tot{font-weight:700;text-align:right}
.linha .sub{font-size:12px;color:var(--suave)}
.qtd{display:flex;align-items:center;gap:6px;justify-self:end}
.qtd button{width:34px;height:34px;border-radius:50%;background:var(--fundo);font-size:18px;font-weight:700}
.qtd button:active{background:var(--verde);color:#fff}
.qtd .q{min-width:42px;text-align:center;font-weight:700;padding:6px 0;border-radius:8px;cursor:pointer}
.qtd .q:hover{background:var(--fundo)}
.rm{background:none;color:var(--erro);font-size:12px;padding:6px}
.ticket-vazio{text-align:center;color:var(--suave);padding:70px 20px;font-size:14px;line-height:1.6}
.ticket-vazio b{display:block;font-size:40px;margin-bottom:6px}
.totais{border-top:1px solid var(--linha);padding:12px 18px 4px}
.totais .l{display:flex;justify-content:space-between;font-size:13px;color:var(--suave);margin-bottom:3px}
.totais .grande{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px}
.totais .grande span{font-weight:600}
.totais .grande b{font-size:34px;color:var(--castanho)}
.acoes{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 18px 0}
.acoes button{height:40px;border-radius:var(--r);background:var(--fundo);font-weight:600;font-size:13px}
.acoes button:hover{background:#e9e9e9}
.cobrar{margin:12px 18px 16px;height:68px;border-radius:14px;background:var(--verde);color:#fff;font-weight:700;font-size:21px;box-shadow:0 4px 0 var(--verde-esc);transition:.08s}
.cobrar:active{transform:translateY(3px);box-shadow:0 1px 0 var(--verde-esc)}
.cobrar:disabled{background:#cfcfcf;box-shadow:0 4px 0 #b5b5b5;cursor:default}
kbd{font:inherit;font-size:11px;opacity:.6;margin-left:6px;font-weight:500}
/* modais */
.fundo-m{position:fixed;inset:0;background:rgba(30,25,20,.5);display:none;align-items:center;justify-content:center;z-index:20;padding:16px}
.fundo-m.on{display:flex}
.modal{background:#fff;border-radius:18px;width:min(780px,100%);max-height:100%;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:sobe .18s}
.modal.estreito{width:min(460px,100%)}
@keyframes sobe{from{transform:translateY(16px);opacity:0}}
.modal h3{margin:0;padding:16px 24px;border-bottom:1px solid var(--linha);display:flex;justify-content:space-between;align-items:center;font-size:18px;position:sticky;top:0;background:#fff;z-index:1}
.modal h3 button{background:none;font-size:22px;color:var(--suave);width:36px;height:36px}
.corpo-m{padding:18px 24px 22px}
.pag{display:grid;grid-template-columns:1fr 1fr}
.pag>div{padding:20px 24px}
.pag>div+div{border-left:1px solid var(--linha);background:#fafafa}
.a-pagar{font-size:13px;color:var(--suave)}
.a-pagar b{display:block;font-size:42px;color:var(--castanho);line-height:1.1}
.partes{margin:12px 0;display:grid;gap:6px}
.parte{display:flex;justify-content:space-between;align-items:center;background:var(--fundo);border-radius:var(--r);padding:8px 12px;font-weight:600;font-size:14px}
.parte button{background:none;color:var(--erro);font-size:18px;padding:0 6px}
.metodos{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0}
.met{height:52px;border-radius:var(--r);background:#fff;border:2px solid var(--linha);font-weight:600;font-size:14px}
.met:hover{border-color:var(--verde)}
.met:disabled{opacity:.35}
.campo{margin-bottom:12px}
.campo label{display:block;font-size:12px;color:var(--suave);margin-bottom:4px;font-weight:600}
.campo .v{height:50px;border-radius:var(--r);border:2px solid var(--verde);background:#fff;display:flex;align-items:center;padding:0 14px;font-size:22px;font-weight:700}
.campo input,.campo select{width:100%;height:46px;border-radius:var(--r);border:2px solid var(--linha);padding:0 14px;font-size:16px;outline:0;background:#fff;user-select:text}
.campo input:focus,.campo select:focus{border-color:var(--verde)}
.campo .erro{color:var(--erro);font-size:12px;margin-top:3px;min-height:14px}
.troco{border-radius:var(--r);background:#eef5ea;padding:10px 16px;display:flex;justify-content:space-between;align-items:baseline;font-weight:600;margin-top:6px}
.troco b{font-size:26px;color:var(--verde-esc)}
.troco.falta{background:#fbeceb}.troco.falta b{color:var(--erro)}
.teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.teclado button{height:50px;border-radius:var(--r);background:#fff;border:1px solid var(--linha);font-size:20px;font-weight:600}
.teclado button:active{background:var(--verde);color:#fff}
.rapidos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.rapidos button{height:38px;border-radius:999px;background:#fff;border:1px solid var(--linha);font-weight:600;font-size:13px}
.btn-p{width:100%;margin-top:14px;height:60px;border-radius:14px;background:var(--verde);color:#fff;font-weight:700;font-size:19px;box-shadow:0 4px 0 var(--verde-esc)}
.btn-p:disabled{background:#cfcfcf;box-shadow:0 4px 0 #b5b5b5}
.btn-s{height:42px;border-radius:var(--r);background:var(--fundo);font-weight:600;padding:0 16px;font-size:13px}
.btn-s:hover{background:#e9e9e9}
.btn-v{height:42px;border-radius:var(--r);background:var(--verde);color:#fff;font-weight:600;padding:0 16px;font-size:13px}
.tipos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.tipo{border-radius:var(--r);background:#fff;border:2px solid var(--linha);padding:8px 6px;text-align:center;font-size:11px;color:var(--suave);line-height:1.3}
.tipo b{display:block;font-size:16px;color:var(--tinta)}
.tipo.on{border-color:var(--verde);background:#eef5ea}
.tipo:disabled{opacity:.35}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;color:var(--suave);padding:6px 8px;border-bottom:1px solid var(--linha)}
td{padding:9px 8px;border-bottom:1px solid var(--linha);vertical-align:middle}
td.r,th.r{text-align:right}
.neg{color:var(--erro);font-weight:700}.pos{color:var(--verde-esc);font-weight:700}
.sal{display:flex;gap:10px;margin:12px 0}
.sal div{flex:1;background:var(--fundo);border-radius:var(--r);padding:12px;font-size:12px;color:var(--suave)}
.sal b{display:block;font-size:22px;color:var(--castanho)}
.barra{display:flex;gap:8px;margin-bottom:12px}
.barra input{flex:1;height:42px;border-radius:999px;border:2px solid var(--linha);padding:0 16px;outline:0;user-select:text}
.barra input:focus{border-color:var(--verde)}
.etq{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:#eef5ea;color:var(--verde-esc)}
.etq.al{background:#fbeceb;color:var(--erro)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:#2b2b2b;color:#fff;padding:12px 22px;border-radius:999px;font-weight:600;font-size:14px;opacity:0;transition:.2s;pointer-events:none;z-index:40}
.toast.on{opacity:1;transform:translateX(-50%)}
.toast.erro{background:var(--erro)}
.feito{text-align:center;padding:36px 24px}
.feito .ok{width:80px;height:80px;border-radius:50%;background:var(--verde);color:#fff;font-size:44px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.feito h2{margin:0 0 4px}
.feito .tr{font-size:15px;color:var(--suave)}.feito .tr b{display:block;font-size:40px;color:var(--verde-esc)}
.feito .bts{display:flex;gap:10px;justify-content:center;margin-top:22px}
.feito .bts button{height:52px;padding:0 26px;border-radius:14px;font-weight:700;font-size:15px;background:var(--fundo)}
.feito .bts .p{background:var(--verde);color:#fff}
@media (max-width:1000px){
  .app{grid-template-columns:1fr 340px}
  .grelha{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .pag{grid-template-columns:1fr}.pag>div+div{border-left:0;border-top:1px solid var(--linha)}
  .btn-h .t{display:none}
}
@media (max-width:760px){
  .app{grid-template-columns:1fr;grid-template-rows:64px 1fr 46vh}
  aside{border-left:0;border-top:2px solid var(--linha)}
  header{grid-column:1}
}
@media print{body>*:not(#print){display:none!important}#print{display:block!important}}
#print{display:none;font-family:monospace;font-size:12px;width:72mm}

.tile.sel{outline:3px solid var(--verde)}
.tile .img{height:84px;background-size:cover;background-position:center;background-color:#eee;flex:none}
.fam.sub{height:34px;font-size:13px;background:#eef5ea;padding:0 16px}.fam.sub.on{background:var(--castanho);color:#fff}

.cg-t{font-size:11px;font-weight:700;color:var(--suave);text-transform:uppercase;letter-spacing:.08em;margin:12px 0 6px}
.cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.cd{background:#fff;border:2px solid var(--linha);border-radius:12px;padding:8px 6px 6px;text-align:center;transition:.12s}
.cd.on{border-color:var(--verde);background:#f4f9f1}
.cdv .dv{width:100%;height:50px}
.cs{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:4px}
.cs button{width:30px;height:30px;border-radius:50%;background:var(--fundo);font-size:17px;font-weight:700;line-height:1}
.cs button:active{background:var(--verde);color:#fff}
.cs input{width:40px;height:30px;border:0;background:transparent;text-align:center;font-weight:700;font-size:16px;outline:0;user-select:text;-moz-appearance:textfield}
.cs input::-webkit-outer-spin-button,.cs input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.csub{font-size:11px;color:var(--castanho);font-weight:600;min-height:14px}
.ctot{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding:12px 16px;background:var(--fundo);border-radius:var(--r);font-weight:600}
.ctot b{font-size:24px;color:var(--castanho)}

/* ===== v2 · estética inspirada no Vendus (rail lateral, pílulas com contagem, cartões com imagem) ===== */
body{background:#f3f5f2}
.app{grid-template-columns:92px 1fr 410px;grid-template-rows:100%}
.rail{background:#fff;border-right:1px solid var(--linha);display:flex;flex-direction:column;padding:10px 6px;gap:3px;overflow-y:auto;scrollbar-width:none}
.marca{height:46px;display:flex;justify-content:center;align-items:center;margin-bottom:8px;overflow:hidden}
.marca img{height:38px;width:44px;object-fit:cover;object-position:left center}
.rb{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 7px;border-radius:12px;background:none;color:#6a7364;font-size:10px;font-weight:600;letter-spacing:.01em}
.rb svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rb:hover{background:var(--fundo)}.rb.on{background:#eef5ea;color:var(--verde-esc)}
.rb .n{position:absolute;top:3px;right:12px;background:var(--castanho);color:#fff;border-radius:999px;font-size:10px;padding:0 5px;line-height:15px}
.centro{display:flex;flex-direction:column;min-height:0;padding:14px 16px 0}
.topo-c{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.topo-c .pesquisa{flex:1;max-width:none}
.topo-c .pesquisa input{background:#fff;border:1px solid #e1e6dd;border-radius:12px;height:46px;padding-left:46px}
.topo-c .pesquisa input:focus{border-color:var(--verde);box-shadow:0 0 0 3px #629a4126}
.info-c{display:flex;gap:14px;font-size:12px;color:var(--suave);align-items:center;white-space:nowrap}
.info-c b{color:var(--tinta)}.info-c .ok{color:var(--verde-esc);font-weight:600}.info-c .ko{color:var(--erro);font-weight:600}
.fam{background:#fff;color:var(--castanho);border:1px solid #e3e8df;border-radius:10px;height:38px;padding:0 8px 0 16px;font-size:13px;display:flex;align-items:center;gap:8px}
.fam .ct{background:#eef5ea;color:var(--verde-esc);border-radius:999px;font-size:11px;min-width:24px;height:22px;display:inline-grid;place-items:center;padding:0 7px}
.fam.on{background:var(--castanho);color:#fff;border-color:var(--castanho)}.fam.on .ct{background:var(--verde);color:#fff}
.fam.sub{height:32px;background:transparent;border-style:dashed}.fam.sub.on{background:var(--verde);border-color:var(--verde)}
.grelha{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tile{position:relative;border:1px solid #e8ece5;box-shadow:none;border-radius:12px;min-height:0;background:#fff}
.tile:hover{border-color:#cdd9c5;box-shadow:0 6px 18px rgba(60,80,50,.1)}
.tile.no-t{border-color:var(--verde);box-shadow:0 0 0 2px #629a4133}
.tile .img,.tile .ph{height:92px;flex:none;background-size:cover;background-position:center;display:grid;place-items:center;font-weight:700;font-size:30px;letter-spacing:.02em}
.tile .corpo{padding:10px 12px 12px;gap:2px}
.tile .cat{font-size:11px;color:var(--suave)}
.tile .nome{font-size:13.5px;font-weight:700;flex:none;min-height:34px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .rodape{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px}
.tile .preco{font-size:16px}.tile .cod{font-size:10px}
.qb{position:absolute;top:8px;right:8px;z-index:2;min-width:26px;height:26px;border-radius:999px;background:var(--verde);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;padding:0 6px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.qb[hidden]{display:none}
aside{background:#fff;border-left:3px solid var(--verde)}
.t-cab{background:#fafbf9}
.linha{grid-template-columns:auto 1fr auto auto;gap:2px 10px;padding:10px 8px 6px;border-bottom:1px solid #f0f2ee;border-radius:0}
.qb2{width:34px;height:34px;border-radius:999px;background:var(--verde);color:#fff;font-weight:700;font-size:14px}
.linha .info{min-width:0}.linha .d{font-size:14px}
.linha .tot{font-size:15px}
.lx{background:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center}
.lx svg{width:18px;height:18px;stroke:var(--erro);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lx:hover{background:#fbeceb}
.linha .ops{grid-column:2/5;display:flex;gap:6px;padding:2px 0 4px}
.linha .ops button{height:26px;padding:0 10px;border-radius:999px;background:var(--fundo);font-size:11px;font-weight:600;color:var(--suave)}
.linha .ops button:hover{background:#e6efe1;color:var(--verde-esc)}
.cobrar{background:var(--castanho);box-shadow:0 4px 0 #553a25;border-radius:12px;font-size:20px}
.cobrar:disabled{background:#cfcfcf;box-shadow:0 4px 0 #b5b5b5}
.cobrar:active{box-shadow:0 1px 0 #553a25}
.acoes button{background:#fff;border:1px solid var(--linha)}
@media (max-width:1000px){.app{grid-template-columns:84px 1fr 340px}.info-c span:not(.ok):not(.ko){display:none}}
@media (max-width:760px){
  .app{grid-template-columns:1fr;grid-template-rows:auto 1fr 46vh}
  .rail{flex-direction:row;border-right:0;border-bottom:1px solid var(--linha);overflow-x:auto;padding:4px}
  .rail .espaco{display:none}.marca{display:none}.rb{min-width:64px}
  aside{border-left:0;border-top:3px solid var(--verde)}
}

.centro{min-width:0}
.app{overflow:hidden}

.t-cab .obs{grid-column:1/3;height:34px;font-weight:500;color:var(--suave);text-align:left}
.t-cab .obs.on{background:#fff7e0;color:var(--castanho);font-weight:600}
.totais .l.pr{color:var(--verde-esc);font-weight:600}

.modal{width:min(1120px,96vw)}
.modal.estreito{width:min(520px,96vw)}
.cg{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.topo-c{align-items:center}
.info-c{margin-left:auto;gap:12px}
.info-c .sep{width:1px;height:26px;background:var(--linha)}
.op{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--linha);border-radius:999px;padding:4px 16px 4px 4px;color:var(--tinta)}
.op svg{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--verde);stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.op span{display:flex;flex-direction:column;line-height:1.15;font-size:13px}.op small{font-size:10.5px;color:var(--suave);font-weight:500}

.bc{color:var(--suave);font-size:12px;display:inline-flex;align-items:center}
.fcard .ph{height:100px;font-size:34px}
.fcard .nome{font-size:15px;min-height:0}
.fcard{min-height:150px}

.metodos{grid-template-columns:1fr;gap:8px}
.met{display:flex;justify-content:space-between;align-items:center;padding:0 18px;height:54px;font-size:16px}
.met b{color:var(--verde-esc);font-size:17px}

.painel-art{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:10px 0 14px;padding:12px 16px;background:#fff;border:1px solid var(--linha);border-radius:var(--r);box-shadow:0 2px 10px rgba(0,0,0,.04)}
.pa-info{flex:1 1 100%;display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-height:58px}.pa-vazio{color:var(--suave);font-size:13px}
.pa-bt button.ic{flex:0 0 52px;padding:0;display:grid;place-items:center}.pa-bt button.ic svg{width:24px;height:24px;stroke:var(--verde-esc);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pa-bt button:disabled{opacity:.4;cursor:default;background:#fff;border-color:var(--linha)}
.pa-id{flex:1 1 200px;min-width:0}.pa-n{font-weight:700;font-size:16px}.pa-c{font-size:12px;color:var(--suave);margin-top:2px}
.pa-st{display:flex;align-items:center;gap:10px;padding:6px 14px;border-radius:12px;font-size:13px}
.pa-st small{color:var(--suave)}.pa-q{font-size:30px;font-weight:800;line-height:1}
.pa-st.ok{background:#EAF3E4}.pa-st.ok .pa-q{color:var(--verde-esc)}
.pa-st.pouco{background:#FFF3DC}.pa-st.pouco .pa-q{color:#9A6200}
.pa-st.falta{background:#FBE6E3}.pa-st.falta .pa-q{color:#B3261E}
.pa-arm{display:flex;gap:14px}.pa-arm span{display:flex;flex-direction:column;font-size:12px}.pa-arm b{font-size:16px}
.pa-bt{display:flex;gap:6px;flex-wrap:nowrap;width:100%}
.pa-bt button{height:44px;flex:1 1 auto;min-width:0;padding:0 8px;border-radius:12px;border:1.5px solid var(--linha);background:#fff;font-weight:600;font-size:14px}
.pa-bt button:hover{border-color:var(--verde);background:#F3F8EF}

.t-cab .ent{grid-column:1/3;height:34px;font-weight:600;color:var(--suave)}.t-cab .ent.on{background:#EAF3E4;color:var(--verde-esc)}

.fundo-bonito{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='none' stroke='%23629A41' stroke-opacity='.13' stroke-width='2' stroke-linecap='round'><path d='M30 70c0-28 22-44 46-44 0 28-18 46-46 44z'/><path d='M30 70c14-14 28-26 46-44'/><path d='M160 190c0-24 20-38 42-38 0 24-16 40-42 38z'/><path d='M160 190c12-12 24-24 42-38'/><circle cx='190' cy='50' r='5'/><circle cx='60' cy='190' r='4'/><circle cx='120' cy='120' r='3'/></g></svg>") 0 0/240px 240px,radial-gradient(70% 60% at 12% 18%,#cfe3c0 0,transparent 70%),radial-gradient(60% 55% at 90% 85%,#ead9c3 0,transparent 70%),radial-gradient(40% 40% at 80% 10%,#dcebd0 0,transparent 70%),linear-gradient(160deg,#f8fbf4,#e6f0dd)!important}
.fundo-bonito .modal{box-shadow:0 24px 70px rgba(60,90,40,.22),0 2px 6px rgba(0,0,0,.05)}

.feito .bts2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px auto 12px;max-width:520px}
.feito .bts2 button{height:96px;border-radius:18px;background:var(--fundo);font-weight:700;font-size:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.feito .bts2 button b{font-size:30px;line-height:1}
.feito .bts2 button:hover{background:#eef5ea}
.feito .grande{display:block;width:100%;max-width:520px;height:60px;margin:0 auto;border-radius:16px;font-weight:700;font-size:17px;background:var(--verde);color:#fff}

.tile{position:relative}
.tile .fav{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);color:#c9c9c9;display:grid;place-items:center;font-size:17px;box-shadow:0 1px 4px rgba(0,0,0,.15);z-index:2;line-height:1}
.tile .fav:hover{color:#E0A100}.tile .fav.on{color:#E0A100}
.pa-fav{background:none;font-size:20px;color:#c9c9c9;padding:0 4px;vertical-align:-1px}.pa-fav.on,.pa-fav:hover{color:#E0A100}

.modal td .btn-s{display:inline-block;white-space:nowrap;height:38px;padding:0 12px;margin-left:4px}
.rail{padding:10px 3px}.rb{letter-spacing:0;font-size:10px}.rb .t{max-width:100%;white-space:nowrap}

/* ===== Definições: página inteira (não é pop-up) ===== */
#def{position:fixed;inset:0;z-index:15;background:var(--fundo);display:flex;flex-direction:column;overflow:hidden}
#def[hidden]{display:none}
body.def .app{visibility:hidden}
.def-cab{all:unset;display:flex;align-items:center;gap:18px;padding:12px 24px;background:#fff;border-bottom:1px solid var(--linha);flex:none}
.def-cab img{height:34px}.def-cab h1{font-size:20px;margin:0}
#def-voltar{height:44px;padding:0 18px;border-radius:999px;background:var(--fundo);font-weight:700;font-size:14px}
.def-corpo{flex:1;display:grid;grid-template-columns:280px 1fr;min-height:0}
#def-nav{background:#fff;border-right:1px solid var(--linha);padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
#def-nav button{text-align:left;padding:12px 14px;border-radius:12px;background:none;display:flex;flex-direction:column;gap:2px;font-weight:700;font-size:14px}
#def-nav button small{font-weight:500;color:var(--suave);font-size:12px}
#def-nav button:hover{background:var(--fundo)}#def-nav button.on{background:#eef5ea;color:var(--verde-esc)}
#def-c{overflow-y:auto;padding:24px 32px}
#def-vazio{color:var(--suave)}#def-c:has(.fundo-m.on) #def-vazio{display:none}
#def .fundo-m{position:static;background:none;padding:0;display:none;z-index:auto}
#def .fundo-m.on{display:block}
#def .modal{width:100%;max-width:none;max-height:none;overflow:visible;box-shadow:none;background:#fff;border-radius:18px;animation:none;border:1px solid var(--linha)}
#def .modal h3{position:static}
#def .modal h3 button[data-fechar]{display:none}
.imp-cartao{border:1px solid var(--linha);border-radius:14px;padding:16px;margin-bottom:14px;background:#fff}
.imp-cartao h4{margin:0 0 2px;font-size:16px}.imp-cartao p{margin:0 0 12px;color:var(--suave);font-size:13px}
.imp-cartao .linha{display:grid;grid-template-columns:2fr 1fr auto;gap:10px;align-items:end}

/* Administração do POS: página inicial com cartões */
#def.inicio .def-corpo{grid-template-columns:1fr}#def.inicio #def-nav{display:none}#def.inicio #def-vazio{display:none}
#def:not(.inicio) #def-inicio{display:none}
#def-inicio .sec{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--suave);margin:24px 0 10px}
#def-inicio .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,360px));gap:14px}
#def-inicio .card{background:#fff;border:1px solid #e8ece5;border-radius:14px;padding:18px;text-align:left;display:flex;flex-direction:column;gap:6px;transition:.12s}
#def-inicio .card:hover{border-color:var(--verde);box-shadow:0 6px 18px rgba(60,80,50,.1);transform:translateY(-1px)}
#def-inicio .card svg{width:28px;height:28px;stroke:var(--verde-esc);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#def-inicio .card b{font-size:15px}#def-inicio .card span{font-size:12.5px;color:var(--suave);line-height:1.45}
#def-nav .inicio-b{color:var(--verde-esc);border-bottom:1px solid var(--linha);border-radius:0;margin-bottom:6px;padding-bottom:14px}

/* PC por ativar: só o ecrã de ativação, a aplicação nem aparece por trás */
body.a-ativar .app,body.a-ativar #m1,body.a-ativar #m2,body.a-ativar #m3{visibility:hidden}
#ativar .modal{box-shadow:0 18px 50px rgba(40,80,30,.18)}

/* Páginas de artigos: cartões do mesmo tamanho, sem esmagar quando há muitos */
.grelha{grid-auto-rows:max-content;overflow-y:auto}
.pager{flex:none;display:flex;align-items:center;gap:10px;padding:10px 4px 4px;justify-content:center}
.pager[hidden]{display:none}
.pg{min-width:44px;height:44px;padding:0 14px;border-radius:12px;background:#fff;border:1px solid #e8ece5;font-weight:700;font-size:14px;transition:.12s}
.pg:hover:not(:disabled){border-color:var(--verde)}
.pg.on{background:var(--verde);border-color:var(--verde);color:#fff}
.pg:disabled{opacity:.4}
.pg.seta{padding:0 18px}
.pg-n{display:flex;gap:6px;align-items:center}
.pg-r{color:var(--suave);padding:0 2px}
.pg-t{font-size:12px;color:var(--suave);margin:0 6px;white-space:nowrap}

.pager{flex-wrap:wrap}
.pg-letras{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:2px}
.pgl{min-width:30px;height:30px;border-radius:8px;background:#fff;border:1px solid #e8ece5;font-weight:700;font-size:12px;color:var(--castanho)}
.pgl:hover{border-color:var(--verde)}
.pgl.on{background:var(--castanho);border-color:var(--castanho);color:#fff}

/* famílias: deslizar para o lado */
.desliza{position:relative;flex:none;min-width:0}
.desliza .familias{padding-left:2px;padding-right:2px}
.seta-d{position:absolute;top:0;height:42px;width:42px;border-radius:50%;background:#fff;border:1px solid #e8ece5;box-shadow:0 2px 10px rgba(0,0,0,.12);font-size:24px;font-weight:700;color:var(--castanho);z-index:3;display:grid;place-items:center;line-height:1}
.seta-d.esq{left:-4px}.seta-d.dir{right:-4px}
.seta-d[hidden]{display:none}
/* assinatura */
.assinatura{margin-top:18px;font-size:11px;color:var(--suave);text-align:center}
.assinatura a{color:inherit;font-weight:700;text-decoration:none}
.assinatura a:hover{text-decoration:underline}

/* o texto e o preço nunca são cortados: é a fotografia que cede espaço */
.tile .img,.tile .ph{height:auto;flex:1 1 44px;min-height:44px}
.tile .corpo{flex:none}
.tile .nome{min-height:0}

/* escolha de variante: cartões grandes com a fotografia bem visível */
.esc-grelha{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.esc-c{height:auto!important;padding:12px!important;display:flex!important;flex-direction:column;align-items:center;gap:6px;text-align:center;background:#fff!important;border:1px solid #e8ece5!important;border-radius:16px!important}
.esc-c:hover{border-color:var(--verde)!important;box-shadow:0 6px 18px rgba(60,80,50,.12)}
.esc-f{width:100%;aspect-ratio:1/1;max-height:240px;background:#f7f9f5;border-radius:12px;display:grid;place-items:center;overflow:hidden}
.esc-f img{width:100%;height:100%;object-fit:contain}
.esc-f span{font-size:44px;font-weight:700;color:var(--verde)}
.esc-t{font-size:14px;line-height:1.25}.esc-c small{color:var(--suave);font-size:11px}
.esc-p{color:var(--castanho);font-size:19px;margin-top:2px}