:root{
  --rojo:#C0392B;--rojo2:#922B21;--rojo3:#E74C3C;--rojoc:#F9EBEA;
  --negro:#0D0D0D;--negro2:#1A1A1A;
  --g1:#F5F5F3;--g2:#E8E8E6;--g3:#666;--g4:#4A4A48;
  --verde:#1A6B3A;--verdec:#D5F0E0;
  --blanco:#FFF;--amar:#F39C12;--amarc:#FEF9E7;
  --azul:#1A5FAA;--azulc:#EAF2FF;
  --oro:#E8B923;--oro-claro:#fff7e0;
  --bg:#ffffff;
  --som:0 2px 16px rgba(0,0,0,.10);--som2:0 8px 32px rgba(0,0,0,.16);
  --rad:16px;--rads:10px;
}
html[data-theme="dark"]{--g1:#1A1A1A;--g2:#2A2A2A;--g3:#888;--g4:#CCC;--blanco:#1e1e1e;--bg:#121212;--negro:#eee;--negro2:#111;--verde:#27AE60;--azul:#5B9BD5;--rojo:#E74C3C;--rojo2:#C0392B;--rojo3:#FF6B6B;--amar:#F0B429;--oro:#F5C842;--verdec:#1a3a2a;--amarc:#3a2a00;--azulc:#0d1f3a;--rojoc:#3a0d0d}
html[data-theme="dark"] .card,html[data-theme="dark"] .prod,html[data-theme="dark"] .item,html[data-theme="dark"] .resumen,html[data-theme="dark"] .acc-btn{background:#222!important;border-color:#333!important}
html[data-theme="dark"] .form-input,html[data-theme="dark"] .form-select{background:#333;color:#eee;border-color:#444}
html[data-theme="dark"] body{background:#111;color:#eee}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

body{
  font-family:'Barlow',sans-serif;
  background:var(--g1);
  color:var(--negro);
  min-height:100vh;
  overflow-x:hidden;
  margin:0;padding:0;
}
#app-shell{
  background:var(--g1);
  width:100%;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
html[data-theme="dark"] #app-shell{background:#111;}
html[data-theme="dark"] body{background:#0a0a0a;}
.screen{display:none;min-height:100vh}
.screen.active{display:flex;flex-direction:column}
#s-login{background:var(--negro);align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden}
#s-login::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 40%,rgba(192,57,43,.28)0%,transparent 60%),radial-gradient(ellipse at 85% 15%,rgba(231,76,60,.16)0%,transparent 50%)}
.login-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:38px 30px;width:100%;max-width:380px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);position:relative;z-index:1}
.login-logo{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:28px}
.login-logo img{width:92px;height:92px;border-radius:20px;object-fit:cover;box-shadow:0 8px 28px rgba(232,185,35,.25)}
.login-logo .brand{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:900;letter-spacing:2px;color:#fff;text-align:center}
.login-logo .sub{font-size:10px;color:var(--oro);font-weight:600;letter-spacing:3px;text-transform:uppercase;text-align:center;margin-top:-4px}
.login-title{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:#fff;margin-bottom:4px}
.login-sub{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:26px}
.field-label{font-size:10px;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.field-inp{width:100%;padding:13px 16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--rads);color:#fff;font-family:'Barlow',sans-serif;font-size:16px;margin-bottom:16px;outline:none;transition:.2s}
.field-inp:focus{border-color:var(--rojo3);background:rgba(255,255,255,.12)}
.field-inp::placeholder{color:rgba(255,255,255,.25)}
.btn-login{width:100%;padding:15px;background:var(--rojo);color:#fff;border:none;border-radius:var(--rads);font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;letter-spacing:1px;cursor:pointer;margin-top:4px;transition:.2s;min-height:52px}
.btn-login:active{background:var(--rojo2);transform:scale(.98)}
.login-err{color:#FF6B6B;font-size:13px;margin-top:10px;text-align:center;display:none}
.login-demo{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:rgba(255,255,255,.3);text-align:center;line-height:1.7}
.topbar{background:var(--negro);padding:0 14px;height:58px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;border-bottom:2px solid var(--rojo)}
.topbar-brand{display:flex;align-items:center;gap:10px}
.topbar-brand img{width:36px;height:36px;border-radius:9px;object-fit:cover}
.topbar-name{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:#fff;letter-spacing:.5px}
.topbar-r{display:flex;align-items:center;gap:10px}
.topbar-pts{display:flex;align-items:center;gap:5px;background:rgba(232,185,35,.16);border:1px solid rgba(232,185,35,.3);padding:5px 11px;border-radius:20px}
.topbar-pts .v{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:800;color:var(--oro)}
.topbar-pts .l{font-size:9px;color:var(--oro);opacity:.8}
.btn-logout{padding:6px 11px;border:1px solid rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.6);border-radius:8px;font-family:'Barlow',sans-serif;font-size:12px;cursor:pointer;min-height:36px}
.bottomnav{position:fixed;bottom:0;left:0;width:100%;background:var(--negro);border-top:1px solid rgba(255,255,255,.08);display:flex;z-index:100;padding-bottom:env(safe-area-inset-bottom)}
.bnav{flex:1;padding:9px 4px 7px;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.4);font-family:'Barlow',sans-serif;font-size:10px;font-weight:500;transition:.2s;position:relative;min-height:52px}
.bnav .ico{font-size:22px;line-height:1}
.bnav.active{color:var(--rojo3)}
.cbadge{background:var(--rojo);color:#fff;border-radius:9px;min-width:17px;height:17px;padding:0 5px;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;position:absolute;top:4px;left:50%;transform:translateX(6px)}
.cbadge.pop{animation:pop .3s ease}
@keyframes pop{0%{transform:translateX(6px) scale(1)}40%{transform:translateX(6px) scale(1.7)}70%{transform:translateX(6px) scale(.9)}100%{transform:translateX(6px) scale(1)}}
.content{flex:1;padding:16px 16px 100px;overflow-y:auto}
.tab-panel{display:none}.tab-panel.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sec-titulo{font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:800;margin-bottom:14px}
.sec-sub{font-size:13px;color:var(--g3);margin:-10px 0 14px}
.saludo-flash{position:fixed;top:68px;left:50%;transform:translateX(-50%);background:var(--negro);color:#fff;padding:10px 20px;border-radius:30px;border:1px solid var(--rojo);font-size:14px;font-weight:600;z-index:200;white-space:nowrap;animation:fadeInOut 3s ease forwards;pointer-events:none}
@keyframes fadeInOut{0%{opacity:0;top:80px}10%{opacity:1;top:68px}80%{opacity:1;top:68px}100%{opacity:0;top:60px}}
.hero{background:linear-gradient(135deg,#1A1A1A 0%,#0D0D0D 100%);border-radius:var(--rad);padding:20px;margin-bottom:16px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-40px;right:-30px;width:140px;height:140px;background:var(--rojo);opacity:.13;border-radius:50%}
.hero::after{content:'';position:absolute;bottom:-50px;right:30px;width:90px;height:90px;background:var(--oro);opacity:.08;border-radius:50%}
.hero-saludo{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:3px;position:relative}
.hero-nombre{font-family:'Barlow Condensed',sans-serif;font-size:25px;font-weight:800;color:#fff;margin-bottom:14px;line-height:1.05;position:relative}
.hero-pts-box{background:rgba(232,185,35,.12);border:1px solid rgba(232,185,35,.25);border-radius:14px;padding:14px 16px;margin-bottom:12px;position:relative;display:flex;align-items:center;justify-content:space-between}
.hero-pts-box .l{font-size:11px;color:var(--oro);font-weight:600;letter-spacing:1px;text-transform:uppercase}
.hero-pts-box .v{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:900;color:var(--oro);line-height:1}
.hero-pts-box .ico{font-size:34px}
.hero-stats{display:flex;gap:10px;position:relative}
.hstat{flex:1;background:rgba(255,255,255,.07);border-radius:11px;padding:10px 12px}
.hstat .v{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:800;color:#fff}
.hstat .l{font-size:10px;color:rgba(255,255,255,.45);font-weight:500}
.acc-rapidas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.acc-btn{background:var(--blanco);border-radius:var(--rad);border:1.5px solid var(--g2);padding:16px 14px;cursor:pointer;text-align:left;box-shadow:var(--som);transition:.2s;min-height:80px}
.acc-btn:active{border-color:var(--rojo);transform:scale(.98)}
.acc-ico{font-size:25px;margin-bottom:7px}
.acc-t{font-size:13px;font-weight:700}
.acc-s{font-size:11px;color:var(--g3);margin-top:2px}
.promo-card{border-radius:var(--rad);overflow:hidden;margin-bottom:12px;box-shadow:var(--som2);background:var(--negro);position:relative}
.promo-head{background:linear-gradient(100deg,var(--negro)0%,var(--rojo2)100%);padding:13px 16px;display:flex;align-items:center;justify-content:space-between}
.promo-head .tit{font-family:'Barlow Condensed',sans-serif;color:#fff;font-weight:800;font-size:17px;letter-spacing:.5px;line-height:1}
.promo-head .tit b{color:var(--oro)}
.promo-badge{font-size:10px;font-weight:800;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}
.promo-badge.act{background:var(--oro);color:var(--negro)}
.promo-badge.fin{background:rgba(255,255,255,.15);color:rgba(255,255,255,.6)}
.promo-items{display:flex}
.promo-it{flex:1;padding:14px;text-align:center;border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center}
.promo-it:last-child{border-right:none}
.promo-it .nm{font-family:'Barlow Condensed',sans-serif;color:#fff;font-weight:700;font-size:15px;line-height:1.05;margin-bottom:8px;min-height:32px;display:flex;align-items:center;justify-content:center}
.promo-it .pv{font-size:11px;color:rgba(255,255,255,.4);text-decoration:line-through}
.promo-it .pp{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;color:#fff;line-height:1}
.promo-it .sv{font-size:10px;color:var(--oro);font-weight:700;margin-top:2px}
.promo-foot{background:var(--rojo);padding:9px 16px;display:flex;align-items:center;justify-content:space-between}
.promo-foot .dt{font-size:11px;color:#fff;font-weight:600}
.promo-foot .dt b{color:var(--oro)}
.promo-foot .iva{font-size:9px;color:rgba(255,255,255,.7)}
.promo-cnt{font-size:11px;font-weight:700;color:var(--oro)}
.search-bar{display:flex;align-items:center;gap:10px;background:var(--blanco);border:1.5px solid var(--g2);border-radius:12px;padding:11px 14px;margin-bottom:12px;box-shadow:var(--som)}
.search-bar input{flex:1;border:none;outline:none;font-family:'Barlow',sans-serif;font-size:15px;background:none}
.filtros,.hfiltros{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:6px;scrollbar-width:none}
.filtros::-webkit-scrollbar,.hfiltros::-webkit-scrollbar{display:none}
.fbtn{flex-shrink:0;padding:8px 15px;border-radius:20px;border:1.5px solid var(--g2);background:var(--blanco);font-family:'Barlow',sans-serif;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;color:var(--g4);transition:.15s;min-height:36px}
.fbtn.active{background:var(--negro);border-color:var(--negro);color:#fff}
.subcat{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:var(--g4);margin:18px 0 9px;padding-left:10px;border-left:3px solid var(--rojo);letter-spacing:.5px;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.subcat:first-child{margin-top:4px}
.prod{background:var(--blanco);border-radius:var(--rad);border:1.5px solid var(--g2);margin-bottom:9px;overflow:hidden;box-shadow:var(--som);display:flex;align-items:stretch}
.prod.ago{opacity:.55}
.prod-img{width:80px;flex-shrink:0;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:contain;background:#000}
.prod-img .ph{font-size:30px;opacity:.3}
.prod-info{flex:1;padding:11px 12px;min-width:0}
.prod-nm{font-size:13px;font-weight:700;margin-bottom:2px;line-height:1.15}
.prod-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.prod-r{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:11px 12px 11px 4px;flex-shrink:0}
.prod-pb{font-size:10px;color:var(--g3);text-decoration:line-through}
.prod-pu{font-size:17px;font-weight:800;color:var(--verde);font-family:'Barlow Condensed',sans-serif;line-height:1}
.prod-pts{font-size:9px;color:var(--oro);font-weight:700;margin:2px 0 5px}
.badd{padding:8px 12px;background:var(--rojo);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Barlow',sans-serif;white-space:nowrap;transition:.25s;min-height:36px}
.badd.inc{background:var(--verde)}
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700}
.b-rojo{background:var(--rojoc);color:var(--rojo)}.b-verde{background:var(--verdec);color:var(--verde)}
.b-azul{background:var(--azulc);color:var(--azul)}.b-gris{background:var(--g2);color:var(--g4)}
.b-amar{background:var(--amarc);color:var(--amar)}.b-oro{background:rgba(232,185,35,.18);color:var(--oro)}
.btn{padding:14px 20px;border-radius:var(--rads);border:none;font-family:'Barlow',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:.15s;min-height:48px}
.btn:active{transform:scale(.97);opacity:.9}
.btn-p{background:var(--rojo);color:#fff}.btn-s{background:var(--g1);color:var(--g4);border:1.5px solid var(--g2)}
.btn-full{width:100%}.btn-sm{padding:9px 14px;font-size:12px;min-height:40px}
.cvacio{text-align:center;padding:60px 20px;color:var(--g3)}
.cvacio .ico,.empty .ico{font-size:46px;margin-bottom:12px}
.item{background:var(--blanco);border-radius:var(--rad);border:1.5px solid var(--g2);padding:11px 13px;margin-bottom:9px;display:flex;gap:11px;align-items:center;box-shadow:var(--som)}
.item-i{flex:1;min-width:0}
.item-nm{font-size:13px;font-weight:700;margin-bottom:2px}
.item-pr{font-size:11px;color:var(--g3)}
.item-pr .pts{color:var(--oro);font-weight:700}
.item-pr .vol-badge{background:var(--verdec);color:var(--verde);padding:1px 6px;border-radius:10px;font-size:10px;font-weight:700}
.qty{display:flex;align-items:center;gap:7px}
.qb{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--g2);background:var(--blanco,#fff);font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--negro)}
.qv{font-size:15px;font-weight:700;min-width:22px;text-align:center}
.item-t{font-size:14px;font-weight:800;text-align:right;min-width:52px}
.brm{background:none;border:none;color:var(--rojo);font-size:18px;cursor:pointer;padding:4px;min-height:36px}
.prx-orig{font-size:10px;color:var(--g3);text-decoration:line-through}
.prx-dcto{font-size:13px;font-weight:700;color:var(--verde)}
.prx-vitrina{font-size:10px;color:var(--g3);text-decoration:line-through}
.prx-final{font-size:13px;font-weight:700;color:var(--verde)}
.desc-linea{font-size:10px;margin-top:2px;font-weight:600}
.desc-pref{color:var(--azul)}
.desc-vol{color:var(--verde)}
.prx-sig{font-size:10px;color:var(--azul);margin-top:2px}
.resumen{background:var(--blanco);border-radius:var(--rad);border:1.5px solid var(--g2);padding:16px;margin-top:12px;box-shadow:var(--som)}
.rrow{display:flex;justify-content:space-between;padding:5px 0;font-size:14px}
.rrow.tot{border-top:2px solid var(--rojo);margin-top:8px;padding-top:11px}
.rrow.tot span:first-child{font-size:16px;font-weight:700;color:var(--rojo)}
.rrow.tot span:last-child{font-size:21px;font-weight:800;color:var(--rojo);font-family:'Barlow Condensed',sans-serif}
.rrow.pts-row{background:rgba(232,185,35,.1);margin:8px -16px -16px;padding:11px 16px;border-radius:0 0 var(--rad) var(--rad)}
.rrow.pts-row span{color:#B8860B;font-weight:700}
.cart-bar{position:fixed;bottom:calc(56px + env(safe-area-inset-bottom));left:0;width:100%;background:var(--rojo);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;z-index:99;cursor:pointer;box-shadow:0 -4px 20px rgba(0,0,0,.3)}
.cart-bar .info{color:#fff;font-size:14px;font-weight:600}
.cart-bar .cta{color:var(--oro);font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800}
.card{background:var(--blanco);border-radius:var(--rad);border:1.5px solid var(--g2);margin-bottom:12px;overflow:hidden;box-shadow:var(--som)}
.card-b{padding:14px 16px}
.form-label{font-size:11px;font-weight:700;color:var(--g3);letter-spacing:1px;text-transform:uppercase;margin-bottom:5px;display:block}
.form-input,.form-select{width:100%;padding:12px 14px;border:1.5px solid var(--g2);border-radius:var(--rads);font-family:'Barlow',sans-serif;font-size:16px;outline:none;margin-bottom:12px;background:var(--blanco,#fff);min-height:46px}
.form-input:focus,.form-select:focus{border-color:var(--rojo)}
.ped{background:var(--blanco);border-radius:var(--rad);border:1.5px solid var(--g2);padding:14px 16px;margin-bottom:10px;box-shadow:var(--som)}
.ped-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.ped-id{font-size:12px;color:var(--g3)}
.ped-total{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800}
.ped-items{font-size:12px;color:var(--g4);margin-bottom:8px}
.ped-pts{font-size:12px;color:#B8860B;font-weight:700;margin-bottom:8px}
.ped-acc{display:flex;gap:8px;flex-wrap:wrap}
.ped-acc button{min-height:40px}
.rec-saldo{background:linear-gradient(135deg,var(--negro),var(--negro2));border-radius:var(--rad);padding:22px;text-align:center;margin-bottom:16px}
.rec-v{font-family:'Barlow Condensed',sans-serif;font-size:56px;font-weight:900;color:var(--oro);line-height:1}
.rec-l{font-size:12px;color:rgba(255,255,255,.5);margin-top:4px}
.rec-mot{font-size:13px;color:var(--oro);margin-top:8px;font-weight:600}
.rec-item{background:var(--blanco);border-radius:var(--rad);border:1.5px solid var(--g2);padding:16px;margin-bottom:10px;box-shadow:var(--som)}
.rec-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rec-ico{font-size:32px}
.rec-nm{font-size:15px;font-weight:700}
.rec-pts-need{font-size:12px;color:var(--g3)}
.rec-bar-wrap{background:var(--g2);border-radius:10px;height:8px;margin-bottom:10px;overflow:hidden}
.rec-bar{background:linear-gradient(90deg,var(--rojo),var(--oro));height:100%;border-radius:10px;transition:width .5s ease}
.tutorial-ov{position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.85);z-index:500;display:flex;align-items:center;justify-content:center;padding:24px}
.tutorial-card{background:var(--blanco,#fff);border-radius:24px;padding:30px 24px;width:100%;max-width:340px;text-align:center}
.tutorial-ico{font-size:52px;margin-bottom:12px}
.tutorial-t{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:800;margin-bottom:8px}
.tutorial-d{font-size:14px;color:var(--g4);line-height:1.5;margin-bottom:20px}
.tutorial-dots{display:flex;gap:6px;justify-content:center;margin-bottom:20px}
.tutorial-dot{width:8px;height:8px;border-radius:50%;background:var(--g2);transition:.2s}
.tutorial-dot.active{background:var(--rojo);width:20px;border-radius:4px}
.tutorial-btns{display:flex;gap:10px}
.tutorial-skip{flex:1;padding:12px;border:1.5px solid var(--g2);background:none;border-radius:var(--rads);font-family:'Barlow',sans-serif;font-size:14px;cursor:pointer;min-height:48px}
.tutorial-next{flex:2;padding:12px;background:var(--rojo);color:#fff;border:none;border-radius:var(--rads);font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;cursor:pointer;min-height:48px}
.ov{position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.6);z-index:900;display:none;align-items:flex-end}
.ov.open{display:flex}
.modal{background:var(--blanco,#fff);border-radius:24px 24px 0 0;width:100%;max-height:90vh;overflow-y:auto;padding:20px 20px 30px}
.mhandle{width:40px;height:4px;background:var(--g2);border-radius:2px;margin:0 auto 18px}
.modal h3{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800;margin-bottom:16px}
.stars{display:flex;gap:8px;justify-content:center;margin:12px 0}
.star{font-size:32px;cursor:pointer;opacity:.3;transition:.15s}
.star.active{opacity:1}
.toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:var(--negro);color:#fff;padding:10px 20px;border-radius:30px;font-size:13px;font-weight:600;z-index:400;opacity:0;transition:.3s;white-space:nowrap;max-width:90vw;text-align:center}
.toast.show{opacity:1}
.toast.gold{background:linear-gradient(135deg,#B8860B,var(--oro));color:var(--negro)}
#s-admin .topbar{border-bottom:2px solid var(--oro)}
.adm-tabs{display:flex;background:var(--negro);border-bottom:1px solid rgba(255,255,255,.1);overflow-x:auto;scrollbar-width:none}.adm-tabs::-webkit-scrollbar{display:none}
.adm-tab{flex-shrink:0;padding:12px 10px;background:none;border:none;color:rgba(255,255,255,.45);font-family:'Barlow',sans-serif;font-size:12px;font-weight:600;cursor:pointer;border-bottom:3px solid transparent;min-height:48px;white-space:nowrap}
.adm-tab.active{color:#fff;border-bottom-color:var(--oro)}
.adm-panel{display:none}.adm-panel.active{display:block}
.adm-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.adm-stat{background:var(--blanco);border-radius:var(--rads);border:1.5px solid var(--g2);padding:14px;box-shadow:var(--som)}
.adm-stat .v{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:800;color:var(--rojo)}
.adm-stat .l{font-size:11px;color:var(--g3);margin-top:2px}
.est-chip{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700}
.est-pendiente{background:#FEF9E7;color:#B8860B}
.est-en-proceso{background:var(--azulc);color:var(--azul)}
.est-autorizado{background:var(--azulc);color:var(--azul)}
.est-entrega{background:#EBF5FB;color:#1A5FAA}
.est-entregado{background:#E8F8F5;color:#1A6B3A}
.est-facturado{background:#E8F8F5;color:#1A6B3A}
.est-finalizado{background:var(--verdec);color:var(--verde)}
.est-cancelado{background:var(--g2);color:var(--g3)}
.borrador-item{background:var(--amarc);border:1.5px solid var(--amar);border-radius:var(--rads);padding:10px 14px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
/* ════ NUEVOS ESTILOS — append al style.css ════ */

/* PRECIO CON MÁS RELEVANCIA EN TARJETA DE PRODUCTO */
.prod-precio-bloque {
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-bottom:6px;
}
.prod-pv-label {
  font-size:9px;color:var(--g3);text-transform:uppercase;letter-spacing:.8px;
}
.prod-pv {
  font-size:13px;color:var(--g3);text-decoration:line-through;font-weight:600;
}
.prod-desc-badge {
  background:var(--rojo);color:#fff;font-size:10px;font-weight:800;
  padding:2px 7px;border-radius:20px;
}
.prod-pu {
  font-size:22px;font-weight:900;color:var(--verde);font-family:'Barlow Condensed',sans-serif;line-height:1;
}
.prod-esp-label {
  font-size:9px;color:#B8860B;font-weight:700;background:rgba(232,185,35,.18);
  padding:2px 7px;border-radius:10px;
}
.prod-pts {
  font-size:10px;color:var(--oro);font-weight:700;
}

/* INPUT NUMÉRICO EN TARJETA (CATÁLOGO) */
.prod-add-row {
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;
}
.qty-inline {
  display:flex;align-items:center;gap:5px;
}
.qb-sm {
  width:28px;height:28px;border-radius:50%;border:1.5px solid var(--g2);
  background:var(--blanco,#fff);font-size:15px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--negro);
}
.qty-inp {
  width:52px;padding:5px 4px;border:1.5px solid var(--g2);border-radius:8px;
  font-size:16px;font-weight:700;text-align:center;font-family:'Barlow',sans-serif;
  -moz-appearance:textfield;
}
.qty-inp::-webkit-outer-spin-button,.qty-inp::-webkit-inner-spin-button{-webkit-appearance:none;}
.qty-inp:focus{border-color:var(--rojo);outline:none;}

/* INPUT CANTIDAD EN CARRITO */
.qty-cart-inp {
  width:52px;padding:5px 4px;border:1.5px solid var(--g2);border-radius:8px;
  font-size:16px;font-weight:800;text-align:center;font-family:'Barlow Condensed',sans-serif;
  -moz-appearance:textfield;
}
.qty-cart-inp::-webkit-outer-spin-button,.qty-cart-inp::-webkit-inner-spin-button{-webkit-appearance:none;}
.qty-cart-inp:focus{border-color:var(--rojo);outline:none;}

/* DESCUENTOS VISIBLES EN CARRITO */
.desc-total-linea {
  font-size:11px;font-weight:700;color:var(--verde);margin-top:3px;
  background:var(--verdec);padding:2px 8px;border-radius:6px;display:inline-block;
}
.pts-badge {
  display:inline-block;background:rgba(232,185,35,.18);color:#B8860B;
  font-weight:800;font-size:11px;padding:2px 8px;border-radius:10px;
}

/* PUNTOS PENDIENTES EN RECOMPENSAS */
.rec-pts-pend {
  font-size:12px;color:var(--amar);font-weight:700;
  background:var(--amarc);border:1px solid var(--amar);
  padding:6px 14px;border-radius:20px;margin-top:6px;display:inline-block;
}


/* MODAL EDITAR DISTRIBUIDOR */
#modal-editar-dist .modal,
#modal-precios-esp .modal,
#modal-resumen-dist .modal {
  max-height:88vh;overflow-y:auto;
}

/* PRECIO EN CARRITO — prx-vitrina más visible */
.prx-vitrina {
  font-size:12px;color:var(--g4);text-decoration:line-through;font-weight:600;
}
.prx-final {
  font-size:15px;font-weight:800;color:var(--verde);
}
.desc-linea {
  font-size:11px;margin-top:3px;font-weight:700;padding:1px 6px;border-radius:6px;display:inline-block;
}
.desc-pref {background:var(--azulc);color:var(--azul);}
.desc-vol {background:var(--verdec);color:var(--verde);}

/* ITEM EN CARRITO — nm más grande */
.item-nm {font-size:14px;font-weight:700;margin-bottom:4px;}
.item-pr {font-size:12px;color:var(--g3);margin-bottom:3px;}

/* ADMIN STATS — 3 columnas en pantallas más grandes */
@media(min-width:480px){
  .adm-stats{grid-template-columns:1fr 1fr 1fr;}
}

/* ══════════════════════════════════════════════════════════════════
   REDISEÑO COMPLETO — nivel Apple / Tesla
   Curvas de animación, profundidad, glassmorphism y dark mode pro.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-smooth:cubic-bezier(.4,0,.2,1);
  --som3:0 18px 48px rgba(0,0,0,.22);
  --glass:rgba(255,255,255,.08);
}

/* ── 11 · SPLASH ────────────────────────────────────────────── */
.splash{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 35%,#1c1c1c 0%,#0a0a0a 70%,#050505 100%);
  transition:opacity .55s var(--ease-smooth),visibility .55s}
.splash.hide{opacity:0;visibility:hidden}
.splash-inner{display:flex;flex-direction:column;align-items:center;animation:splashIn .8s var(--ease-spring) both}
.splash-logo-wrap{width:108px;height:108px;border-radius:28px;overflow:hidden;
  box-shadow:0 18px 50px rgba(192,57,43,.4),0 0 0 1px rgba(255,255,255,.06);
  animation:splashPulse 1.6s var(--ease-smooth) infinite}
.splash-logo{width:100%;height:100%;object-fit:cover}
.splash-brand{font-family:'Barlow Condensed',sans-serif;font-size:34px;font-weight:900;letter-spacing:4px;color:#fff;margin-top:20px}
.splash-sub{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--oro);font-weight:700;margin-top:2px}
.splash-loader{width:140px;height:3px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:26px;overflow:hidden}
.splash-loader span{display:block;height:100%;width:40%;border-radius:3px;background:linear-gradient(90deg,var(--rojo),var(--oro));animation:splashBar 1.4s var(--ease-smooth) infinite}
@keyframes splashIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@keyframes splashPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes splashBar{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}

/* ── 17 · TOPBAR con más profundidad + logo más grande ──────── */
.topbar{height:62px;box-shadow:0 6px 24px rgba(0,0,0,.32);border-bottom:2px solid var(--rojo);
  background:linear-gradient(180deg,#161616 0%,var(--negro) 100%)}
.topbar-brand img{width:44px;height:44px;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.topbar-name{font-size:22px}
.topbar-pts{transition:transform .25s var(--ease-spring)}
/* ── 22 · Badge de puntos pulse al subir ────────────────────── */
.topbar-pts.pulse{animation:ptsPulse .7s var(--ease-spring)}
@keyframes ptsPulse{0%{transform:scale(1)}30%{transform:scale(1.28);box-shadow:0 0 0 6px rgba(232,185,35,.25)}100%{transform:scale(1)}}

/* ── 7 + 23 · HERO dramático con profundidad + glassmorphism ── */
.hero{background:linear-gradient(145deg,#2a2a2a 0%,#141414 45%,#0a0a0a 100%);
  padding:24px 22px;box-shadow:var(--som3),inset 0 1px 0 rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.05)}
.hero::before{width:200px;height:200px;top:-70px;right:-50px;opacity:.18;
  background:radial-gradient(circle,var(--rojo3) 0%,transparent 70%);filter:blur(8px)}
.hero::after{width:130px;height:130px;bottom:-60px;right:20px;opacity:.12;
  background:radial-gradient(circle,var(--oro) 0%,transparent 70%);filter:blur(6px)}
.hero-saludo{font-size:14px;color:rgba(255,255,255,.55)}
.hero-nombre{font-size:32px;font-weight:900;letter-spacing:.3px;margin-bottom:8px;
  background:linear-gradient(90deg,#fff 0%,#e8e8e8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-frase{font-size:13px;font-style:italic;color:var(--oro);line-height:1.45;margin-bottom:16px;position:relative;max-width:92%;opacity:.92}
.hero-pts-box{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(232,185,35,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.hero-stats{gap:9px}
.hstat{background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:transform .2s var(--ease-smooth)}
.hstat:active{transform:scale(.97)}

/* ── 24 · Separadores de sección más claros ─────────────────── */
.sec-titulo{position:relative;padding-left:13px;margin-top:8px}
.sec-titulo::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:3px;
  background:linear-gradient(180deg,var(--rojo),var(--oro))}

/* ── 9 · BOTTOM NAV más alto + íconos más grandes ───────────── */
.bottomnav{box-shadow:0 -6px 24px rgba(0,0,0,.28)}
.bnav{min-height:64px;padding:11px 4px 9px;font-size:10px;gap:4px}
.bnav .ico{font-size:26px}
.bnav.active{color:var(--rojo3)}
.bnav.active .ico{transform:translateY(-1px) scale(1.08);transition:transform .25s var(--ease-spring)}

/* ── 10 · Animación entre tabs (fade + slide) ───────────────── */
.tab-panel.active{animation:tabIn .38s var(--ease-smooth)}
@keyframes tabIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── 8 · TARJETAS DE PRODUCTO con más aire, sombra e imagen ─── */
.prod{border-radius:18px;margin-bottom:12px;box-shadow:0 4px 20px rgba(0,0,0,.07);
  transition:transform .2s var(--ease-smooth),box-shadow .2s var(--ease-smooth);border:1px solid var(--g2)}
.prod:active{transform:scale(.985)}
.prod:hover{box-shadow:0 10px 30px rgba(0,0,0,.12)}
.prod-img{width:104px}
.prod-info{padding:14px 14px}
.prod-nm{font-size:14px;line-height:1.2}
.prod-r{padding:14px 14px 14px 4px}

/* ── 6 · PRECIOS en catálogo: tachado 16px, final verde 28px ── */
.prod-pv{font-size:16px;font-weight:600;color:var(--g3);text-decoration:line-through}
.prod-pv-label{font-size:9px}
.prod-pu{font-size:28px;font-weight:900;color:var(--verde);letter-spacing:-.5px}
.prod-pts{font-size:10px}
.prod-desc-badge{box-shadow:0 3px 8px rgba(192,57,43,.35)}

/* ── 13 · TARJETAS DE RECOMPENSAS tipo tarjeta física ───────── */
.rec-item{position:relative;overflow:hidden;border:none;border-radius:20px;padding:18px;
  background:linear-gradient(135deg,#ffffff 0%,#f3f4f7 100%);
  box-shadow:0 10px 30px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.7)}
.rec-item::before{content:'';position:absolute;top:-50px;right:-40px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,185,35,.22),transparent 70%)}
.rec-ico{font-size:38px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
.rec-nm{font-size:16px;font-weight:800}
/* ── 15 · Barra de progreso más gruesa (12px) + animación ───── */
.rec-bar-wrap{height:12px;border-radius:12px;background:rgba(0,0,0,.08);box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
.rec-bar{border-radius:12px;background:linear-gradient(90deg,var(--rojo),var(--oro));
  transition:width 1.1s var(--ease-smooth);box-shadow:0 0 10px rgba(232,185,35,.5)}

/* ── 16 · INPUTS con borde animado al enfocar ───────────────── */
.form-input,.form-select{transition:border-color .2s var(--ease-smooth),box-shadow .25s var(--ease-smooth),background .2s}
.form-input:focus,.form-select:focus{border-color:var(--rojo);box-shadow:0 0 0 4px rgba(192,57,43,.14)}

/* ── 19 · BOTONES con animación de press (scale + shadow) ───── */
.btn{transition:transform .14s var(--ease-spring),box-shadow .18s var(--ease-smooth),opacity .15s,background .2s}
.btn-p{box-shadow:0 6px 18px rgba(192,57,43,.28)}
.btn-p:active{transform:scale(.95) translateY(1px);box-shadow:0 2px 8px rgba(192,57,43,.3)}
.btn-s:active{transform:scale(.96)}
.btn-disabled,.btn:disabled{opacity:.45!important;box-shadow:none!important;cursor:not-allowed!important;transform:none!important;filter:grayscale(.3)}

/* ── 20 · ESTADO VACÍO del carrito ──────────────────────────── */
.cvacio{padding:70px 24px}
.cvacio-emoji{font-size:72px!important;animation:floaty 3s var(--ease-smooth) infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ── 21 · MODALES slide up con spring ───────────────────────── */
.modal{border-radius:28px 28px 0 0;box-shadow:0 -16px 50px rgba(0,0,0,.4)}
.ov{transition:background .3s var(--ease-smooth)}
.ov.open .modal{animation:modalUp .5s var(--ease-spring)}
@keyframes modalUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.mhandle{width:48px;height:5px}

/* ── 14 · OVERLAY DE ÉXITO con animación ────────────────────── */
.exito-ov{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:600;display:flex;align-items:center;justify-content:center;
  padding:30px;background:rgba(8,8,8,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease-smooth),visibility .3s}
.exito-ov.show{opacity:1;visibility:visible}
.exito-card{background:var(--blanco,#fff);border-radius:26px;padding:34px 30px;text-align:center;max-width:320px;width:100%;
  box-shadow:0 30px 70px rgba(0,0,0,.4);transform:scale(.8);transition:transform .45s var(--ease-spring)}
.exito-ov.show .exito-card{transform:scale(1)}
.exito-check{width:78px;height:78px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
  font-size:42px;color:#fff;background:linear-gradient(135deg,var(--verde),#27ae60);
  box-shadow:0 10px 26px rgba(26,107,58,.4)}
.exito-ov.show .exito-check{animation:checkPop .6s var(--ease-spring) .1s both}
@keyframes checkPop{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.18) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
.exito-t{font-family:'Barlow Condensed',sans-serif;font-size:25px;font-weight:800;color:var(--negro)}
.exito-s{font-size:13px;color:var(--g3);margin-top:6px;line-height:1.45}

/* ── 12 · Microinteracción badge carrito (refuerzo) ─────────── */
.cbadge{box-shadow:0 2px 8px rgba(192,57,43,.5)}

/* ══ 25 · DARK MODE más profundo y consistente ══════════════ */
html[data-theme="dark"]{
  --negro:#050505;--negro2:#101010;
  --g1:#161616;--g2:#2b2b2b;--g3:#7d7d7d;--g4:#d2d2d2;
  --blanco:#1e1e1e;--bg:#121212;
  --rojoc:#2a1512;--verdec:#10241a;--amarc:#241f10;--azulc:#11203a;
  --oro-claro:#2a2100;
}
html[data-theme="dark"] body{background:#080808;color:#ececec}
html[data-theme="dark"] .content{background:#080808}
html[data-theme="dark"] .card,html[data-theme="dark"] .prod,html[data-theme="dark"] .item,html[data-theme="dark"] .resumen,html[data-theme="dark"] .acc-btn,html[data-theme="dark"] .ped,html[data-theme="dark"] .adm-stat,html[data-theme="dark"] .search-bar,html[data-theme="dark"] .borrador-item{background:#161616!important;border-color:#262626!important}
html[data-theme="dark"] .form-input,html[data-theme="dark"] .form-select{background:#1e1e1e;color:#eee;border-color:#333}
html[data-theme="dark"] .form-input::placeholder{color:#666}
html[data-theme="dark"] .fbtn{background:#1a1a1a;border-color:#2b2b2b;color:#bbb}
html[data-theme="dark"] .qb,html[data-theme="dark"] .qb-sm,html[data-theme="dark"] .qty-inp,html[data-theme="dark"] .qty-cart-inp{background:#1e1e1e;border-color:#333;color:#eee}
html[data-theme="dark"] .rec-item{background:linear-gradient(135deg,#1d1d1d 0%,#141414 100%);box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme="dark"] .rec-bar-wrap{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .exito-card{background:#161616}
html[data-theme="dark"] .exito-t{color:#fff}
html[data-theme="dark"] .modal{background:#161616;color:#ececec}
html[data-theme="dark"] .tutorial-card{background:#161616;color:#ececec}
html[data-theme="dark"] .hero{border-color:rgba(255,255,255,.04)}
html[data-theme="dark"] .prod-pu{color:#2ecc71}
html[data-theme="dark"] .prod-pv{color:#777}
html[data-theme="dark"] .card,html[data-theme="dark"] .prod,html[data-theme="dark"] .item,html[data-theme="dark"] .resumen,html[data-theme="dark"] .acc-btn,html[data-theme="dark"] .ped,html[data-theme="dark"] .adm-stat,html[data-theme="dark"] .search-bar,html[data-theme="dark"] .borrador-item,html[data-theme="dark"] .card-frecuente,html[data-theme="dark"] .rec-item{background:#1E1E1E!important;border-color:#2A2A2A!important}

/* ══ MEJORAS UX (23 cambios) ══════════════════════════════════════ */

/* 2. Botón volver arriba */
.btn-top{position:fixed;top:70px;right:14px;z-index:150;width:42px;height:42px;border-radius:50%;background:var(--rojo);color:#fff;border:none;font-size:20px;cursor:pointer;box-shadow:0 4px 16px rgba(192,57,43,.4);display:flex;align-items:center;justify-content:center;transition:.2s}
.btn-top:active{transform:scale(.92)}

/* 3. Modo offline */
.offline-banner{position:fixed;top:0;left:0;width:100%;z-index:500;background:#1A1A1A;color:#fff;text-align:center;padding:9px 16px;font-size:13px;font-weight:600;border-bottom:2px solid var(--amar)}

/* 6. Pull to refresh */
.ptr-indicator{position:fixed;top:64px;left:50%;transform:translateX(-50%);background:var(--negro);color:#fff;padding:8px 18px;border-radius:20px;font-size:13px;font-weight:600;z-index:200;white-space:nowrap}

/* 9. Zoom imagen */
.img-zoom-ov{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:800;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:20px}
.img-zoom-ov img{max-width:100%;max-height:90vh;object-fit:contain;border-radius:12px}
.img-zoom-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:20px;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* 10. Vista cuadrícula */
.cat-toolbar{display:flex;justify-content:flex-end;margin-bottom:8px}
.cat-grid-btn{font-size:12px;padding:6px 12px;min-height:32px}
.cat-grid-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.prod-grid{flex-direction:column;align-items:stretch;border-radius:16px;position:relative;padding:0;overflow:hidden}
.prod-grid .prod-grid-img{width:100%;height:120px;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.prod-grid .prod-grid-img img{width:100%;height:100%;object-fit:contain;background:#000}
.prod-grid .prod-grid-body{padding:10px}
.prod-grid .prod-nm{font-size:12px;margin-bottom:4px}
.prod-grid .prod-pu{font-size:18px}
.prod-grid .badd{font-size:11px;padding:6px 10px;margin-top:6px;width:100%;min-height:32px}
.prod-grid .prod-add-row{margin-top:6px}
.prod-grid .qty-inline{justify-content:center}
.prod-grid-img .ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}

/* 11. Prox descuento */
.prox-desc{font-size:10px;color:var(--azul);font-weight:700;background:var(--azulc);padding:2px 8px;border-radius:8px;margin-top:3px;display:inline-block}

/* 12. Favoritos */
.fav-btn{position:absolute;top:6px;right:6px;background:rgba(255,255,255,.9);border:none;border-radius:50%;width:28px;height:28px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:.15s;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.fav-btn:active{transform:scale(.88)}
.fav-btn.active{background:rgba(255,220,220,.95)}
/* búsquedas recientes */
.busq-recientes{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px 0 8px}
.busq-chip{padding:5px 12px;border-radius:20px;border:1.5px solid var(--g2);background:var(--blanco);font-size:11px;font-weight:600;cursor:pointer;color:var(--g4);transition:.15s}
.busq-chip:active{background:var(--rojo);color:#fff;border-color:var(--rojo)}

/* 14. Ahorro en carrito */
.ahorro-carrito{background:var(--verdec);border:1.5px solid var(--verde);border-radius:12px;padding:10px 14px;margin:8px 0;font-size:13px;color:var(--verde);text-align:center}

/* 15. Puntos a ganar en carrito */
.pts-carrito{background:rgba(232,185,35,.14);border:1.5px solid rgba(232,185,35,.4);border-radius:12px;padding:10px 14px;margin:6px 0 10px;font-size:13px;color:#B8860B;text-align:center}

/* 17. Advertencia stock bajo en carrito */
.stock-warn{font-size:11px;color:#8a6600;background:var(--amarc);border:1px solid var(--amar);border-radius:6px;padding:3px 8px;margin-top:4px;display:inline-block;font-weight:600}

/* 18. Filtro fechas historial */
.hfechas-wrap{margin-bottom:10px}
.hfechas-toggle{margin-bottom:6px}
.hfechas-inner{display:none;background:var(--blanco);border:1.5px solid var(--g2);border-radius:12px;padding:12px;margin-bottom:8px}
.hfechas-wrap.open .hfechas-inner{display:block}

/* 19. Tracking visual del pedido */
.track-wrap{display:flex;align-items:center;justify-content:space-between;margin:16px 0;padding:14px;background:var(--g1);border-radius:14px;gap:2px}
.track-step{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.track-dot{width:32px;height:32px;border-radius:50%;background:var(--g2);display:flex;align-items:center;justify-content:center;font-size:14px;transition:.2s}
.track-step.done .track-dot{background:var(--verde);color:#fff}
.track-step.current .track-dot{background:var(--rojo);color:#fff;box-shadow:0 0 0 4px rgba(192,57,43,.2)}
.track-label{font-size:9px;font-weight:700;color:var(--g3);text-align:center;line-height:1.2}
.track-step.done .track-label,.track-step.current .track-label{color:var(--g4)}
.track-line{flex:1;height:3px;background:var(--g2);border-radius:3px;margin:0 2px;margin-top:-20px;align-self:flex-start;transition:.2s}
.track-line.done{background:var(--verde)}

/* 20. Pedido frecuente */
.card-frecuente{background:var(--blanco);border-radius:16px;border:1.5px solid var(--g2);padding:14px 16px;margin-bottom:14px;box-shadow:var(--som);transition:.2s}
.card-frecuente:active{transform:scale(.98)}

/* 23 Rediseño visual profesional */
.card,.prod{box-shadow:0 6px 24px rgba(0,0,0,.10);border-radius:18px}
.hero{background:linear-gradient(145deg,#2a2a2a 0%,#141414 45%,#0a0a0a 100%);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.btn-p{background:linear-gradient(135deg,var(--rojo2) 0%,var(--rojo3) 100%);box-shadow:0 6px 20px rgba(192,57,43,.35)}
.btn-p:active{box-shadow:0 2px 8px rgba(192,57,43,.3)}
.bottomnav{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);height:60px;background:rgba(13,13,13,.92)}
.bnav{min-height:60px}
.hstat{border:1px solid rgba(255,255,255,.12)}
.topbar{box-shadow:0 6px 24px rgba(0,0,0,.3),0 1px 0 rgba(192,57,43,.5) inset}
.est-chip{font-weight:700;border-radius:20px}
.badge{font-weight:700;border-radius:20px}
.form-input,.form-select{border-radius:12px;transition:border-color .2s,box-shadow .2s}
.form-input:focus,.form-select:focus{box-shadow:0 0 0 4px rgba(192,57,43,.15);border-color:var(--rojo)}
button,.fbtn,.acc-btn,.bnav{transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s}
a{transition:color .2s}

html[data-theme="dark"] .hfechas-inner,html[data-theme="dark"] .track-wrap,html[data-theme="dark"] .card-frecuente{background:#1E1E1E!important;border-color:#2A2A2A!important}


/* ══════════════════════════════════════════════════════════════════
   60 ANIMACIONES — PyroShield (CSS vanilla puro, sin librerías)
   ══════════════════════════════════════════════════════════════════ */

/* #4 badge pop+shake */
@keyframes badgePopShake{0%{transform:translateX(6px) scale(1)}25%{transform:translateX(6px) scale(1.5) rotate(-8deg)}50%{transform:translateX(4px) scale(.9) rotate(8deg)}75%{transform:translateX(8px) scale(1.1) rotate(-4deg)}100%{transform:translateX(6px) scale(1)}}
.cbadge.badge-pop{animation:badgePopShake .45s var(--ease-spring)}

/* #5 confetti */
.confetti-pc{position:fixed;width:10px;height:14px;top:-20px;z-index:9998;pointer-events:none;border-radius:2px;will-change:transform,opacity}
@keyframes confettiFall{0%{transform:translateY(-20px) rotateZ(0deg);opacity:1}100%{transform:translateY(110vh) rotateZ(720deg);opacity:.2}}

/* #1 puntos volando */
.fly-pts{position:fixed;z-index:9999;pointer-events:none;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:18px;color:var(--oro);text-shadow:0 2px 6px rgba(0,0,0,.4)}

/* #2/#38/#13 contador/ticker numérico — sin estilo extra, JS rAF */

/* #6 toast dorado shimmer */
.toast.gold{position:relative;overflow:hidden}
.toast.gold::after{content:'';position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);animation:goldShimmer 1.8s var(--ease-smooth) infinite}
@keyframes goldShimmer{0%{left:-60%}60%,100%{left:140%}}
@keyframes toastGoldUp{from{transform:translateX(-50%) translateY(40px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
.toast.gold.show{animation:toastGoldUp .4s var(--ease-spring)}

/* #7 precio tachado animado */
.price-strike{position:relative;text-decoration:none!important}
.price-strike::after{content:'';position:absolute;left:0;top:50%;height:2px;width:0;background:var(--g3);animation:strikeIn .5s var(--ease-smooth) .15s forwards}
@keyframes strikeIn{to{width:100%}}

/* #8 pulso badge descuento volumen */
@keyframes volPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(192,57,43,.4)}50%{transform:scale(1.08);box-shadow:0 0 0 5px rgba(192,57,43,0)}}
.prod-desc-badge,.vol-badge{animation:volPulse 2.2s var(--ease-smooth) infinite}

/* #9/#46 skeleton */
.skeleton{position:relative;overflow:hidden;background:var(--g2);border-radius:12px}
.skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%);background-size:200% 100%;animation:shimmerSk 1.4s infinite}
html[data-theme="dark"] .skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
@keyframes shimmerSk{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.sk-prod{display:flex;gap:11px;padding:14px;margin-bottom:12px;border-radius:18px;background:var(--blanco);border:1px solid var(--g2)}
.sk-prod .sk-img{width:90px;height:74px;flex-shrink:0}
.sk-prod .sk-lines{flex:1;display:flex;flex-direction:column;gap:8px;justify-content:center}
.sk-line{height:12px;border-radius:6px}
.sk-line.w70{width:70%}.sk-line.w40{width:40%}.sk-line.w90{width:90%}

/* #11/#16/#41 tab slide+fade */
@keyframes tabSlideR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes tabSlideL{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes fadeScaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.tab-panel.slide-r{animation:tabSlideR .3s var(--ease-smooth)}
.tab-panel.slide-l{animation:tabSlideL .3s var(--ease-smooth)}

/* #39 stagger cards */
@keyframes cardStagger{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.card-stagger{animation:cardStagger .4s var(--ease-spring) both}

/* #12 progress ring avatar */
.avatar-ring{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.avatar-ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.avatar-ring .bg{stroke:rgba(232,185,35,.18)}
.avatar-ring .fg{stroke:var(--oro);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease-smooth)}

/* #14 check svg draw */
.draw-check{stroke:var(--verde);stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:drawCheck .5s var(--ease-smooth) forwards}
@keyframes drawCheck{to{stroke-dashoffset:0}}

/* #15 shake */
@keyframes shakeX{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.shake{animation:shakeX .45s var(--ease-smooth)}

/* #17 wave hero */
.hero-wave{position:absolute;left:0;bottom:0;width:200%;height:40px;opacity:.22;pointer-events:none;z-index:0}
.hero-wave svg{width:50%;height:100%;animation:waveMove 8s linear infinite}
@keyframes waveMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero>*{position:relative;z-index:1}

/* #18 logro flip */
@keyframes logroFlip{0%{transform:perspective(600px) rotateY(0)}50%{transform:perspective(600px) rotateY(90deg)}100%{transform:perspective(600px) rotateY(0)}}
.logro-flip{animation:logroFlip .7s var(--ease-smooth)}

/* #19 fuego logo */
@keyframes logoFire{0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(232,185,35,0))}50%{filter:brightness(1.18) drop-shadow(0 0 8px rgba(243,156,18,.6))}}
.topbar-brand img,.login-logo img{animation:logoFire 3.2s var(--ease-smooth) infinite}

/* #20 typewriter caret */
.tw-caret::after{content:'|';animation:caretBlink .7s steps(1) infinite;color:var(--rojo)}
@keyframes caretBlink{50%{opacity:0}}

/* #23 bounce login btn */
@keyframes bounceIn{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}}
.btn-login{animation:bounceIn .6s var(--ease-spring) .4s both}

/* #25/#47 shimmer/orbit */
.shimmer-badge{position:relative;overflow:hidden}
.shimmer-badge::after{content:'';position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);animation:badgeShine 3s ease-in-out infinite}
@keyframes badgeShine{0%{left:-70%}40%,100%{left:160%}}
.orbit-star{position:absolute;font-size:13px;pointer-events:none;animation:orbit 4s linear infinite;transform-origin:0 0}
@keyframes orbit{from{transform:rotate(0) translateX(34px) rotate(0)}to{transform:rotate(360deg) translateX(34px) rotate(-360deg)}}

/* #28 promo countdown — JS */
/* #29 brasas fuego login */
.brasa{position:absolute;bottom:-10px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#ffd24d,#e03c31);pointer-events:none;z-index:0;opacity:.9}
@keyframes brasaUp{0%{transform:translateY(0) scale(1);opacity:.9}100%{transform:translateY(-90vh) translateX(var(--bx,0)) scale(.2);opacity:0}}


/* #31 vibration — JS */
/* #32 reveal numbers — JS */

/* #33 long press confirm */
.lp-fill{position:absolute;left:0;top:0;height:100%;width:0;background:rgba(255,255,255,.28);pointer-events:none;border-radius:inherit;z-index:0}
.lp-host{position:relative;overflow:hidden}
.lp-host>*{position:relative;z-index:1}

/* #34 agotado respira */
@keyframes breatheRed{0%,100%{box-shadow:0 4px 20px rgba(0,0,0,.07)}50%{box-shadow:0 0 0 2px rgba(192,57,43,.35),0 4px 20px rgba(192,57,43,.2)}}
.prod.ago{animation:breatheRed 3s var(--ease-smooth) infinite}

/* #35 stock bajo tiembla */
@keyframes stockShake{0%,92%,100%{transform:translateX(0)}94%{transform:translateX(-3px)}96%{transform:translateX(3px)}98%{transform:translateX(-2px)}}
.stock-warn.low-shake{animation:stockShake 8s infinite}

/* #36 precio explota */
@keyframes priceExplode{0%{transform:scale(1);opacity:1;filter:blur(0)}100%{transform:scale(1.8);opacity:0;filter:blur(4px)}}
.price-explode{animation:priceExplode .4s var(--ease-smooth) forwards;display:inline-block}

/* #37 barra siguiente tier */
.tier-bar{height:6px;border-radius:6px;background:var(--g2);overflow:hidden;margin-top:4px}
.tier-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--azul),var(--verde));border-radius:6px;transition:width .8s var(--ease-smooth)}

/* #40 pull-to-refresh llama */
.ptr-flame{position:fixed;top:62px;left:50%;transform:translateX(-50%) scale(0);font-size:30px;z-index:300;transition:transform .2s;pointer-events:none}
.ptr-flame.show{transform:translateX(-50%) scale(1)}
.ptr-flame.spin{animation:flameWobble .6s ease-in-out infinite}
@keyframes flameWobble{0%,100%{transform:translateX(-50%) scale(1) rotate(-8deg)}50%{transform:translateX(-50%) scale(1.15) rotate(8deg)}}

/* #42 avatar bounce */
.avatar-bounce{animation:bounceIn .5s var(--ease-spring)}

/* #44 ripple */
.ripple-ink{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:rippleGo .55s var(--ease-smooth);pointer-events:none}
@keyframes rippleGo{to{transform:scale(2.4);opacity:0}}

/* #45 modal scale (refuerzo) */
.ov.open .modal{transform-origin:center bottom}

/* #48 sello NUEVO */
.sello-nuevo{position:absolute;top:6px;left:6px;z-index:3;background:var(--rojo);color:#fff;font-size:9px;font-weight:900;padding:3px 7px;border-radius:8px;letter-spacing:.5px;box-shadow:0 3px 10px rgba(192,57,43,.4);animation:selloRot 4s ease-in-out infinite}
@keyframes selloRot{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* #49 iva slide */
@keyframes ivaSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.iva-anim{animation:ivaSlide .4s var(--ease-smooth)}

/* #50 crossfade tema */
html.theme-fade,html.theme-fade body,html.theme-fade .content,html.theme-fade #app-shell{transition:background .4s var(--ease-smooth),color .4s var(--ease-smooth)!important}

/* #51 cart wiggle */
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-6deg)}}
.cart-wiggle .ico{animation:wiggle .6s ease-in-out}

/* #52 camión timeline */
.track-truck{position:absolute;top:-2px;font-size:18px;transition:left .8s var(--ease-spring);z-index:5;pointer-events:none}

/* #53 estrellas pop */
@keyframes starPop{0%{transform:scale(.4)}55%{transform:scale(1.45);filter:drop-shadow(0 0 8px gold)}100%{transform:scale(1)}}
.star.pop{animation:starPop .4s var(--ease-spring)}

/* #54 input glow verde */
@keyframes inputFound{0%,100%{box-shadow:0 0 0 0 rgba(26,107,58,.4)}50%{box-shadow:0 0 0 4px rgba(26,107,58,.15)}}
.input-found{border-color:var(--verde)!important;animation:inputFound 1.6s ease-in-out infinite}

/* #55 logo flash login */
@keyframes logoFlash{0%{filter:brightness(1)}40%{filter:brightness(2.6) drop-shadow(0 0 18px var(--oro))}100%{filter:brightness(1)}}
.logo-flash{animation:logoFlash .7s var(--ease-smooth)}

/* #56 ranking reorder */
.rank-row{transition:transform .5s var(--ease-spring),background .3s}
.rank-row.rank-up{background:rgba(26,107,58,.12)}


/* #58 factura imprime */
.print-ov{position:fixed;inset:0;z-index:9001;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:flex-start;pointer-events:none}
.print-paper{width:200px;background:#fff;border-radius:4px;box-shadow:0 12px 40px rgba(0,0,0,.4);padding:18px;margin-top:-260px;animation:paperDrop .9s var(--ease-smooth) forwards}
.print-paper .pl{height:7px;background:var(--g2);border-radius:4px;margin-bottom:8px}
.print-paper .pl.s{width:55%}
@keyframes paperDrop{0%{margin-top:-260px;opacity:0}30%{opacity:1}80%{margin-top:90px;opacity:1}100%{margin-top:90px;opacity:0}}

/* #59 antena offline */
.ant-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px;vertical-align:middle;margin-right:6px}
.ant-bars i{width:3px;background:#fff;border-radius:1px;animation:antDrop 2.4s steps(1) infinite}
.ant-bars i:nth-child(1){height:4px}.ant-bars i:nth-child(2){height:8px;animation-delay:.3s}
.ant-bars i:nth-child(3){height:12px;animation-delay:.6s}.ant-bars i:nth-child(4){height:14px;animation-delay:.9s}
@keyframes antDrop{0%,100%{opacity:1}50%{opacity:.2}}

/* #26 ticker ventas */
.sales-ticker{overflow:hidden;background:linear-gradient(90deg,var(--negro),var(--rojo2));color:#fff;font-size:12px;font-weight:600;white-space:nowrap;position:relative;height:0;transition:height .3s}
.sales-ticker.on{height:28px;display:flex;align-items:center}
.sales-ticker span{display:inline-block;padding-left:100%;animation:tickerScroll 18s linear infinite}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* #27 entrega lottie-style */
@keyframes truckRun{0%{transform:translateX(-30px)}50%{transform:translateX(20px)}100%{transform:translateX(-30px)}}
.entrega-anim{font-size:34px;display:inline-block;animation:truckRun 1.2s ease-in-out infinite}

/* #24 hover lift */
.prod:active,.prod.lift{transform:translateY(-4px)!important;box-shadow:0 10px 28px rgba(0,0,0,.16)!important}

/* #22 swipe delete bg */
.item.swiping{transition:transform .15s}

/* ══ Auditoría: dark mode en overlays dinámicos ══════════════ */
[data-theme="dark"] .tut-card,
[data-theme="dark"] #perfil-ov > div,
[data-theme="dark"] #repetir-ped-ov > div,
[data-theme="dark"] #tipsec-ov > div,
[data-theme="dark"] .primer-ingreso-card {
  background: var(--bg, #1e1e1e) !important;
  color: var(--texto, #f0f0f0) !important;
}
[data-theme="dark"] .primer-ingreso-card h2,
[data-theme="dark"] .tut-card h3 {
  color: var(--texto, #f0f0f0) !important;
}

/* ══ Auditoría: touch targets mínimos (WCAG 44px) ════════════ */
.fav-btn, .qb-sm, .brm, .btn-ico { min-width: 44px; min-height: 44px; }
.qb { min-width: 44px; min-height: 44px; }
.fbtn { min-height: 44px; }
.btn-logout { min-height: 44px; padding: 8px 14px; }
.cat-grid-btn { min-height: 44px; }
.btn-top { width: 44px; height: 44px; }

/* ══ Z-INDEX SCALE ═══════════════════════════════════════════
   100  screens / topbar / bottomnav
   400  toasts
   800  tutorial / tipsec overlay
   900  modales normales (.ov)
   9000 perfil / overlays dinámicos
   9100 overlays sobre overlays (est-modal)
   9998 primer-ingreso
   9999 saludo flash
   ════════════════════════════════════════════════════════════ */

/* ═══ SUPABASE SYNC DOT ═══ */
.sb-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;transition:background .4s}
.sb-ok{background:#27ae60}
.sb-sync{background:#f39c12;animation:sb-pulse .8s infinite alternate}
.sb-err{background:#e74c3c}

/* ═══════════════════════════════════════════════════════════════
   FIXES WEBKIT / SAFARI iOS
   ════════════════════════════════════════════════════════════ */

/* 1. 100vh en Safari iOS incluye la barra de direcciones — usar dvh con fallback */
body,#app-shell,.screen{min-height:100vh;min-height:100dvh}
#s-login{min-height:100vh;min-height:100dvh}

/* 2. position:sticky requiere -webkit-sticky en Safari < 13 */
.topbar{position:-webkit-sticky;position:sticky}

/* 3. Scroll momentum en contenedores con overflow (Safari iOS necesita esto) */
.content,
.modal,
.filtros,.hfiltros,
.adm-tabs,
.adm-cont{-webkit-overflow-scrolling:touch}

/* 4. Search bar: font-size 15px dispara zoom automático en Safari (umbral: <16px).
      Se sube a 16px en móvil y se escala visualmente con transform para mantener diseño. */
@media (max-width:767px){
  .search-bar input{font-size:16px}
  /* Prevenir zoom en cualquier input/select con font-size menor a 16px */
  input,select,textarea{font-size:max(16px,1em)}
}

/* 5. GPU acceleration para animaciones y transiciones críticas en hardware bajo */
.tab-panel,.modal,.splash,.exito-ov,.ov,.tutorial-ov,.img-zoom-ov{
  -webkit-transform:translateZ(0);transform:translateZ(0);
  will-change:transform,opacity
}
/* Solo activar will-change mientras hay transición activa, para liberar memoria en reposo */
.tab-panel.active{will-change:auto}

/* 6. Botones táctiles: evitar delay de 300ms en Safari iOS < 13 */
button,a,[role="button"],.bnav,.btn,.prod-card,.acc-btn{touch-action:manipulation}

/* 7. Scroll lateral del catálogo sin bounce molesto en iOS */
.filtros,.hfiltros,.adm-tabs{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain
}

/* 8. Safe area para dispositivos con notch (iPhone X+) — bottom nav ya lo tiene,
      pero algunos overlays fijos también necesitan el padding inferior */
.bottomnav{padding-bottom:max(env(safe-area-inset-bottom),4px)}
.cart-bar{bottom:calc(56px + max(env(safe-area-inset-bottom),4px))}

/* 9. Select nativo en iOS — evitar que Safari sobre-estilice los selects del admin */
.form-select{-webkit-appearance:none;appearance:none}

/* 10. Inputs: deshabilitar corrección automática y autocompletado en campos de cantidad */
.qty-inp,.qty-cart-inp{
  -webkit-text-size-adjust:none;
  text-size-adjust:none
}
@keyframes sb-pulse{from{opacity:.4}to{opacity:1}}