:root{
  --p:#FF3B1F;--p2:#FF6B4A;--p-bg:#FFF2F0;--p-border:#FFD5CC;
  --g:#00B96B;--g-bg:#E6F9F2;
  --b:#1A6FFF;--b-bg:#EAF1FF;
  --y:#F59E0B;--y-bg:#FFFBEB;
  --ink:#111317;--ink2:#3D4047;--ink3:#6B7280;--ink4:#9CA3AF;
  --line:#E5E7EB;--line2:#F3F4F6;--bg:#F9FAFB;--white:#fff;
  --r:18px;--r2:12px;--r3:8px;
  --sh:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh2:0 4px 16px rgba(0,0,0,.08);
  --sh3:0 12px 40px rgba(0,0,0,.12);
  --sh-p:0 8px 24px rgba(255,59,31,.3);
  --font-display:'Baloo 2','Poppins',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--bg);color:var(--ink);font-family:'Nunito',sans-serif;min-height:100vh;overflow-x:hidden;font-size:15px;line-height:1.6;letter-spacing:0}
h1,h2,h3,h4{letter-spacing:-.3px;line-height:1.25}
input,select,textarea,button{font-family:'Nunito',sans-serif}
::placeholder{color:var(--ink4)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}

.screen{display:none;min-height:100vh}
.screen.active{display:block;animation:fadeUp .3s ease both}
#loginScreen.active{display:flex}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(50px);opacity:0}to{transform:none;opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes spin{to{transform:rotate(360deg)}}

#loginScreen{
  align-items:center;justify-content:center;min-height:100vh;padding:1rem;
  background:linear-gradient(145deg,#111317 0%,#1f1f2e 100%);
  position:relative;overflow:hidden
}
#loginScreen::before{
  content:'';position:absolute;width:600px;height:600px;
  background:radial-gradient(circle,rgba(255,59,31,.25) 0%,transparent 70%);
  top:-200px;right:-200px;pointer-events:none
}
#loginScreen::after{
  content:'';position:absolute;width:400px;height:400px;
  background:radial-gradient(circle,rgba(26,111,255,.15) 0%,transparent 70%);
  bottom:-100px;left:-100px;pointer-events:none
}
.login-card{
  background:var(--white);border-radius:24px;padding:2.4rem 2rem;
  width:100%;max-width:420px;position:relative;z-index:1;box-shadow:var(--sh3)
}
.brand-mark{display:flex;align-items:center;gap:12px;margin-bottom:2rem;justify-content:center}
.brand-icon{
  width:52px;height:52px;background:var(--p);border-radius:14px;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-p)
}
.brand-name{font-family:var(--font-display);font-size:1.8rem;font-weight:800;color:var(--ink)}
.brand-name span{color:var(--p)}
.login-headline{text-align:center;margin-bottom:1.8rem}
.login-headline h2{font-size:1.25rem;font-weight:700;color:var(--ink);margin-bottom:4px}
.login-headline p{font-size:.83rem;color:var(--ink3)}
.ltabs{display:flex;background:var(--line2);border-radius:50px;padding:4px;gap:4px;margin-bottom:1.5rem}
.ltab{flex:1;border:none;border-radius:50px;padding:9px;font-size:.83rem;font-weight:700;cursor:pointer;background:transparent;color:var(--ink3);transition:all .2s}
.ltab.active{background:var(--white);color:var(--p);box-shadow:var(--sh)}
.fld{margin-bottom:.9rem}
.fld label{display:block;font-size:.73rem;font-weight:700;color:var(--ink2);letter-spacing:.5px;text-transform:uppercase;margin-bottom:5px}
.inp{
  width:100%;background:var(--line2);border:1.5px solid var(--line);
  border-radius:var(--r3);color:var(--ink);padding:10px 14px;
  font-size:.9rem;outline:none;transition:all .2s
}
.inp:focus{border-color:var(--p);background:var(--white);box-shadow:0 0 0 3px rgba(255,59,31,.1)}
select.inp option{background:var(--white)}
textarea.inp{resize:vertical;min-height:80px}
input[type="date"].inp{-webkit-appearance:none;appearance:none;line-height:1.2;height:auto;min-height:40px}
.btn-submit{
  width:100%;background:var(--p);border:none;border-radius:50px;color:#fff;
  font-weight:800;font-size:.95rem;padding:13px;cursor:pointer;margin-top:.4rem;
  transition:all .2s;box-shadow:var(--sh-p)
}
.btn-submit:hover{background:var(--p2);transform:translateY(-1px);box-shadow:0 10px 28px rgba(255,59,31,.38)}
.btn-submit:active{transform:translateY(0)}
.err-box{
  background:var(--p-bg);border:1px solid var(--p-border);border-radius:var(--r3);
  padding:10px 14px;font-size:.82rem;color:var(--p);margin-bottom:1rem;
  display:none;align-items:center;gap:8px
}
.pass-rules{list-style:none;margin-top:6px;display:flex;flex-direction:column;gap:3px}
.pass-rules li{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--ink3);transition:color .2s}
.pass-rules li.ok{color:var(--g)}
.rule-dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;transition:all .2s}
.pass-rules li.ok .rule-dot{background:var(--g);border-color:var(--g);color:#fff}
.pass-rules li.ok .rule-dot::after{content:'✓'}
.auth-divider{display:flex;align-items:center;gap:10px;margin:1rem 0;color:var(--ink4);font-size:.75rem}
.auth-divider::before,.auth-divider::after{content:'';height:1px;background:var(--line);flex:1}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:1.5px solid var(--line);border-radius:50px;background:var(--white);color:var(--ink2);font-size:.9rem;font-weight:800;padding:11px;text-decoration:none;transition:all .2s}
.btn-google:hover{border-color:var(--ink4);background:var(--line2)}
.client-only-note{background:var(--line2);border-radius:var(--r3);padding:10px 12px;color:var(--ink3);font-size:.78rem}
.google-welcome{display:flex;flex-direction:column;gap:3px;margin-bottom:1rem;color:var(--ink2);font-size:.85rem}
.google-welcome span{color:var(--ink3);font-size:.8rem}

.topnav{
  background:var(--white);border-bottom:1px solid var(--line);height:60px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.2rem;position:sticky;top:0;z-index:100;box-shadow:var(--sh)
}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-brand .nicon{width:34px;height:34px;background:var(--p);border-radius:9px;display:flex;align-items:center;justify-content:center}
.nav-brand .ntxt{font-family:var(--font-display);font-size:1.15rem;font-weight:800;color:var(--ink);letter-spacing:-.2px}
.nav-brand .ntxt span{color:var(--p)}
.nav-r{display:flex;align-items:center;gap:8px}
.role-tag{display:flex;align-items:center;gap:6px;background:var(--line2);border:1px solid var(--line);border-radius:50px;padding:5px 12px;font-size:.76rem;font-weight:700;color:var(--ink2)}
.rdot{width:7px;height:7px;border-radius:50%}
.btn-out{background:none;border:1.5px solid var(--line);border-radius:50px;color:var(--ink3);font-size:.76rem;padding:5px 13px;cursor:pointer;font-weight:700;transition:all .2s}
.btn-out:hover{border-color:var(--p);color:var(--p)}

.nav-avatar{width:36px;height:36px;border-radius:50%;background:var(--p-bg);color:var(--p);display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:800;cursor:pointer;flex-shrink:0;transition:transform .15s,box-shadow .15s}
.nav-avatar:hover{transform:scale(1.08);box-shadow:0 0 0 3px rgba(255,59,31,.3)}

.nav-user{display:flex;align-items:center;gap:8px;cursor:pointer;padding:2px 8px 2px 2px;border-radius:50px;transition:background .15s}
.nav-user:hover{background:var(--line2)}
.nav-user span{font-size:.78rem;font-weight:700;color:var(--ink2)}

