/* Estilos del catálogo mpac (menú de clientes + panel de administración). */
:root{--indigo:#2b2a7c;--indigo-2:#232067;--blue:#159fda;--orange:#f6931e;--paper:#fff;--ink:#2b2a7c;--muted:#7a79ad;--line:#e9e8f4;--maxw:560px;--font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{touch-action:manipulation}
/* 16px evita que iOS haga zoom automático al enfocar un campo (ya no se bloquea el zoom del usuario) */
@media(max-width:560px){input:not([type=checkbox]):not([type=range]):not([type=file]):not([type=radio]),select,textarea{font-size:16px!important}}
body{font-family:var(--font);color:var(--ink);background:#0d0c2a;line-height:1.4;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}
input,select,textarea{font-family:inherit}
.app{max-width:var(--maxw);margin:0 auto;position:relative;min-height:100vh;overflow-x:clip}
.view{position:relative;min-height:100vh;display:none;background-size:cover;background-position:center}
.view.active{display:block}
#view-products{background-color:var(--indigo-2)}
#view-home{background-color:#eef7fc}
#view-home::before,#view-products::before,#catalogOverlay::before{content:"";position:fixed;inset:0;background-image:var(--bgimg,none);background-repeat:repeat;background-size:100% auto;background-position:top center;opacity:var(--bgop,1);z-index:0;pointer-events:none}
#view-home>*,#view-products>*,#catalogOverlay>*{position:relative;z-index:1}
.pe-imgs{display:flex;flex-wrap:wrap;gap:8px}
.pe-thumb{position:relative;width:74px;height:74px;border-radius:9px;overflow:hidden;border:1px solid var(--line)}
.pe-thumb img{width:100%;height:100%;object-fit:cover}
.pe-thumb button{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
.sh-media{position:relative}
.sh-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.2);color:var(--indigo);font-size:22px;z-index:4;padding-bottom:2px}
.sh-arrow.l{left:10px}.sh-arrow.r{right:10px}
.sh-dots{display:flex;gap:7px;justify-content:center;padding:12px 0 0}
.sh-dots span{width:8px;height:8px;border-radius:50%;background:#d3d2e6;cursor:pointer;transition:.15s}
.sh-dots span.on{background:var(--indigo);width:20px;border-radius:5px}
.sh-counter{text-align:center;padding:10px 0 0;font-size:13px;font-weight:700;color:var(--muted)}
.back{position:fixed;top:14px;left:calc(50% - var(--maxw)/2 + 14px);z-index:30;width:40px;height:40px;border-radius:50%;background:var(--paper);box-shadow:0 3px 12px rgba(0,0,0,.16);display:flex;align-items:center;justify-content:center;color:var(--indigo);font-size:22px}
@media(max-width:560px){.back{left:14px}}
.logo-img{height:var(--logo-h,78px)!important;width:auto;object-fit:contain;max-width:88%}
.logo-ph{font-weight:800;font-size:40px;color:var(--indigo);letter-spacing:-1px;text-align:center}
.logo-ph small{display:block;font-size:12px;color:var(--blue);font-weight:600;letter-spacing:.5px}
.topbar .logo-img{height:var(--logo-h-sm,44px)!important}.topbar .logo-ph{font-size:22px}.topbar .logo-ph small{font-size:8px}
#view-home.active{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 26px}
#view-home .brandwrap{margin-bottom:36px;text-align:center}
.home-btns{width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px}
.home-btn{background:var(--paper);border:2px solid var(--blue);border-radius:8px;padding:15px;font-size:16px;font-weight:600;color:var(--indigo);text-align:center;box-shadow:3px 4px 0 var(--blue);transition:.12s}
.home-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--blue)}
.socials{display:flex;gap:26px;margin-top:32px;justify-content:center}
.socials a{width:30px;height:30px;color:var(--blue)}.socials svg{width:100%;height:100%}
#prodHeader{position:sticky;top:0;z-index:20;transition:transform .3s cubic-bezier(.4,0,.2,1)}
#prodHeader.hidden{transform:translateY(-100%)}
.topbar{background:var(--paper);padding:10px 0 12px;display:flex;justify-content:center;align-items:center;z-index:10;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.cat-list{padding:26px 22px 90px;display:flex;flex-direction:column;gap:24px}
.cat-btn{background:var(--paper);border-radius:8px;padding:22px 16px;text-align:center;font-size:21px;font-weight:700;color:var(--indigo);box-shadow:0 6px 22px rgba(0,0,0,.28);transition:.12s;line-height:1.15}
.cat-btn:active{transform:scale(.98)}

/* CATÁLOGO EN SUPERPOSICIÓN */
#catalogOverlay{position:fixed;top:0;bottom:0;left:0;right:0;margin:0 auto;width:100%;max-width:var(--maxw);z-index:50;background-color:var(--indigo-2);display:none;overflow-y:auto}
#catalogOverlay.open{display:block;animation:slideup .28s cubic-bezier(.22,1,.36,1)}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
#catalogOverlay .topbar{position:sticky;top:0;z-index:6}
#catalogOverlay>.back{z-index:30}

.chips{z-index:15;background:var(--orange);display:flex;overflow-x:auto;scrollbar-width:none;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;padding:11px 14px;font-size:12px;font-weight:600;color:#5a3403;border-bottom:3px solid transparent}
.chip.active{color:#fff;border-bottom-color:#fff;background:rgba(0,0,0,.08)}
.search{padding:16px 18px 4px}
.search input{width:100%;padding:12px 16px 12px 42px;border-radius:10px;border:none;font-size:15px;color:var(--ink);background:rgba(255,255,255,.95);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%237a79ad' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px center}
.search input:focus{outline:none;box-shadow:0 0 0 3px rgba(21,159,218,.5)}
.cat-section{padding:24px 16px 0}
.cat-title{background:var(--paper);border-radius:10px;padding:14px;text-align:center;font-size:22px;font-weight:800;color:var(--indigo);margin-bottom:16px;box-shadow:0 4px 16px rgba(0,0,0,.2);scroll-margin-top:52px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:430px){.grid{grid-template-columns:1fr}}
.prod{position:relative;background:var(--paper);border-radius:10px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.14);display:flex;flex-direction:column;cursor:pointer}
.prod.dim{opacity:.6}
.prod-img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#f0eff7}
.prod-ph{width:100%;aspect-ratio:4/3;background:#f0eff7;display:flex;align-items:center;justify-content:center;color:#c3c2d8;font-size:11px;font-weight:600}
.prod-body{padding:11px 12px 12px}
.prod .code{font-size:11px;font-weight:700;color:var(--blue)}
.prod .name{font-size:13.5px;font-weight:700;color:var(--indigo);line-height:1.2;margin:2px 0 3px}
.prod .size{font-size:11px;color:var(--muted);font-weight:500}
.prod .desc{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.25}
.ptable{margin-top:9px;border-top:1px solid var(--line);padding-top:7px}
.prow{display:flex;align-items:center;justify-content:space-between;padding:2px 0;font-size:12.5px}
.prow .q{color:var(--muted);font-weight:600}.prow .q b{color:var(--ink)}
.prow .p{font-weight:700;color:var(--ink)}
.prow.single .q{display:none}.prow.single .p{font-size:16px;color:var(--indigo)}
.addbtn{margin-top:10px;background:var(--indigo);color:#fff;font-size:12.5px;font-weight:700;border-radius:8px;padding:9px;display:flex;align-items:center;justify-content:center;gap:6px}
.addbtn.off{background:#c9c7d8;cursor:default}
.soldout-badge{position:absolute;top:8px;left:8px;z-index:3;background:#b52a2a;color:#fff;font-size:11px;font-weight:800;letter-spacing:.5px;padding:3px 9px;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.sh-add.off{background:#c9c7d8;color:#fff;box-shadow:none;cursor:default}
.grid.listmode{grid-template-columns:1fr;gap:10px}
.grid.listmode .prod{flex-direction:row}
.grid.listmode .prod-img,.grid.listmode .prod-ph{width:120px;min-width:120px;height:120px;aspect-ratio:1/1;align-self:center;margin:8px 0 8px 8px;border-radius:10px}
.grid.listmode .prod-body{flex:1;min-width:0;display:flex;flex-direction:column;padding:10px 12px}
.grid.listmode .desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden}
.grid.listmode .ptable{display:flex;flex-wrap:wrap;gap:0 12px;margin-top:6px}
.grid.listmode .prow{width:auto;font-size:11.5px}
.grid.listmode .prow .q{min-width:0;margin-right:4px}
.grid.listmode .prow.single .p{font-size:14px}
.grid.listmode .addbtn{width:auto;align-self:flex-start;margin-top:8px;padding:7px 16px}
.empty-cat{background:rgba(255,255,255,.92);border-radius:10px;padding:22px 16px;text-align:center;color:var(--muted);font-size:13px}
.empty-cat b{color:var(--indigo)}
.spacer{height:90px}

.modal-bg{position:fixed;inset:0;background:rgba(20,17,60,.55);z-index:60;display:none;align-items:flex-end;justify-content:center}
.modal-bg.open{display:flex}
.modal{background:var(--paper);width:100%;max-width:var(--maxw);border-radius:20px 20px 0 0;padding:22px 22px 30px}
.modal h3{font-size:20px;font-weight:800;color:var(--indigo);margin:0 0 4px}
.modal p{font-size:14px;color:var(--muted);margin:0 0 16px}
.modal .row{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none}
.modal .row .ico{width:38px;height:38px;border-radius:10px;background:#eef6fd;color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modal .row .ico svg{width:20px;height:20px}
.modal .row small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.modal .close{width:100%;margin-top:6px;padding:13px;border-radius:12px;background:var(--indigo);color:#fff;font-weight:700;font-size:15px}

/* HOJAS (producto / carrito) */
.sheet-bg{position:fixed;inset:0;background:rgba(20,17,60,.55);z-index:70;display:none;align-items:flex-end;justify-content:center}
.sheet-bg.open{display:flex}
.sheet{background:#fff;width:100%;max-width:var(--maxw);border-radius:20px 20px 0 0;max-height:88vh;max-height:88dvh;overflow-y:auto;animation:up .25s cubic-bezier(.22,1,.36,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet .sh-img{width:100%;aspect-ratio:1/1;max-height:44vh;max-height:44dvh;object-fit:cover;background:#f0eff7}
.sheet .sh-ph{width:100%;aspect-ratio:1/1;max-height:38vh;max-height:38dvh;background:#f0eff7;display:flex;align-items:center;justify-content:center;color:#c3c2d8;font-weight:600}
.sheet .sh-body{padding:18px 20px 24px}
.sheet .sh-close{position:sticky;top:10px;z-index:6;float:right;margin:10px 10px -46px 0;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.28);font-size:18px;color:var(--indigo)}
.sh-code{font-size:12px;font-weight:700;color:var(--blue)}
.sh-name{font-size:19px;font-weight:800;color:var(--indigo);margin:2px 0}
.sh-size{font-size:13px;color:var(--muted)}
.sh-tiers{margin:14px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tier{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;font-size:14px;border-bottom:1px solid var(--line);cursor:pointer}
.tier:last-child{border-bottom:none}
.tier.sel{background:#eef6fd}
.tier .tq{font-weight:600;color:var(--ink)}
.tier .tp{font-weight:700;color:var(--indigo)}
.qtybar{display:flex;align-items:center;gap:14px;margin:16px 0 6px}
.qtybar label{font-size:13px;font-weight:600;color:var(--indigo)}
.stepper{display:flex;align-items:center;gap:2px;background:#f4f3fb;border-radius:12px;padding:4px}
.stepper button{width:40px;height:40px;border-radius:9px;background:#fff;font-size:22px;font-weight:700;color:var(--indigo);display:flex;align-items:center;justify-content:center}
.stepper input{width:64px;text-align:center;border:none;background:transparent;font-size:17px;font-weight:700;color:var(--ink)}
.est{background:#f4f3fb;border-radius:12px;padding:12px 14px;font-size:14px;color:var(--ink);margin:8px 0 16px;display:flex;justify-content:space-between;align-items:center}
.est b{color:var(--indigo);font-size:16px}
.est small{display:block;color:var(--muted);font-size:11px;font-weight:400}
.sh-actions{display:flex;gap:10px;align-items:stretch}
.sh-ask{width:100%;margin-top:10px;padding:13px;border-radius:12px;background:#eafff2;color:#0b7a3e;border:1px solid #b6ebcb;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}
.sh-ask svg{width:17px;height:17px}
.sh-ask:active{background:#d7f7e4}
.sh-add{flex:1;padding:15px;border-radius:14px;background:var(--indigo);color:#fff;font-size:16px;font-weight:800}
.sh-share{width:54px;border-radius:14px;background:#f4f3fb;border:1px solid var(--line);color:var(--indigo);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sh-share svg{width:21px;height:21px}
.sh-share:active{background:#e8e6f5}

/* CARRITO */
.cart-fab{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:45;background:var(--indigo);color:#fff;border-radius:14px;padding:13px 18px;display:none;align-items:center;gap:12px;box-shadow:0 8px 26px rgba(0,0,0,.35);width:calc(100% - 32px);max-width:calc(var(--maxw) - 32px);justify-content:space-between}
.cart-fab.show{display:flex}
.cart-fab .cf-l{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.cart-fab .cf-badge{background:var(--orange);color:#3a2200;border-radius:8px;padding:2px 9px;font-weight:800;font-size:14px}
.cart-fab .cf-total{font-weight:800;font-size:16px}
.cart-head{position:sticky;top:0;background:#fff;padding:18px 20px 12px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);z-index:2}
.cart-head h3{margin:0;font-size:20px;font-weight:800;color:var(--indigo)}
.cart-line{display:flex;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);align-items:flex-start}
.cart-line img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex-shrink:0;background:#f0eff7}
.cart-line .cl-ph{width:52px;height:52px;border-radius:10px;background:#f0eff7;flex-shrink:0}
.cl-body{flex:1;min-width:0}
.cl-name{font-weight:700;font-size:14px;color:var(--indigo);line-height:1.2}
.cl-meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.cl-price{font-weight:800;margin-top:6px;font-size:14px}
.cl-price small{font-weight:400;color:var(--muted)}
.mini{display:flex;align-items:center;gap:8px;margin-top:8px}
.mini button{width:28px;height:28px;border-radius:8px;background:#f4f3fb;border:1px solid var(--line);font-size:17px;font-weight:700;color:var(--indigo);display:flex;align-items:center;justify-content:center}
.mini input{width:56px;height:30px;text-align:center;border:1px solid var(--line);border-radius:8px;font-weight:700;color:var(--ink)}
.cl-rm{color:#b52a2a;font-size:12px;background:none;padding:6px 0;font-weight:600}
.cart-foot{padding:16px 20px 26px}
.cart-foot .fld{margin-bottom:12px}
.cart-foot .fld input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.cart-total{display:flex;justify-content:space-between;font-size:18px;font-weight:800;color:var(--indigo);margin:6px 0 4px}
.cart-note{font-size:11.5px;color:var(--muted);margin-bottom:14px}
.cart-send{width:100%;padding:15px;border-radius:14px;background:#25D366;color:#073b1c;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px}
.cart-send svg{width:20px;height:20px}
.cart-empty{padding:50px 20px;text-align:center;color:var(--muted)}
.link-btn{background:none;color:var(--muted);font-size:12.5px;text-decoration:underline;padding:6px;display:block;margin:6px auto 0}

.promo-bg{position:fixed;inset:0;background:rgba(10,8,30,.72);z-index:130;display:none;align-items:center;justify-content:center;padding:24px}
.promo-bg{overflow-y:auto}
.promo-bg.open{display:flex;animation:adfade .2s}
@keyframes adfade{from{opacity:0}to{opacity:1}}
.promo-box{position:relative;width:fit-content;max-width:min(420px,86vw);margin:auto}
.promo-box a{display:block}
.promo-btn{display:none;margin-top:12px;text-align:center;background:var(--orange);color:#fff;font-weight:800;font-size:16px;padding:14px 18px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:pointer}
.promo-btn.show{display:block}
.promo-box img{width:auto;max-width:min(420px,86vw);height:auto;max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);object-fit:contain;border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.55);display:block}
.promo-close{position:absolute;top:-14px;right:-10px;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--indigo);display:flex;align-items:center;justify-content:center;font-size:19px;box-shadow:0 3px 12px rgba(0,0,0,.35)}
#splash{position:fixed;inset:0;z-index:150;background:#eef7fc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .35s ease}
#splash.hide{opacity:0;pointer-events:none}
#splash .sp-logo{font-weight:800;font-size:34px;color:var(--indigo);letter-spacing:-1px;text-align:center;line-height:1}
#splash .sp-logo small{display:block;font-size:11px;color:var(--blue);font-weight:600;letter-spacing:.5px}
#splash .sp-logo img{max-height:90px;max-width:70vw;object-fit:contain}
#splash .spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(43,42,124,.18);border-top-color:var(--indigo);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
body.locked{overflow:hidden;position:fixed;width:100%}

#admin{position:fixed;inset:0;z-index:100;background:#f4f3fb;display:none;overflow-y:auto}
#admin.open{display:block}
.adm-head{position:sticky;top:0;background:var(--indigo);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;z-index:2}
.adm-head b{font-size:16px}
.adm-head .x{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.15);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center}
.adm-tabs{display:flex;background:#fff;position:sticky;top:56px;z-index:2;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.adm-tab{flex:1;padding:12px 4px;font-size:12.5px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent}
.adm-tab.active{color:var(--indigo);border-bottom-color:var(--indigo)}
.adm-panel{display:none;padding:18px 16px 60px;max-width:var(--maxw);margin:0 auto}
.adm-panel.active{display:block}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--indigo);margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px;color:var(--ink);background:#fff}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.row2{display:flex;gap:10px}.row2>*{flex:1}
.btn{padding:12px;border-radius:9px;font-weight:700;font-size:14px;width:100%}
.btn.pri{background:var(--indigo);color:#fff}.btn.blue{background:var(--blue);color:#fff}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--indigo)}
.btn.danger{background:#fde8e8;color:#b52a2a}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.card h4{margin:0 0 10px;font-size:14px;color:var(--indigo)}
.list-item{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.list-item .t{flex:1;font-size:13.5px;font-weight:600;color:var(--ink)}
.list-item .t small{display:block;font-weight:400;color:var(--muted);font-size:11px}
.iconbtn{width:32px;height:32px;border-radius:8px;background:#f0eff7;color:var(--indigo);font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.iconbtn.del{background:#fde8e8;color:#b52a2a}
.thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;background:#eee;flex-shrink:0}
.imgup{display:flex;align-items:center;gap:10px}
.imgup img{width:54px;height:54px;border-radius:8px;object-fit:cover;background:#eee;border:1px solid var(--line)}
.imgup .lbl{background:#fff;border:1px solid var(--blue);color:var(--blue);padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.hint{font-size:12px;color:var(--muted);line-height:1.5;margin:8px 0}
.price-row{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.price-row input{flex:1}
.price-row .del{width:34px;height:38px;border-radius:8px;background:#fde8e8;color:#b52a2a;flex-shrink:0}
.login-box{max-width:340px;margin:14vh auto 0;background:#fff;border-radius:16px;padding:26px 22px;box-shadow:0 10px 40px rgba(0,0,0,.15);text-align:center}
.login-box h3{color:var(--indigo);margin:0 0 4px}
.login-box p{color:var(--muted);font-size:13px;margin:0 0 18px}
.divider{height:1px;background:var(--line);margin:16px 0}
.status{font-size:12.5px;padding:8px 12px;border-radius:8px;margin-bottom:12px;font-weight:600}
.status.ok{background:#e7f8ee;color:#0d7a3e}.status.bad{background:#fdecec;color:#b52a2a}
.toast{position:fixed;bottom:86px;left:50%;transform:translateX(-50%);background:var(--indigo);color:#fff;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:600;z-index:200;opacity:0;transition:.25s;pointer-events:none;max-width:90%;text-align:center}
.toast.show{opacity:1}
/* Recortador de imagen */
#cropper{position:fixed;inset:0;z-index:140;background:rgba(15,13,40,.92);display:none;flex-direction:column;align-items:center;justify-content:center;padding:18px}
#cropper.open{display:flex}
#cropper h4{color:#fff;margin:0 0 4px;font-size:17px;font-weight:700}
#cropper .cp-hint{color:#b9b7d8;font-size:12.5px;margin:0 0 14px;text-align:center}
.cp-stage{position:relative;width:min(320px,80vw);height:min(320px,80vw);border-radius:14px;overflow:hidden;background:#fff;touch-action:none;cursor:grab;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.cp-stage:active{cursor:grabbing}
.cp-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.cp-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:33.33% 33.33%;opacity:.5}
.cp-zoom{width:min(320px,80vw);margin-top:16px;display:flex;align-items:center;gap:10px;color:#fff;font-size:13px}
.cp-zoom input{flex:1}
.cp-btns{display:flex;gap:10px;margin-top:18px;width:min(320px,80vw)}
.cp-btns button{flex:1;padding:13px;border-radius:11px;font-weight:700;font-size:14px}
.cp-ok{background:var(--indigo);color:#fff}
.cp-fit{background:#fff;color:var(--indigo);border:1px solid var(--line)}
.cp-cancel{background:rgba(255,255,255,.15);color:#fff}
.cp-count{color:#b9b7d8;font-size:12px;margin-top:10px}
#prodEditor{position:fixed;inset:0;z-index:110;background:#f4f3fb;display:none;overflow-y:auto}
#prodEditor.open{display:block}