:root{
  --bg:#faf7f2; --surface:#fff; --ink:#1f1b16; --muted:#7a7166; --line:#e8e1d6;
  --brand:#c2410c; --brand-ink:#fff; --brand-soft:#fdeadd;
  --ok:#15803d; --ok-soft:#dcfce7; --warn:#b45309; --warn-soft:#fef3c7; --bad:#b91c1c; --bad-soft:#fee2e2;
  --radius:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
.hidden{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0}
.muted{color:var(--muted)}
.error{color:var(--bad);min-height:1.2em;margin:.25rem 0}

/* botones */
.btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:.6rem 1rem;cursor:pointer;min-height:44px}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}
.btn.primary:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:#f3b4b4}
.btn.big{min-height:52px;font-size:1.05rem}
.btn.sm{min-height:36px;padding:.3rem .7rem;font-size:.9rem}

/* login */
.login{min-height:100%;display:grid;place-items:center;padding:1rem}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:2rem;width:min(400px,100%);display:grid;gap:.9rem;box-shadow:0 10px 40px rgba(60,30,10,.08)}
.login-card .logo{font-size:2.5rem}
label{display:grid;gap:.3rem;font-size:.9rem;color:var(--muted)}
input,select,textarea{border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;background:#fff;color:var(--ink);min-height:44px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:-1px}

/* app */
.app{height:100%;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:grid;line-height:1.1;font-weight:700}
.brand small{font-weight:400;color:var(--muted)}
.tabs{display:flex;gap:.25rem;margin:0 auto}
.tabs button{border:0;background:transparent;padding:.65rem 1.1rem;border-radius:10px;cursor:pointer;color:var(--muted);font-weight:600;min-height:44px}
.tabs button.active{background:var(--brand-soft);color:var(--brand)}
.view{flex:1;min-height:0;overflow:auto;padding:1rem}

/* venta */
.venta{display:grid;grid-template-columns:1fr 360px;gap:1rem;overflow:hidden;padding:0}
.catalog{display:flex;flex-direction:column;min-height:0;padding:1rem 0 1rem 1rem}
.cats{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.75rem}
.cats button{white-space:nowrap;border:1px solid var(--line);background:var(--surface);padding:.55rem 1rem;border-radius:999px;cursor:pointer;min-height:44px}
.cats button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.75rem;align-content:start;padding-bottom:1rem}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem;text-align:left;cursor:pointer;display:grid;gap:.35rem;min-height:116px;align-content:space-between}
.card:active{transform:scale(.98)}
.card .nm{font-weight:600}
.card .pr{color:var(--brand);font-weight:700}
.card .sub{font-size:.8rem;color:var(--muted)}
.card .meta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem}
.card .tag{font-size:.72rem;background:var(--brand-soft);color:var(--brand);border-radius:6px;padding:.1rem .4rem;white-space:nowrap}
.card.soldout{background:#eee9e1;cursor:not-allowed}
.card.soldout .nm,.card.soldout .pr{color:#a39a8d;text-decoration:line-through}
.card.soldout .tag{background:#d9d2c6;color:#6b6358}
.soldbtn{justify-self:end;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:.75rem;padding:.25rem .6rem;cursor:pointer;color:var(--muted);min-height:30px}

.cart{background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.cart h2{padding:1rem 1rem .5rem;font-size:1.05rem}
.lines{flex:1;overflow:auto;padding:0 1rem}
.empty{color:var(--muted);text-align:center;margin-top:2rem}
.line{display:grid;grid-template-columns:1fr auto;gap:.2rem .5rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.line .nm{font-weight:600}
.line .ad{grid-column:1;font-size:.82rem;color:var(--muted)}
.line .amt{font-weight:700}
.qty{display:flex;align-items:center;gap:.4rem;grid-column:1/3}
.qty button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:1.2rem;cursor:pointer}
.cart-foot{border-top:1px solid var(--line);padding:1rem;display:grid;gap:.75rem}
.total-row{display:flex;justify-content:space-between;align-items:baseline;font-size:1.1rem}
.total-row strong{font-size:1.7rem}
.row{display:flex;gap:.5rem}.row .primary{flex:1}

/* pedidos */
.orders{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-content:start}
.order{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;display:grid;gap:.5rem}
.order .hd{display:flex;justify-content:space-between;align-items:center}
.order ul{margin:0;padding-left:1.1rem}
.badge{font-size:.75rem;font-weight:700;border-radius:999px;padding:.15rem .6rem}
.b-nuevo{background:var(--warn-soft);color:var(--warn)}
.b-listo{background:#dbeafe;color:#1d4ed8}
.b-entregado{background:var(--ok-soft);color:var(--ok)}
.b-anulado{background:var(--bad-soft);color:var(--bad)}
.order .acts{display:flex;gap:.5rem;flex-wrap:wrap}

/* paneles */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;max-width:900px;margin:0 auto}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.75rem;margin:.75rem 0 1.25rem}
.stat{background:var(--bg);border-radius:12px;padding:.9rem}
.stat small{color:var(--muted);display:block}
.stat strong{font-size:1.4rem}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.6rem .4rem;border-bottom:1px solid var(--line)}
th{font-size:.8rem;color:var(--muted);font-weight:600}
td.num,th.num{text-align:right}
.lvl{font-size:.75rem;font-weight:700;border-radius:999px;padding:.15rem .6rem}
.lvl.ok{background:var(--ok-soft);color:var(--ok)}
.lvl.low{background:var(--warn-soft);color:var(--warn)}
.lvl.zero{background:var(--bad-soft);color:var(--bad)}
.section-title{margin:1.25rem 0 .5rem;font-size:1rem}

/* modal */
.modal{position:fixed;inset:0;background:rgba(30,20,10,.45);display:grid;place-items:center;padding:1rem;z-index:20}
.modal-card{background:var(--surface);border-radius:18px;padding:1.25rem;width:min(480px,100%);max-height:92vh;overflow:auto;display:grid;gap:.9rem}
.opt{display:flex;justify-content:space-between;align-items:center;gap:.75rem;border:1px solid var(--line);border-radius:12px;padding:.75rem;cursor:pointer;min-height:48px}
.opt input{width:22px;height:22px;min-height:0}
.seg{display:grid;grid-auto-flow:column;gap:.4rem}
.seg button{border:1px solid var(--line);background:#fff;padding:.7rem;border-radius:10px;cursor:pointer;min-height:46px}
.seg button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.sumline{display:flex;justify-content:space-between}
.sumline.big{font-size:1.3rem;font-weight:700}
.alert{background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:.7rem .9rem}
.alert.zero{background:var(--bad-soft);color:var(--bad)}
.toast{position:fixed;left:50%;top:1rem;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.75rem 1.1rem;border-radius:12px;z-index:30;max-width:90vw}

/* administración */
.panel.wide{max-width:1000px}
.bar{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.25rem}
.subtabs{display:flex;gap:.4rem;margin-bottom:1rem;overflow-x:auto;border-bottom:1px solid var(--line);padding-bottom:.6rem}
.subtabs button{border:0;background:transparent;padding:.55rem 1rem;border-radius:10px;cursor:pointer;color:var(--muted);font-weight:600;min-height:42px;white-space:nowrap}
.subtabs button.active{background:var(--brand-soft);color:var(--brand)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.modal-card.wide{width:min(680px,100%)}
.modal-card h4{margin:.4rem 0 0;font-size:.95rem}
.hint{font-size:.85rem;color:var(--muted);margin:.1rem 0 .4rem}
.rowedit{display:grid;grid-template-columns:1fr 110px 44px;gap:.4rem;align-items:center;margin-bottom:.4rem}
.rowedit.sel{grid-template-columns:1fr 110px 44px}
.rowedit .u{font-size:.8rem;color:var(--muted);padding:0 .2rem}
.rowedit button{border:1px solid var(--line);background:#fff;border-radius:10px;min-height:44px;cursor:pointer;font-size:1.1rem;color:var(--bad)}
.btn.link{border:0;background:transparent;color:var(--brand);padding:.3rem .2rem;min-height:36px;font-weight:600;justify-self:start}
.pill{font-size:.72rem;font-weight:700;border-radius:999px;padding:.15rem .6rem;background:var(--brand-soft);color:var(--brand);white-space:nowrap}
.pill.off{background:#e9e4da;color:#6b6358}
.pill.good{background:var(--ok-soft);color:var(--ok)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
td .acts{display:flex;gap:.4rem;justify-content:flex-end;flex-wrap:wrap}
tr.off td{color:#9a9184}
.support{background:#1d4ed8;color:#fff;text-align:center;padding:.4rem .75rem;font-size:.85rem}
.adminbar{display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;background:var(--surface);border-bottom:1px solid var(--line)}
.adminbar strong{font-size:1.05rem}
.adminbar .sp{margin-left:auto}
.wrap{max-width:1100px;margin:0 auto;padding:1rem}
.tablewrap{overflow-x:auto}
.cardlist{display:none}

/* tablet vertical / móvil */
@media (max-width:860px){
  .venta{grid-template-columns:1fr;grid-template-rows:1fr auto;overflow:auto}
  .catalog{padding:1rem 1rem 0}
  .cart{border-left:0;border-top:1px solid var(--line);max-height:46vh}
  .topbar{flex-wrap:wrap}
  .tabs{order:3;width:100%;margin:0;overflow-x:auto}
}

/* fotos de productos */
.thumb{width:36px;height:36px;object-fit:cover;border-radius:8px;vertical-align:middle;margin-right:.5rem}
.photoedit{display:flex;gap:.8rem;align-items:center}
.photobox{width:96px;height:96px;border-radius:12px;border:1px dashed var(--line);background:var(--bg);display:grid;place-items:center;overflow:hidden;color:var(--muted);font-size:.85rem;flex:none}
.photobox img{width:100%;height:100%;object-fit:cover}
.card .ph{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.card.soldout .ph{filter:grayscale(1);opacity:.6}
.rowedit .chk{grid-column:1/-1;margin:-.15rem 0 .3rem .2rem}
.chk{display:flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--muted);white-space:nowrap}
.chk input{width:auto}
.card .ph+.nm{margin-top:.1rem}
.line .ad.sin{color:var(--bad)}

.sinbox{display:flex;flex-wrap:wrap;gap:.5rem}
.sinchip{cursor:pointer}
.sinchip input{display:none}
.sinchip span{display:inline-block;padding:.5rem .8rem;border:1.5px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink);font-size:.95rem}
.sinchip input:checked+span{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);font-weight:600;text-decoration:line-through}
.notebtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;margin-right:.3rem}
.sinok{color:var(--bad);font-weight:700}

/* ordenar menú */
.ordh{margin:1.2rem 0 .4rem;font-size:1rem}
.sortlist{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.sortlist li{display:flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.35rem .5rem}
.sortlist li.empty{border-style:dashed}
.sortlist .lbl{flex:1;min-width:0}
.sortlist .grip{font-size:1.3rem;line-height:1;color:var(--muted);padding:.55rem .5rem;cursor:grab;touch-action:none;user-select:none}
.sortlist .arrow{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--bg);cursor:pointer}
.sortlist .arrow:disabled{opacity:.3;cursor:default}
.sortlist li.dragging{box-shadow:0 6px 20px rgba(0,0,0,.18);background:var(--brand-soft);position:relative;z-index:2}

.webtag{font-size:.72rem;background:#e0efff;color:#1d5fa8;border-radius:6px;padding:.1rem .4rem;margin-left:.3rem;font-weight:600}
.cnt{display:inline-block;min-width:1.3em;padding:0 .35em;border-radius:99px;background:var(--bad);color:#fff;font-size:.75rem;line-height:1.4;text-align:center;vertical-align:middle}
.onote{font-size:.85rem;margin-top:.2rem}
a.btn{text-decoration:none;color:inherit;display:inline-flex;align-items:center}