/* demo do showroom — mobile-first, sem framework. Paleta quente de loja. */
:root{
  --bg:#f6f1ea; --card:#fff; --ink:#2b2723; --mut:#8c8378;
  --line:#e6ddd0; --brand:#9c5a37; --brand-d:#7c4527; --ok:#3f7d4e;
  --shadow:0 6px 22px rgba(60,40,20,.10); --r:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[x-cloak]{display:none!important}
html,body{margin:0;padding:0}
body{
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink);
  max-width:430px; margin:0 auto; min-height:100vh; position:relative;
}

/* ---- barra de demo (topo) -------------------------------------------------- */
.demobar{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:8px;
  background:#1c1916; color:#f3ece1; padding:7px 12px; font-size:13px;
  padding-top:calc(7px + env(safe-area-inset-top))}  /* respeita o notch no PWA fullscreen */
.demobar b{letter-spacing:.12em; font-size:11px}
.demobar__dot{width:8px;height:8px;border-radius:50%;background:#e0a44b;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,164,75,.5)}70%{box-shadow:0 0 0 7px rgba(224,164,75,0)}100%{box-shadow:0 0 0 0 rgba(224,164,75,0)}}
.demobar__sep{opacity:.4}
.demobar__lbl{color:#cdc3b5; font-size:12px}
.demobar__reset{margin-left:auto; background:#332e28; color:#cdc3b5; border:0;
  border-radius:99px; width:26px; height:26px; font-size:14px; cursor:pointer}

/* ---- nav inferior (tabbar) ------------------------------------------------- */
.tabbar{position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%;
  max-width:430px; display:flex; background:#fff; border-top:1px solid var(--line);
  z-index:50; box-shadow:0 -4px 16px rgba(60,40,20,.06)}
.tabbar button{flex:1; background:none; border:0; padding:8px 4px 9px; font-size:20px;
  color:var(--mut); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px}
.tabbar button span{font-size:11px; font-weight:600}
.tabbar button.on{color:var(--brand-d)}
.tabbar button:disabled{opacity:.35}
.tabbar{padding-bottom:env(safe-area-inset-bottom)}
.tabbar__scan{color:#fff!important}
.tabbar__scanicon{display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin-top:-14px; border-radius:50%; background:var(--brand);
  font-size:22px; box-shadow:0 4px 12px rgba(156,90,55,.4); color:#fff}

/* ---- scanner overlay ------------------------------------------------------- */
.scanner{position:fixed; inset:0; z-index:100; background:#000; display:flex; flex-direction:column;
  max-width:430px; margin:0 auto}
.scanner__head{display:flex; align-items:center; justify-content:space-between;
  color:#fff; padding:calc(14px + env(safe-area-inset-top)) 18px 14px; font-weight:600; font-size:15px}
.scanner__close{background:rgba(255,255,255,.18); border:0; color:#fff; width:34px; height:34px;
  border-radius:50%; font-size:17px; cursor:pointer}
.scanner__stage{flex:1; position:relative; overflow:hidden}
.scanner__video{width:100%; height:100%; object-fit:cover; display:block}
.scanner__frame{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64%; aspect-ratio:1; border:3px solid rgba(255,255,255,.9); border-radius:22px;
  box-shadow:0 0 0 2000px rgba(0,0,0,.45)}
.scanner__hint{position:absolute; left:0; right:0; bottom:calc(40px + env(safe-area-inset-bottom));
  text-align:center; color:#fff; font-size:14px; text-shadow:0 1px 4px rgba(0,0,0,.7)}

.screen{padding-bottom:78px}  /* espaço pra tabbar */

/* ---- cabeçalhos / títulos -------------------------------------------------- */
.vhead{display:flex; justify-content:space-between; align-items:center; padding:14px 18px 6px}
.vhead__store{font-weight:700; font-size:17px}
.vhead__who{font-size:13px; color:var(--mut)}
.vtitle{font-size:22px; margin:14px 18px 4px; line-height:1.2}
.vsub{margin:0 18px 14px; color:var(--mut); font-size:14px}
.vsub.small{font-size:13px}
.seclabel{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut);
  margin:16px 18px 6px; font-weight:700}
.lnk{background:none; border:0; color:var(--brand-d); font-size:15px; font-weight:600; cursor:pointer; padding:0}

/* selo "demo" (dado mock) */
.seal{display:inline-block; font-size:9px; font-weight:800; letter-spacing:.05em; vertical-align:middle;
  background:#f0e2cf; color:#9a7b4e; border-radius:99px; padding:2px 6px; margin-left:5px; text-transform:uppercase}
.seal.light{background:rgba(255,255,255,.25); color:#fff}

/* ============================== CLIENTES =================================== */
.btn{background:var(--brand); color:#fff; border:0; border-radius:12px; padding:11px 16px;
  font-size:15px; font-weight:650; cursor:pointer}
.btn.big{width:calc(100% - 36px); margin:4px 18px 6px; padding:15px; font-size:16px; border-radius:14px}
.btn.ghost{background:#fff; color:var(--brand-d); border:1px solid var(--brand)}

.clist{list-style:none; margin:10px 0 0; padding:0 14px; display:flex; flex-direction:column; gap:10px}
.ccard{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:13px 14px; box-shadow:var(--shadow); cursor:pointer}
.ccard.on{border-color:var(--brand); background:#fffaf5}
.ccard__main{flex:1; min-width:0}
.ccard__name{font-weight:700; font-size:16px}
.ccard__meta{font-size:12px; color:var(--mut); margin-top:2px}
.ccard__active{flex:none; font-size:10px; font-weight:800; text-transform:uppercase; color:var(--ok);
  background:#eaf4ec; border-radius:99px; padding:3px 8px}
.ccard__rm{flex:none; background:none; border:0; color:var(--mut); font-size:22px; cursor:pointer; line-height:1}

/* ============================== CATÁLOGO ================================== */
.catsec{margin-bottom:6px}
.plist{list-style:none; margin:0; padding:0 14px 6px; display:flex; flex-direction:column; gap:12px}
.pcard{display:flex; align-items:center; gap:12px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); padding:10px; box-shadow:var(--shadow); cursor:pointer}
.pcard__img{width:66px;height:66px;border-radius:11px;object-fit:cover;flex:none;background:#eee}
.pcard__ph{display:flex;align-items:center;justify-content:center;color:#fff;font-size:27px;font-weight:800;background:var(--c)}
.pcard__body{flex:1; min-width:0}
.pcard__name{font-weight:650; font-size:15px}
.pcard__fab{font-size:12px; color:var(--mut); margin:1px 0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pcard__from{font-size:13px} .pcard__from b{color:var(--brand-d)}
.pcard__go{flex:none; color:var(--mut); font-size:24px; padding-right:4px}

/* ============================== FICHA ===================================== */
.phero{position:relative; height:280px; overflow:hidden; background:#ddd}
.phero--ph{background:var(--c)}
.phero__phicon{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:120px; font-weight:800; color:rgba(255,255,255,.22)}
.phero__img{width:100%; height:100%; object-fit:cover; display:block}
.phero__grad{position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,14,8,.82) 4%, rgba(20,14,8,0) 45%)}
.phero__back{position:absolute; top:12px; left:12px; width:38px; height:38px; border-radius:50%;
  border:0; background:rgba(0,0,0,.4); color:#fff; font-size:24px; line-height:1; cursor:pointer}
.phero__txt{position:absolute; left:18px; right:18px; bottom:16px; color:#fff}
.phero__fab{font-size:12px; opacity:.85}
.phero__name{font-size:24px; margin:2px 0 0; line-height:1.15; text-shadow:0 1px 8px rgba(0,0,0,.4)}

.cbody{padding:16px 18px 0}
.pdesc{color:#5a5249; font-size:14px; margin:2px 0 18px}
.opt{margin-bottom:18px}
.opt__label{font-size:13px; color:var(--mut); margin-bottom:8px; font-weight:600; display:flex; align-items:center; gap:8px}
.opt__val{color:var(--ink); font-weight:700}
.mocktag{margin-left:auto; font-weight:600; font-size:10px; color:#a98b5e; background:#f4ead7;
  border-radius:99px; padding:2px 7px; letter-spacing:.03em}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:11px;
  padding:9px 13px; font-size:14px; font-weight:600; cursor:pointer}
.chip.on{border-color:var(--brand); background:var(--brand); color:#fff}
.swatches{display:flex; gap:12px}
.swatch{width:42px; height:42px; border-radius:50%; cursor:pointer; background:var(--c);
  border:2px solid #fff; box-shadow:0 0 0 1px var(--line); position:relative}
.swatch.on{box-shadow:0 0 0 2px var(--brand)}
.swatch.on::after{content:"✓"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:16px; text-shadow:0 1px 3px rgba(0,0,0,.5)}

.priceline{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; box-shadow:var(--shadow); margin:6px 0 16px}
.priceline__cap{font-size:12px; color:var(--mut); text-transform:uppercase; letter-spacing:.05em}
.priceline__big{font-size:32px; font-weight:800; color:var(--brand-d); line-height:1.1}
.priceline__sub{font-size:13px; color:var(--mut); margin-top:2px}

.btn.big{}  /* já definido acima; na ficha reusa width:100% via wide abaixo */
.cbody .btn.big{width:100%; margin:0}
.addok{text-align:center; background:#eaf4ec; color:var(--ok); border:1px solid #cfe6d4;
  border-radius:14px; padding:15px; font-weight:700}
.btn.share{background:#1f8a4c; margin-top:6px}  /* verde "enviar" (canal WhatsApp) */
.orcfinal .btn.big{width:100%}

/* ---- recomendações --------------------------------------------------------- */
.recos{margin-top:24px}
.recos__title{font-size:15px; margin:0 0 10px; display:flex; align-items:baseline; gap:8px}
.recos__sub{font-size:12px; font-weight:500; color:var(--mut)}
.recoscroll{display:flex; gap:12px; overflow-x:auto; padding:2px 2px 8px; margin:0 -2px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch}
.recoscroll::-webkit-scrollbar{height:0}
.recocard{flex:none; width:118px; scroll-snap-align:start; background:var(--card);
  border:1px solid var(--line); border-radius:13px; padding:8px; text-align:left;
  cursor:pointer; box-shadow:var(--shadow)}
.recocard__img{width:100%; height:78px; border-radius:9px; background:var(--c); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; margin-bottom:6px}
.recocard__name{font-size:13px; font-weight:650; line-height:1.2; min-height:31px}
.recocard__price{font-size:11px; color:var(--mut); margin-top:2px}

.finepr{font-size:11px; color:var(--mut); margin:18px 0 0; line-height:1.4}
.finepr.center{text-align:center; margin:14px 0}

/* ============================== HISTÓRICO ================================== */
.namefield{display:block; width:calc(100% - 36px); margin:0 18px 12px; border:0;
  border-bottom:1px dashed var(--line); background:none; font-size:14px; padding:4px 0; color:var(--ink); outline:none}
.hist{list-style:none; margin:0; padding:0 14px; display:flex; flex-direction:column; gap:10px}
.hitem{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line);
  border-radius:13px; padding:12px 14px; box-shadow:var(--shadow)}
.hitem__main{flex:1; min-width:0}
.hitem__name{font-weight:650; font-size:15px}
.hitem__cfg{font-size:12px; color:var(--mut); margin-top:1px}
.hitem__price{font-weight:750; color:var(--brand-d)}
.hitem__rm{flex:none; background:none; border:0; color:var(--mut); font-size:22px; cursor:pointer; line-height:1}

.total{display:flex; justify-content:space-between; align-items:baseline; margin:16px 18px 0;
  padding-top:14px; border-top:1px solid var(--line); font-size:15px; color:var(--mut)}
.total b{font-size:24px; color:var(--ink)}
.total.big{margin:18px 0 0} .total.big b{color:var(--brand-d)}
.histactions{display:flex; gap:10px; padding:18px 14px 0}
.histactions .btn{flex:1}

/* ============================== PAINEL DA LOJA ============================ */
.kpis{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:4px 14px 6px}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; box-shadow:var(--shadow)}
.kpi__n{font-size:24px; font-weight:800; color:var(--brand-d); line-height:1.1}
.kpi__l{font-size:12px; color:var(--mut); margin-top:2px}

.rank{padding:0 14px; display:flex; flex-direction:column; gap:9px}
.rankrow{display:flex; align-items:center; gap:10px}
.rankrow__name{flex:0 0 38%; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rankrow__bar{flex:1; height:14px; background:#ece3d6; border-radius:99px; overflow:hidden}
.rankrow__fill{height:100%; border-radius:99px; min-width:6px; transition:width .3s}
.rankrow__n{flex:none; font-size:13px; font-weight:700; color:var(--ink); width:18px; text-align:right}

.painel-note{margin:18px 14px 0; background:#fbf2ea; border:1px solid #ecdcc9;
  border-radius:14px; padding:13px 15px; font-size:12.5px; color:#6a5a48; line-height:1.5}

/* ============================== ORÇAMENTO ================================= */
.orcfinal{margin:20px 14px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:24px 18px; box-shadow:var(--shadow); text-align:center}
.orcfinal__check{width:48px;height:48px;border-radius:50%;background:var(--ok);color:#fff;
  font-size:26px; display:flex; align-items:center; justify-content:center; margin:0 auto 8px}
.orcfinal__title{font-size:22px; margin:0}
.orcfinal__cli{color:var(--mut); margin-bottom:14px}
.orcfinal__list{list-style:none; margin:0 0 4px; padding:0; text-align:left}
.orcfinal__list li{display:flex; justify-content:space-between; gap:12px; font-size:14px;
  padding:9px 0; border-bottom:1px solid var(--line)}
.orcfinal__list li b{white-space:nowrap; color:var(--brand-d)}