.tabbar{background:var(--white);border-bottom:1px solid var(--line);display:flex;overflow-x:auto;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tb{flex:1;min-width:80px;background:none;border:none;border-bottom:2.5px solid transparent;color:var(--ink3);padding:13px 6px 11px;font-size:.79rem;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:3px}
.tb .ti{display:flex;align-items:center;justify-content:center}
.tb.active{color:var(--p);border-bottom-color:var(--p)}

.page{display:none;padding:1.4rem 1.2rem;max-width:980px;margin:0 auto;animation:fadeUp .22s ease both;background:var(--bg)}
#cp-storeDetail{padding:0}
.page.active{display:block}

.hero{
  border-radius:var(--r);padding:1.6rem;margin-bottom:1.4rem;
  background:linear-gradient(120deg,#111317 0%,#1e2333 100%);
  color:#fff;position:relative;overflow:hidden
}
.hero::after{content:'';position:absolute;right:-30px;top:-30px;width:200px;height:200px;border-radius:50%;background:rgba(255,59,31,.12);pointer-events:none}
.hero h2{font-family:var(--font-display);font-size:1.5rem;font-weight:800;line-height:1.2;margin-bottom:.4rem;letter-spacing:-.3px}
.hero h2 span{color:var(--p)}
.hero p{font-size:.82rem;opacity:.65;margin-bottom:1rem}
.search-wrap{background:rgba(255,255,255,.08);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);border-radius:50px;padding:5px 5px 5px 16px;display:flex;align-items:center;gap:8px}
.search-wrap input{flex:1;background:none;border:none;outline:none;color:#fff;font-size:.88rem}
.search-wrap input::placeholder{color:rgba(255,255,255,.4)}
.search-wrap button{background:var(--p);border:none;border-radius:50px;color:#fff;font-weight:800;padding:8px 18px;cursor:pointer;font-size:.82rem;transition:all .2s;flex-shrink:0}
.search-wrap button:hover{background:var(--p2)}

.pills{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;margin-bottom:1.4rem;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{flex-shrink:0;display:flex;align-items:center;gap:6px;background:var(--white);border:1.5px solid var(--line);border-radius:50px;padding:8px 16px;font-size:.85rem;font-weight:700;color:var(--ink2);cursor:pointer;transition:all .2s;box-shadow:var(--sh);white-space:nowrap}
.pill:hover{border-color:var(--p);color:var(--p)}
.pill.active{background:var(--p);border-color:var(--p);color:#fff;box-shadow:var(--sh-p)}
.pill svg{width:15px;height:15px;flex-shrink:0}
.pill img{width:16px;height:16px;flex-shrink:0;object-fit:contain}

.pill-sec{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--white);border:1px solid var(--line);border-radius:50px;padding:5px 12px;font-size:.78rem;font-weight:600;color:var(--ink3);cursor:pointer;transition:all .2s;white-space:nowrap}
.pill-sec:hover{border-color:var(--ink3);color:var(--ink2)}
.pill-sec.active{background:var(--ink);border-color:var(--ink);color:#fff}


.shdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.stitle{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--ink)}
.scount{font-size:.78rem;color:var(--ink3);font-weight:600}
.see-all{font-size:.8rem;font-weight:700;color:var(--p);background:none;border:none;cursor:pointer}

.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.scard{background:var(--white);border-radius:var(--r);overflow:hidden;cursor:pointer;box-shadow:var(--sh);transition:all .25s;border:1px solid var(--line)}
.scard:hover{transform:translateY(-4px);box-shadow:var(--sh3)}
.scard-banner{height:120px;position:relative;background:linear-gradient(135deg,var(--line2),var(--bg));display:flex;align-items:center;justify-content:center;overflow:hidden}
.scard-banner img{width:100%;height:100%;object-fit:cover}
.scard-banner .scard-icon{width:56px;height:56px;background:var(--white);border-radius:14px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh2)}
.scard-banner .scard-icon svg{width:28px;height:28px}
.open-badge{position:absolute;top:10px;right:10px}
.scard-body{padding:.9rem 1rem 1rem}
.scard-name{font-weight:800;font-size:1rem;color:var(--ink);margin-bottom:5px;letter-spacing:-.2px}
.scard-meta{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--ink3);margin-bottom:.7rem;flex-wrap:wrap}
.scard-rating{display:flex;align-items:center;gap:3px;font-weight:700;color:var(--ink2)}
.scard-tags{display:flex;flex-wrap:wrap;gap:5px}
.stag{background:var(--line2);border:1px solid var(--line);border-radius:6px;padding:3px 9px;font-size:.7rem;color:var(--ink3);font-weight:600}
.closed-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;border-radius:var(--r) var(--r) 0 0}

.plat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:1.5rem}
.platcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;box-shadow:var(--sh);transition:all .2s}
.platcard:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.platcard--cerrada{opacity:.60}
.platcard-img{height:110px;background:var(--line2);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.platcard-img img{width:100%;height:100%;object-fit:cover}
.platcard-closed-badge{position:absolute;top:6px;right:6px;background:rgba(239,68,68,.88);color:#fff;font-size:.62rem;font-weight:700;padding:2px 7px;border-radius:5px;z-index:1}
.platcard-body{padding:.6rem .75rem}
.platcard-name{font-weight:700;font-size:.82rem;color:var(--ink);line-height:1.25;margin-bottom:2px}
.platcard-store{font-size:.7rem;color:var(--ink3);margin-bottom:6px}
.platcard-price{font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--p)}
@media(max-width:480px){.plat-grid{grid-template-columns:1fr 1fr}}

.hgroup{margin-bottom:1.2rem}
.hgroup-hdr{transition:opacity .15s}
.hgroup-hdr:hover{opacity:.75}
.hgroup-logo{flex-shrink:0}
.hscroll{display:flex;overflow-x:auto;gap:10px;padding:4px 0 8px;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hcard{flex-shrink:0;width:150px;background:var(--white);border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;box-shadow:var(--sh);transition:all .2s}
.hcard:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.hcard--closed{opacity:.55;pointer-events:none}
.hcard-img{height:110px;background:var(--line2);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hcard-img img{width:100%;height:100%;object-fit:cover}
.hcard-img .pcard-img-placeholder{width:100%;height:100%}
.hcard-img .pcard-img-placeholder svg{width:28px;height:28px}
.hcard-btn{position:absolute;top:6px;right:6px;width:28px;height:28px;background:var(--p);border:none;border-radius:50%;color:#fff;font-size:1.1rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-p);transition:transform .15s,background .15s;z-index:2}
.hcard-btn:hover{transform:scale(1.15);background:var(--p2)}
.hcard-btn:disabled{opacity:.5;transform:none;cursor:default}
.hcard-name{font-weight:700;font-size:.78rem;color:var(--ink);padding:.4rem .5rem 0;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hcard-price{font-family:var(--font-display);font-size:.9rem;font-weight:700;color:var(--p);padding:.2rem .5rem .5rem}

.sd-banner{height:200px;background:var(--line2);position:relative;overflow:hidden}
.sd-banner img{width:100%;height:100%;object-fit:cover}
.sd-banner-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--p-bg),var(--bg))}
.sd-banner-ph svg{width:48px;height:48px;color:var(--p);opacity:.4}
.sd-back{position:absolute;top:12px;left:12px;width:36px;height:36px;background:var(--white);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh2);cursor:pointer;z-index:2;transition:transform .15s}
.sd-back:hover{transform:scale(1.1)}
.sd-closed-badge{position:absolute;top:12px;right:12px;z-index:2}
.sd-info{padding:1rem 0.8rem;background:var(--white);border-bottom:1px solid var(--line)}
.sd-name{font-weight:800;font-size:1.2rem;color:var(--ink);margin-bottom:4px;letter-spacing:-.3px}
.sd-meta{font-size:.75rem;color:var(--ink3);display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:.8rem}
.sd-metrics{display:flex;gap:1rem;padding-top:.6rem;border-top:1px solid var(--line)}
.sd-metric{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;text-align:center;color:var(--ink3)}
.sd-metric svg{flex-shrink:0}
.sd-metric-val{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--ink)}
.sd-metric-lbl{font-size:.65rem;color:var(--ink4)}
.sd-menu{padding:1rem 1.2rem}
.sd-search-section{padding:.5rem 0}
.sd-search-wrap{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 18px;background:var(--white);border:1.5px solid var(--line);border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:border-color .2s}
.sd-search-wrap:focus-within{border-color:var(--p)}
.sd-search-icon{width:18px;height:18px;flex-shrink:0;color:var(--ink4)}
.sd-search-inp{border:none;background:none;outline:none;flex:1;font-size:.82rem;font-family:'Nunito',sans-serif;color:var(--ink);min-width:0}
.sd-search-inp::placeholder{color:var(--ink4)}
.sd-search-btn{width:38px;height:38px;border-radius:999px;background:var(--p);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;box-shadow:0 2px 6px rgba(255,59,31,.3)}
.sd-search-btn:hover{background:var(--p2)}
.sd-search-btn svg{width:16px;height:16px;color:#fff}
.sd-pills{position:sticky;top:0;z-index:10;background:var(--white);padding:.5rem 1.2rem;overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;border-bottom:1px solid var(--line);-ms-overflow-style:none;scrollbar-width:none}
.sd-pills::-webkit-scrollbar{display:none}
.sd-sec{margin-bottom:1.5rem}
.sd-sec-title{font-weight:800;font-size:.88rem;color:var(--ink);margin-bottom:.6rem;padding:.5rem 1.2rem 0}
.sd-row-wrap{position:relative;padding:0 1.2rem}
.sd-row{display:flex;overflow-x:auto;gap:12px;padding:4px 0 8px;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}
.sd-row::-webkit-scrollbar{display:none}
.sd-row .pcard{flex-shrink:0;width:200px}
.sd-row .pcard-img{height:120px}
.sd-row-arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;background:var(--white);border:1px solid var(--line);border-radius:50%;display:none;align-items:center;justify-content:center;font-size:1.2rem;color:var(--ink2);cursor:pointer;box-shadow:var(--sh);z-index:2;transition:all .15s}
.sd-row-arrow:hover{background:var(--p-bg);border-color:var(--p-border);color:var(--p)}
.sd-row-arrow--left{left:0}
.sd-row-arrow--right{right:0}
@media(hover:hover){
  .sd-row-wrap:hover .sd-row-arrow{display:flex}
}
@media(max-width:768px){
  .sd-banner{height:160px}
  .sd-name{font-size:1.05rem}
  .sd-metrics{gap:.4rem}
}

