@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{
  --primario:#E8431F;--acento:#FFB300;--fresco:#2E7D4F;
  --bg:#F4F1EE;--bg-warm:#FFF6ED;--surface:#fff;--ink:#1E1510;
  --muted:#8C7A6C;--line:#E5D9CC;
  --shadow-xs:0 1px 3px rgba(30,21,16,.06);
  --shadow-sm:0 2px 8px rgba(30,21,16,.08);
  --shadow-md:0 8px 24px -4px rgba(30,21,16,.12);
  --shadow-lg:0 20px 50px -12px rgba(30,21,16,.22);
  --display:'Fraunces',serif;--body:'Plus Jakarta Sans',sans-serif;
  --glass:rgba(255,255,255,.72);--glass-border:rgba(255,255,255,.45);
  --radius:16px;--radius-sm:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 900px 600px at 10% 0%,rgba(232,67,31,.06),transparent 60%),
             radial-gradient(ellipse 700px 500px at 90% 80%,rgba(255,179,0,.05),transparent 55%)}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit}

/* gate */
.gate{position:fixed;inset:0;background:linear-gradient(135deg,#1E1510 0%,var(--primario) 50%,var(--acento) 100%);
display:grid;place-items:center;z-index:100;padding:20px}
.gate .box{background:#fff;border-radius:24px;padding:42px 36px;width:min(400px,100%);box-shadow:var(--shadow-lg);text-align:center}
.gate h1{font-family:var(--display);font-size:1.9rem;margin-bottom:6px}
.gate p{color:var(--muted);font-size:.9rem;margin-bottom:22px}
.gate input{width:100%;padding:15px;border:1.5px solid var(--line);border-radius:var(--radius-sm);font-size:1rem;margin-bottom:12px;text-align:center;background:var(--bg);transition:.2s}
.gate input:focus{border-color:var(--primario);outline:none;background:#fff}
.gate button{width:100%;padding:15px;background:var(--ink);color:#fff;border-radius:var(--radius-sm);font-weight:800;font-size:1rem;transition:.2s}
.gate button:hover{background:var(--primario)}
.gate .err{color:var(--primario);font-weight:700;font-size:.85rem;height:18px}

/* ============ LAYOUT ============ */
header.bar{position:sticky;top:0;z-index:30;
  background:linear-gradient(135deg,#1E1510,#2A1A12 60%,#3A2419);
  border-bottom:none;display:flex;align-items:center;gap:14px;padding:16px 24px;flex-wrap:wrap;
  box-shadow:0 4px 20px -4px rgba(0,0,0,.25)}
header.bar .t{font-family:var(--display);font-weight:800;font-size:1.3rem;color:#fff}
header.bar .t small{display:block;font-family:var(--body);font-weight:600;font-size:.72rem;color:rgba(255,255,255,.55)}
header.bar .sp{flex:1}
.btn{padding:11px 18px;border-radius:var(--radius-sm);font-weight:700;font-size:.88rem;transition:all .2s ease;
  border:1.5px solid var(--line);background:#fff;color:var(--ink)}
.btn:hover{border-color:var(--primario);color:var(--primario);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn.primary{background:linear-gradient(135deg,var(--primario),#D63A18);color:#fff;border-color:transparent}
.btn.primary:hover{background:linear-gradient(135deg,#D63A18,#C02E10);transform:translateY(-1px);box-shadow:0 4px 16px -4px rgba(232,67,31,.4)}
.btn.green{background:linear-gradient(135deg,#25D366,#1BB955);color:#fff;border-color:transparent}
.btn.green:hover{box-shadow:0 4px 16px -4px rgba(37,211,102,.4)}
.btn.ghost{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.15)}
.btn.ghost:hover{color:#fff;border-color:rgba(255,255,255,.3)}

.tabs{display:flex;gap:6px;padding:14px 24px;
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:62px;z-index:20;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{padding:10px 20px;border-radius:999px;font-weight:700;font-size:.9rem;white-space:nowrap;
  color:var(--muted);transition:all .25s ease;border:1.5px solid transparent}
.tabs button:hover{color:var(--ink);background:var(--bg);border-color:var(--line)}
.tabs button.on{background:linear-gradient(135deg,var(--primario),#D63A18);color:#fff;
  border-color:transparent;box-shadow:0 4px 14px -4px rgba(232,67,31,.35)}

main{max-width:1450px;margin:0 auto;padding:28px 24px 120px}
.panel{display:none;max-width:960px;margin:0 auto}.panel.on{display:block;animation:fadeUp .4s cubic-bezier(.2,.7,.2,1)}
#panel-pedidos{max-width:100%}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:18px;
  box-shadow:var(--shadow-xs);transition:box-shadow .2s}
.sec:hover{box-shadow:var(--shadow-sm)}
.sec h2{font-family:var(--display);font-size:1.3rem;margin-bottom:4px}
.sec .hint{color:var(--muted);font-size:.85rem;margin-bottom:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.row2{grid-template-columns:1fr}}
.f{margin-bottom:14px}
.f label{display:block;font-weight:700;font-size:.82rem;margin-bottom:6px;color:var(--muted)}
.f input,.f textarea,.f select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);font-size:.95rem;background:var(--bg);transition:.2s}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--primario);background:#fff;box-shadow:0 0 0 3px rgba(232,67,31,.08)}
.f textarea{resize:vertical;min-height:64px}
.imgrow{display:flex;gap:12px;align-items:center}
.imgrow .prev{width:74px;height:74px;border-radius:var(--radius-sm);object-fit:cover;background:var(--bg);border:1px solid var(--line);flex-shrink:0}
.imgrow .ipt{flex:1}
.upl{display:inline-block;padding:9px 14px;border:1.5px dashed var(--line);border-radius:10px;font-weight:700;font-size:.82rem;color:var(--muted);cursor:pointer;margin-top:6px;transition:.2s}
.upl:hover{border-color:var(--primario);color:var(--primario);background:rgba(232,67,31,.03)}
.colors{display:flex;gap:18px;flex-wrap:wrap}
.colors .c{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.85rem}
.colors input[type=color]{width:46px;height:40px;border:none;border-radius:10px;background:none;cursor:pointer}

.toggle{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.92rem;margin-bottom:6px}
.sw{width:48px;height:28px;border-radius:999px;background:var(--line);position:relative;transition:.25s ease;flex-shrink:0;cursor:pointer}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.25s ease;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.sw.on{background:var(--fresco)}.sw.on::after{left:23px}
.sw:hover{box-shadow:0 0 0 3px rgba(46,125,79,.12)}

/* categorías / productos */
.cat{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow-xs)}
.cat-h{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--bg-warm)}
.cat-h input.ic{width:54px;text-align:center;font-size:1.1rem}
.cat-h input.nm{flex:1;font-weight:700}
.cat-h input{padding:9px 11px;border:1.5px solid var(--line);border-radius:10px;background:#fff;transition:.2s}
.cat-h input:focus{border-color:var(--primario);outline:none}
.iconbtn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:1rem;background:#fff;border:1.5px solid var(--line);color:var(--muted);transition:.2s}
.iconbtn:hover{border-color:var(--primario);color:var(--primario);transform:translateY(-1px)}
.iconbtn.del:hover{border-color:#d33;color:#d33;background:#fff5f5}
.prods{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.prod{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;gap:14px;background:#fff;transition:.2s}
.prod:hover{box-shadow:var(--shadow-sm)}
.prod .pim{width:88px;flex-shrink:0}
.prod .pim img{width:88px;height:88px;border-radius:var(--radius-sm);object-fit:cover;background:var(--bg);border:1px solid var(--line)}
.prod .pim .upl{margin-top:4px;width:88px;text-align:center;padding:5px}
.prod .pb{flex:1;min-width:0}
.prod .pb .f{margin-bottom:9px}
.prod .pb .f input,.prod .pb .f textarea{padding:9px 11px;font-size:.9rem}
.prod .ptop{display:flex;gap:9px}
.prod .ptop .f:first-child{flex:1}
.prod .ptop .f.price{width:120px}
.prod .pfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.addbtn{padding:12px;border:1.5px dashed var(--line);border-radius:var(--radius-sm);font-weight:700;color:var(--muted);width:100%;transition:.2s}
.addbtn:hover{border-color:var(--primario);color:var(--primario);background:rgba(232,67,31,.02)}
.iconbtn.txtbtn{width:auto;padding:0 13px;gap:6px;font-size:.82rem;font-weight:800;white-space:nowrap;height:36px}
.iconbtn.txtbtn.dup:hover{border-color:#2E7D4F;color:#2E7D4F;background:#f3fbf6}
.addbtn.paste{margin-top:8px;border-style:solid;border-color:rgba(46,125,79,.5);color:#2E7D4F;background:#f3fbf6}
.addbtn.paste:hover{border-color:#2E7D4F;color:#1f6b40;background:#e9f7ef}

.note{background:#FFF8E6;border:1px solid var(--acento);border-radius:var(--radius-sm);padding:13px 15px;font-size:.86rem;color:#7a5a00;margin-bottom:16px}
.note b{color:#5a4200}
.savebar{position:fixed;bottom:0;left:0;right:0;
  background:rgba(255,255,255,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding:14px 24px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;z-index:25;
  box-shadow:0 -8px 30px -12px rgba(0,0,0,.12)}
.savebar .msg{margin-right:auto;align-self:center;font-weight:700;font-size:.88rem;color:var(--fresco)}
.toast{position:fixed;left:50%;bottom:80px;transform:translate(-50%,20px);
  background:var(--ink);color:#fff;
  padding:13px 24px;border-radius:999px;font-weight:700;opacity:0;pointer-events:none;transition:.3s ease;z-index:90;
  box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* extras panel demo + súper admin */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(135deg,#1E1510 0%,var(--primario) 50%,var(--acento) 100%)}
.login-box{background:#fff;border-radius:24px;padding:42px 36px;width:min(420px,100%);
  box-shadow:var(--shadow-lg)}
.login-box h1{font-family:var(--display);font-size:1.7rem;margin-bottom:4px;text-align:center}
.login-box p{color:var(--muted);font-size:.9rem;margin-bottom:22px;text-align:center}
.login-box label{display:block;font-weight:700;font-size:.82rem;margin:14px 0 6px;color:var(--muted)}
.login-box input{width:100%;padding:14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);font-size:1rem;background:var(--bg);transition:.2s}
.login-box input:focus{border-color:var(--primario);outline:none;background:#fff}
.login-box button{width:100%;margin-top:22px;padding:15px;background:linear-gradient(135deg,var(--primario),#D63A18);color:#fff;
  border-radius:var(--radius-sm);font-weight:800;font-size:1rem;transition:.2s;border:none}
.login-box button:hover{transform:translateY(-1px);box-shadow:0 6px 20px -6px rgba(232,67,31,.4)}
.login-box .err{color:var(--primario);font-weight:700;font-size:.86rem;margin-top:10px;text-align:center}
table.demos{width:100%;border-collapse:collapse}
table.demos th,table.demos td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:middle}
table.demos th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
table.demos a.url{color:var(--primario);font-weight:700;word-break:break-all}
table.demos tr:hover td{background:rgba(232,67,31,.02)}
.pill{display:inline-block;background:var(--bg);border:1px solid var(--line);padding:4px 10px;border-radius:8px;font-size:.8rem;font-weight:700}
.danger{color:#d33}
.flash{padding:13px 18px;border-radius:var(--radius-sm);margin-bottom:16px;font-weight:600;font-size:.92rem}
.flash.ok{background:#e8f7ee;border:1px solid var(--fresco);color:#1c5e3a}
.flash.bad{background:#fde9e6;border:1px solid var(--primario);color:#a32a12}

/* badges de plan y estado (super admin) */
.badge-plan{display:inline-block;padding:5px 12px;border-radius:8px;font-size:.72rem;font-weight:800;color:#fff;letter-spacing:.03em}
.plan-inicio{background:#6b7280}
.plan-crecimiento{background:linear-gradient(135deg,#E8431F,#FF6B3D)}
.plan-elite{background:linear-gradient(135deg,#1E1510,#E8431F)}
.estado{display:inline-block;font-weight:800;font-size:.82rem}
.estado.on{color:#2E7D4F}
.estado.off{color:#9A8472}
.feat-list{list-style:none;margin:0;padding:0}
.feat-list li{padding:10px 0;border-bottom:1px solid var(--line);font-size:.92rem;display:flex;align-items:center;gap:10px;transition:.15s}
.feat-list li:hover{padding-left:6px}
.feat-list li:last-child{border-bottom:none}
.feat-yes{color:#2E7D4F;font-weight:800}
.feat-no{color:#c0392b;font-weight:800}
.plan-hero{background:linear-gradient(135deg,#1E1510 0%,var(--primario) 70%,var(--acento) 100%);color:#fff;
  border-radius:var(--radius);padding:28px;margin-bottom:18px;box-shadow:var(--shadow-md)}
.plan-hero h2{color:#fff;font-family:var(--display);font-size:1.5rem;margin-bottom:4px}
.plan-hero .lema{opacity:.85;font-style:italic;margin-top:8px}
.plan-hero .price{font-size:1.3rem;font-weight:800;margin-top:10px}

/* galería de imágenes en editor de producto */
.galwrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.galthumb{position:relative;width:54px;height:54px;border-radius:10px;overflow:hidden;border:1.5px solid var(--line);transition:.2s}
.galthumb:hover{border-color:var(--primario);transform:scale(1.05)}
.galthumb img{width:100%;height:100%;object-fit:cover}
.galthumb button{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;line-height:1;display:grid;place-items:center;transition:.15s}
.galthumb button:hover{background:rgba(211,51,51,.9)}
.galadd{display:flex;align-items:center;gap:6px}
.galadd input{padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;font-size:.82rem;width:160px}

/* ============ DASHBOARD DE PEDIDOS — MODERNO ============ */
.ord-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;
  box-shadow:var(--shadow-xs)}
.ord-bar h2{font-family:var(--display);font-size:1.45rem;margin:0;display:flex;align-items:center;gap:8px}
.ord-count{color:var(--muted);font-weight:700;font-size:.85rem;
  background:var(--bg);padding:4px 12px;border-radius:999px;border:1px solid var(--line)}
.ord-bar .sp{flex:1}
.ord-date{padding:9px 12px;border:1.5px solid var(--line);border-radius:var(--radius-sm);font-size:.85rem;background:var(--bg);transition:.2s}
.ord-date:focus{border-color:var(--primario);outline:none;background:#fff}

/* ===== TABLERO DE PEDIDOS (columnas por estado, estilo referencia) ===== */
.kanban{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px;width:100%;align-items:start}

.kcol{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-xs);
  transition:transform .3s ease,box-shadow .3s ease}
.kcol:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.kcol-bar{height:4px;flex-shrink:0;background:var(--c);
  background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 45%,#fff),var(--c));
  background-size:200% 100%;animation:kshimmer 2.4s linear infinite}
@keyframes kshimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.kcol-h{display:flex;align-items:center;gap:10px;padding:16px 16px 14px;
  border-bottom:1px solid var(--line);font-weight:800;font-size:.95rem;color:var(--ink)}
.kcol-title{font-weight:800}
.kdot{width:12px;height:12px;border-radius:50%;flex-shrink:0;position:relative;
  color:var(--c);background:var(--c);box-shadow:0 0 8px currentColor,0 0 18px color-mix(in srgb,var(--c) 45%,transparent)}
.kdot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--c);
  animation:kpulse 1.8s ease-in-out infinite}
@keyframes kpulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(2.4);opacity:0}}
.kcol-count{margin-left:auto;min-width:26px;height:26px;padding:0 8px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;
  color:var(--c);background:#eef0f3;background:color-mix(in srgb,var(--c) 14%,#fff)}
.kcol-b{padding:14px;display:flex;flex-direction:column;gap:14px}
.kempty{color:var(--muted);text-align:center;padding:22px 0;font-size:.85rem;font-style:italic}

@keyframes cardIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.kcard{background:#fff;border:1px solid var(--line);border-left:3px solid var(--c);border-radius:14px;
  padding:16px;cursor:pointer;box-shadow:var(--shadow-xs);
  transition:transform .25s ease,box-shadow .25s ease;animation:cardIn .3s ease both}
.kcard:hover{box-shadow:var(--shadow-md);transform:translateX(4px)}
.kc-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.kc-id{font-weight:800;font-size:.98rem;color:var(--ink);cursor:pointer;letter-spacing:-.01em}
.kc-badge{font-size:.66rem;font-weight:800;padding:4px 10px;border-radius:999px;text-transform:uppercase;
  letter-spacing:.04em;white-space:nowrap;color:var(--c);background:#eef0f3;
  background:color-mix(in srgb,var(--c) 13%,#fff)}
.kc-cli{font-weight:800;font-size:.95rem;color:var(--ink);display:flex;align-items:center;gap:6px;margin-bottom:4px}
.kc-ico{font-size:.9rem}
.kc-tel{font-size:.85rem;margin-bottom:4px}
.kc-tel a{color:var(--fresco);font-weight:700;text-decoration:none}
.kc-tel a:hover{text-decoration:underline}
.kc-dest{font-size:.8rem;font-weight:700;color:var(--muted);margin-top:4px;padding:5px 10px;
  background:var(--bg);border-radius:8px;display:inline-block;border:1px solid var(--line)}
.kc-items{font-size:.83rem;margin-top:8px;line-height:1.5;color:#3A2E2B;
  padding:9px 11px;background:var(--bg-warm);border-radius:10px}
.kc-time{font-size:.74rem;color:var(--muted);margin-top:8px;font-weight:600}
.kc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line)}
.kc-nitems{font-size:.78rem;color:var(--muted);font-weight:600}
.kc-total{font-weight:800;font-size:1.05rem;color:var(--ink)}
.kc-nota{font-size:.8rem;background:#FFFDF0;border:1px dashed rgba(255,179,0,.6);
  border-radius:8px;padding:8px 11px;margin-top:8px;color:#664d00}
.kc-actions{display:flex;gap:6px;margin-top:12px}
.kc-sel{flex:1;padding:9px 10px;border:1.5px solid var(--line);border-radius:10px;font-size:.84rem;font-weight:700;
  background:#fff;transition:.2s;cursor:pointer;color:var(--ink)}
.kc-sel:focus{border-color:var(--primario);outline:none;box-shadow:0 0 0 3px rgba(232,67,31,.08)}

/* reporte contabilidad */
.ord-report{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:18px;
  box-shadow:var(--shadow-sm)}
.rep-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:linear-gradient(135deg,var(--bg),var(--bg-warm));border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:18px;text-align:center;transition:.2s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.kpi-v{font-family:var(--display);font-size:1.4rem;font-weight:800;color:var(--ink)}
.kpi-l{font-size:.76rem;color:var(--muted);margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.rep-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:16px}
.rep-cols h4{margin:0 0 10px;font-family:var(--display);font-size:1.1rem}
.rep-list{list-style:none;margin:0;padding:0}
.rep-list li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:.9rem;transition:.15s}
.rep-list li:hover{padding-left:6px}
.rep-list .muted{color:var(--muted)}

/* ===== RESPONSIVE: pedidos + panel general (móvil) ===== */
@media(max-width:1100px){
  .rep-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .rep-cols{grid-template-columns:1fr}
  .ord-bar{padding:14px 16px}
  .ord-bar h2{font-size:1.25rem}
  .ord-bar .btn{font-size:.82rem;padding:9px 12px}
  main{padding:18px 14px 110px}
  header.bar{padding:13px 15px;gap:10px}
  header.bar .t{font-size:1.12rem}
  header.bar .btn{padding:9px 12px;font-size:.8rem}
  .tabs{position:static;top:auto;padding:11px 15px}
  .sec{padding:18px}
}
@media(max-width:560px){
  .kanban{grid-template-columns:1fr;gap:16px}
  .ord-bar{flex-direction:column;align-items:stretch;gap:10px}
  .ord-bar .sp{display:none}
  .ord-bar h2{font-size:1.15rem}
  .ord-bar .btn,.ord-date{width:100%}
  .kcard{padding:14px}
  .rep-grid{grid-template-columns:1fr 1fr}
  /* productos: apilar imagen sobre los campos */
  .prod{flex-direction:column}
  .prod .pim,.prod .pim img,.prod .pim .upl{width:100%}
  .prod .pim img{height:170px}
  .prod .ptop{flex-direction:column}
  .prod .ptop .f.price{width:100%}
  .colors{gap:12px}
  .badge-plan{font-size:.66rem}
}

/* multi-rol */
.rol-badge{margin-left:8px;background:rgba(255,255,255,.15);color:#fff;font-weight:800;font-size:.72rem;
  padding:5px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em;
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px)}
.kcard.view-cocina .kc-items{font-size:1rem;font-weight:700;background:var(--bg-warm);border-radius:8px;
  padding:10px;margin-top:8px}
.kcard.view-reparto .kc-dest{font-size:1rem;font-weight:800;color:var(--ink);margin-top:6px;
  background:linear-gradient(135deg,rgba(37,211,102,.08),rgba(37,211,102,.03));
  border:1px solid rgba(37,211,102,.15);padding:6px 10px}
.kcard.view-reparto .kc-tel a{font-size:.98rem}

/* ============ EDITOR DE OPCIONES DE PRODUCTO ============ */
.opt-section{margin-top:14px;border-top:1px dashed var(--line);padding-top:14px}
.opt-header{margin-bottom:10px}
.opt-header label{font-weight:700;font-size:.88rem;color:var(--ink)}
.opt-group{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;margin-bottom:10px;transition:.2s}
.opt-group:hover{box-shadow:var(--shadow-xs)}
.opt-group-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.opt-group-top .opt-name{flex:1;min-width:120px;padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;font-size:.88rem;font-weight:600;background:#fff;transition:.2s}
.opt-group-top .opt-name:focus{border-color:var(--primario);outline:none;box-shadow:0 0 0 3px rgba(232,67,31,.08)}
.opt-req{display:flex;align-items:center;gap:5px;font-size:.82rem;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap}
.opt-req input[type="checkbox"]{width:16px;height:16px;accent-color:var(--primario)}
.opt-items{display:flex;flex-direction:column;gap:5px}
.opt-item{display:flex;align-items:center;gap:6px}
.opt-radio{color:var(--muted);font-size:.9rem;flex-shrink:0;width:18px;text-align:center}
.opt-item input{flex:1;padding:7px 10px;border:1.5px solid var(--line);border-radius:8px;font-size:.86rem;background:#fff;transition:.2s}
.opt-item input:focus{border-color:var(--primario);outline:none}
.opt-item input.opt-item-price{width:75px;flex:none;text-align:right}
.opt-item-del{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;font-size:.7rem;
  background:#fff;border:1px solid var(--line);color:var(--muted);cursor:pointer;flex-shrink:0;transition:.15s}
.opt-item-del:hover{border-color:#d33;color:#d33;background:#fff5f5}
.opt-add-item{padding:7px 12px;font-size:.82rem;font-weight:700;color:var(--fresco);
  background:none;border:1.5px dashed var(--fresco);border-radius:8px;cursor:pointer;margin-top:6px;width:100%;transition:.2s}
.opt-add-item:hover{background:rgba(46,125,79,.06)}
.opt-add-group{padding:9px;font-size:.84rem;font-weight:700;color:var(--muted);
  background:none;border:1.5px dashed var(--line);border-radius:10px;cursor:pointer;width:100%;margin-top:4px;transition:.2s}
.opt-add-group:hover{border-color:var(--primario);color:var(--primario);background:rgba(232,67,31,.02)}

/* ============ NOTAS DE REPARTIDOR ============ */
.kc-note-edit{margin-top:8px}
.kc-note-textarea{width:100%;min-height:50px;padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:.86rem;resize:vertical;background:var(--bg);transition:.2s}
.kc-note-textarea:focus{border-color:var(--primario);outline:none;background:#fff;box-shadow:0 0 0 3px rgba(232,67,31,.08)}
.kc-note-btn{margin-top:6px;padding:8px 14px;font-size:.82rem;font-weight:700;
  background:linear-gradient(135deg,var(--fresco),#24904A);color:#fff;border:none;border-radius:8px;cursor:pointer;width:100%;transition:.2s}
.kc-note-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px -4px rgba(46,125,79,.3)}

/* ============ TICKET PRINT MODAL ============ */
.p-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.p-modal.open {
  display: flex;
}
.p-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30,21,16,.55);
  backdrop-filter: blur(6px);-webkit-backdrop-filter:blur(6px);
}
.p-modal-box {
  position: relative;
  background: #fff;
  border-radius: 20px;
  width: min(440px, 94vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  z-index: 10000;
  overflow: hidden;
  animation: cardIn .3s ease;
}
.p-modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
}
.p-modal-head h3 {
  margin: 0;
  font-size: 1.1rem;
  font-family: var(--display);
}
.p-modal-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  width: 32px;height: 32px;border-radius: 50%;display: grid;place-items: center;
  transition: .2s;
}
.p-modal-close:hover{background:rgba(232,67,31,.08);color:var(--primario)}
.p-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.4;
  color: #000;
}
.p-modal-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  background: var(--bg);
}
@media(max-width:560px){
  .p-modal-foot .btn{flex:1 1 auto;min-width:120px;justify-content:center;text-align:center}
}

/* Styles for ticket elements inside p-modal-body */
.p-modal-body * {
  box-sizing: border-box;
}
.p-modal-body h1 {
  font-size: 20px;
  margin: 0 0 2px;
  font-family: Arial, sans-serif;
}
.p-modal-body .negocio {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
  font-family: Arial, sans-serif;
}
.p-modal-body .fecha {
  color: #555;
  font-size: 12px;
  margin-bottom: 8px;
}
.p-modal-body hr {
  border: none;
  border-top: 1px dashed #000;
  margin: 10px 0;
}
.p-modal-body .info {
  margin-bottom: 3px;
}
.p-modal-body .info b {
  font-weight: bold;
}
.p-modal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
}
.p-modal-body table td {
  border-bottom: 1px dotted #ccc;
  padding: 4px 6px;
  vertical-align: top;
}
.p-modal-body .total-row {
  font-size: 18px;
  font-weight: bold;
  text-align: right;
  margin-top: 6px;
  padding: 8px 0;
  border-top: 2px solid #000;
}
.p-modal-body .nota {
  background: #f5f5f5;
  padding: 8px;
  border-radius: 4px;
  margin-top: 8px;
  font-size: 12px;
}

/* Print Overrides */
@media print {
  body > *:not(.p-modal) {
    display: none !important;
  }
  .p-modal {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    background: #fff !important;
  }
  .p-modal-overlay {
    display: none !important;
  }
  .p-modal-box {
    box-shadow: none !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .p-modal-body {
    padding: 0 !important;
    overflow: visible !important;
  }
  .no-print {
    display: none !important;
  }
}

/* ============================================================
   COSTO DE DESPACHO POR COMUNA (Plan Elite)
   ============================================================ */
.badge-elite{display:inline-block;vertical-align:middle;margin-left:6px;padding:3px 10px;border-radius:999px;
  font-size:.7rem;font-weight:800;letter-spacing:.03em;color:#1E1510;
  background:linear-gradient(135deg,#FFB300,#F2A900);box-shadow:0 1px 4px rgba(242,169,0,.4)}
#zonasList{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.zona-row{display:grid;grid-template-columns:1fr 150px 40px;gap:10px;align-items:center;
  background:var(--bg);border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px}
.zona-row .z-name{font-weight:700;color:var(--ink,#2A1A12)}
.zona-row input{width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:10px;
  font-size:.92rem;background:#fff}
.zona-row input:focus{outline:none;border-color:var(--primario);box-shadow:0 0 0 3px rgba(232,67,31,.08)}
.zona-row .z-cost{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--muted)}
.zona-add{display:grid;grid-template-columns:1fr 150px auto;gap:10px;align-items:center}
.zona-empty{color:var(--muted);font-size:.88rem;padding:10px 4px}
@media(max-width:640px){
  .zona-row{grid-template-columns:1fr 110px 38px}
  .zona-add{grid-template-columns:1fr 1fr;gap:8px}
  .zona-add #z_add{grid-column:1 / -1}
}

/* ============================================================
   CARGA MASIVA (Plan Elite)
   ============================================================ */
.cm-step{border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:16px;margin-bottom:16px;background:#fff}
.cm-step-h{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1rem;color:var(--ink,#2A1A12);margin-bottom:8px}
.cm-num{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--primario);color:#fff;font-size:.85rem;flex-shrink:0}
.cm-drop{display:flex;align-items:center;justify-content:center;text-align:center;min-height:96px;
  border:2px dashed var(--line);border-radius:var(--radius-sm);background:var(--bg);cursor:pointer;
  padding:18px;transition:.2s;color:var(--muted);font-weight:700}
.cm-drop:hover{border-color:var(--primario);color:var(--primario);background:rgba(232,67,31,.03)}
.cm-drop.drag{border-color:var(--primario);background:rgba(232,67,31,.07);color:var(--primario)}
.cm-drop-txt small{display:block;font-weight:500;font-size:.82rem;margin-top:4px;opacity:.8}
.cm-prev-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:.85rem}
.cm-prev-table th,.cm-prev-table td{border:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top}
.cm-prev-table th{background:var(--bg);font-weight:700}
.cm-prev-note{margin:12px 0;font-weight:700}
.cm-prev-note.ok{color:var(--fresco)}
.cm-prev-note.warn{color:#b8860b}
.cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.cm-card{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.cm-card img{width:100%;height:110px;object-fit:cover;background:#f3ece4}
.cm-card .cm-fn{font-size:.72rem;color:var(--muted);padding:6px 8px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-card select{margin:4px 8px 8px;padding:7px 8px;border:1.5px solid var(--line);border-radius:8px;font-size:.82rem;background:var(--bg);width:calc(100% - 16px)}
.cm-card select.unmatched{border-color:#e0a800;background:#fffbe9}
.cm-card .cm-x{align-self:flex-end;margin:-2px 4px 4px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:.95rem}
.cm-card .cm-x:hover{color:#d33}






/* ===== Variantes predefinidas ===== */
.varg{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;background:#fff}
.applyvar{margin-top:8px;width:100%;padding:9px 10px;border:1.5px dashed var(--primario);border-radius:10px;
  color:var(--primario);font-weight:700;background:rgba(232,67,31,.03);cursor:pointer}
/* ===== Cupones ===== */
.cupg{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:8px;background:#fff}
.cupg .cup-code{flex:1 1 130px;min-width:120px;text-transform:uppercase;font-weight:800;letter-spacing:.04em}
.cupg select{flex:0 0 130px;padding:8px}
.cupg .cup-val{flex:0 0 80px} .cupg .cup-min{flex:0 0 120px}
.cupg input,.cupg select{padding:8px;border:1.5px solid var(--line);border-radius:8px}
/* ===== Código QR ===== */
.qr-wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.qr-box{width:220px;height:220px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px}
.qr-box img,.qr-box canvas{display:block;max-width:100%;height:auto}
.qr-side{flex:1;min-width:220px}
.qr-side .btn{margin-top:10px}

/* ===== Pedido manual ===== */
.mo-box{max-width:560px;width:96vw}
.mo-body{display:flex;flex-direction:column;gap:12px}
.mo-body label{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:.86rem;color:var(--ink,#222)}
.mo-body input,.mo-body select,.mo-body textarea{padding:10px;border:1.5px solid var(--line);border-radius:10px;font-size:.95rem;font-weight:500}
.mo-body textarea{min-height:54px;resize:vertical}
.mo-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mo-items-h{font-weight:800;font-size:.9rem;margin-top:2px}
.mo-items{display:flex;flex-direction:column;gap:8px}
.mo-item{display:grid;grid-template-columns:1fr 64px 92px 34px;gap:8px;align-items:center}
.mo-item input{padding:9px}
.mo-del{width:34px;height:38px;border-radius:9px;border:1.5px solid var(--line);background:#fff;color:#c0392b;font-weight:800}
.mo-del:hover{background:#fff5f5;border-color:#e0a0a0}
.mo-add{display:flex;gap:8px}.mo-add select{flex:1;padding:10px;border:1.5px solid var(--line);border-radius:10px}
.mo-empty{color:var(--muted);font-size:.86rem;padding:8px;border:1.5px dashed var(--line);border-radius:10px;text-align:center}
.mo-total{text-align:right;font-size:1.05rem;font-weight:700;border-top:1px solid var(--line);padding-top:10px}
.mo-total b{font-size:1.25rem;color:var(--primario)}
@media(max-width:560px){.mo-item{grid-template-columns:1fr 52px 78px 32px}}

/* ===== Mejorar foto con IA ===== */
.ai-btn{margin-top:8px;width:100%;border:1.5px solid #8b5cf6;color:#6d28d9;background:linear-gradient(135deg,#faf5ff,#f3e8ff);
  font-weight:800;font-size:13px;padding:8px;border-radius:10px;cursor:pointer;transition:.2s}
.ai-btn:hover{background:#ede4ff;border-color:#6d28d9}
.ai-box{max-width:680px;width:96vw}
.ai-body{display:flex;flex-direction:column;gap:14px}
.ai-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ai-cap{font-weight:800;font-size:13px;margin-bottom:6px;color:var(--muted)}
.ai-drop{display:flex;align-items:center;justify-content:center;text-align:center;min-height:220px;border:2px dashed var(--line);
  border-radius:14px;cursor:pointer;background:#faf9f7;color:var(--muted);font-size:13px;overflow:hidden;position:relative}
.ai-drop.over{border-color:#8b5cf6;background:#f6f0ff}
.ai-drop img{max-width:100%;max-height:260px;display:none;border-radius:10px}
.ai-result{display:flex;align-items:center;justify-content:center;min-height:220px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.ai-result img{max-width:100%;max-height:260px;border-radius:10px}
.ai-ph{color:var(--muted);font-size:13px}
.ai-spin{width:42px;height:42px;border:4px solid #eee;border-top-color:#8b5cf6;border-radius:50%;animation:aispin 1s linear infinite}
@keyframes aispin{to{transform:rotate(360deg)}}
.ai-controls{display:flex;gap:12px;align-items:flex-end}
.ai-controls label{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:13px;flex:1}
.ai-controls select{padding:10px;border:1.5px solid var(--line);border-radius:10px}
.ai-controls .btn.primary{white-space:nowrap}
.ai-quota{font-size:12px;color:var(--muted)}
.ai-msg{font-size:13px}.ai-msg.bad{color:#c0392b;font-weight:700}
@media(max-width:560px){.ai-cols{grid-template-columns:1fr}.ai-controls{flex-direction:column;align-items:stretch}}

/* ===== Súper admin: formulario de descuento por demo ===== */
.descform{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;background:#fff7ed;border:1px solid #fed7aa;
  border-radius:10px;padding:6px 9px;font-size:.78rem;color:#9a3412;font-weight:700}
.descform .dlbl{font-weight:800}
.descform input[type=number]{width:50px;padding:5px 6px;border:1px solid var(--line);border-radius:7px;font-size:.78rem}
.descform input[type=text]{width:130px;padding:5px 7px;border:1px solid var(--line);border-radius:7px;font-size:.78rem}
.descform .btn{padding:5px 10px;font-size:.76rem}

/* ===== Banner de oferta en Mi Plan ===== */
.sec.oferta{background:linear-gradient(135deg,#fff7ed,#ffedd5);border:1.5px solid #fdba74}
.oferta-precio{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:8px}
.oferta-precio .antes{text-decoration:line-through;color:var(--muted);font-size:1.05rem;font-weight:700}
.oferta-precio .ahora{font-size:1.7rem;font-weight:800;color:#c2410c}
.oferta-precio .ahorro{background:#16a34a;color:#fff;font-weight:800;font-size:.8rem;padding:4px 12px;border-radius:999px}

/* ===== Acordeón de categorías en el editor ===== */
.cat-toggle{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--line);background:#fff;
  color:var(--muted);font-size:.78rem;cursor:pointer;transition:transform .2s,border-color .2s,color .2s;flex:0 0 auto}
.cat-toggle:hover{border-color:var(--primario);color:var(--primario)}
.cat.collapsed .cat-toggle{transform:rotate(-90deg)}
.cat.collapsed .prods{display:none}
.cat-h .cat-count{background:#fff;border:1.5px solid var(--line);color:var(--muted);border-radius:999px;
  padding:2px 11px;font-size:.78rem;font-weight:800;flex:0 0 auto}

/* ===== Editor de productos en dos niveles (filas compactas) ===== */
.prow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
.prow:hover{background:var(--bg-warm)}
.prow.off{opacity:.55}
.prow-th{width:46px;height:46px;border-radius:10px;overflow:hidden;flex:0 0 auto;background:var(--bg-2);display:grid;place-items:center}
.prow-th img{width:100%;height:100%;object-fit:cover}
.prow-ph{font-size:1.3rem}
.prow-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.prow-info b{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow-info small{color:var(--muted);font-size:.8rem}
.prow-acts{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.prow-edit{font-weight:800;color:var(--primario);font-size:.82rem;white-space:nowrap}
.prod.open{border:2px solid var(--primario);border-radius:14px;margin:12px 0;overflow:hidden}
.prod-edithead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;
  background:var(--bg-warm);cursor:pointer;font-size:.95rem}
@media(max-width:560px){.prow .prow-edit{display:none}.prow-acts .iconbtn{width:32px;height:32px}}

/* ===== Productos complementarios (admin) ===== */
.cross-onoff{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:14px;cursor:pointer}
.cross-cat{margin-bottom:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cross-cat-h{background:var(--bg-warm);padding:9px 14px;font-weight:800;font-size:.9rem}
.cross-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--line);cursor:pointer;font-size:.92rem}
.cross-item:first-of-type{border-top:none}
.cross-item input{width:18px;height:18px;accent-color:var(--primario)}