/* Panel Netsarg · estilos del panel del comercio */
:root{
  --bg:#F5F3F0; --card:#FFFFFF; --ink:#1A1918; --muted:#6A6460; --line:#E7E1DB; --line2:#F0EBE6;
  --sage:#4F6E58; --sage-d:#3F5A47; --sage-soft:#E3ECE4; --deep:#1F2B24; --deep2:#2A3830;
  --ok:#1E8E52; --ok-bg:#E2F3E8; --warn:#9A6200; --warn-bg:#FBEFD6; --bad:#B4372B; --bad-bg:#FBE4E0;
  --blue:#2F5F9E; --blue-bg:#E2EBF7; --violet:#6B4C9A; --violet-bg:#EEE7F6;
  --display:"Syne", "Arial Black", Arial, sans-serif; --sans:"Onest", "Segoe UI", Helvetica, Arial, sans-serif;
  --r:14px; --ease:cubic-bezier(.2,.8,.2,1); --side:248px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}
.hint{color:var(--muted);font-size:13px;margin-top:8px}
.note{background:var(--sage-soft);color:var(--deep);border-radius:10px;padding:10px 12px;font-size:13.5px;margin:10px 0}
.empty{color:var(--muted);font-size:14px;padding:6px 0}
.empty.pad{padding:40px 20px;text-align:center;background:var(--card);border-radius:var(--r);border:1px solid var(--line)}
.lbl{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:#fff;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;transition:background .2s,transform .2s var(--ease),opacity .2s}
.btn:hover{background:#000}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:default}
.btn.primary{background:var(--sage);border-color:var(--sage)}
.btn.primary:hover{background:var(--sage-d)}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink);background:var(--card)}
.btn.small{min-height:34px;padding:0 14px;font-size:13px}
.btn.danger{background:var(--bad);border-color:var(--bad)}
.btn.wa{background:#1F8F4E;border-color:#1F8F4E}
.btn.block{width:100%}
label.btn{cursor:pointer}
.link{background:none;border:0;padding:4px 0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:14px}
.link.danger{color:var(--bad)}
.confirm{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px}
.confirm .ask{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px}

/* Pills */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--line2);color:var(--muted)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.pill.ok,.pill.p-aprobado,.pill.e-entregado{background:var(--ok-bg);color:var(--ok)}
.pill.warn,.pill.p-pendiente{background:var(--warn-bg);color:var(--warn)}
.pill.bad,.pill.p-rechazado,.pill.e-cancelado{background:var(--bad-bg);color:var(--bad)}
.pill.e-nuevo{background:var(--blue-bg);color:var(--blue)}
.pill.e-pagado{background:var(--sage-soft);color:var(--sage-d)}
.pill.e-preparando{background:var(--violet-bg);color:var(--violet)}
.pill.e-enviado{background:#E0EEF0;color:#256873}
.pill.neutral{background:var(--line2);color:var(--muted)}

/* Login */
.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;align-content:center;gap:18px;padding:24px 16px;background:radial-gradient(circle at 20% 10%,#E3ECE4,transparent 55%),radial-gradient(circle at 90% 90%,#F4E4D6,transparent 50%),var(--bg)}
.login-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:32px 28px;box-shadow:0 30px 60px -30px rgba(31,43,36,.25);animation:sube .6s var(--ease)}
.login-card h1{font-family:var(--display);font-size:40px;letter-spacing:-.04em;margin:6px 0 4px}
.login-card .f{margin-top:18px}
.login-card .chk{margin:10px 0 4px}
.login-card .err{min-height:20px;margin-bottom:6px}
.brand{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sage)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 4px var(--sage-soft)}
.back-store{display:block;text-align:center;margin-top:16px;font-size:14px;color:var(--muted)}
.made{font-size:12px;color:var(--muted)}
@keyframes sube{from{opacity:0;transform:translateY(14px)}}