.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,280px));gap:12px;justify-content:start}
.pcard{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r2);overflow:hidden;transition:all .2s}
.pcard:hover{border-color:var(--p-border);box-shadow:var(--sh2)}
.pcard-img{height:140px;background:var(--line2);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.pcard:hover .pcard-img img{transform:scale(1.05)}
.pcard-img-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink4)}
.pcard-img-placeholder svg{width:36px;height:36px;opacity:.4}
.pcard-img-placeholder span{font-size:.7rem;font-weight:600}
.pcard-body{padding:.8rem}
.pcard-name{font-weight:800;font-size:.88rem;color:var(--ink);margin-bottom:3px}
.pcard-desc{font-size:.74rem;color:var(--ink3);line-height:1.45;margin-bottom:.6rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-foot{display:flex;align-items:center;justify-content:space-between}
.pcard-price{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--p)}
.add-btn{width:30px;height:30px;background:var(--p);border:none;border-radius:50%;color:#fff;font-size:1.1rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-p);transition:all .15s}
.add-btn:hover{background:var(--p2);transform:scale(1.12)}
.pcard--agotado{pointer-events:none}
.pcard--agotado .pcard-img::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.50);z-index:1}
.pcard--agotado:hover{border-color:var(--line);box-shadow:none}
.pcard--agotado:hover .pcard-img img{transform:none}
.pcard-agotado-badge{position:absolute;top:8px;right:8px;background:rgba(239,68,68,.92);color:#fff;font-size:.65rem;font-weight:700;padding:3px 8px;border-radius:6px;letter-spacing:.3px;z-index:2}
.pcard-agotado-label{font-size:.72rem;font-weight:700;color:var(--ink4);background:var(--line2);padding:4px 12px;border-radius:20px}

.op-grupo{margin-bottom:1rem}
.op-grupo-title{font-size:.8rem;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.4px;margin-bottom:.5rem;display:flex;align-items:center;gap:6px}
.op-grupo-title .req{font-size:.68rem;background:var(--p-bg);color:var(--p);border-radius:4px;padding:1px 6px;font-weight:700}
.op-grupo-title .tipo{font-size:.68rem;background:var(--line2);color:var(--ink3);border-radius:4px;padding:1px 6px}
.op-opciones{display:flex;flex-wrap:wrap;gap:7px}
.op-pill{border:1.5px solid var(--line);border-radius:50px;padding:6px 14px;font-size:.8rem;font-weight:600;color:var(--ink2);cursor:pointer;transition:all .2s;background:var(--white);display:flex;align-items:center;gap:5px}
.op-pill:hover{border-color:var(--p);color:var(--p)}
.op-pill.sel{background:var(--p);border-color:var(--p);color:#fff}
.op-pill.sel-quitar{background:var(--p-bg);border-color:var(--p);color:var(--p);text-decoration:line-through}
.op-extra{font-size:.72rem;opacity:.8}

.op-builder{background:var(--line2);border-radius:var(--r2);padding:1rem;margin-top:.5rem}
.op-builder-grupo{background:var(--white);border:1px solid var(--line);border-radius:var(--r3);padding:.9rem;margin-bottom:.7rem}
.op-builder-row{display:flex;gap:8px;align-items:center;margin-bottom:.5rem}
.op-builder-row input{flex:1;background:var(--line2);border:1.5px solid var(--line);border-radius:var(--r3);padding:7px 10px;font-size:.82rem;color:var(--ink);outline:none}
.op-builder-row input:focus{border-color:var(--p);background:var(--white)}
.op-item-row{display:flex;gap:6px;align-items:center;margin-bottom:4px;padding-left:.5rem}
.op-item-row input{flex:1;background:var(--line2);border:1.5px solid var(--line);border-radius:var(--r3);padding:6px 10px;font-size:.8rem;color:var(--ink);outline:none}
.op-item-row input:focus{border-color:var(--p);background:var(--white)}
.op-price-input{width:90px!important;flex:none!important}
.btn-add-op{background:none;border:1.5px dashed var(--line);border-radius:var(--r3);padding:6px 12px;font-size:.78rem;font-weight:700;color:var(--ink3);cursor:pointer;transition:all .2s;width:100%;margin-top:4px}
.btn-add-op:hover{border-color:var(--p);color:var(--p)}
.btn-rm{background:none;border:none;color:var(--ink4);cursor:pointer;font-size:1rem;padding:2px 5px;transition:color .2s;flex-shrink:0}
.btn-rm:hover{color:var(--p)}

.vp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,280px));gap:12px;justify-content:start}
.vpcard{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh);transition:all .2s}
.vpcard-img{height:150px;background:var(--line2);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
.vpcard-img img{width:100%;height:100%;object-fit:cover}
.vpcard-img-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink4);cursor:pointer}
.vpcard-img-ph svg{width:32px;height:32px;opacity:.35}
.vpcard-img-ph span{font-size:.7rem;font-weight:600}
.vpcard-body{padding:.85rem}
.vpcard-name{font-weight:800;font-size:.9rem;color:var(--ink);margin-bottom:3px}
.vpcard-desc{font-size:.74rem;color:var(--ink3);line-height:1.4;margin-bottom:.6rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vpcard-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.5rem}
.vpcard-price{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--p)}
.vpcard-actions{display:flex;gap:6px}

