/* Wazzi Gestão: visual do rascunho 004-B (menu lateral claro, acabamento limpo) sobre as telas aprovadas 001-003. */
@font-face{font-family:"Schibsted";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/schibsted-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Schibsted";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/schibsted-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4}
:root{
  --bg:#F6F7FB;--card:#fff;--card-2:#FAFAFD;--line:#E8EAF2;--line-2:#D9DCEA;--row:#EFF0F6;
  --ink:#0F1130;--muted:#6A6E8A;--faint:#9A9EB8;
  --accent:#2B35E8;--accent-d:#2129C9;--accent-soft:#EEF0FF;--lime:#E6F24A;--tinta:#14163A;
  --ok:#0E7A55;--ok-soft:#E3F5EC;--warn:#B7791F;--warn-soft:#FBF1DE;--bad:#C0392B;--bad-soft:#FBEAE7;
  --r:8px;--r-lg:12px;--shadow:0 8px 24px rgba(15,17,48,.08);--shadow-lg:0 24px 60px rgba(15,17,48,.18);
  --sb-w:248px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:13.5px/1.5 'Schibsted',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
[hidden]{display:none!important}
.muted{color:var(--muted)}.small{font-size:12px}.num{font-variant-numeric:tabular-nums}.nowrap{white-space:nowrap}
h1,h2,h3{margin:0;letter-spacing:-.02em;font-weight:650}
::selection{background:var(--accent-soft)}

/* ===== casca: menu lateral ===== */
.shell{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:100vh}
.sb{width:var(--sb-w);background:#fff;border-right:1px solid var(--line);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:14px 10px;gap:2px;transition:width .2s ease;overflow:hidden auto;z-index:40}
.sb .brandrow{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 14px}
.logo{display:flex;align-items:center;gap:9px;font-weight:750;font-size:17px;letter-spacing:-.03em;color:var(--ink);white-space:nowrap;text-decoration:none}
.logo small{font-weight:500;font-size:13px;color:var(--faint);letter-spacing:0}
.logo svg{flex:none}
.collapse{border:0;background:transparent;color:var(--faint);width:28px;height:28px;border-radius:6px;display:grid;place-items:center;flex:none}
.collapse:hover{background:#F3F4FA;color:var(--ink)}
.collapse svg{width:16px;height:16px}
.cta{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border-radius:var(--r);border:0;background:var(--accent);color:#fff;font-weight:600;font-size:13.5px;margin:0 0 12px;white-space:nowrap;transition:background .15s ease;text-decoration:none}
.cta:hover{background:var(--accent-d)}
.cta svg{width:18px;height:18px;flex:none}
.cta kbd{margin-left:auto;font:11px ui-monospace,Consolas,monospace;opacity:.7;border:0;background:none;color:inherit;padding:0}
.nav{display:grid;gap:1px}
.sect{font-size:11px;font-weight:600;color:var(--faint);padding:14px 10px 6px;white-space:nowrap;letter-spacing:.02em}
.item{position:relative;display:flex;align-items:center;gap:11px;height:36px;padding:0 10px;border-radius:var(--r);border:0;background:transparent;color:#3F4363;font-weight:500;font-size:13.5px;text-align:left;width:100%;white-space:nowrap;text-decoration:none;transition:background .12s ease,color .12s ease}
.item>svg{width:18px;height:18px;flex:none;stroke-width:1.75}
.item:hover{background:#F3F4FA;color:var(--ink)}
.item.on{background:var(--accent-soft);color:var(--accent-d);font-weight:600}
.item.on::before{content:'';position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.item .chev{margin-left:auto;width:14px;height:14px;transition:transform .15s ease;opacity:.55}
.item.open .chev{transform:rotate(180deg)}
.item .count{margin-left:auto;font-size:11px;font-weight:600;color:var(--warn);background:var(--warn-soft);border-radius:999px;padding:0 7px;line-height:18px}
.sub{display:grid;gap:1px;padding:2px 0 4px 29px}
.sub .item{height:32px;font-size:13px}
.sub .item.on{background:transparent;color:var(--accent-d)}
.sub .item.on::before{left:-3px;top:13px;bottom:auto;width:6px;height:6px;border-radius:50%}
.spacer{flex:1;min-height:12px}
#cfg.alerta::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--warn);margin-left:auto;box-shadow:0 0 0 3px var(--warn-soft)}
.sb .foot{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:2px}
.meta-st{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:6px 10px;white-space:nowrap;border-radius:var(--r);text-decoration:none;overflow:hidden;text-overflow:ellipsis}
.meta-st:hover{background:#F3F4FA}
.meta-st i{width:7px;height:7px;border-radius:50%;background:#B9BDD6;flex:none}
.meta-st i.on{background:#22B573;box-shadow:0 0 0 3px #22b5731f}
.me{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);white-space:nowrap;border:0;background:none;text-align:left;width:100%}
.me:hover{background:#F3F4FA}
.me .av{width:28px;height:28px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--accent-d);flex:none}
.me b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.me small{display:block;font-size:11px;color:var(--faint)}
.me .out{margin-left:auto;color:var(--faint);width:16px;height:16px;flex:none}
/* recolhido: só ícones */
.sb.mini{width:64px}
.sb.mini .logo span,.sb.mini .logo small,.sb.mini .label,.sb.mini .chev,.sb.mini .count,.sb.mini .sect,.sb.mini .sub,.sb.mini .cta span,.sb.mini .cta kbd,.sb.mini .me>div,.sb.mini .me .out,.sb.mini .meta-st span{display:none}
.sb.mini .brandrow{flex-direction:column;gap:10px;padding-bottom:10px}
.sb.mini .cta,.sb.mini .item,.sb.mini .me,.sb.mini .meta-st{justify-content:center;padding-left:0;padding-right:0}
.content{min-width:0}
.topbar{display:none}
@media(max-width:860px){
  .shell{grid-template-columns:1fr}
  /* celular: barra no topo com ☰ + menu lateral em gaveta */
  .sb{position:fixed;left:0;top:0;bottom:0;height:auto;transform:translateX(-105%);transition:transform .22s ease;width:276px!important;box-shadow:var(--shadow-lg);z-index:70}
  .sb.mini .logo span,.sb.mini .logo small,.sb.mini .label,.sb.mini .chev,.sb.mini .count,.sb.mini .sect,.sb.mini .sub,.sb.mini .cta span,.sb.mini .cta kbd,.sb.mini .me>div,.sb.mini .me .out,.sb.mini .meta-st span{display:revert}
  .sb.mini .brandrow{flex-direction:row}
  .sb.mini .cta,.sb.mini .item,.sb.mini .me,.sb.mini .meta-st{justify-content:flex-start;padding-left:10px;padding-right:10px}
  .sb.aberto{transform:none}
  .sb .collapse{display:none}
  .topbar{display:flex;align-items:center;gap:10px;height:56px;padding:0 12px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
  .topbar .logo{font-size:16px}
  .topbar .btn.primary{margin-left:auto}
  .scrim{position:fixed;inset:0;background:#0f113055;z-index:60;animation:fade .15s ease}
}

main{padding:28px 32px 64px;max-width:1320px}
@media(max-width:1180px){main{padding:24px 24px 56px}}
.crumb{font-size:12px;color:var(--faint);margin-bottom:2px}
.crumb a{color:inherit;text-decoration:none}.crumb a:hover{color:var(--accent)}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:22px;letter-spacing:-.025em}
.page-head p{margin:3px 0 0;font-size:13px;color:var(--muted)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ===== botões e campos ===== */
.btn{border:1px solid var(--line);background:#fff;border-radius:var(--r);height:34px;padding:0 13px;font-weight:550;font-size:13px;transition:background .12s ease,border-color .12s ease,color .12s ease;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;text-decoration:none;color:var(--ink)}
.btn:hover{border-color:var(--line-2);background:var(--card-2)}
.btn:focus-visible,.item:focus-visible,.cta:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn.danger{color:var(--bad)}.btn.danger:hover{background:var(--bad-soft);border-color:#F1C9C2}
.btn.ghost{border-color:transparent;background:transparent;color:var(--accent)}.btn.ghost:hover{background:var(--accent-soft)}
.btn.sm{height:28px;padding:0 10px;font-size:12.5px}
.btn.big{height:44px;padding:0 18px;font-size:14.5px;width:100%;font-weight:600}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn svg{width:15px;height:15px;flex:none;stroke-width:2}
.btn.spin svg{animation:spin .8s linear infinite}
.icon-btn{width:34px;padding:0}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}}
kbd{font:11px ui-monospace,Consolas,monospace;border:1px solid var(--line);border-radius:4px;padding:0 4px;color:var(--faint);background:#fff}
.btn.primary kbd{background:transparent;color:#ffffffb0;border-color:#ffffff40}
label.f{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 4px;font-size:12.5px;font-weight:500;color:var(--muted)}
label.f>*:not(.req){flex:1 0 100%;min-width:0}
label.f .req{color:var(--bad)}
label.f .help{font-weight:400;font-size:12px;color:var(--faint)}
.inp{border:1px solid var(--line-2);border-radius:var(--r);background:#fff;height:36px;padding:0 11px;outline:0;width:100%;transition:border-color .12s ease,box-shadow .12s ease;color:var(--ink);font-weight:400;min-width:0}
textarea.inp{height:auto;padding:9px 11px;resize:vertical;min-height:70px}
.inp::placeholder{color:#AFB2C8}
.inp:hover{border-color:#C9CCDD}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px #2b35e81f}
.inp:disabled{background:var(--card-2);color:var(--muted)}
.inp.err{border-color:var(--bad);box-shadow:0 0 0 3px #c0392b1a}
.inp.big{height:44px;font-size:15px;padding:0 14px}
select.inp{padding-right:28px}
.ferr{color:var(--bad);font-size:12px;font-weight:500}
.money{position:relative}.money>span{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:13px;pointer-events:none}.money .inp{padding-left:34px}
.seg{display:inline-flex;background:#ECEEF5;border-radius:var(--r);padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;border-radius:6px;padding:4px 11px;font-size:12.5px;font-weight:550;color:var(--muted);transition:all .12s ease}
.seg button:hover{color:var(--ink)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px #0f113014,0 0 0 1px #0f11300a}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer;user-select:none;border:0;background:none;padding:0}
.toggle i{width:30px;height:18px;border-radius:999px;background:#D5D8E8;position:relative;transition:all .15s ease;flex:none}
.toggle i::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:all .15s ease;box-shadow:0 1px 2px #0002}
.toggle.on i{background:var(--accent)}.toggle.on i::after{left:14px}
.stepper{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:#fff;flex:none;height:36px}
.stepper button{border:0;background:transparent;width:32px;font-size:16px;color:var(--muted)}
.stepper button:hover{background:var(--bg);color:var(--ink)}
.stepper input{width:44px;border:0;text-align:center;outline:0;font-weight:600}
.stepper.sm{height:30px}.stepper.sm button{width:26px;font-size:14px}.stepper.sm input{width:34px}

/* ===== superfícies e tabelas ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.card-h{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 12px;font-weight:600;font-size:14px;gap:10px;letter-spacing:-.01em}
.card-h small{font-weight:400;color:var(--faint);font-size:12.5px;letter-spacing:0}
.card-b{padding:18px 20px}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line)}
.filters .inp{max-width:300px;height:34px}
.filters select.inp,.filters input[type=date].inp{width:auto}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 16px;font-size:13px;vertical-align:middle}
td{border-top:1px solid var(--line)}
th{font-size:12px;font-weight:500;color:var(--faint);white-space:nowrap;padding-top:12px;padding-bottom:8px}
tbody tr{transition:background .1s ease}
tbody tr.click{cursor:pointer}
tbody tr:hover{background:#FAFAFD}
td.r,th.r{text-align:right}
.pager{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.empty{text-align:center;padding:36px 16px;color:var(--muted);font-size:13px}
.empty b{display:block;color:var(--ink);font-size:14px;font-weight:600;margin-bottom:3px}
.loading{padding:36px;text-align:center;color:var(--faint);font-size:13px}
/* status: bolinha + texto */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
.badge.warn{color:var(--warn)}.badge.warn::before{background:var(--warn)}
.badge.bad{color:var(--bad)}.badge.bad::before{background:var(--bad)}
.badge.off::before{background:#B9BDD6}
.badge.info{color:var(--accent)}.badge.info::before{background:var(--accent)}
.x{border:0;background:transparent;color:var(--faint);width:28px;height:28px;border-radius:6px;font-size:17px;line-height:1;flex:none}
.x:hover{background:var(--bad-soft);color:var(--bad)}
.note{display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:10px;font-size:13px;margin-bottom:18px;border:1px solid;flex-wrap:wrap}
.note.info{background:#F4F5FF;border-color:#DDE0FF;color:#2A2F8A}
.note.bad{background:#FFF6F4;border-color:#F3D3CD;color:#8A2A20}
.note.warn{background:#FFFAF0;border-color:#F1E0BE;color:#7A4E0E}
.note.ok{background:#F2FBF6;border-color:#C9EBD8;color:#0B5C40}
.note .btn{margin-left:auto}

/* foto, cores */
.ph{background:#F0F1F7;border-radius:6px;display:grid;place-items:center;color:#B0B4CC;flex:none;overflow:hidden}
.ph svg{width:46%;height:46%}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.sw{width:11px;height:11px;border-radius:50%;display:inline-block;border:1px solid #0000001f;flex:none;background:#ccc}
.sw.transparente{background:repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 0 0/6px 6px!important}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:6px;padding:3px 8px;font-size:12.5px;font-weight:500;transition:all .12s ease;white-space:nowrap;color:var(--ink)}
button.chip:hover{border-color:var(--line-2);background:var(--card-2)}
.chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-d)}
.chip:disabled{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.chip .q{font-weight:500;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.chip.low .q{color:var(--warn);font-weight:600}
.chip.zero{color:var(--faint)}.chip.zero .q{color:var(--bad);font-weight:600}
.chip.lg{padding:6px 11px;font-size:13px}

/* lista com coluna lateral */
.with-side{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:16px;align-items:start}
.side{display:grid;gap:12px;position:sticky;top:24px}
.side .btn.primary{height:38px}
.side-act{display:flex;gap:10px;align-items:center;padding:9px 0;border:0;border-bottom:1px solid var(--row);font-size:13px;font-weight:500;color:var(--ink);background:none;text-align:left;width:100%;transition:color .12s ease;text-decoration:none}
.side-act:last-child{border-bottom:0}
.side-act:hover{color:var(--accent)}
.side-act svg{width:16px;height:16px;color:var(--faint);flex:none}
.stat+.stat{margin-top:12px}
.stat b{display:block;font-size:20px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--muted)}
.side-title{font-size:12px;font-weight:600;color:var(--faint);margin-bottom:10px}
@media(max-width:1180px){.with-side{grid-template-columns:minmax(0,1fr)}.side{position:static;order:-1;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.hide-sm{display:none}}
.pname{display:flex;gap:12px;align-items:center;min-width:220px}
.pname .badge{margin-top:3px}
.pname b{display:block;font-size:13px;font-weight:550;line-height:1.35}

/* formulários em abas */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 16px;overflow-x:auto}
.tabs button{border:0;background:transparent;padding:14px 8px 12px;margin:0 4px;font-weight:550;font-size:13px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;transition:all .12s ease}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.fsec{padding:22px 22px 10px}
.fsec+.fsec{border-top:1px solid var(--line)}
.fsec h3{margin:0 0 3px;font-size:15px;font-weight:600}
.fsec>p{margin:0 0 18px;font-size:13px;color:var(--muted);max-width:720px}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:14px}
.span2{grid-column:span 2}.span4{grid-column:1/-1}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}.span2{grid-column:1/-1}}
.form-foot{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:14px 22px;border-top:1px solid var(--line);background:var(--card-2);border-radius:0 0 var(--r-lg) var(--r-lg);flex-wrap:wrap}
.sugs{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 12px}
.photo-drop{border:1.5px dashed var(--line-2);border-radius:10px;display:grid;place-items:center;gap:4px;padding:24px;text-align:center;color:var(--muted);font-size:12.5px;cursor:pointer;transition:all .12s ease;background:var(--card-2)}
.photo-drop:hover,.photo-drop.drag{border-color:var(--accent);color:var(--accent);background:#F7F8FF}
.cost-box{border:1px solid var(--line);border-radius:10px;padding:16px;background:var(--card-2);display:grid;gap:14px}
.lock{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:550;color:var(--muted)}
.bar{height:4px;border-radius:99px;background:var(--row);overflow:hidden}.bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .2s ease}

/* ===== frente de caixa ===== */
.pdv{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:1020px){.pdv{grid-template-columns:minmax(0,1fr)}}
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);padding:0 8px}
.steps button{border:0;background:transparent;padding:14px 8px 12px;font-weight:550;font-size:13px;color:var(--muted);border-bottom:2px solid transparent;display:flex;gap:8px;justify-content:center;align-items:center;transition:all .12s ease}
.steps button i{font-style:normal;width:20px;height:20px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:11px;font-weight:600}
.steps button:hover{color:var(--ink)}
.steps button.on{color:var(--ink);border-bottom-color:var(--accent)}
.steps button.on i{border-color:var(--accent);color:var(--accent)}
.steps button.done i{background:var(--ok);border-color:var(--ok);color:#fff}
.search-wrap{position:relative}
.results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:15;max-height:360px;overflow:auto;padding:4px}
.res{display:flex;gap:12px;align-items:center;padding:8px 10px;cursor:pointer;border-radius:8px}
.res:hover,.res.hl{background:#F4F5FB}
.res .n{font-weight:550;font-size:13px}
.res .m{font-size:12px;color:var(--faint)}
.res .p{margin-left:auto;font-weight:600;font-size:13px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sel{display:grid;grid-template-columns:112px 1fr;gap:18px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:560px){.sel{grid-template-columns:76px 1fr}}
.sel h3{font-size:16px;font-weight:600}
.sel .price{font-size:24px;font-weight:600;letter-spacing:-.03em;margin:4px 0 12px;font-variant-numeric:tabular-nums}
.line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.itens{max-height:400px;overflow:auto}
.it{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 20px;border-top:1px solid var(--line)}
.it .n{font-weight:550;font-size:13px;line-height:1.35}
.it .m{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.it .t{font-weight:600;text-align:right;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.it .price-edit{border:0;background:none;color:var(--accent);font-size:12px;padding:0;text-decoration:underline dotted;text-underline-offset:2px}
.pdv-foot{padding:18px 20px;border-top:1px solid var(--line);display:grid;gap:14px;background:var(--card-2);border-radius:0 0 var(--r-lg) var(--r-lg)}
.paygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.paygrid button{border:1px solid var(--line-2);background:#fff;border-radius:var(--r);padding:10px 6px;font-weight:600;font-size:13px;transition:all .12s ease;display:grid;gap:1px;justify-items:center}
.paygrid button small{font-weight:400;font-size:11.5px;color:var(--faint)}
.paygrid button:hover{border-color:#C9CCDD}
.paygrid button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-d);box-shadow:0 0 0 1px var(--accent) inset}
.mini-seg{display:inline-flex;background:#ECEEF5;border-radius:var(--r);padding:3px;gap:2px;flex:none}
.mini-seg button{border:0;background:transparent;border-radius:6px;padding:4px 10px;font-size:12.5px;font-weight:600;color:var(--muted)}
.mini-seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px #0f113014}
.totals{display:grid;gap:7px;font-size:13px}
.totals .row{display:flex;justify-content:space-between;gap:10px}
.totals .grand{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.totals .grand span{font-weight:600}
.totals .grand strong{font-size:32px;font-weight:600;letter-spacing:-.035em;line-height:1}
.neg{color:var(--ok)}
.cli-found{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:14px;background:var(--card-2)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent-d);display:grid;place-items:center;font-weight:700;font-size:11.5px;flex:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}

/* ===== painel ===== */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.kpi{padding:18px 20px;display:grid;gap:6px;align-content:start;border-left:1px solid var(--line);min-width:0}
.kpi:first-child{border-left:0}
.kpi>span{font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:center}
.kpi strong{font-size:25px;font-weight:600;letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi small{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.kpi .up{color:var(--ok);font-weight:600}.kpi .down{color:var(--bad);font-weight:600}
.kpi.key strong{color:var(--accent)}
.kpi.key.neg strong{color:var(--bad)}
.kpi.key>span::before{content:'';width:6px;height:6px;border-radius:2px;background:var(--lime);box-shadow:0 0 0 1px #9aa412}
.kpi .tip{width:14px;height:14px;border-radius:50%;border:1px solid var(--line-2);color:var(--faint);font-size:9px;display:inline-grid;place-items:center;cursor:help;font-style:normal}
.kpis.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpis.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1240px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.kpis .kpi:nth-child(3n+1){border-left:0}.kpis .kpi:nth-child(n+4){border-top:1px solid var(--line)}.kpis.k4{grid-template-columns:repeat(2,minmax(0,1fr))}.kpis.k4 .kpi{border-left:1px solid var(--line);border-top:0}.kpis.k4 .kpi:nth-child(odd){border-left:0}.kpis.k4 .kpi:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:620px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpis .kpi{border-left:1px solid var(--line)!important;border-top:1px solid var(--line)!important}.kpis .kpi:nth-child(odd){border-left:0!important}.kpis .kpi:nth-child(-n+2){border-top:0!important}.kpi strong{font-size:20px}.kpi{padding:14px 16px}}
.na{color:var(--faint)}
.grid-main{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:16px;align-items:start}
.stack{display:grid;gap:16px;min-width:0}
@media(max-width:1020px){.grid-main{grid-template-columns:minmax(0,1fr)}}
.chart{position:relative;padding:4px 12px 12px 6px}
.chart svg{width:100%;height:240px;display:block;overflow:visible}
.chart .tipbox{position:absolute;pointer-events:none;background:var(--tinta);color:#fff;border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.55;box-shadow:0 8px 20px #0f113033;opacity:0;transition:opacity .1s ease;white-space:nowrap;transform:translate(-50%,-112%);z-index:3}
.chart .tipbox b{font-weight:600}
.chart .tipbox .k{display:inline-block;width:8px;height:2px;margin-right:6px;vertical-align:middle}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted);flex-wrap:wrap;font-weight:400}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:14px;height:2px;border-radius:2px;display:inline-block}
.adname{display:flex;gap:12px;align-items:center;min-width:220px}
.thumb{width:36px;height:36px;border-radius:6px;background:linear-gradient(135deg,#EDEFF8,#DFE2F1);flex:none;display:grid;place-items:center;color:#9A9EB8;font-size:10px;font-weight:600;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.adname b{display:block;font-size:13px;font-weight:550;line-height:1.3}
.adname small{color:var(--faint);font-size:12px}
.adname .bar{width:120px;margin-top:6px;height:3px}
.rank{display:flex;gap:12px;align-items:center;padding:9px 20px;font-size:13px}
.rank em{font-style:normal;color:var(--faint);font-size:12px;width:16px;font-variant-numeric:tabular-nums}
.rank .nm{flex:1;min-width:0}
.rank .nm span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .nm small{color:var(--faint);font-size:12px}
.rank b{font-weight:550;font-variant-numeric:tabular-nums}
.rows{padding:2px 0 10px}
.stack-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;margin:4px 20px 14px;gap:2px;background:var(--row)}
.stack-bar i{display:block;height:100%}
.pay-legend{display:grid;gap:9px;padding:0 20px 18px}
.pay-legend div{display:flex;align-items:center;gap:8px;font-size:13px}
.pay-legend em{width:8px;height:8px;border-radius:2px;display:inline-block}
.pay-legend span{color:var(--muted);flex:1}
.pay-legend b{font-weight:550;font-variant-numeric:tabular-nums}
.pay-legend small{color:var(--faint);width:38px;text-align:right;font-variant-numeric:tabular-nums}
.low{display:flex;justify-content:space-between;gap:10px;padding:9px 20px;font-size:13px;align-items:center}
.low .nm{display:inline-flex;gap:8px;align-items:center;min-width:0}
.qty{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.qty.bad{color:var(--bad)}.qty.warn{color:var(--warn)}

/* ===== modal, toast ===== */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:#0f113066;animation:fade .15s ease}
.dialog{background:#fff;border-radius:14px;width:min(540px,100%);max-height:92vh;overflow:auto;box-shadow:var(--shadow-lg)}
.dialog.wide{width:min(760px,100%)}
.dialog>header{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 4px}
.dialog>header h2{font-size:17px;font-weight:600}
.dialog .body{padding:14px 22px 20px;display:grid;gap:14px}
.dialog>footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--line);background:var(--card-2);flex-wrap:wrap}
.done-grid{display:grid;grid-template-columns:1fr 330px}
.done-grid .side-p{padding:26px;display:grid;gap:14px;align-content:start}
.done-grid .paper{background:#F1F2F7;padding:18px;display:grid;place-items:start center;border-radius:0 14px 14px 0}
.done-grid iframe{border:0;background:#fff;width:300px;max-width:100%;height:460px;box-shadow:0 2px 8px #0f11301f;border-radius:2px}
@media(max-width:720px){.done-grid{grid-template-columns:1fr}.done-grid .paper{border-radius:0 0 14px 14px}}
.ok-ico{width:42px;height:42px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);background:var(--tinta);color:#fff;padding:10px 15px;border-radius:10px;font-size:13px;font-weight:500;opacity:0;transition:all .18s ease;z-index:90;box-shadow:var(--shadow);max-width:90vw;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--bad)}

/* ===== ritmo de espaços e celular =====
   Espaços em múltiplos de 4: 8 entre controles, 16 entre blocos, 24 entre seções.
   No celular tudo encolhe um degrau e as colunas secundárias das tabelas somem. */
.show-m{display:none!important}
@media(max-width:860px){.show-m{display:flex!important}}
.card+.card{margin-top:0}
.stack>.card,.grid-main .card{margin:0}
@media(max-width:860px){
  main{padding:16px 12px 48px}
  .page-head{margin-bottom:16px;gap:10px;align-items:stretch;flex-direction:column}
  .page-head h1{font-size:20px}
  .page-head .actions{justify-content:flex-start}
  .page-head .actions .seg{flex:1}
  .page-head .actions .seg button{flex:1}
  .card{border-radius:10px}
  .card-h{padding:14px 16px 10px;flex-wrap:wrap}
  .content,.shell{max-width:100vw}
  .adname{min-width:0}
  .adname .bar{width:90px}
  .card-b{padding:14px 16px}
  .filters{padding:10px 12px;gap:6px}
  .filters .inp{max-width:none;flex:1 1 100%}
  .filters select.inp,.filters input[type=date].inp{flex:1 1 auto}
  th,td{padding:10px 12px}
  .hide-m{display:none}
  .grid-main,.stack,.pdv,.with-side{gap:12px}
  .kpis{margin-bottom:12px}
  .fsec{padding:18px 16px 6px}
  .fgrid{gap:12px}
  .form-foot{padding:12px 16px}
  .form-foot .actions{width:100%}
  .form-foot .actions .btn{flex:1}
  .tabs{padding:0 8px}
  .it{padding:10px 16px}
  .pdv-foot{padding:16px}
  .totals .grand strong{font-size:28px}
  .rank,.low{padding:9px 16px}
  .pay-legend{padding:0 16px 16px}
  .stack-bar{margin:4px 16px 14px}
  .note{padding:10px 12px;margin-bottom:14px}
  .note .btn{margin-left:0}
  .dialog>header{padding:16px 16px 2px}
  .dialog .body{padding:12px 16px 16px}
  .dialog>footer{padding:12px 16px}
  .dialog>footer .btn{flex:1}
  .side .card-b{padding:12px 14px}
  .side>.card{display:none}
  .pname{min-width:180px}
  .modal{padding:10px;align-items:end}
  .dialog{max-height:88vh;border-radius:14px}
}
@media(max-width:560px){
  .hide-xs{display:none}
  .it{grid-template-columns:36px minmax(0,1fr) auto;row-gap:8px}
  .it .stepper{grid-column:2;grid-row:2;justify-self:start}
  .it>div:last-child{grid-column:3;grid-row:1}
  .page-head .actions .btn{flex:1}
  .chart svg{height:200px}
  .sel .price{font-size:21px}
}

/* ===== movimento (rascunho 005) ===== */
:root{--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes wave{to{transform:scale(4);opacity:0}}
@keyframes pop{from{transform:scale(0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes bump{40%{transform:scale(1.35)}}
@keyframes pulse{40%{transform:scale(1.05)}}
@keyframes shine{to{transform:translateX(100%)}}
@keyframes breathe{50%{box-shadow:0 12px 32px -8px #e6f24acc}}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes slidein{from{opacity:0;transform:translateX(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes slideout{to{opacity:0;transform:translateX(30px)}}
@keyframes printa{from{transform:translateY(-30px) scaleY(.2);opacity:0}to{transform:none;opacity:1}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes float{50%{transform:translateY(-4px)}}
/* troca de tela */
main>*{animation:rise .4s var(--ease) both}
main>*:nth-child(2){animation-delay:40ms}main>*:nth-child(3){animation-delay:80ms}main>*:nth-child(4){animation-delay:120ms}
.kpis .kpi{animation:rise .45s var(--ease) both}
.kpis .kpi:nth-child(2){animation-delay:40ms}.kpis .kpi:nth-child(3){animation-delay:80ms}.kpis .kpi:nth-child(4){animation-delay:120ms}.kpis .kpi:nth-child(5){animation-delay:160ms}.kpis .kpi:nth-child(6){animation-delay:200ms}
.stack>.card{animation:rise .45s var(--ease) both}
.stack>.card:nth-child(2){animation-delay:60ms}.stack>.card:nth-child(3){animation-delay:120ms}
tbody tr{animation:rise .35s var(--ease) both}
tbody tr:nth-child(2){animation-delay:20ms}tbody tr:nth-child(3){animation-delay:40ms}tbody tr:nth-child(4){animation-delay:60ms}tbody tr:nth-child(5){animation-delay:80ms}tbody tr:nth-child(6){animation-delay:100ms}tbody tr:nth-child(7){animation-delay:120ms}tbody tr:nth-child(n+8){animation-delay:140ms}
/* carregando: esqueleto com brilho */
.loading{color:transparent;position:relative;min-height:120px;border-radius:var(--r-lg);background:linear-gradient(90deg,#EEF0F6 0%,#F7F8FC 50%,#EEF0F6 100%) 0 0/200% 100%;animation:shimmer 1.2s linear infinite}
/* botões da loja: onda limão, sobe no hover, ícone + gira */
.btn,.cta,.paygrid button{position:relative;overflow:hidden;isolation:isolate;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s var(--ease),box-shadow .2s var(--ease)}
.wave{position:absolute;border-radius:50%;background:var(--lime);opacity:.55;transform:scale(0);animation:wave .6s var(--ease) forwards;pointer-events:none;z-index:-1}
.btn:active,.cta:active{transform:scale(.97)}
.btn.primary,.cta{box-shadow:0 6px 16px -8px #2b35e8aa}
.btn.primary:hover,.cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px #2b35e8cc}
.btn.primary svg,.cta svg{transition:transform .35s var(--spring)}
.btn.primary:hover svg,.cta:hover svg{transform:rotate(90deg)}
.btn.icon-btn:hover svg{transform:rotate(-30deg);transition:transform .35s var(--spring)}
.item>svg{transition:transform .3s var(--spring)}
.item:hover>svg{transform:scale(1.12)}
.item.on::before{animation:pop .3s var(--spring)}
.seg button,.mini-seg button,.tabs button{transition:all .2s var(--ease)}
.seg button.on{animation:pop .25s var(--spring)}
/* janelas e avisos */
.modal{animation:fade .18s ease}
.dialog{animation:rise .3s var(--spring)}
.toast{transition:all .3s var(--spring);transform:translate(-50%,20px) scale(.96)}
.toast.show{transform:translate(-50%,0) scale(1)}
.ok-ico{animation:pop .45s var(--spring)}
.ok-ico path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .45s .2s var(--ease) forwards}
.card{transition:box-shadow .25s var(--ease),border-color .2s}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ===== painel no estilo Wazzi ===== */
.herois{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
@media(max-width:900px){.herois{grid-template-columns:minmax(0,1fr)}}
.heroi{position:relative;overflow:hidden;border-radius:18px;padding:22px 26px 24px;display:grid;gap:6px;align-content:start;min-height:190px;animation:rise .5s var(--spring) both}
.heroi.azul{background:var(--accent);color:#fff;padding-bottom:84px}
.heroi.lima{background:var(--lime);color:var(--tinta);animation-delay:80ms}
.heroi.lima.neg{background:#FFD5CF}
.h-lb{font-size:14px;font-weight:650;display:flex;align-items:center;gap:6px}
.h-lb .tip{width:15px;height:15px;border-radius:50%;border:1.5px solid currentColor;font-size:9px;display:inline-grid;place-items:center;font-style:normal;opacity:.6;cursor:help}
.h-num{font-size:clamp(36px,5vw,58px);font-weight:800;letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums;margin:6px 0 4px}
.heroi.azul .h-num{color:var(--lime)}
.h-sub{font-size:13px;opacity:.9;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.heroi.azul .h-sub{color:#E3E5FF}
.delta{font-size:12px;font-weight:700;padding:2px 7px;border-radius:999px;background:#ffffff26;white-space:nowrap}
.heroi.lima .delta,.mini .delta{background:#14163A14}
.delta.up{color:inherit}.mini .delta.up{color:var(--ok)}.mini .delta.down{color:var(--bad)}
.heroi.azul .delta.down{background:#ff9c9033;color:#FFD5CF}
.h-spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:76px}
.sp-linha{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s .25s var(--ease) forwards}
.sp-area{opacity:0;animation:fadein .8s .7s ease forwards}
@keyframes fadein{to{opacity:1}}
.h-conta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:auto;padding-top:14px}
.h-conta div{background:#14163A0f;border-radius:10px;padding:8px 10px;display:grid;gap:1px}
.h-conta span{font-size:11.5px;font-weight:600;opacity:.75}
.h-conta b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.minis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media(max-width:1100px){.minis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mini{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:grid;gap:4px;align-content:start;position:relative;animation:rise .45s var(--ease) both;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.mini:nth-child(2){animation-delay:60ms}.mini:nth-child(3){animation-delay:120ms}.mini:nth-child(4){animation-delay:180ms}
.mini:hover{transform:translateY(-2px);box-shadow:0 12px 24px -14px #0f113040}
.mini-ic{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;transition:transform .35s var(--spring)}
.mini:hover .mini-ic{transform:rotate(-8deg) scale(1.08)}
.mini-ic svg{width:18px;height:18px}
.m-lb{font-size:12.5px;color:var(--muted);font-weight:550}
.mini strong{font-size:26px;font-weight:750;letter-spacing:-.04em;line-height:1.15;font-variant-numeric:tabular-nums;margin-top:2px}
.mini small{font-size:12px;color:var(--faint);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
@media(max-width:560px){.heroi{padding:18px 18px 20px;min-height:0}.heroi.azul{padding-bottom:70px}.minis{gap:10px}.mini{padding:14px}.mini strong{font-size:21px}.mini-ic{width:28px;height:28px;right:10px;top:10px}.h-conta b{font-size:12.5px}}
.g-barra{transform-box:fill-box;transform-origin:bottom;animation:crescer .7s var(--spring) both;transition:fill .2s}
@keyframes crescer{from{transform:scaleY(0)}}
.g-linha{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s .35s var(--ease) forwards}
.g-ponto{transform-box:fill-box;transform-origin:center;animation:pop .35s var(--spring) both}
.g-valor{animation:fadein .4s ease both;opacity:0}
#foco{transition:x .2s var(--ease),opacity .15s}
#grafico svg{height:auto;aspect-ratio:680/250}
.lg-barra{width:10px!important;height:10px!important;border-radius:3px!important;background:var(--accent)}
.lg-linha{width:16px!important;height:3px!important;border-radius:2px;background:#B5C200}
.rank .bar{margin-top:5px;height:4px}
.rank .bar i{animation:encher .8s var(--ease) both}
@keyframes encher{from{width:0}}
.stack-bar i{animation:encher .8s var(--ease) both}
.adname .bar i{animation:encher .8s var(--ease) both}

/* ===== frente de caixa (rascunho 005-A) ===== */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start}
@media(max-width:1100px){.pos{grid-template-columns:minmax(0,1fr) 360px}}
@media(max-width:900px){.pos{grid-template-columns:minmax(0,1fr)}}
.busca{position:relative;margin-bottom:14px}
.busca input{width:100%;height:52px;border:1px solid var(--line-2);border-radius:12px;background:#fff;padding:0 54px 0 46px;font-size:15px;outline:0;transition:border-color .15s,box-shadow .2s var(--ease)}
.busca input:focus{border-color:var(--accent);box-shadow:0 0 0 4px #2b35e81a}
.busca>svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--faint)}
.busca kbd{position:absolute;right:14px;top:50%;transform:translateY(-50%)}
.cats{position:relative;display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.cats::-webkit-scrollbar{display:none}
.cat-ind{position:absolute;top:0;left:0;height:30px;border-radius:999px;background:var(--accent);transition:transform .4s var(--spring),width .4s var(--spring);z-index:0;box-shadow:0 6px 14px -8px var(--accent)}
.cat{position:relative;z-index:1;border:1px solid var(--line);background:#fff;border-radius:999px;height:30px;padding:0 13px;font-size:12.5px;font-weight:550;color:var(--muted);white-space:nowrap;flex:none;transition:color .2s,border-color .2s,background .2s}
.cat:hover{color:var(--ink);border-color:var(--line-2)}
.cat.on{background:transparent;border-color:transparent;color:#fff}
.catalogo{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px}
@media(max-width:560px){.catalogo{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.pc{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 10px 12px;text-align:left;display:grid;gap:8px;align-content:start;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s;cursor:pointer;animation:rise .45s var(--ease) both}
.pc:hover{transform:translateY(-3px);box-shadow:0 12px 28px -12px #0f113040;border-color:var(--line-2)}
.pc.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 14px 30px -14px #2b35e866;transform:none}
.pc.esgotado{opacity:.6}
.pc .img{height:128px;border-radius:10px;background:#F2F3F8;overflow:hidden;position:relative}
@media(max-width:560px){.pc .img{height:104px}}
.pc .img>img,.pc .img>.semfoto{transition:transform .5s var(--ease);width:100%;height:100%}
.pc .img>img{object-fit:cover;display:block}
.pc:hover .img>img,.pc:hover .img>.semfoto{transform:scale(1.05)}
.semfoto{display:grid;place-items:center;align-content:center;gap:2px;background:linear-gradient(135deg,#EEF0FF,#F6F7FB)}
.semfoto span{font-size:30px;font-weight:700;letter-spacing:-.04em;color:#C3C7F5}
.semfoto small{font-size:10.5px;color:#A9ADCB}
.corbar{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:6px;background:#ffffffe6;border-radius:999px;padding:3px 9px 3px 4px;font-size:11.5px;font-weight:600;animation:open .3s var(--ease)}
.corbar i{width:14px;height:14px;border-radius:50%;border:1px solid #0002}
.pc .n{font-weight:600;font-size:13px;line-height:1.3;min-height:34px}
.pc .linha{display:flex;justify-content:space-between;align-items:center;gap:6px}
.pc .p{font-weight:650;font-size:15px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pc .st{font-size:11.5px;color:var(--faint)}
.pc .st.low{color:var(--warn);font-weight:600}
.pc .st.zero{color:var(--bad);font-weight:600}
.bolinhas{display:flex;gap:7px;flex-wrap:wrap}
.bolinha{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line-2);padding:0;position:relative;transition:transform .2s var(--spring),box-shadow .2s;flex:none}
.bolinha.transparente{background:repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 0 0/8px 8px!important}
.bolinha:hover{transform:scale(1.15)}
.bolinha.on{box-shadow:0 0 0 2px var(--accent);transform:scale(1.12)}
.bolinha:disabled{opacity:.35;cursor:not-allowed;transform:none}
.bolinha:disabled::after{content:'';position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;background:var(--bad);transform:rotate(45deg);border-radius:2px}
.bolinha .q{position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--faint);font-weight:600;font-variant-numeric:tabular-nums}
.pick{display:grid;gap:8px;animation:open .35s var(--ease)}
.pick .stepper{height:32px}
.add{height:36px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px;position:relative;overflow:hidden;isolation:isolate;transition:transform .15s var(--ease),background .15s,box-shadow .2s;box-shadow:0 8px 18px -10px var(--accent);flex:1}
.add:hover{background:var(--accent-d);transform:translateY(-1px)}
.add:active{transform:scale(.96)}
.add:disabled{background:#C7CAE0;box-shadow:none;cursor:not-allowed;transform:none}
.add svg{width:16px;height:16px;transition:transform .35s var(--spring)}
.add:hover svg{transform:rotate(90deg) scale(1.1)}
.shake{animation:shake .35s}

/* ticket cobalto */
.ticket{position:sticky;top:20px;background:var(--accent);color:#fff;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -30px #14163a99}
.t-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 6px}
.t-head b{font-size:14px;font-weight:600}
.t-head small{color:#ffffffd9;font-size:12px}
.t-link{border:0;background:none;color:#ffffffd9;font-size:12px;font-weight:550;padding:4px 6px;border-radius:6px}
.t-link:hover{background:#ffffff1f;color:#fff}
.t-items{max-height:300px;overflow:auto;padding:6px 12px;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent}
.ti{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 8px;border-radius:12px;transition:background .15s}
.ti:hover{background:#ffffff14}
.ti.enter{animation:slidein .45s var(--spring)}
.ti.leave{animation:slideout .28s var(--ease) forwards}
.ti .im{width:44px;height:44px;border-radius:10px;background:#ffffff1a;overflow:hidden;display:grid;place-items:center}
.ti .im img{width:100%;height:100%;object-fit:cover}
.ti .im span{font-size:13px;font-weight:700;color:#ffffffb0}
.ti .n{font-weight:600;font-size:13px;line-height:1.3}
.ti .m{font-size:12px;color:#ffffffd9;display:flex;align-items:center;gap:6px;margin-top:2px;flex-wrap:wrap}
.ti .m i{width:9px;height:9px;border-radius:50%;border:1px solid #ffffff55}
.ti .pr{border:0;background:none;color:#ffffffd9;padding:0;font-size:12px;text-decoration:underline dotted;text-underline-offset:2px}
.ti .pr.alt{color:var(--lime)}
.ti .r{display:grid;justify-items:end;gap:6px}
.ti .v{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.qty{display:inline-flex;align-items:center;background:#ffffff1a;border-radius:8px;height:26px}
.qty button{border:0;background:none;color:#fff;width:24px;height:26px;font-size:14px;border-radius:8px;opacity:.85}
.qty button:hover{background:#ffffff26;opacity:1}
.qty span{min-width:20px;text-align:center;font-weight:650;font-size:12.5px;font-variant-numeric:tabular-nums;display:inline-block}
.qty span.bump{animation:bump .35s var(--spring)}
.t-empty{text-align:center;padding:30px 20px 26px;color:#ffffffd9;font-size:13px}
.t-empty svg{width:42px;height:42px;opacity:.5;margin-bottom:6px;animation:float 3s ease-in-out infinite}
.t-sec{padding:14px 20px;border-top:1px dashed #ffffff30;display:grid;gap:10px}
.t-sec .lb{font-size:11.5px;font-weight:600;color:#ffffffd9;letter-spacing:.04em}
.t-in{height:38px;border-radius:10px;border:1px solid #ffffff2e;background:#ffffff12;color:#fff;padding:0 12px;outline:0;width:100%;transition:border-color .15s,background .15s;min-width:0}
.t-in::placeholder{color:#ffffff8c}
.t-in:focus{border-color:#ffffffaa;background:#ffffff1f}
.t-obs-btn{display:flex;align-items:center;gap:10px;border:0;background:none;color:#fff;padding:0;text-align:left;width:100%}
.t-obs-btn span:nth-child(2){flex:1;font-size:12.5px;color:#ffffffb3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-obs-btn svg{width:18px;height:18px;transition:transform .35s var(--spring);flex:none}
.t-obs-btn.aberto svg{transform:rotate(45deg)}
.t-obs{height:auto;padding:9px 12px;resize:vertical;min-height:70px;animation:open .3s var(--ease);font-size:13px;line-height:1.45}
.cli{display:flex;align-items:center;gap:10px;background:#ffffff14;border-radius:10px;padding:8px 10px;animation:open .3s var(--ease)}
.cli .av{width:28px;height:28px;border-radius:50%;background:var(--lime);color:var(--ink);font-weight:700;font-size:11px;display:grid;place-items:center;flex:none}
.cli small{display:block;color:#ffffffd9;font-size:11.5px}
.pays{position:relative;display:grid;grid-template-columns:repeat(3,1fr);background:#00000026;border-radius:12px;padding:4px}
.pays .ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);background:#fff;border-radius:9px;transition:transform .35s var(--spring);box-shadow:0 4px 10px -4px #0006}
.pays button{position:relative;z-index:1;border:0;background:none;color:#fff;height:38px;font-weight:600;font-size:13px;transition:color .25s}
.pays button.on{color:var(--ink)}
.disc{display:flex;gap:6px;align-items:center}
.ds{display:inline-flex;background:#00000026;border-radius:9px;padding:3px;flex:none}
.ds button{border:0;background:none;color:#fff;height:30px;padding:0 10px;border-radius:7px;font-weight:650;font-size:12.5px;transition:background .2s,color .2s}
.ds button.on{background:#fff;color:var(--ink)}
.pix5{border:1px dashed #ffffff66;background:none;color:#fff;border-radius:10px;height:34px;font-size:12.5px;font-weight:550;transition:background .15s,border-color .15s;animation:open .3s var(--ease)}
.pix5:hover{background:#ffffff14;border-color:#fff}
.troco{display:flex;justify-content:space-between;font-size:13px;color:#ffffffd9;animation:open .3s var(--ease)}
.troco b{color:var(--lime);font-variant-numeric:tabular-nums}
.t-total{padding:16px 20px 20px;border-top:1px dashed #ffffff30;background:#00000014}
.t-lines{display:grid;gap:4px;font-size:13px;color:#ffffffd9;margin-bottom:12px}
.t-lines div{display:flex;justify-content:space-between}
.t-lines .d{color:var(--lime)}
.t-big{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.t-big span{font-weight:600;font-size:14px}
.t-big strong{font-size:40px;font-weight:650;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.t-big strong.pulse{animation:pulse .45s var(--spring)}
.go{width:100%;height:52px;border:0;border-radius:14px;background:var(--lime);color:var(--ink);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .15s var(--ease),filter .15s,opacity .2s;position:relative;overflow:hidden;isolation:isolate;box-shadow:0 10px 24px -10px #e6f24a99}
.go:hover{filter:brightness(1.04)}
.go:active{transform:scale(.98)}
.go:disabled{cursor:not-allowed;animation:none;box-shadow:none;filter:none}
.go:disabled kbd{opacity:.5}
.go kbd{background:transparent;border-color:#14163a33;color:#14163a99}
.go svg{width:18px;height:18px;flex:none}
.go .sh{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff8c 50%,transparent 70%);transform:translateX(-100%);pointer-events:none}
.go:not(:disabled){animation:breathe 2.8s ease-in-out infinite}
.go:not(:disabled) .sh{animation:shine 3.2s 1s var(--ease) infinite}
.go .wave{background:#fff}
.fly{position:fixed;z-index:200;width:34px;height:34px;border-radius:50%;pointer-events:none;box-shadow:0 6px 16px #0004;border:3px solid #fff;background:var(--accent)}
.done{position:absolute;inset:0;background:var(--accent);display:grid;place-items:center;text-align:center;padding:24px;z-index:5;animation:fade .25s ease;overflow:auto}
.done .ck{width:72px;height:72px;border-radius:50%;background:var(--lime);display:grid;place-items:center;margin:0 auto 14px;animation:pop .5s var(--spring)}
.done .ck path{stroke:var(--ink);stroke-dasharray:30;stroke-dashoffset:30;animation:draw .45s .2s var(--ease) forwards}
.done h3{margin:0 0 4px;font-size:20px;letter-spacing:-.02em;font-weight:650}
.done p{margin:0 0 18px;color:#ffffffd9}
.done .acts{display:grid;gap:8px;width:min(280px,100%);margin:0 auto}
.done .sec{height:44px;border-radius:12px;border:1px solid #ffffff55;background:none;color:#fff;font-weight:600;position:relative;overflow:hidden;isolation:isolate}
.done .sec:hover{background:#ffffff14}
.recibo{width:230px;margin:0 auto 18px;background:#fff;color:#111;font:10.5px/1.45 'Courier New',monospace;padding:12px 12px 16px;text-align:left;border-radius:2px;box-shadow:0 18px 30px -12px #0008;animation:printa .9s .15s var(--ease) both;transform-origin:top;clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),95% 100%,90% calc(100% - 6px),85% 100%,80% calc(100% - 6px),75% 100%,70% calc(100% - 6px),65% 100%,60% calc(100% - 6px),55% 100%,50% calc(100% - 6px),45% 100%,40% calc(100% - 6px),35% 100%,30% calc(100% - 6px),25% 100%,20% calc(100% - 6px),15% 100%,10% calc(100% - 6px),5% 100%,0 calc(100% - 6px))}
.recibo .c{text-align:center}.recibo .l{display:flex;justify-content:space-between;gap:6px}.recibo .s{border-top:1px dashed #000;margin:5px 0}
.barra-venda{display:none}
@media(max-width:900px){
  .ticket{position:relative;top:0}
  .barra-venda{display:flex;position:sticky;bottom:12px;z-index:20;margin-top:14px;background:var(--accent);color:#fff;border-radius:14px;padding:10px 10px 10px 16px;align-items:center;justify-content:space-between;box-shadow:0 14px 30px -12px #2b35e8;animation:rise .3s var(--spring)}
  .barra-venda b{font-variant-numeric:tabular-nums}
  .barra-venda button{border:0;border-radius:10px;background:var(--lime);color:var(--ink);font-weight:700;height:38px;padding:0 14px}
  .t-big strong{font-size:34px}
}

/* ===== login ===== */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--bg)}
.login-card{width:min(380px,100%);background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 30px 30px;box-shadow:0 20px 50px #0f11300d}
.login-card .mascote{display:block;margin:0 auto 6px;width:92px;height:92px}
.login-card .logo{justify-content:center;margin-bottom:22px}
.login-card form{display:grid;gap:14px}

/* ---------- calculadora de preço (produto › custo) ---------- */
.pct{position:relative}.pct>span{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:13px;pointer-events:none}.pct .inp{padding-right:30px}
button.link{border:0;background:none;padding:0;color:var(--accent);font-weight:600;font-size:12.5px;cursor:pointer;text-align:left}
button.link:hover{text-decoration:underline}
.calc{display:grid;gap:14px;animation:rise .35s var(--ease) both}
.calc-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:start}
.calc-linhas{border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 16px 4px;background:var(--card)}
.calc-linhas:empty{display:none}
.cl-tit{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:10px 0 8px}
.cl-row{display:grid;grid-template-columns:minmax(0,1fr) auto 52px;gap:10px;align-items:baseline;padding:9px 0;border-top:1px solid var(--row);font-size:13.5px}
.cl-row span{color:var(--muted);min-width:0;overflow-wrap:anywhere}
.cl-row b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.cl-row small{color:var(--faint);text-align:right;font-variant-numeric:tabular-nums;font-size:12px}
.cl-row.total{border-top:1px solid var(--line-2);padding:12px 0 10px}
.cl-row.total span{color:var(--ink);font-weight:600}
.cl-row.total b{font-size:15px}
.neg-v{color:var(--bad)!important}
.calc-res{display:grid;gap:10px}
.calc-vazio{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:22px;color:var(--muted);font-size:13.5px;text-align:center;grid-column:1/-1}
.cr-card{background:var(--accent);color:#fff;border-radius:var(--r-lg);padding:18px 18px 16px;display:grid;gap:4px;position:relative;overflow:hidden}
.cr-card.neg{background:#B4232E}
.cr-lb{font-size:12px;font-weight:600;opacity:.75;text-transform:uppercase;letter-spacing:.05em}
.cr-num{font-size:32px;line-height:1.1;font-weight:700;letter-spacing:-.02em;color:var(--lime);font-variant-numeric:tabular-nums}
.cr-card.neg .cr-num{color:#fff}
.cr-sub{font-size:12.5px;opacity:.85}
.cr-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;margin-top:12px;background:#ffffff1f;gap:2px}
.cr-bar i{display:block;height:100%;transition:width .5s var(--ease)}
.cr-bar i:first-child{border-radius:4px 0 0 4px}.cr-bar i:last-child{border-radius:0 4px 4px 0}
.cr-leg{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;opacity:.85;margin-top:6px}
.cr-leg span{display:inline-flex;align-items:center;gap:5px}.cr-leg i{width:8px;height:8px;border-radius:2px;display:block}
.cr-mini{display:grid;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.cr-mini>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:11px 14px;align-items:baseline}
.cr-mini>div+div{border-top:1px solid var(--row)}
.cr-mini span{font-size:13px;color:var(--muted)}
.cr-mini b{font-size:15px;font-variant-numeric:tabular-nums;grid-row:span 2;align-self:center}
.cr-mini small,.cr-mini .link{font-size:11.5px;color:var(--faint)}
.cr-mini .link{color:var(--accent)}
.calc-loja{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card-2);padding:0 16px}
.calc-loja summary{cursor:pointer;padding:13px 0;font-weight:600;font-size:13.5px;list-style:none;display:flex;align-items:center;gap:6px}
.calc-loja summary::-webkit-details-marker{display:none}
.calc-loja summary::before{content:'';width:6px;height:6px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(-45deg);transition:transform .2s var(--ease);margin-right:4px}
.calc-loja[open] summary::before{transform:rotate(45deg)}
.calc-loja summary .muted{font-weight:400}
.calc-trava{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:18px;display:grid;gap:4px;color:var(--muted);font-size:13.5px}
.calc-trava b{color:var(--ink)}
.cq{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.cq-tit{display:flex;align-items:center;padding:12px 14px;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--card-2);border-right:1px solid var(--line)}
.cq-i{display:grid;gap:2px;padding:10px 14px;border-left:1px solid var(--row)}
.cq-i:nth-child(2){border-left:0}
.cq-i span{font-size:11.5px;color:var(--faint)}
.cq-i b{font-size:14px;font-variant-numeric:tabular-nums}
@media (max-width:860px){.calc-grid{grid-template-columns:minmax(0,1fr)}.cq{grid-template-columns:repeat(3,minmax(0,1fr))}.cq-tit{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line)}.cq-i:nth-child(5){border-left:0}.cq-i:nth-child(n+5){border-top:1px solid var(--row)}}
/* ---------- metas ---------- */
.m-trilho{position:relative;height:10px;border-radius:6px;background:#ffffff26;margin-top:18px}
.m-trilho i{display:block;height:100%;border-radius:6px;background:var(--lime);animation:encherw .9s var(--ease) both;transform-origin:left}
.m-trilho b{position:absolute;top:-4px;width:2px;height:18px;background:#fff;border-radius:1px;opacity:.85}
.m-trilho.claro{background:#14163A18}.m-trilho.claro i{background:var(--tinta)}
.m-trilho.mei{background:var(--row);margin:6px 0 12px}.m-trilho.mei i{background:var(--accent)}
.m-trilho.mei.atencao i{background:var(--warn)}.m-trilho.mei.alerta i{background:var(--bad)}
@keyframes encherw{from{transform:scaleX(0)}to{transform:none}}
.m-txt{margin:0;font-size:13.5px;color:var(--muted)}.m-txt b{color:var(--ink)}
.m-qtd{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.m-qtd>div{display:grid;gap:2px;padding:12px 16px;border-top:1px solid var(--row)}
.m-qtd span{font-size:12px;color:var(--faint)}.m-qtd b{font-size:16px;font-variant-numeric:tabular-nums}.m-qtd small{font-size:11.5px;color:var(--faint)}
.lg-meta{display:inline-block;width:14px;height:0;border-top:2px dashed var(--tinta);opacity:.55;margin-right:6px;vertical-align:middle}

/* ---------- anúncios ---------- */
.an-top{display:flex;gap:8px;align-items:baseline;margin-top:10px;font-size:12.5px;color:#E3E5FF;min-width:0}
.an-top b{color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.an-top em{font-style:normal;color:var(--lime);font-weight:650;margin-left:auto;flex:none}
.an-sug{margin-bottom:16px}
.sug-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.sug{display:flex;gap:12px;padding:14px 18px;border-top:1px solid var(--row);animation:rise .4s var(--ease) both}
.sug b{font-size:13.5px}.sug p{margin:3px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.sug-tag{flex:none;height:20px;padding:0 8px;border-radius:10px;font-size:11px;font-weight:650;display:inline-flex;align-items:center;margin-top:1px}
.sug.alerta .sug-tag{background:var(--bad-soft);color:var(--bad)}
.sug.dica .sug-tag{background:var(--warn-soft);color:var(--warn)}
.sug.ok .sug-tag{background:var(--ok-soft);color:var(--ok)}
.v-ruim{color:var(--bad);font-weight:600}.v-bom{color:var(--ok);font-weight:600}
.m-form{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:4px 18px 18px}
.m-form .btn{width:100%}
.m-txt{padding:0 18px 16px}
.m-trilho.mei{margin:6px 18px 12px}
.card-h small{white-space:nowrap}

/* ---------- estoque: faixa de números alinhada ---------- */
.est-resumo{display:grid;grid-template-columns:repeat(2,minmax(0,200px)) minmax(0,1fr);gap:12px;margin-bottom:14px;align-items:stretch}
.est-resumo>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;display:grid;gap:2px;align-content:center}
.est-resumo span{font-size:12px;color:var(--faint)}
.est-resumo b{font-size:22px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.est-resumo p{margin:0;align-self:center;font-size:12.5px;color:var(--faint);padding:0 6px}
@media(max-width:700px){.est-resumo{grid-template-columns:repeat(2,minmax(0,1fr))}.est-resumo p{grid-column:1/-1;padding:0}}
@media(max-width:1100px){#lista td.r .btn.sm .hide-xs{display:none}#lista td.r .btn.sm{padding:0 9px}}

/* ---------- custos da loja (visível, grade alinhada) ---------- */
.calc-loja{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:16px 18px 14px}
.cl-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;margin-bottom:14px}
.cl-head b{font-size:14px}.cl-head span{font-size:12.5px;color:var(--faint)}.cl-head a{color:var(--accent);font-weight:600;text-decoration:none}.cl-head a:hover{text-decoration:underline}
.cost-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px}
.cost-grid label.f{display:grid;grid-template-rows:auto 38px minmax(30px,auto);align-content:start;gap:6px}
.cost-grid .inp{height:38px}
.cost-grid .ctl{display:flex;gap:8px;align-items:center;height:38px}
.cost-grid .ctl .mini-seg{height:38px;align-items:stretch}
.cost-grid .ctl .mini-seg button{display:flex;align-items:center}
.cost-grid .ctl .pct,.cost-grid .ctl .money{flex:1;min-width:0}
.cost-grid .help{line-height:1.35}
.cost-foot{display:flex;gap:12px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--row)}
.calc-grid{align-items:stretch}
.calc-linhas{display:flex;flex-direction:column}
.calc-linhas .cl-row.total{margin-top:auto}
@media(max-width:900px){.cost-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.cost-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- configurações: custos fixos ---------- */
.fx-lista{display:grid;gap:8px;margin-bottom:12px;max-width:560px}
.fx-row{display:grid;grid-template-columns:minmax(0,1fr) 150px 32px;gap:8px;align-items:center}
.fx-sug{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip-btn{border:1px dashed var(--line-2);background:#fff;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s var(--ease)}
.chip-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.fx-total{display:flex;gap:20px;align-items:center;flex-wrap:wrap;max-width:560px;padding:14px 16px;border-radius:12px;background:var(--accent-soft)}
.fx-total span{display:block;font-size:12px;color:var(--muted)}.fx-total b{font-size:22px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fx-total p{margin:0;font-size:13px;color:var(--muted);flex:1;min-width:200px}