/* Estructura */
.app{min-height:100vh}
.side{position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--deep);color:#E8EEE9;display:flex;flex-direction:column;padding:20px 14px;z-index:20}
.side-brand{display:flex;align-items:center;gap:12px;padding:4px 8px 22px}
.side-brand b{display:block;font-size:16px;color:#fff}
.side-brand small{display:block;font-size:12px;color:#A9B8AD}
.logo{width:38px;height:38px;border-radius:11px;background:var(--sage-soft);color:var(--deep);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:19px}
.side-nav{display:grid;gap:2px}
.side-nav a,.side-foot a,.side-foot button{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;text-decoration:none;color:#C9D4CC;font-size:14.5px;font-weight:500;background:none;border:0;width:100%;text-align:left;transition:background .15s,color .15s}
.side-nav a:hover,.side-foot a:hover,.side-foot button:hover{background:var(--deep2);color:#fff}
.side-nav a.on{background:#fff;color:var(--deep)}
.side svg,.tabbar svg,.sheet svg{width:20px;height:20px;flex:none}
.badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#E9B949;color:#2B1F00;font-size:11.5px;font-weight:700;display:inline-grid;place-items:center}
.side-foot{margin-top:auto;display:grid;gap:2px;border-top:1px solid var(--deep2);padding-top:12px}
.side-foot .made{padding:10px 12px 0;color:#7F9185}
.main{margin-left:var(--side);min-height:100vh}
#view{max-width:1180px;margin:0 auto;padding:32px clamp(16px,3.5vw,44px) 60px;outline:none}
body.con-cambios #view{padding-bottom:120px}
.demo-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;padding:10px clamp(16px,3.5vw,44px);background:#FBF3DE;border-bottom:1px solid #F0E2BC;font-size:13.5px;color:#5C4A12}
.demo-bar .link{font-size:13.5px;color:#5C4A12}
.demo-bar .btn{background:#5C4A12;border-color:#5C4A12}

/* Encabezado de cada vista */
.vh{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:24px;animation:sube .45s var(--ease)}
.vh h1{font-family:var(--display);font-size:clamp(28px,3.4vw,38px);letter-spacing:-.04em;line-height:1.1}
.vh .sub{color:var(--muted);margin-top:6px;max-width:60ch}
.vh-actions{display:flex;gap:10px;flex-wrap:wrap}
.eyebrow{font-size:13px;color:var(--muted);margin-bottom:4px}
.eyebrow::first-letter{text-transform:uppercase}
.back{display:inline-block;font-size:14px;color:var(--muted);text-decoration:none;margin-bottom:6px}
.back:hover{color:var(--ink)}

/* Tarjetas */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;animation:sube .5s var(--ease) both}
.card h2{font-size:16px;font-weight:650;letter-spacing:-.01em;margin-bottom:12px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.card-h h2{margin:0}
.card-h a{font-size:13.5px;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;text-decoration:none;display:grid;gap:2px;transition:border-color .2s,transform .2s var(--ease);animation:sube .5s var(--ease) both}
.kpi:nth-child(2){animation-delay:.04s}.kpi:nth-child(3){animation-delay:.08s}.kpi:nth-child(4){animation-delay:.12s}
a.kpi:hover{border-color:var(--sage);transform:translateY(-2px)}
.kpi span{font-size:13px;color:var(--muted)}
.kpi b{font-family:var(--display);font-size:28px;letter-spacing:-.03em;line-height:1.2}
.kpi small{font-size:12.5px;color:var(--muted)}
.cols{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
.stack{display:grid;gap:18px}
.mini{list-style:none;margin:0 -8px;padding:0}
.mini a{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:10px;text-decoration:none}
.mini a:hover{background:var(--bg)}
.mini li+li{border-top:1px solid var(--line2)}
.mini b{display:block;font-size:14.5px;font-weight:600}
.mini small{display:block;font-size:12.5px;color:var(--muted)}
.mini .r{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-weight:600;font-size:14px;text-align:right}
.rank{margin:0;padding:0;list-style:none;counter-reset:r}
.rank li{display:flex;align-items:center;gap:12px;padding:8px 0;counter-increment:r;font-size:14.5px}
.rank li+li{border-top:1px solid var(--line2)}
.rank li::before{content:counter(r);width:24px;height:24px;border-radius:50%;background:var(--sage-soft);color:var(--sage-d);font-size:12px;font-weight:700;display:grid;place-items:center;flex:none}
.rank b{margin-left:auto;font-size:13px;color:var(--muted);font-weight:600}
.rank b::after{content:" u."}
.thumb{width:44px;height:44px;border-radius:10px;flex:none;display:grid;place-items:center;overflow:hidden}
.thumb svg{height:80%;width:auto}
.thumb img{width:100%;height:100%;object-fit:cover}

/* Listados */
.toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.chips button:hover{border-color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chips sup{font-size:11px;opacity:.65;vertical-align:baseline;position:static}
.search input{height:38px;width:260px;max-width:100%;border:1px solid var(--line);border-radius:999px;padding:0 16px 0 38px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236A6460' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") 14px 50% no-repeat}
.search input:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-soft)}
.table{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;animation:sube .5s var(--ease) both}
.table .empty.pad{border:0;border-radius:0}
.trow,.prow-main{display:grid;align-items:center;gap:16px;padding:14px 18px;text-decoration:none;transition:background .15s}
.trow{grid-template-columns:90px 1fr auto 110px}
.trow+.trow,.prow+.prow{border-top:1px solid var(--line2)}
.trow:hover,.trow.on,.prow-main:hover{background:#FAF8F6}
.trow.on{box-shadow:inset 3px 0 0 var(--sage)}
.c-id b,.c-cli b{display:block;font-weight:600;font-size:14.5px}
.c-id small,.c-cli small{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.c-cli{min-width:0}
.c-pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.c-tot{font-weight:650;text-align:right;white-space:nowrap}
.c-tot small{font-weight:400;color:var(--muted)}
.prow{display:flex;align-items:center;padding-right:18px}
.prow-main{flex:1;min-width:0;grid-template-columns:44px 1fr 120px 150px}
.prow.off .thumb,.prow.off .c-cli{opacity:.5}
.c-stock{display:flex;justify-content:flex-end}

/* Switch y toggle */
.switch{display:flex;align-items:center;gap:8px;cursor:pointer;flex:none;width:96px;justify-content:flex-end}
.switch input,.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.switch span,.toggle span{width:40px;height:24px;border-radius:999px;background:#D7D0C9;position:relative;flex:none;transition:background .2s}
.switch span::after,.toggle span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s var(--ease)}
.switch input:checked+span,.toggle input:checked+span{background:var(--sage)}
.switch input:checked+span::after,.toggle input:checked+span::after{transform:translateX(16px)}
.switch input:focus-visible+span,.toggle input:focus-visible+span{outline:2px solid var(--sage);outline-offset:2px}
.switch em{font-style:normal;font-size:12.5px;color:var(--muted);order:-1}
.toggle{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:10px 0;cursor:pointer;position:relative}
.toggle span{grid-row:1/3}
.toggle b{font-weight:600;font-size:14.5px}
.toggle small{grid-column:2;color:var(--muted);font-size:13px}
.toggle+.toggle{border-top:1px solid var(--line2)}

/* Formularios */
.f{display:grid;gap:6px;margin-top:14px;min-width:0}
.f:first-of-type{margin-top:0}
.card h2+.f,.card .hint+.f{margin-top:0}
.f>span,.f legend{font-size:13px;font-weight:600;color:#3D3936}
.f input:not([type=checkbox]):not([type=color]),.f select,.f textarea,.vars input,.zrow input{width:100%;min-height:42px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:#fff;transition:border-color .15s,box-shadow .15s}
.f textarea{resize:vertical;min-height:84px}
.f input:focus,.f select:focus,.f textarea:focus,.vars input:focus,.zrow input:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-soft)}
.f input[type=color]{width:100%;height:42px;border:1px solid var(--line);border-radius:10px;padding:4px;background:#fff;cursor:pointer}
fieldset.f{border:0;padding:0;margin:14px 0 0}
.f legend{padding:0;margin-bottom:6px}
.err{color:var(--bad);font-size:13px;font-weight:500}
.err:empty{display:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.two .f{margin-top:14px}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px}
.checks .chk{border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 10px;transition:all .15s}
.checks .chk:has(input:checked){border-color:var(--sage);background:var(--sage-soft)}
.chk input{width:16px;height:16px;accent-color:var(--sage);margin:0}
.money{position:relative;display:block}
.money i{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted);font-size:14px;pointer-events:none}
.money input{padding-left:26px!important}
.money.wide{max-width:240px}
.money.pct{max-width:120px}
.money.pct i{left:auto;right:12px}
.money.pct input{padding-left:12px!important;padding-right:30px!important}

/* Editor */
.editor{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.editor.single{grid-template-columns:minmax(0,760px)}
.ed-main{display:grid;gap:16px;min-width:0}
.ed-main .card:nth-child(2){animation-delay:.04s}.ed-main .card:nth-child(3){animation-delay:.08s}.ed-main .card:nth-child(4){animation-delay:.12s}
.ed-side{position:sticky;top:24px}
.foto{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start}
.foto-box{aspect-ratio:4/5;border-radius:12px;display:grid;place-items:center;overflow:hidden;position:relative;transition:background .3s}
.foto-box svg{height:72%;width:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.12))}
.foto-box img{width:100%;height:100%;object-fit:cover}
.foto-box.cargando::after{content:"Subiendo…";position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.75);font-size:14px;font-weight:600}
.foto-act{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.foto-act .link{margin-top:2px}
.foto-act #ilus{width:100%}
.foto-act #ilus .two .f{margin-top:0}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatches button{width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.08);transition:transform .15s}
.swatches button:hover{transform:scale(1.1)}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sage)}
.vars{display:grid;gap:8px;margin:12px 0}
.var{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.9fr) 36px;gap:8px;align-items:center}
.var.head span,.zrow.head span{font-size:12px;font-weight:600;color:var(--muted)}
.rm{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:20px;line-height:1;color:var(--muted)}
.rm:hover:not(:disabled){border-color:var(--bad);color:var(--bad)}
.rm:disabled{opacity:.35;cursor:default}
#err-z{display:block;margin-top:8px}
.danger-zone .row-btns{justify-content:space-between}
.row-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}

/* Vista previa */
.preview-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 20px}
.preview-wrap .lbl{margin-top:0}
.pv-shot{aspect-ratio:4/5;border-radius:12px;display:grid;place-items:center;overflow:hidden;position:relative;margin-bottom:12px;transition:background .3s}
.pv-shot svg{height:70%;width:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.12))}
.pv-shot img{width:100%;height:100%;object-fit:cover}
.pv-badge{position:absolute;top:10px;left:10px;background:#fff;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600}
.pv-badge.out{background:var(--ink);color:#fff}
.pv-kick{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--sage);font-weight:600}
.pv-name{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.2;margin:2px 0 4px}
.pv-price{font-weight:600}
.pv-off{margin-top:8px;font-size:13px;color:var(--bad)}
.hero-pv{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#FAF8F6}
.hp-ban{background:var(--deep);color:#fff;font-size:11.5px;text-align:center;padding:7px 10px}
.hp-body{padding:22px 18px 24px;background:linear-gradient(160deg,#DFE8E0,#FAF8F6 70%)}
.hp-h{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.045em;line-height:1.02;word-break:break-word}
.hp-h em{font-style:normal;color:var(--sage)}
.hp-p{font-size:13px;color:var(--muted);margin:12px 0 16px}
.hp-btn{display:inline-block;background:var(--ink);color:#fff;border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:600}

/* Envíos */
.zonas{display:grid;gap:8px;margin:12px 0}
.zrow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) minmax(0,.9fr) minmax(0,1fr) 36px;gap:8px;align-items:center}
.probar{display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:end}
.probar .f{margin:0}
.cp-res{min-height:42px;display:flex;align-items:center;padding:8px 14px;border-radius:10px;background:var(--bg);color:var(--muted);font-size:14px}
.cp-res.ok{background:var(--ok-bg);color:var(--ok);font-weight:500}
.cp-res.bad{background:var(--bad-bg);color:var(--bad);font-weight:500}
.card.soon{background:transparent;border-style:dashed}
.card.soon p{color:var(--muted);margin-bottom:12px;max-width:60ch}

/* Detalle del pedido */
.drawer{position:fixed;inset:0;z-index:40;pointer-events:none}
.drawer-shade{position:absolute;inset:0;background:rgba(20,24,22,.35);opacity:0;transition:opacity .3s}
.drawer-body{position:absolute;top:0;right:0;bottom:0;width:min(480px,100%);background:var(--card);overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform .35s var(--ease);padding:0 24px 40px;visibility:hidden;transition:transform .35s var(--ease),visibility 0s .35s}
.drawer.open .drawer-body{box-shadow:-20px 0 50px -20px rgba(0,0,0,.25);visibility:visible;transition:transform .35s var(--ease)}
.drawer.open{pointer-events:auto}
.drawer.open .drawer-shade{opacity:1}
.drawer.open .drawer-body{transform:none}
.dh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;position:sticky;top:0;background:var(--card);padding:22px 0 12px;z-index:1}
.dh h2{font-family:var(--display);font-size:26px;letter-spacing:-.04em}
.dh p{font-size:13px;margin-top:2px}
.dh p::first-letter{text-transform:uppercase}
.x{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;text-decoration:none;font-size:22px;line-height:1;flex:none}
.x:hover{border-color:var(--ink)}
.d-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.d-sec{padding:18px 0;border-top:1px solid var(--line2)}
.d-sec:first-of-type{border-top:0}
.d-sec h3{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.d-sec p+p{margin-top:2px}
.d-sec .muted{font-size:14px}
.stepper{display:grid;grid-template-columns:repeat(5,1fr);margin-bottom:14px}
.step{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:11.5px;color:var(--muted);text-align:center;line-height:1.2}
.step::before{content:"";position:absolute;top:10px;left:-50%;right:50%;height:2px;background:var(--line)}
.step:first-child::before{display:none}
.step i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);background:#fff;position:relative;z-index:1;transition:all .2s}
.step:hover:not(:disabled) i{border-color:var(--sage)}
.step.done i{background:var(--sage);border-color:var(--sage)}
.step.done i::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.step.done::before,.step.now::before{background:var(--sage)}
.step.now i{border-color:var(--sage);box-shadow:0 0 0 4px var(--sage-soft);background:var(--sage)}
.step.now{color:var(--ink);font-weight:600}
.step.done{color:var(--ink)}
.step:disabled{cursor:default;opacity:.5}
.d-items{list-style:none;margin:0;padding:0}
.d-items li{display:flex;align-items:center;gap:12px;padding:8px 0}
.d-items li>span:nth-child(2){flex:1;min-width:0}
.d-items b{display:block;font-size:14px;font-weight:600}
.d-items small{color:var(--muted);font-size:12.5px}
.d-items li>span:last-child{font-weight:600;font-size:14px}
.d-tot{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);display:grid;gap:4px;font-size:14px}
.d-tot div{display:flex;justify-content:space-between}
.d-tot .off{color:var(--sage)}
.d-tot .tot{font-weight:700;font-size:16px;margin-top:4px}

/* Barra de guardado */
.savebar{position:fixed;left:calc(var(--side) + 24px);right:24px;bottom:20px;z-index:30;max-width:860px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--deep);color:#fff;border-radius:16px;padding:10px 10px 10px 20px;box-shadow:0 20px 40px -12px rgba(0,0,0,.4);animation:sube .35s var(--ease)}
.savebar #sb-txt{font-size:14px;font-weight:500}
.sb-btns{display:flex;gap:8px}
.savebar .btn.ghost{background:transparent;color:#fff;border-color:#4A5A50}
.savebar .btn.ghost:hover{border-color:#fff}
.savebar.shake{animation:shake .5s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* Aviso */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;z-index:60;opacity:0;pointer-events:none;transition:all .3s var(--ease);max-width:calc(100vw - 32px);width:max-content}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{color:#B9D3BF;font-weight:600;margin-left:6px}
body.con-cambios .toast{bottom:96px}

/* Menú del celular */
.tabbar,.sheet{display:none}

@media (max-width:1100px){
  .editor{grid-template-columns:minmax(0,1fr) 260px}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .side{display:none}
  .main{margin-left:0;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  #view{padding-top:22px}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:25;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border:0;background:none;text-decoration:none;font-size:11.5px;font-weight:500;color:var(--muted);position:relative}
  .tabbar a.on{color:var(--sage-d)}
  .tabbar .badge{position:absolute;top:0;left:calc(50% + 6px);margin:0}
  .sheet{display:block;position:fixed;inset:0;z-index:35;background:rgba(20,24,22,.35);animation:fade .2s}
  .sheet[hidden]{display:none!important}
  .sheet-box{position:absolute;left:8px;right:8px;bottom:calc(72px + env(safe-area-inset-bottom));background:#fff;border-radius:18px;padding:8px;display:grid;animation:sube .3s var(--ease)}
  .sheet-box a,.sheet-box button{display:flex;align-items:center;gap:12px;padding:14px;border:0;background:none;text-decoration:none;font-size:15px;font-weight:500;border-radius:12px;text-align:left}
  .sheet-box a.on{background:var(--sage-soft)}
  .ed-side{position:static;order:-1}
  .editor{grid-template-columns:1fr}
  .editor .ed-side{display:none}
  .cols{grid-template-columns:1fr}
  .savebar{left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom))}
  body.con-cambios .toast{bottom:150px}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom))}
}
@keyframes fade{from{opacity:0}}
@media (max-width:640px){
  body{font-size:15px}
  .vh{align-items:flex-start}
  .vh-actions{width:100%}
  .vh-actions .btn{flex:1}
  .kpis{gap:10px}
  .kpi{padding:14px}
  .kpi b{font-size:22px}
  .toolbar{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
  .toolbar>*{min-width:0}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none;min-width:0}
  .chips::-webkit-scrollbar{display:none}
  .chips button{flex:none}
  .search input{width:100%}
  .trow{grid-template-columns:1fr auto;gap:4px 12px;padding:14px 16px}
  .trow .c-id{grid-column:1;display:flex;gap:8px;align-items:baseline}
  .trow .c-tot{grid-column:2;grid-row:1}
  .trow .c-cli{grid-column:1/-1}
  .trow .c-pills{grid-column:1/-1;justify-content:flex-start}
  .prow{padding-right:12px}
  .prow-main{grid-template-columns:44px 1fr auto;gap:4px 12px;padding:12px 8px 12px 14px}
  .prow-main .thumb{grid-row:1/3}
  .prow-main .c-tot{grid-column:3;grid-row:1}
  .prow-main .c-stock{grid-column:2/4;justify-content:flex-start}
  .switch{width:auto}
  .switch em{display:none}
  .foto{grid-template-columns:1fr}
  .foto-box{max-width:220px;aspect-ratio:1}
  .two{grid-template-columns:1fr;gap:0}
  .foto-act #ilus .two{grid-template-columns:1fr 1fr;gap:12px}
  .var{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr) 36px;gap:6px}
  .vars input,.zrow input{padding:9px 8px}
  .money input{padding-left:20px!important}
  .money i{left:8px}
  .zrow.head{display:none}
  .zrow{grid-template-columns:1fr 1fr 36px;padding:12px;border:1px solid var(--line);border-radius:12px;gap:8px}
  .zrow>:nth-child(1){grid-column:1/3}
  .zrow>:nth-child(2){grid-column:1/-1;grid-row:2}
  .zrow>:nth-child(3){grid-column:1;grid-row:3}
  .zrow>:nth-child(4){grid-column:2/-1;grid-row:3}
  .zrow>.rm{grid-column:3;grid-row:1}
  .probar{grid-template-columns:1fr}
  .card{padding:16px}
  .savebar{flex-direction:column;align-items:stretch;padding:12px;gap:10px}
  .savebar #sb-txt{text-align:center}
  .sb-btns .btn{flex:1}
  body.con-cambios #view{padding-bottom:170px}
  body.con-cambios .toast{bottom:210px}
  .drawer-body{padding:0 16px 40px}
  .stepper{font-size:11px}
  .step span{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}