.badge{display:inline-flex;align-items:center;gap:4px;border-radius:50px;padding:3px 10px;font-size:.71rem;font-weight:700;letter-spacing:.2px}
.badge-g{background:var(--g-bg);color:var(--g)}
.badge-p{background:var(--p-bg);color:var(--p)}
.badge-r{background:var(--p-bg);color:var(--p)}
.badge-b{background:var(--b-bg);color:var(--b)}
.badge-y{background:var(--y-bg);color:var(--y)}
.badge-ink{background:var(--line2);color:var(--ink2)}

.btn{border:none;border-radius:50px;cursor:pointer;font-family:'Nunito',sans-serif;font-weight:700;transition:all .2s;font-size:.83rem;display:inline-flex;align-items:center;gap:6px}
.btn-p{background:var(--p);color:#fff;padding:9px 20px;box-shadow:0 2px 8px rgba(255,59,31,.2)}
.btn-p:hover{background:var(--p2);transform:translateY(-1px)}
.btn-g{background:var(--g);color:#fff;padding:9px 20px}
.btn-g:hover{background:#00a05e}
.btn-b{background:var(--b);color:#fff;padding:9px 20px}
.btn-b:hover{background:#155cf5}
.btn-ghost{background:var(--white);border:1.5px solid var(--line);color:var(--ink2);padding:8px 18px}
.btn-ghost:hover{border-color:var(--p);color:var(--p)}
.btn-sm{padding:6px 13px;font-size:.76rem}
.btn-full{width:100%;border-radius:var(--r3);padding:12px;font-size:.92rem;justify-content:center}
.btn-icon{background:var(--line2);border:1.5px solid var(--line);border-radius:var(--r3);padding:7px 9px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center}
.btn-icon:hover{background:var(--p-bg);border-color:var(--p-border);color:var(--p)}
.btn-icon svg{width:15px;height:15px}

.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:1.4rem}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r2);padding:1rem;text-align:center;box-shadow:var(--sh)}
.stat-v{display:block;font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--p)}
.stat-l{font-size:.7rem;color:var(--ink3);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.stat.clickable{cursor:pointer;transition:all .2s}
.stat.clickable:hover{border-color:var(--p);box-shadow:var(--sh-p);transform:translateY(-1px)}
.stat.clickable.active{border-color:var(--p);background:var(--p-bg);box-shadow:var(--sh-p)}

.ocard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;margin-bottom:.8rem;box-shadow:var(--sh);transition:box-shadow .2s}
.ocard:hover{box-shadow:var(--sh2)}
.ocard-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.6rem;gap:8px;flex-wrap:wrap}
.ocard-id{font-weight:800;font-size:.92rem;color:var(--ink);font-family:var(--font-display);white-space:nowrap}
.ocard-sub{font-size:.75rem;color:var(--ink3);margin-top:2px}
.ocard-items{font-size:.8rem;color:var(--ink2);margin:.4rem 0;line-height:1.5;padding-left:50px}
.ocard-meta{display:flex;gap:14px;font-size:.75rem;color:var(--ink3);flex-wrap:wrap;margin-top:.3rem;padding-left:50px}
.ocard-total{font-weight:800;font-size:.92rem;color:var(--p)}

.ocard--delivery .ocard-items,
.ocard--delivery .ocard-meta{padding-left:0}
.ocard-actions{margin-top:.8rem;display:flex;gap:8px;flex-wrap:wrap}

.cosec{margin-bottom:1.4rem}
.cosec-title{font-family:var(--font-display);font-weight:800;font-size:.72rem;color:var(--ink4);margin-bottom:.8rem;padding:0 2px;letter-spacing:1.2px;text-transform:uppercase}
.cosec-title--active{color:var(--p)}
.cocard{background:var(--white);border-radius:var(--r);margin-bottom:.6rem;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:box-shadow .2s;position:relative;padding:0;overflow:hidden}
.cocard:hover{box-shadow:0 4px 16px rgba(0,0,0,.1)}
.cocard--active{box-shadow:0 0 0 1.5px var(--p-border),0 2px 8px rgba(255,59,31,.08)}
.cocard--active:hover{box-shadow:0 0 0 1.5px var(--p-border),0 4px 16px rgba(255,59,31,.12)}
.cocard-inner{padding:1rem 1.1rem}
.cocard-row{display:flex;align-items:center;gap:14px}
.cocard-logo{flex-shrink:0;width:48px;height:48px}
.cocard-logo-img{width:48px;height:48px;border-radius:50%;object-fit:cover;display:block;transition:transform .2s}
.cocard:hover .cocard-logo-img{transform:scale(1.04)}
.cocard-logo-fb{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--p-bg),var(--p-border));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--p);flex-shrink:0}
.cocard-info{flex:1;min-width:0}
.cocard-store{font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--ink);margin-bottom:2px}
.cocard-items{font-size:.75rem;color:var(--ink3);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:1px}
.cocard-more{font-size:.68rem;color:var(--ink4);font-weight:600}
.cocard-addr{display:flex;align-items:flex-start;gap:5px;font-size:.72rem;color:var(--ink3);margin-top:5px;line-height:1.4}
.cocard-addr svg{flex-shrink:0;opacity:.55;margin-top:2px}
.cocard-addr-txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.cocard-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;margin-left:auto}
.cocard-total{font-family:var(--font-display);font-weight:800;font-size:.95rem;color:var(--ink)}
.cocard--done .cocard-total{color:var(--g)}
.cocard--cancel .cocard-total{color:var(--ink3);text-decoration:line-through}
.cocard-status{display:flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;letter-spacing:.2px}
.cocard-status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cocard-status--pendiente .cocard-status-dot{background:var(--y)}
.cocard-status--en_preparacion .cocard-status-dot{background:var(--b)}
.cocard-status--listo .cocard-status-dot{background:var(--b)}
.cocard-status--en_camino .cocard-status-dot{background:var(--p)}
.cocard-status--entregado .cocard-status-dot{background:var(--g)}
.cocard-status--cancelado .cocard-status-dot{background:var(--p)}
.cocard-status--pendiente{color:var(--y)}
.cocard-status--en_preparacion{color:var(--b)}
.cocard-status--listo{color:var(--b)}
.cocard-status--en_camino{color:var(--p)}
.cocard-status--entregado{color:var(--g)}
.cocard-status--cancelado{color:var(--p)}
.cocard-date{font-size:.66rem;color:var(--ink4);font-weight:600}
.cocard-progress{display:flex;align-items:center;gap:4px;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line2)}
.cocard-progress-step{flex:1;height:3px;border-radius:2px;background:var(--line2);transition:background .3s}
.cocard-progress-step.done{background:var(--g)}
.cocard-progress-step.active{background:var(--p);animation:progressPulse 1.5s ease-in-out infinite}
.cocard-cancel-info{font-size:.72rem;color:var(--p);margin-top:.5rem;padding:.4rem .7rem;background:var(--p-bg);border-radius:var(--r3);border-left:2px solid var(--p)}
.cocard-actions{display:flex;gap:10px;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line2);justify-content:flex-end}
@keyframes progressPulse{0%,100%{opacity:1}50%{opacity:.6}}
.cobar{display:flex;align-items:center;justify-content:flex-start;gap:0;padding:0 0 .5rem;position:relative}
.cobar-step{flex:1;position:relative;display:flex;align-items:center;justify-content:center}
.cobar-step::after{content:'';position:absolute;top:50%;left:0;right:0;height:2px;background:var(--line);transform:translateY(-50%);z-index:0}
.cobar-step:first-child::after{left:50%}
.cobar-step:last-child::after{right:50%}
.cobar-step.done::after{background:var(--g)}
.cobar-dot{width:11px;height:11px;border-radius:50%;background:var(--white);border:2px solid var(--line);position:relative;z-index:1;transition:all .2s}
.cobar-step.done .cobar-dot{background:var(--g);border-color:var(--g)}
.cobar-step.active .cobar-dot{background:var(--white);border-color:var(--p);border-width:2.5px;width:13px;height:13px}

.fcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;margin-bottom:1rem;box-shadow:var(--sh)}
.fcard h3{font-family:var(--font-display);font-size:1rem;font-weight:700;margin-bottom:1.1rem;color:var(--ink)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fgrid .full{grid-column:1/-1}

.sbar{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.2rem;margin-bottom:1rem;box-shadow:var(--sh);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sbar-info h3{font-weight:800;font-size:.95rem;color:var(--ink)}
.sbar-info p{font-size:.75rem;color:var(--ink3);margin-top:2px}

.tgl-wrap{display:flex;align-items:center;gap:10px}
.tgl{position:relative;width:44px;height:24px;cursor:pointer;flex-shrink:0}
.tgl input{opacity:0;width:0;height:0}
.tgl-track{position:absolute;inset:0;background:var(--line);border-radius:50px;transition:.25s}
.tgl-track:before{content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.tgl input:checked + .tgl-track{background:var(--g)}
.tgl input:checked + .tgl-track:before{transform:translateX(20px)}
.tgl-lbl{font-weight:700;font-size:.86rem;color:var(--ink2)}

.cart-btn{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:60;
  background:var(--p);color:#fff;border:none;border-radius:50px;
  padding:12px 20px;font-family:'Nunito',sans-serif;font-weight:800;
  font-size:.88rem;cursor:pointer;box-shadow:var(--sh-p);
  transition:all .25s;display:none;align-items:center;gap:10px
}
.cart-btn:hover{background:var(--p2);transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,59,31,.4)}
.cart-btn .cbadge{background:rgba(255,255,255,.25);border-radius:50px;padding:1px 8px;font-size:.76rem}

.cart-bd{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;display:none;backdrop-filter:blur(3px)}
.cart-bd.open{display:block;animation:fadeIn .2s ease}
.cart-dr{position:fixed;right:-420px;top:0;width:400px;height:100vh;background:var(--white);z-index:201;transition:right .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;border-left:1px solid var(--line)}
.cart-dr.open{right:0}
.cart-head{padding:1.2rem 1.4rem;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.cart-head h3{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--ink)}
.c-close{background:var(--line2);border:1px solid var(--line);border-radius:50%;width:30px;height:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:.9rem;transition:all .2s}
.c-close:hover{background:var(--p-bg);color:var(--p)}
.cart-scroll{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;padding:3px 10px 0}
.citem{display:flex;align-items:center;gap:12px;padding:.65rem .9rem;margin-bottom:8px;background:var(--white);border:1.5px solid var(--line);border-radius:14px;box-shadow:var(--sh)}
.citem-img{width:56px;height:56px;border-radius:10px;overflow:hidden;background:var(--line2);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.citem-img img{width:100%;height:100%;object-fit:cover}
.citem-img svg{width:24px;height:24px;color:var(--ink4);opacity:.4}
.citem-info{flex:1;min-width:0}
.citem-name{font-weight:700;font-size:.88rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.citem-price{font-size:.77rem;color:var(--p);font-weight:700;margin-top:3px}
.citem-qty{display:flex;align-items:center;gap:7px;flex-shrink:0}
.qbtn{width:28px;height:28px;background:var(--line2);border:1.5px solid var(--line);border-radius:8px;cursor:pointer;font-weight:800;font-size:.9rem;color:var(--ink2);transition:all .15s;display:flex;align-items:center;justify-content:center;line-height:1}
.qbtn:hover{background:var(--p-bg);border-color:var(--p-border);color:var(--p)}
.citem-qty span{font-size:.88rem;font-weight:800;color:var(--ink);min-width:16px;text-align:center}
.cart-foot{padding:1rem 1.4rem;border-top:1px solid var(--line);background:var(--line2)}
.crow{display:flex;justify-content:space-between;font-size:.82rem;color:var(--ink3);padding:3px 0}
.crow.total{font-weight:800;font-size:.98rem;color:var(--ink);margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}

.pay-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.pay-opt{border:2px solid var(--line);border-radius:var(--r3);padding:10px;cursor:pointer;transition:all .2s;text-align:center}
.pay-opt.sel{border-color:var(--p);background:var(--p-bg)}
.pay-opt svg{display:block;margin:0 auto 4px;width:22px;height:22px}
.pay-opt span{font-size:.76rem;font-weight:700;color:var(--ink2);display:block}
.pay-info{background:var(--b-bg);border:1px solid rgba(26,111,255,.2);border-radius:var(--r3);padding:10px;font-size:.76rem;color:var(--b);line-height:1.5;margin-top:8px}

.addr-cards{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.addr-card{background:var(--white);border:2px solid var(--line);border-radius:var(--r3);padding:10px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .2s}
.addr-card.sel{border-color:var(--p);background:var(--p-bg)}
.addr-card svg{flex-shrink:0;color:var(--ink3);width:18px;height:18px}
.addr-card.sel svg{color:var(--p)}
.addr-card-info{flex:1;min-width:0}
.addr-card-lbl{font-weight:700;font-size:.82rem;color:var(--ink)}
.addr-card-txt{font-size:.74rem;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addr-default{display:flex;align-items:center;gap:5px;font-size:.7rem;color:var(--g);font-weight:700}

.dir-list{display:flex;flex-direction:column;gap:12px}
.dir-item{background:var(--white);border:1.5px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh);transition:box-shadow .2s,transform .2s,border-color .15s}
.dir-item:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.dir-item.default{border-color:var(--p);background:linear-gradient(180deg,var(--p-bg) 0%,var(--white) 55%)}
.dir-item-top{display:flex;align-items:flex-start;gap:12px;padding:1rem 1.1rem .85rem}
.dir-item-icon{width:38px;height:38px;border-radius:11px;background:var(--p-bg);color:var(--p);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dir-item.default .dir-item-icon{background:var(--p);color:#fff;box-shadow:0 2px 8px rgba(255,59,31,.3)}
.dir-item-info{flex:1;min-width:0}
.dir-item-lbl{font-weight:800;font-size:.92rem;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dir-item-txt{font-size:.79rem;color:var(--ink2);margin-top:3px;line-height:1.45}
.dir-item-actions{display:flex;border-top:1px solid var(--line);background:var(--line2)}
.dir-act{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 6px;background:transparent;border:none;border-right:1px solid var(--line);cursor:pointer;font-family:'Nunito',sans-serif;font-size:.74rem;font-weight:700;color:var(--ink2);transition:background .15s,color .15s}
.dir-act:last-child{border-right:none}
.dir-act svg{flex-shrink:0}
.dir-act-edit:hover{background:var(--p-bg);color:var(--p)}
.dir-act-star:hover{background:var(--p-bg);color:var(--p)}
.dir-act-del:hover{background:#FEE2E2;color:#DC2626}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;display:none;align-items:center;justify-content:center;padding:12px;backdrop-filter:blur(4px);overflow:hidden}
.modal-bg.open{display:flex;animation:fadeIn .2s ease}
.modal{background:var(--white);border-radius:20px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:1.2rem;animation:fadeUp .2s ease}
@media(min-width:640px){.modal{padding:1.5rem}.modal-bg{padding:16px}}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.3rem}
.modal-title{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--ink)}
.modal-close{background:var(--line2);border:1px solid var(--line);border-radius:50%;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:.9rem;transition:all .2s}
.modal-close:hover{background:var(--p-bg);color:var(--p)}
.btn-loc{padding:9px 16px;font-size:.8rem;letter-spacing:.3px}
.btn-loc svg{stroke:#fff;flex-shrink:0}
.addr-loc-hint{font-size:.72rem;color:var(--ink3);margin-top:6px;line-height:1.5;background:var(--line2);border-radius:var(--r3);padding:8px 10px}
.btn-danger{background:#DC2626;color:#fff;padding:9px 20px;border:1.5px solid #DC2626;border-radius:50px;box-shadow:0 2px 8px rgba(220,38,38,.25)}
.btn-danger:hover{background:#B91C1C;transform:translateY(-1px)}
.cfmt-icon{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-bottom:.4rem}
.cfmt-icon--danger{background:#FEE2E2;color:var(--r)}
.cfmt-title{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:.3rem}
.cfmt-msg{font-size:.82rem;color:var(--ink3);line-height:1.4}
.pay-instructions{background:var(--line2);border-radius:var(--r3);padding:1rem;font-size:.82rem;line-height:1.5;margin-top:.5rem}
.pay-instructions strong{color:var(--ink);font-size:.85rem}
.pay-ref{font-family:var(--font-display);font-weight:800;color:var(--p);font-size:.9rem}

.map-track{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh2);margin-bottom:1rem}
.map-canvas{height:200px;background:linear-gradient(135deg,#e8f4e8 0%,#d4e8f0 100%);position:relative;overflow:hidden}
.map-road{position:absolute;top:50%;left:0;right:0;height:6px;background:#c8c8c8;transform:translateY(-50%)}
.map-road::after{content:'';position:absolute;top:50%;left:0;right:0;height:2px;background:white;transform:translateY(-50%);border-top:2px dashed #aaa}
.map-bldg{position:absolute;background:rgba(100,120,140,.15);border-radius:3px}
.map-pin{position:absolute;top:50%;transform:translate(-50%,-100%);z-index:2;display:flex;flex-direction:column;align-items:center}
.map-pin svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.map-pin .pin-lbl{font-size:.62rem;font-weight:700;background:#fff;padding:2px 6px;border-radius:4px;box-shadow:var(--sh);margin-top:2px;white-space:nowrap;color:var(--ink2)}
.map-rider{position:absolute;top:calc(50% - 20px);left:5%;z-index:3;transition:left 1s ease;display:flex;flex-direction:column;align-items:center}
.map-rider svg{filter:drop-shadow(0 2px 6px rgba(255,59,31,.5))}
.map-rider .rider-lbl{font-size:.58rem;font-weight:800;color:var(--p);white-space:nowrap}
.map-svg{position:absolute;inset:0;width:100%;height:100%}
.map-info{padding:.9rem 1rem;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.map-status{font-size:.82rem;font-weight:700;color:var(--ink2);display:flex;align-items:center;gap:8px}
.map-eta{font-size:.78rem;color:var(--ink3)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--g);animation:pulse 1.5s ease infinite;display:inline-block}

.dlv-map{background:var(--line2);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;margin-bottom:.6rem}
.dlv-map--empty{display:flex;align-items:center;justify-content:center;padding:2.5rem 1rem}
.delivery-map-container{height:240px;width:100%;border-radius:inherit}
.delivery-map-container .leaflet-control-zoom{border:none !important;box-shadow:0 2px 8px rgba(0,0,0,.15) !important;border-radius:8px !important;overflow:hidden}
.delivery-map-container .leaflet-control-zoom a{width:30px;height:30px;line-height:30px;font-size:16px;color:var(--ink2);background:var(--white);border-bottom:1px solid var(--line)}
.delivery-map-container .leaflet-control-zoom a:last-child{border-bottom:none}
.map-empty-msg{text-align:center;color:var(--ink3)}
.map-empty-msg svg{opacity:.3;margin:0 auto .4rem;display:block}
.map-empty-msg p{font-size:.82rem;font-weight:600;margin:0}
.delivery-map-marker{background:none !important;border:none !important}
.dmm-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.85rem;font-weight:800;color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.3);position:relative}
.dmm-circle::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent}
.dmm-circle--store{background:#1a1a2e}
.dmm-circle--store::after{border-top:8px solid #1a1a2e}
.dmm-circle--client{background:#FF3B1F}
.dmm-circle--client::after{border-top:8px solid #FF3B1F}
.dmm-circle--client-green{background:#00B96B}
.dmm-circle--client-green::after{border-top:8px solid #00B96B}
.popup-stop{font-size:.82rem;margin-bottom:8px}
.popup-stop strong{color:var(--ink)}
.popup-nav{display:flex;gap:6px}
.popup-nav + .popup-nav{margin-top:6px}
.popup-nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 10px;border-radius:6px;font-size:.73rem;font-weight:700;text-decoration:none;cursor:pointer;transition:all .15s;border:none;white-space:nowrap}
.popup-nav-btn:hover{opacity:.9}
.popup-nav-btn--maps{background:var(--p);color:#fff !important}
.popup-nav-btn--maps svg{stroke:#fff}
.popup-nav-btn--waze{background:var(--p-bg);color:var(--p);border:1px solid var(--p-border)}
.popup-nav-btn--waze svg{stroke:var(--p)}
.popup-nav-btn--streetview{background:var(--ink);color:#fff !important;flex:1}
.popup-nav-btn--streetview svg{stroke:#fff}

.progress-steps{display:flex;align-items:flex-start;justify-content:space-between;position:relative;padding:1rem 0;margin-bottom:.5rem}
.progress-steps::before{content:'';position:absolute;top:22px;left:16px;right:16px;height:2px;background:var(--line)}
.pstep{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;z-index:1}
.pstep-dot{width:28px;height:28px;border-radius:50%;background:var(--line);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;transition:all .3s}
.pstep-dot svg{width:13px;height:13px;color:var(--ink4)}
.pstep-dot.done{background:var(--g);border-color:var(--g)}
.pstep-dot.done svg{color:#fff}
.pstep-dot.active{background:var(--p);border-color:var(--p);animation:pulse 1.5s ease infinite}
.pstep-dot.active svg{color:#fff}
.pstep-lbl{font-size:.62rem;font-weight:700;color:var(--ink3);text-align:center;max-width:70px;word-break:break-word;line-height:1.3}
.pstep--clickable{cursor:pointer}
.pstep--clickable .pstep-lbl{text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .2s}
.pstep--clickable:hover .pstep-lbl{text-decoration-color:currentColor}
.pstep--locked{cursor:default;opacity:.55}

.dlv-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;box-shadow:var(--sh2)}
.dlv-top{text-align:center;padding-bottom:1.2rem;border-bottom:1px solid var(--line);margin-bottom:1.2rem}
.dlv-icon{width:64px;height:64px;background:var(--p-bg);border-radius:50%;margin:0 auto .6rem;display:flex;align-items:center;justify-content:center}
.dlv-icon svg{width:32px;height:32px;color:var(--p)}
.dlv-id{font-family:var(--font-display);font-size:1.2rem;font-weight:800;color:var(--ink)}
.dlv-blocks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:.6rem 0}
.dlv-block{background:var(--line2);border-radius:var(--r3);padding:.65rem .8rem}
.dlv-block-hdr{display:flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.3px}
.dlv-block:first-child .dlv-block-hdr{color:var(--p)}
.dlv-block:last-child .dlv-block-hdr{color:var(--g)}
.dlv-block-info{font-size:.75rem;color:var(--ink2);line-height:1.4}
@media(max-width:480px){
  .dlv-blocks{grid-template-columns:1fr}
}
.dlv-money{background:var(--line2);border-radius:var(--r3);padding:.55rem .7rem;font-size:.78rem}
.dlv-money-row{display:flex;justify-content:space-between;padding:3px 0;color:var(--ink3)}
.dlv-money-row span:last-child{font-weight:700;color:var(--ink2)}
.dlv-money-hl span{color:var(--p) !important}
.dlv-money-hl span:last-child{font-family:var(--font-display);font-size:.85rem}
.dlv-money-total{border-top:1px solid var(--line);padding-top:5px;margin-top:2px}
.dlv-money-total span{font-weight:800 !important;color:var(--ink) !important;font-size:.85rem !important}
.info-row{display:flex;gap:10px;padding:.75rem;background:var(--line2);border-radius:var(--r3);margin-bottom:.6rem}
.ir-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--p)}
.ir-icon svg{width:18px;height:18px}
.ir-lbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink3)}
.ir-val{font-size:.88rem;font-weight:700;color:var(--ink);margin-top:2px}

.file-zone{border:2px dashed var(--line);border-radius:var(--r3);padding:1.5rem;text-align:center;cursor:pointer;transition:all .2s;background:var(--line2)}
.file-zone:hover{border-color:var(--p);background:var(--p-bg)}
.file-zone input{display:none}
.file-zone svg{width:32px;height:32px;color:var(--ink4);margin:0 auto .5rem;display:block}
.file-zone p{font-size:.8rem;color:var(--ink3)}
.file-zone strong{color:var(--p)}
.file-preview{position:relative;border-radius:var(--r3);overflow:hidden;margin-top:8px;height:120px}
.file-preview img{width:100%;height:100%;object-fit:cover}
.file-preview .rm-img{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.6);border:none;border-radius:50%;width:26px;height:26px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem}

.nequi-band{background:linear-gradient(90deg,#6B21A8,#9333EA);border-radius:var(--r3);padding:10px 14px;display:flex;align-items:center;gap:10px;color:#fff;font-size:.8rem;font-weight:700}
.nequi-band svg{flex-shrink:0;width:22px;height:22px}

.empty{text-align:center;padding:3rem 1rem;color:var(--ink3)}
.empty svg{width:52px;height:52px;margin:0 auto .8rem;display:block;opacity:.3}
.empty p{font-size:.88rem;line-height:1.6}
/* El icono ilustrativo del estado vacio no debe arrastrar a los iconos de sus botones */
.empty .btn svg{width:16px;height:16px;margin:0;display:inline-block;opacity:1;flex-shrink:0}

#mapPickerModal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:600;display:none;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(4px)}
#mapPickerModal.open{display:flex;animation:fadeIn .2s ease}
.mp-box{background:var(--white);border-radius:16px;width:100%;max-width:600px;max-height:95vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:fadeUp .2s ease}
.mp-hdr{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--line);flex-shrink:0}
.mp-hdr h4{font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--ink);margin:0}
.mp-hdr button{background:var(--line2);border:1px solid var(--line);border-radius:50%;width:28px;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:.8rem;transition:all .2s}
.mp-hdr button:hover{background:var(--p-bg);color:var(--p)}
.mp-hint{padding:.6rem 1.2rem;font-size:.73rem;color:var(--ink3);background:var(--line2);border-bottom:1px solid var(--line);flex-shrink:0}
.mp-body{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column}
#mapLeaflet{flex-shrink:0;height:340px;width:100%}
#mpAddrPreview{padding:.6rem 1.2rem;font-size:.75rem;color:var(--ink2);background:var(--line2);border-top:1px solid var(--line);min-height:28px;flex-shrink:0}
.mp-footer{display:flex;flex-direction:column;gap:8px;padding:1rem 1.2rem;border-top:1px solid var(--line);flex-shrink:0}
.mp-footer-row{display:flex;gap:8px}
.mp-tool-btn{display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 14px;border-radius:8px;font-size:.76rem;font-weight:700;cursor:pointer;transition:all .2s;border:1.5px solid var(--line);background:var(--white);color:var(--p);white-space:nowrap;flex:1}
.mp-tool-btn:hover{background:var(--p-bg);border-color:var(--p)}
.mp-tool-btn svg{flex-shrink:0}
.mp-tool-btn--layer{flex:0 0 auto;min-width:0}
.mp-tool-btn.sat{background:var(--ink);color:#fff;border-color:var(--ink)}
.mp-tool-btn.sat:hover{opacity:.85}
.mp-tool-btn.sat svg{stroke:#fff}
.mp-cancel{border:1.5px solid var(--line);background:var(--white);color:var(--ink2);flex:1;padding:10px 16px;border-radius:var(--r3);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s}
.mp-cancel:hover{border-color:var(--ink3)}
.mp-confirm{border:none;background:var(--p);color:#fff;flex:1;padding:10px 16px;border-radius:var(--r3);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s}
.mp-confirm:hover{opacity:.9}
.mp-confirm:disabled{background:var(--line);color:var(--ink3);cursor:not-allowed}
.mp-streetview{border:1.5px solid var(--p-border);background:var(--p-bg);color:var(--p);flex:1;padding:10px 16px;border-radius:var(--r3);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:5px}
.mp-streetview svg{flex-shrink:0}
.mp-streetview:hover{border-color:var(--p);opacity:.9}
.mp-streetview:disabled{border-color:var(--line);background:var(--line2);color:var(--ink3);cursor:not-allowed}
.mp-streetview:disabled svg{stroke:var(--ink3)}
@media(max-width:480px){
  .mp-hint{font-size:.68rem;padding:.5rem 1rem}
  #mapLeaflet{height:260px}
  .mp-footer{padding:.8rem 1rem;gap:6px}
  .mp-footer-row{gap:6px}
  .mp-tool-btn{font-size:.7rem;padding:7px 10px}
  .mp-cancel,.mp-confirm,.mp-streetview{font-size:.74rem;padding:9px 8px}
}
@media(max-width:380px){
  .mp-footer-row{flex-wrap:wrap}
}

.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;padding:11px 22px;border-radius:50px;font-size:.83rem;font-weight:700;z-index:9999;transition:transform .3s ease;pointer-events:none;white-space:nowrap;box-shadow:var(--sh3)}
.toast.show{transform:translateX(-50%) translateY(0)}

.div{border:none;border-top:1px solid var(--line);margin:1rem 0}

.tl-section{margin-top:1rem}
.tl-title{font-weight:800;font-size:.85rem;color:var(--ink);margin-bottom:.8rem;display:flex;align-items:center;gap:8px}
.tl-title::after{content:'';flex:1;height:1px;background:var(--line)}
.tl-list{padding-left:4px}
.tl-item{display:flex;align-items:flex-start;position:relative;min-height:52px}
.tl-item:last-child{min-height:auto}
.tl-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--tl-color,var(--line));background:var(--white);display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1;color:var(--tl-color,var(--ink4))}
.tl-dot--done{background:var(--tl-color);border-color:var(--tl-color);color:#fff}
.tl-dot--active{background:var(--tl-color);border-color:var(--tl-color);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--tl-color) 15%,transparent)}
.tl-dot--cancelled{background:var(--p-bg);border-color:var(--p);color:var(--p)}
.tl-line{position:absolute;left:10px;top:26px;width:2px;height:calc(100% - 4px);background:var(--tl-color,var(--line))}
.tl-body{margin-left:12px;padding-bottom:16px;flex:1;min-width:0}
.tl-state{font-weight:700;font-size:.82rem;color:var(--ink);line-height:1.3}
.tl-date{font-size:.73rem;color:var(--ink3);margin-top:1px}
.tl-author{font-size:.75rem;color:var(--ink2);font-weight:600;margin-top:2px}
.tl-item:last-child .tl-body{padding-bottom:0}

@media(max-width:600px){
  .fgrid{grid-template-columns:1fr}
  .prod-grid,.vp-grid{grid-template-columns:1fr 1fr}
  .store-grid{grid-template-columns:1fr}
  .cart-dr{width:100%;right:-100%}
  .stats{grid-template-columns:1fr 1fr}
  .cart-btn-label{display:none}
}
@media(max-width:380px){.prod-grid,.vp-grid{grid-template-columns:1fr}}

/* Vendor Dashboard — Resumen */
.dash-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin-bottom:1.6rem}
.dash-kpi{display:flex;flex-direction:column;min-width:0;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.2rem;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:box-shadow .2s,transform .2s}
.dash-kpi:hover{box-shadow:0 4px 12px rgba(0,0,0,.06);transform:translateY(-2px)}
.dash-kpi-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.dash-kpi-icon{width:18px;height:18px;flex-shrink:0}
.dash-kpi-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--ink4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-kpi-val{font-family:var(--font-display);font-size:1.75rem;font-weight:800;line-height:1.05;color:var(--ink);letter-spacing:-.5px}
.dash-kpi-sub{font-size:.72rem;color:var(--ink3);line-height:1.4;margin-top:6px}

.dash-section-title{font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;color:var(--ink4);margin-bottom:1rem;display:flex;align-items:center;gap:8px}
.dash-section-icon{width:16px;height:16px;flex-shrink:0;color:var(--ink4)}

.dash-rankings{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:1rem}
.dash-rank-item{display:flex;align-items:center;gap:12px;padding:.55rem 0;border-bottom:1px solid var(--line)}
.dash-rank-item:last-child{border-bottom:none}
.dash-rank-pos{width:24px;height:24px;border-radius:50%;background:var(--line2);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:var(--ink3);flex-shrink:0}
.dash-rank-item:nth-child(1) .dash-rank-pos{background:var(--y);color:#fff}
.dash-rank-item:nth-child(2) .dash-rank-pos{background:var(--line);color:var(--ink2)}
.dash-rank-item:nth-child(3) .dash-rank-pos{background:#E8D5B0;color:#8B6914}
.dash-rank-name{flex:1;min-width:0;font-size:.82rem;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-rank-val{font-family:var(--font-display);font-size:.85rem;font-weight:700;color:var(--ink2);white-space:nowrap}

.dash-chart-wrap{position:relative;height:280px;width:100%;margin-bottom:12px}
.dash-chart-hint{text-align:center;color:var(--ink4);font-size:.72rem;font-weight:600;margin-top:4px}
.dash-chart-legend{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:8px;font-size:.72rem;font-weight:600;color:var(--ink3)}
.dash-chart-legend span{display:inline-flex;align-items:center;gap:6px}
.dash-chart-legend i{display:inline-block;width:10px;height:10px;border-radius:50%}

#vendorAnalyticsRow,
.comision-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:1.6rem}

.dash-status-item{flex:1;min-width:120px}
.dash-status-label{font-size:.69rem;font-weight:700;text-transform:uppercase;color:var(--ink4);margin-bottom:3px;display:flex;justify-content:space-between}
.dash-status-bar{height:6px;background:var(--line2);border-radius:3px;overflow:hidden}
.dash-status-fill{height:100%;border-radius:3px;transition:width .45s ease}

/* Peak hours bars */
.dash-peak-section{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink4);margin:14px 0 8px}
.dash-peak-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.dash-peak-label{font-size:.72rem;color:var(--ink3);width:60px;text-align:right;font-weight:600;flex-shrink:0;line-height:1}
.dash-peak-track{flex:1;height:12px;background:var(--line2);border-radius:6px;overflow:hidden}
.dash-peak-fill{height:100%;border-radius:6px;opacity:.85}
.dash-peak-val{font-size:.7rem;font-weight:700;color:var(--ink3);width:24px;text-align:right;flex-shrink:0;line-height:1}
.dash-peak-days .dash-peak-label{width:22px}

/* Status breakdown */
.dash-status-breakdown{margin-top:18px;margin-bottom:1.6rem}
.dash-status-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dash-status-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--ink4)}
.dash-status-total{font-size:.72rem;font-weight:700;color:var(--ink3)}
.dash-status-strip{display:flex;height:10px;border-radius:99px;overflow:hidden;margin-bottom:12px;background:var(--line2)}
.dash-status-segment{min-width:2px;transition:width .4s ease}
.dash-status-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dash-status-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:50px;background:color-mix(in srgb,var(--sc) 9%,transparent);border:1px solid color-mix(in srgb,var(--sc) 22%,transparent);font-size:.72rem;font-weight:700;color:color-mix(in srgb,var(--sc) 72%,var(--ink));transition:transform .15s ease}
.dash-status-chip:hover{transform:translateY(-1px)}
.dash-status-chip i{width:7px;height:7px;border-radius:50%;background:var(--sc);flex-shrink:0}
.dash-status-chip strong{font-weight:800}
.dash-status-chip--zero{background:var(--line2);border-color:var(--line);color:var(--ink4)}
.dash-status-chip--zero i{background:var(--line)}

/* Orders filter bar */
.orders-search-box{position:relative;flex:1;min-width:200px;max-width:320px}
.orders-date-inp{width:136px}

@media(max-width:600px){.dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-rankings{grid-template-columns:1fr}.dash-chart-wrap{height:220px}#vendorAnalyticsRow,
.comision-grid{grid-template-columns:1fr}.dash-status-legend{gap:6px}.dash-status-chip{font-size:.68rem;padding:4px 10px}.orders-search-box{flex:1 1 100%;max-width:none;min-width:0}.orders-date-row{flex:1 1 100%}.orders-date-inp{flex:1;min-width:0;width:auto}}
@media(max-width:340px){.dash-kpis{grid-template-columns:1fr}.dash-status-chip{font-size:.66rem;padding:4px 9px}}

.bell-btn{position:relative;background:none;border:1px solid var(--line);border-radius:50px;padding:6px 8px;cursor:pointer;color:var(--ink3);display:flex;align-items:center;justify-content:center;transition:color .15s}
.bell-btn:hover{color:var(--ink)}
.bell-badge{position:absolute;top:-4px;right:-4px;background:var(--p);color:#fff;border-radius:50%;min-width:16px;height:16px;font-size:.64rem;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1}

.notif-panel{position:fixed;top:0;right:-360px;width:340px;max-width:calc(100vw - 20px);height:100vh;background:var(--white);box-shadow:-4px 0 20px rgba(0,0,0,.1);z-index:1100;transition:right .25s ease;display:flex;flex-direction:column;visibility:hidden;pointer-events:none}
.notif-panel.open{right:0;visibility:visible;pointer-events:auto}
.notif-panel-hdr{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid var(--line);font-weight:800;font-size:.9rem;color:var(--ink)}
.btn-close-notif{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--ink3);padding:0;line-height:1}
#notifList{flex:1;overflow-y:auto;padding:.5rem 0}
.notif-item{padding:.8rem 1.2rem;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s;display:flex;align-items:flex-start;gap:10px}
.notif-item:hover{background:var(--line2)}
.notif-item.unread{border-left:3px solid var(--b);background:var(--b-bg)}
.notif-item-body{flex:1;min-width:0}
.notif-icon{width:34px;height:34px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.notif-section-hdr{padding:.45rem 1.2rem;font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--ink4);background:var(--line2)}
.notif-msg{font-size:.82rem;color:var(--ink);line-height:1.4;margin-bottom:3px}
.notif-time{font-size:.7rem;color:var(--ink4)}
.notif-empty{text-align:center;color:var(--ink4);padding:2rem 1rem;font-size:.82rem}

.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.table-wrap table{min-width:640px}

.sdm-icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;background:var(--line2);margin:0 auto .6rem}
.sdm-icon-wrap img{width:56px;height:56px;object-fit:contain;opacity:.9}