
/* ══ PREMIUM CINEMATIC STOCK OVERLAY 2026 ══
   Glassmorphism + wine cinematic backdrop + region tabs + smart clustering.
   Barrier layers garantizan contrast ≥4.5:1 (WCAG AA). */
:root{--stk-glass:rgba(15,10,25,.62);--stk-glass-strong:rgba(15,10,25,.78);--stk-border:rgba(255,255,255,.09);--stk-border-hi:rgba(212,184,105,.42);--stk-gold:#d4b869;--stk-purple:#5E6AD2;--stk-wine:#8c1428}
#stockOverlay{position:fixed;inset:0;z-index:9986;display:none;flex-direction:column;opacity:0;transition:opacity .35s cubic-bezier(.2,.8,.2,1);background:
  radial-gradient(ellipse 90% 60% at 12% 8%,rgba(140,20,40,.18),transparent 55%),
  radial-gradient(ellipse 80% 70% at 88% 92%,rgba(60,30,110,.24),transparent 55%),
  radial-gradient(ellipse 60% 50% at 50% 50%,rgba(30,15,50,.14),transparent 60%),
  linear-gradient(180deg,#0a0612 0%,#120818 55%,#0a0612 100%)}
#stockOverlay.active{display:flex;opacity:1}
#stockOverlay::before{content:"";position:absolute;inset:0;background-image:
  radial-gradient(circle at 20% 20%,rgba(212,184,105,.03) 1px,transparent 1px),
  radial-gradient(circle at 80% 60%,rgba(94,106,210,.025) 1px,transparent 1px);
  background-size:60px 60px,90px 90px;pointer-events:none;opacity:.6;mix-blend-mode:screen}
.stock-header{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:.7rem;padding:.95rem 1.1rem .8rem;border-bottom:1px solid var(--stk-border);background:var(--stk-glass-strong);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px rgba(0,0,0,.35)}
.stock-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(212,184,105,.4),transparent)}
.stock-ico{font-size:1.25rem;filter:drop-shadow(0 0 8px rgba(212,184,105,.35))}
.stock-title-wrap{flex:1;min-width:0}
.stock-title{font-family:var(--serif);font-size:1.02rem;color:#fff;font-weight:600;line-height:1.15;letter-spacing:.005em}
.stock-subtitle{font-size:.68rem;color:rgba(255,255,255,.62);margin-top:.2rem;letter-spacing:.03em}
.stock-close{background:rgba(255,255,255,.06);border:1px solid rgba(212,184,105,.3);color:rgba(212,184,105,.95);width:36px;height:36px;border-radius:50%;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .22s cubic-bezier(.2,.8,.2,1);flex-shrink:0;-webkit-tap-highlight-color:transparent;backdrop-filter:blur(8px)}
.stock-close:hover{background:rgba(212,184,105,.18);color:var(--stk-gold);transform:rotate(90deg)}
/* Region tabs — glassmorphism premium */
.stock-region-tabs{position:relative;flex:0 0 auto;display:flex;gap:.35rem;padding:.55rem .9rem .5rem;background:var(--stk-glass);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--stk-border);overflow-x:auto;scrollbar-width:none}
.stock-region-tabs::-webkit-scrollbar{display:none}
.stock-region-tab{position:relative;flex-shrink:0;display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;background:rgba(255,255,255,.04);border:1px solid var(--stk-border);border-radius:2rem;color:rgba(255,255,255,.72);font-family:var(--sans);font-size:.72rem;letter-spacing:.03em;font-weight:500;cursor:pointer;transition:all .28s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent;min-height:36px;backdrop-filter:blur(8px);white-space:nowrap}
.stock-region-tab:hover{background:rgba(212,184,105,.09);color:#fff;border-color:rgba(212,184,105,.3);transform:translateY(-1px)}
.stock-region-tab.on{background:linear-gradient(135deg,rgba(212,184,105,.22),rgba(212,184,105,.12));color:var(--stk-gold);border-color:var(--stk-border-hi);box-shadow:0 0 0 1px rgba(212,184,105,.2),0 4px 14px rgba(212,184,105,.18);font-weight:600}
.stock-region-tab.on::after{content:"";position:absolute;left:20%;right:20%;bottom:-6px;height:2px;background:linear-gradient(90deg,transparent,var(--stk-gold),transparent);border-radius:2px;box-shadow:0 0 8px rgba(212,184,105,.6);animation:stkTabUnderline .4s cubic-bezier(.2,.8,.2,1)}
@keyframes stkTabUnderline{from{opacity:0;transform:scaleX(.3)}to{opacity:1;transform:scaleX(1)}}
.stock-region-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;padding:0 6px;background:rgba(255,255,255,.08);border-radius:9px;font-size:.6rem;font-weight:700;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.stock-region-tab.on .stock-region-tab-count{background:rgba(212,184,105,.28);color:#fff}
/* Search + chips filter bar */
.stock-filter-bar{position:relative;flex:0 0 auto;display:flex;flex-direction:column;gap:.5rem;padding:.55rem .9rem .55rem;border-bottom:1px solid var(--stk-border);background:var(--stk-glass);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)}
.stock-search-wrap{position:relative;display:flex;align-items:center}
.stock-search-ico{position:absolute;left:.65rem;color:rgba(212,184,105,.6);font-size:.85rem;pointer-events:none}
.stock-search-input{flex:1;padding:.6rem .75rem .6rem 2.1rem;background:rgba(255,255,255,.05);border:1px solid var(--stk-border);border-radius:.55rem;color:#fff;font-family:var(--sans);font-size:.8rem;outline:none;transition:all .22s cubic-bezier(.2,.8,.2,1);backdrop-filter:blur(8px)}
.stock-search-input::placeholder{color:rgba(255,255,255,.42)}
.stock-search-input:focus{border-color:var(--stk-gold);background:rgba(255,255,255,.08);box-shadow:0 0 0 3px rgba(212,184,105,.14)}
/* Mobile view toggle (map/list) */
.stock-vtoggle{flex:0 0 auto;display:none;gap:.35rem;padding:.5rem .9rem 0;background:transparent}
.stock-vtoggle-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;padding:.55rem;background:rgba(255,255,255,.05);border:1px solid var(--stk-border);border-radius:.5rem;color:rgba(255,255,255,.72);font-family:var(--sans);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:all .22s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent;min-height:38px;backdrop-filter:blur(8px)}
.stock-vtoggle-btn.on{background:rgba(212,184,105,.2);border-color:var(--stk-border-hi);color:var(--stk-gold);box-shadow:0 4px 12px rgba(212,184,105,.15)}
.stock-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative}
#stockMap{flex:0 0 55%;background:#0a0612;position:relative;overflow:hidden}
#stockMap .stock-map-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(212,184,105,.65);font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;font-family:var(--sans);pointer-events:none;z-index:2}
/* Skeleton placeholder for map */
#stockMap.skeleton{background:linear-gradient(90deg,#0a0612 0%,#1a1028 50%,#0a0612 100%);background-size:200% 100%;animation:stockShimmer 1.4s ease-in-out infinite}
@keyframes stockShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Metric pills (glass badges) */
.stock-stats{flex:0 0 auto;display:flex;gap:.4rem;flex-wrap:wrap;padding:.55rem .85rem;border-bottom:1px solid var(--stk-border);background:var(--stk-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.stk-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .65rem;background:rgba(255,255,255,.05);border:1px solid var(--stk-border);border-radius:2rem;color:rgba(255,255,255,.78);font-family:var(--sans);font-size:.66rem;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums;backdrop-filter:blur(6px);transition:all .2s ease;cursor:default}
.stk-pill:hover{background:rgba(212,184,105,.09);color:#fff;border-color:rgba(212,184,105,.28)}
.stk-pill b{color:var(--stk-gold);font-weight:700}
.stk-pill-ico{opacity:.85;font-size:.72rem}
.stock-toolbar{flex:0 0 auto;display:flex;gap:.4rem;padding:.55rem .7rem;border-bottom:1px solid var(--stk-border);background:var(--stk-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow-x:auto;scrollbar-width:none}
.stock-toolbar::-webkit-scrollbar{display:none}
.stock-tb-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .7rem;background:rgba(255,255,255,.05);border:1px solid var(--stk-border);border-radius:2rem;color:rgba(255,255,255,.82);font-family:var(--sans);font-size:.68rem;letter-spacing:.03em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:all .22s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent;min-height:36px;backdrop-filter:blur(6px)}
.stock-tb-btn.active,.stock-tb-btn:hover{background:rgba(212,184,105,.16);border-color:var(--stk-border-hi);color:var(--stk-gold)}
.stock-list{flex:1;min-height:0;overflow-y:auto;padding:.7rem .75rem 4rem;background:transparent;scroll-behavior:smooth}
/* Cards: staggered entrance + glass hover */
@keyframes stkCardEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.stock-list-item{display:flex;gap:.7rem;padding:.85rem .9rem;margin-bottom:.55rem;background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid var(--stk-border);border-radius:.85rem;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .22s ease,background .22s ease;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 2px 8px rgba(0,0,0,.2);animation:stkCardEnter .38s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 40ms);position:relative;overflow:hidden}
.stock-list-item::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,184,105,.25),transparent);opacity:0;transition:opacity .3s ease}
.stock-list-item:hover,.stock-list-item.focused,.stock-list-item:focus-visible{border-color:var(--stk-border-hi);transform:translateY(-2px);box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(212,184,105,.15)}
.stock-list-item:hover::before,.stock-list-item.focused::before{opacity:1}
.stock-list-item.focused{background:linear-gradient(135deg,rgba(212,184,105,.09),rgba(212,184,105,.03))}
.stock-list-item:focus-visible{outline:2px solid rgba(212,184,105,.6);outline-offset:3px}
.stock-item-thumb{flex:0 0 60px;width:60px;height:60px;border-radius:.5rem;background:linear-gradient(135deg,rgba(10,37,64,.7),rgba(212,184,105,.14));border:1px solid rgba(212,184,105,.2);display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:rgba(212,184,105,.7);position:relative}
/* P1-6+P2-11 fix 2026-07-26: badge numérico qty sobre thumb, prefijo suc- para evitar colisión con selectores stock-* */
.suc-qty-badge{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);min-width:44px;padding:2px 6px;border-radius:10px;font-family:var(--sans);font-size:.6rem;font-weight:700;line-height:1.2;text-align:center;white-space:nowrap;color:#fff;border:2px solid #04090f;box-shadow:0 2px 6px rgba(0,0,0,.5);letter-spacing:.02em}
.suc-qty-ok{background:#22c55e}
.suc-qty-low{background:#f59e0b;color:#0a0a0a}
.suc-qty-crit{background:#ef4444}
.suc-qty-zero{background:#6b7280;text-decoration:line-through;opacity:.85}
.stock-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4rem}
.stock-item-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.stock-item-name{font-family:var(--serif);font-size:.88rem;color:#fff;font-weight:500;line-height:1.15;flex:1;min-width:0}
.stock-item-dist{font-size:.66rem;color:rgba(212,184,105,.75);font-family:var(--sans);letter-spacing:.03em;white-space:nowrap;flex-shrink:0}
.stock-item-dist.est{color:rgba(255,255,255,.4);font-style:italic}
.stock-item-addr{font-size:.7rem;color:rgba(255,255,255,.55);line-height:1.3}
.stock-badge-row{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.stock-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .55rem;border-radius:.4rem;font-family:var(--sans);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;line-height:1;width:fit-content}
.stock-badge.out{background:rgba(220,53,69,.14);color:#ff8092;border:1px solid rgba(220,53,69,.35)}
.stock-badge.low{background:rgba(255,140,66,.14);color:#ffb47d;border:1px solid rgba(255,140,66,.4)}
.stock-badge.limited{background:rgba(255,204,66,.13);color:#f0d68a;border:1px solid rgba(255,204,66,.35)}
.stock-badge.ok{background:rgba(76,175,80,.13);color:#8ddb90;border:1px solid rgba(76,175,80,.4)}
.stock-badge.open{background:rgba(76,175,80,.11);color:#8ddb90;border:1px solid rgba(76,175,80,.32)}
.stock-badge.warn{background:rgba(255,149,0,.13);color:#ffb85c;border:1px solid rgba(255,149,0,.36);animation:stockWarnPulse 2.4s ease-in-out infinite}
.stock-badge.closed{background:rgba(255,255,255,.05);color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.18)}
.stock-badge.rating{background:rgba(212,184,105,.13);color:#e6cd80;border:1px solid rgba(212,184,105,.32);letter-spacing:.02em;font-weight:600}
.stock-fav-btn{background:transparent;border:0;color:rgba(255,255,255,.32);font-size:1.15rem;cursor:pointer;padding:.2rem .4rem;margin-left:auto;transition:color .18s,transform .18s;line-height:1;min-height:32px;min-width:32px}
.stock-fav-btn:hover{color:rgba(212,184,105,.7);transform:scale(1.1)}
.stock-fav-btn.active{color:#e6cd80;text-shadow:0 0 8px rgba(212,184,105,.5);animation:stockFavPop .3s cubic-bezier(.34,1.56,.64,1)}
.stock-dir-sheet{position:fixed;inset:0;z-index:10050;display:none;align-items:flex-end;justify-content:center;pointer-events:none}
.stock-dir-sheet.active{display:flex;pointer-events:auto}
.stock-dir-sheet .sds-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.stock-dir-sheet .sds-panel{position:relative;background:rgba(20,15,25,.96);backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,.1);border-radius:22px 22px 0 0;padding:1.3rem 1rem calc(1rem + env(safe-area-inset-bottom,0));width:100%;max-width:420px;color:#fff;box-shadow:0 -20px 60px rgba(0,0,0,.5);animation:sdsSlideUp .4s cubic-bezier(.32,.72,0,1)}
@media(min-width:640px){.stock-dir-sheet{align-items:center}.stock-dir-sheet .sds-panel{border-radius:22px;max-width:380px}}
.sds-title{font-size:.95rem;font-weight:600;margin-bottom:.85rem;text-align:center;color:rgba(255,255,255,.9)}
.sds-sub{font-size:.85rem;color:rgba(212,184,105,.85);text-align:center;margin:-.4rem 0 1rem}
.sds-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.85rem 1rem;margin:.32rem 0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;color:#fff;font-size:.92rem;font-weight:500;cursor:pointer;transition:background .18s,transform .12s;min-height:48px}
.sds-btn:hover{background:rgba(255,255,255,.1)}
.sds-btn:active{transform:scale(.98)}
.sds-qr-wrap{display:flex;justify-content:center;padding:.6rem 0}
.sds-qr-wrap img{border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.sds-hint{font-size:.75rem;color:rgba(255,255,255,.55);text-align:center;margin:.5rem 0 .85rem}
@keyframes sdsSlideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.stock-dir-sheet .sds-panel{animation:none}}
@keyframes stockFavPop{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.stock-fav-btn,.stock-fav-btn.active{animation:none;transition:none}}
@keyframes stockWarnPulse{0%,100%{opacity:1}50%{opacity:.75}}
@media(prefers-reduced-motion:reduce){.stock-badge.warn{animation:none}}
.stock-badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.stock-second-check{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .55rem;background:rgba(94,106,210,.14);border:1px solid rgba(94,106,210,.4);border-radius:.4rem;color:#a8b1ee;font-family:var(--sans);font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:all .16s ease;-webkit-tap-highlight-color:transparent}
.stock-second-check:hover{background:rgba(94,106,210,.24);color:#c4ccff}
.stock-item-actions{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.15rem}
.stock-item-btn{flex:1;min-width:80px;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;padding:.5rem .5rem;background:rgba(212,184,105,.09);border:1px solid rgba(212,184,105,.25);border-radius:.5rem;color:rgba(212,184,105,.9);font-family:var(--sans);font-size:.64rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:all .18s ease;-webkit-tap-highlight-color:transparent;min-height:38px}
.stock-item-btn:hover{background:rgba(212,184,105,.18);color:var(--gold)}
.stock-item-btn:active{transform:scale(.98)}
.stock-item-btn.wa{background:rgba(37,211,102,.1);border-color:rgba(37,211,102,.35);color:#7de3a0}
.stock-item-btn.wa:hover{background:rgba(37,211,102,.2);color:#a5f0bf}
.stock-item-btn.share{flex:0 0 42px;min-width:0;padding:.5rem}
.stock-hours{font-size:.62rem;color:rgba(255,255,255,.42);font-family:var(--sans);letter-spacing:.02em;line-height:1.4}
.stock-footer-legal{position:absolute;left:0;right:0;bottom:0;padding:.5rem .8rem;font-size:.6rem;color:rgba(255,255,255,.35);text-align:center;background:linear-gradient(180deg,transparent,rgba(4,9,15,.95));font-family:var(--sans);letter-spacing:.03em;pointer-events:none}
/* Skeleton cards */
.stock-skel{display:flex;gap:.65rem;padding:.75rem .85rem;margin-bottom:.5rem;background:rgba(255,255,255,.02);border:1px solid rgba(212,184,105,.1);border-radius:.7rem}
.stock-skel-thumb,.stock-skel-line{background:linear-gradient(90deg,rgba(212,184,105,.06) 0%,rgba(212,184,105,.15) 50%,rgba(212,184,105,.06) 100%);background-size:200% 100%;animation:stockShimmer 1.4s ease-in-out infinite;border-radius:.35rem}
.stock-skel-thumb{flex:0 0 60px;width:60px;height:60px;border-radius:.5rem}
.stock-skel-body{flex:1;display:flex;flex-direction:column;gap:.45rem}
.stock-skel-line{height:.7rem}
.stock-skel-line.short{width:60%}
.stock-skel-line.medium{width:85%}
/* Empty state */
.stock-empty{padding:2rem 1rem;text-align:center;color:rgba(255,255,255,.55);font-family:var(--sans)}
.stock-empty-ico{font-size:2.2rem;opacity:.5;margin-bottom:.5rem}
.stock-empty-msg{font-size:.78rem;margin-bottom:.85rem}
.stock-empty-cta{padding:.5rem .95rem;background:rgba(212,184,105,.14);border:1px solid rgba(212,184,105,.4);border-radius:.4rem;color:var(--gold);font-family:var(--sans);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:all .16s ease}
.stock-empty-cta:hover{background:rgba(212,184,105,.24)}
.leaflet-container{background:#0a0612!important;font-family:var(--sans)!important}
.leaflet-popup-content-wrapper{background:rgba(15,10,25,.85)!important;color:#fff!important;border:1px solid var(--stk-border-hi)!important;border-radius:.7rem!important;box-shadow:0 20px 60px rgba(0,0,0,.65),0 0 0 1px rgba(212,184,105,.12)!important;backdrop-filter:blur(20px) saturate(160%)!important;-webkit-backdrop-filter:blur(20px) saturate(160%)!important}
.leaflet-popup-tip{background:rgba(15,10,25,.85)!important;border:1px solid var(--stk-border-hi)!important;backdrop-filter:blur(20px)!important}
.leaflet-popup-close-button{color:rgba(212,184,105,.9)!important}
.leaflet-popup-content{margin:.7rem .9rem!important;font-size:.75rem!important;line-height:1.45!important}
.leaflet-popup-content b{color:var(--stk-gold)}
.leaflet-popup-content .stock-pop-actions{display:flex;gap:.35rem;margin-top:.55rem;flex-wrap:wrap}
.leaflet-popup-content .stock-pop-actions button{flex:1;min-width:70px;padding:.4rem .55rem;background:rgba(212,184,105,.15);border:1px solid rgba(212,184,105,.32);border-radius:.4rem;color:rgba(212,184,105,.95);font-size:.65rem;font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:all .18s ease}
.leaflet-popup-content .stock-pop-actions button:hover{background:rgba(212,184,105,.24);color:var(--stk-gold)}
.leaflet-popup-content .stock-pop-actions button.wa{background:rgba(37,211,102,.16);border-color:rgba(37,211,102,.42);color:#7de3a0}
/* Wine-tinted Leaflet tiles */
#stockMap .leaflet-tile{filter:brightness(.98) saturate(1.08) contrast(1.04)}
#stockMap.theme-dark .leaflet-tile{filter:brightness(.55) hue-rotate(-18deg) saturate(1.35) contrast(1.12)}
/* Apple-Maps style tiles: beige + soft blue water */
#stockMap.theme-apple .leaflet-tile{filter:hue-rotate(-8deg) saturate(.85) brightness(1.05) contrast(.96)}
/* v2 Apple refactor — motion tokens */
:root{--stk-ease-apple:cubic-bezier(.32,.72,0,1);--stk-ease-mat:cubic-bezier(.4,0,.2,1);--stk-ease-spring:cubic-bezier(.34,1.56,.64,1)}
/* Follow-mode toggle button — states */
.stock-tb-btn[data-follow-state="following"]{background:linear-gradient(135deg,rgba(76,175,80,.28),rgba(76,175,80,.12));border-color:rgba(76,175,80,.55);color:#a4e5a8;box-shadow:0 0 0 1px rgba(76,175,80,.25),0 4px 14px rgba(76,175,80,.22);font-weight:600}
.stock-tb-btn[data-follow-state="recenter"]{background:linear-gradient(135deg,rgba(66,133,244,.28),rgba(66,133,244,.12));border-color:rgba(66,133,244,.55);color:#a3c4ff;box-shadow:0 0 0 1px rgba(66,133,244,.25),0 4px 14px rgba(66,133,244,.22);font-weight:600}
/* Recenter FAB (Apple Maps pattern) */
.stock-recenter-fab{position:absolute;top:14px;right:14px;z-index:410;width:48px;height:48px;border-radius:50%;background:rgba(15,10,25,.72);border:1px solid var(--stk-border-hi);color:var(--stk-gold);display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(212,184,105,.14);transition:transform .28s var(--stk-ease-apple),background .22s ease,opacity .28s ease;-webkit-tap-highlight-color:transparent}
.stock-recenter-fab:hover{background:rgba(212,184,105,.22);transform:scale(1.05)}
.stock-recenter-fab:active{transform:scale(.94)}
.stock-recenter-fab[hidden]{display:none!important}
/* Follow-mode active indicator dot */
.stock-follow-indicator{position:absolute;top:18px;left:18px;z-index:410;pointer-events:none;display:flex;align-items:center;gap:.4rem;padding:.32rem .6rem;background:rgba(15,10,25,.7);border:1px solid rgba(66,133,244,.5);border-radius:2rem;backdrop-filter:blur(16px);color:#a3c4ff;font-family:var(--sans);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.stock-follow-indicator[hidden]{display:none!important}
.stock-follow-indicator .dot{width:8px;height:8px;border-radius:50%;background:#4285F4;box-shadow:0 0 8px #4285F4;animation:stkFollowPulse 1.8s ease-in-out infinite}
@keyframes stkFollowPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.35)}}
/* Mobile bottom-sheet handle + snap points */
.stock-sheet-handle{display:none;position:absolute;left:0;right:0;top:-14px;height:22px;margin:0;padding:0;background:transparent;border:0;cursor:grab;z-index:12;-webkit-tap-highlight-color:transparent;touch-action:none}
.stock-sheet-handle:active{cursor:grabbing}
.stock-sheet-handle .grabber{display:block;width:40px;height:5px;margin:8px auto 0;background:rgba(255,255,255,.28);border-radius:3px;transition:background .2s ease}
.stock-sheet-handle:hover .grabber,.stock-sheet-handle:active .grabber{background:rgba(212,184,105,.55)}
/* Apple-style GPS onboarding toast */
.stock-gps-toast{position:absolute;left:50%;bottom:32px;transform:translateX(-50%) translateY(24px);z-index:9990;width:min(360px,calc(100% - 32px));opacity:0;pointer-events:none;transition:opacity .3s var(--stk-ease-apple),transform .3s var(--stk-ease-apple)}
.stock-gps-toast[hidden]{display:none}
.stock-gps-toast.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.stock-gps-toast-inner{display:flex;gap:.75rem;padding:1rem 1.1rem;background:rgba(20,14,32,.92);border:1px solid var(--stk-border-hi);border-radius:16px;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:0 24px 72px rgba(0,0,0,.65),0 0 0 1px rgba(212,184,105,.14)}
.stock-gps-toast-ico{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,rgba(66,133,244,.35),rgba(66,133,244,.12));display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.stock-gps-toast-body{flex:1;min-width:0}
.stock-gps-toast-title{font-family:var(--serif);font-size:.9rem;color:#fff;font-weight:600;line-height:1.2}
.stock-gps-toast-msg{margin-top:.35rem;font-size:.72rem;color:rgba(255,255,255,.72);line-height:1.4}
.stock-gps-toast-actions{display:flex;gap:.5rem;margin-top:.7rem;justify-content:flex-end}
.stock-gps-toast-btn{padding:.5rem .95rem;border-radius:.55rem;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:all .2s var(--stk-ease-apple);-webkit-tap-highlight-color:transparent;min-height:36px}
.stock-gps-toast-btn.ghost{background:rgba(255,255,255,.05);border:1px solid var(--stk-border);color:rgba(255,255,255,.75)}
.stock-gps-toast-btn.ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.stock-gps-toast-btn.primary{background:linear-gradient(135deg,rgba(66,133,244,.9),rgba(66,133,244,.7));border:1px solid rgba(66,133,244,.5);color:#fff;box-shadow:0 4px 14px rgba(66,133,244,.35)}
.stock-gps-toast-btn.primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(66,133,244,.5)}
.stock-gps-toast-btn.primary:active{transform:scale(.97)}
/* Custom Leaflet zoom controls — glass skin */
.leaflet-control-zoom{border:0!important;box-shadow:none!important;border-radius:.55rem!important;overflow:hidden;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.leaflet-control-zoom a{background:rgba(15,10,25,.7)!important;color:rgba(212,184,105,.9)!important;border:1px solid var(--stk-border)!important;width:32px!important;height:32px!important;line-height:30px!important;font-size:1rem!important;font-weight:600!important;transition:all .2s ease!important}
.leaflet-control-zoom a:hover{background:rgba(212,184,105,.18)!important;color:var(--stk-gold)!important;transform:scale(.96)}
.leaflet-control-zoom a:first-child{border-radius:.55rem .55rem 0 0!important}
.leaflet-control-zoom a:last-child{border-radius:0 0 .55rem .55rem!important;border-top:0!important}
.leaflet-control-attribution{background:rgba(15,10,25,.55)!important;color:rgba(255,255,255,.55)!important;font-size:.55rem!important;padding:.15rem .5rem!important;border-radius:.3rem 0 0 0!important;backdrop-filter:blur(8px)!important}
.leaflet-control-attribution a{color:rgba(212,184,105,.7)!important}
/* Cluster markers (custom, no plugin) */
.stock-cluster{width:52px;height:52px;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.stock-cluster:hover{transform:scale(1.08)}
.stock-cluster-circle{position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle,rgba(212,184,105,.95) 0%,rgba(180,140,60,.85) 100%);border:2px solid rgba(255,255,255,.9);box-shadow:0 6px 18px rgba(212,184,105,.5),0 0 0 8px rgba(212,184,105,.14),0 0 0 16px rgba(212,184,105,.07);display:flex;align-items:center;justify-content:center;color:#0a0612;font-family:var(--sans);font-weight:700;font-size:.85rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stock-cluster-label{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;padding:.15rem .5rem;background:rgba(15,10,25,.85);border:1px solid var(--stk-border-hi);border-radius:.3rem;color:#fff;font-family:var(--sans);font-size:.6rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;backdrop-filter:blur(12px);box-shadow:0 4px 12px rgba(0,0,0,.4)}
.stock-cluster.region-costa .stock-cluster-circle{background:radial-gradient(circle,rgba(94,180,220,.95) 0%,rgba(60,130,180,.85) 100%);color:#0a1a25;box-shadow:0 6px 18px rgba(94,180,220,.5),0 0 0 8px rgba(94,180,220,.14),0 0 0 16px rgba(94,180,220,.07)}
.stock-cluster.region-ribera .stock-cluster-circle{background:radial-gradient(circle,rgba(140,200,140,.95) 0%,rgba(90,160,90,.85) 100%);color:#0a1e0a;box-shadow:0 6px 18px rgba(140,200,140,.5),0 0 0 8px rgba(140,200,140,.14),0 0 0 16px rgba(140,200,140,.07)}
/* Hover preview popup (desktop) */
.stock-hover-preview{position:absolute;z-index:400;pointer-events:none;min-width:200px;max-width:260px;padding:.7rem .85rem;background:rgba(15,10,25,.9);border:1px solid var(--stk-border-hi);border-radius:.65rem;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(212,184,105,.12);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);color:#fff;font-family:var(--sans);font-size:.72rem;opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
.stock-hover-preview.on{opacity:1;transform:translateY(0)}
.stock-hover-preview .h-name{font-family:var(--serif);font-size:.85rem;color:#fff;font-weight:600;margin-bottom:.2rem;line-height:1.15}
.stock-hover-preview .h-meta{color:rgba(212,184,105,.85);font-size:.65rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.35rem}
.stock-hover-preview .h-cta{display:inline-block;margin-top:.35rem;padding:.28rem .55rem;background:rgba(212,184,105,.18);border:1px solid var(--stk-border-hi);border-radius:.3rem;color:var(--stk-gold);font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.stock-pin{width:26px;height:34px;position:relative;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55));transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease}
.stock-pin svg{width:100%;height:100%;display:block}
/* Pin hierarchy: flagship (gold ring) — larger, prominent */
.stock-marker-flagship .stock-pin{width:32px;height:42px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(212,184,105,.55))}
.stock-marker-flagship .stock-pin::before{content:"";position:absolute;inset:-4px -4px auto -4px;height:calc(100% + 4px);border-radius:50% 50% 0 0/60% 60% 0 0;border:2px solid var(--stk-gold);border-bottom:0;opacity:.7;pointer-events:none;box-shadow:0 0 12px rgba(212,184,105,.45)}
.stock-pin:hover{transform:translateY(-4px);filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(212,184,105,.5))}
.stock-marker-out    .stock-pin svg path:first-child{fill:#dc3545}
.stock-marker-low    .stock-pin svg path:first-child{fill:#ff8c42}
.stock-marker-limited .stock-pin svg path:first-child{fill:#ffcc42}
.stock-marker-ok     .stock-pin svg path:first-child{fill:#4caf50}
.stock-marker-bounce .stock-pin{animation:stockBounce .6s ease-in-out 3}
@keyframes stockBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (min-width:820px){
  .stock-body{flex-direction:row}
  #stockMap{flex:0 0 60%;height:auto}
  .stock-right{flex:1;display:flex;flex-direction:column;border-left:1px solid rgba(212,184,105,.18)}
  .stock-toolbar{border-bottom:1px solid rgba(212,184,105,.12);border-right:none}
  .stock-list{padding:.7rem .85rem 2rem}
}
@media (max-width:819px){
  /* Bottom-sheet layout: mapa fullscreen abajo, sheet arrastrable arriba con 3 snap points */
  .stock-vtoggle{display:none}
  .stock-body{display:block;position:relative;height:100%}
  #stockMap{display:block!important;position:absolute!important;inset:0;height:100%!important;width:100%!important;flex:none!important;z-index:1}
  .stock-right{position:absolute!important;left:0;right:0;bottom:0;display:flex!important;flex-direction:column;flex:none!important;z-index:10;background:var(--stk-glass-strong);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-top:1px solid var(--stk-border-hi);border-radius:22px 22px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.5),0 -1px 0 rgba(212,184,105,.14) inset;height:var(--sheet-h,55%);max-height:95vh;min-height:56px;transition:height .4s var(--stk-ease-apple);will-change:height;touch-action:pan-y;overflow:hidden}
  .stock-right.sheet-dragging{transition:none}
  .stock-right.sheet-peek{height:14vh}
  .stock-right.sheet-mid{height:55vh}
  .stock-right.sheet-full{height:95vh}
  .stock-sheet-handle{display:block}
  /* Recenter FAB posición sobre sheet peek */
  .stock-recenter-fab{top:auto;bottom:calc(var(--sheet-h,55%) + 14px);right:14px;transition:bottom .4s var(--stk-ease-apple),transform .28s var(--stk-ease-apple)}
  /* Backward-compat clases legacy view-map/view-list — deshabilitadas: siempre bottom sheet */
  #stockOverlay.view-map .stock-right,#stockOverlay.view-list .stock-right{display:flex!important}
  #stockOverlay.view-map #stockMap,#stockOverlay.view-list #stockMap{display:block!important}
}
@media (prefers-reduced-motion:reduce){
  .stock-right,.stock-recenter-fab,.stock-gps-toast,.stock-follow-indicator .dot{transition:none!important;animation:none!important}
}
/* ── v-enrich Pokémon-GO map + product selector ─────────────────────
   User marker (blue dot + accuracy circle + pulse + directional arrow) */
.stock-user-marker{--user-heading:0deg;position:relative;width:28px;height:28px;pointer-events:none}
.stock-user-dot{position:absolute;inset:8px;background:#4285F4;border:2px solid #fff;border-radius:50%;box-shadow:0 0 8px rgba(66,133,244,.7),0 2px 6px rgba(0,0,0,.4);z-index:3}
.stock-user-pulse{position:absolute;inset:0;border-radius:50%;background:rgba(66,133,244,.35);animation:stockUserPulse 2s ease-out infinite;z-index:1}
.stock-user-pulse.delay{animation-delay:1s}
@keyframes stockUserPulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.stock-user-arrow{position:absolute;left:50%;top:-4px;width:0;height:0;border:6px solid transparent;border-bottom:10px solid #4285F4;transform:translateX(-50%) rotate(var(--user-heading));transform-origin:50% 18px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));z-index:4;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.stock-accuracy-circle{stroke:#4285F4;stroke-width:1;fill:#4285F4;fill-opacity:.10}
/* Poképin pulse ring (only when qty > 10 with product active) */
.stock-marker-abundant .stock-pin::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid currentColor;color:#4caf50;opacity:.55;animation:stockPinPulse 1.8s ease-out infinite;pointer-events:none}
.stock-marker-abundant .stock-pin::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid currentColor;color:#4caf50;opacity:.55;animation:stockPinPulse 1.8s ease-out infinite .9s;pointer-events:none}
@keyframes stockPinPulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2);opacity:0}}
.stock-marker-proximity .stock-pin{filter:drop-shadow(0 0 8px #d4b869) drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.stock-pin:hover{transform:translateY(-3px)}
/* Live stock badge sobre pin (aparece con producto seleccionado) */
.stock-pin-badge{position:absolute;top:-8px;right:-10px;min-width:22px;height:20px;padding:0 5px;background:#4caf50;color:#fff;border:2px solid #04090f;border-radius:11px;font-family:var(--sans);font-size:.62rem;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,.5);z-index:2}
.stock-pin-badge.low{background:#ff8c42}
.stock-pin-badge.out{background:#dc3545;text-decoration:line-through;opacity:.75}
/* Product picker */
.stock-product-picker{position:relative}
.stock-picker-list{position:absolute;top:calc(100% + .3rem);left:0;right:0;max-height:240px;overflow-y:auto;background:rgba(10,20,30,.98);border:1px solid rgba(212,184,105,.35);border-radius:.5rem;box-shadow:0 8px 24px rgba(0,0,0,.6);z-index:20;display:none}
.stock-picker-list.open{display:block}
.stock-picker-item{display:flex;gap:.55rem;align-items:center;padding:.5rem .7rem;cursor:pointer;border-bottom:1px solid rgba(212,184,105,.08);color:#fff;font-family:var(--sans);font-size:.75rem;transition:background .12s ease}
.stock-picker-item:hover,.stock-picker-item.hl{background:rgba(212,184,105,.14)}
.stock-picker-thumb{flex:0 0 34px;width:34px;height:34px;border-radius:.35rem;background:rgba(212,184,105,.1);object-fit:cover}
.stock-picker-meta{flex:1;min-width:0}
.stock-picker-name{color:#fff;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stock-picker-cat{color:rgba(212,184,105,.7);font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;margin-top:.15rem}
.stock-picker-empty{padding:1rem;color:rgba(255,255,255,.5);font-size:.72rem;text-align:center}
.stock-picker-chip{display:none;align-items:center;gap:.35rem;padding:.32rem .55rem .32rem .7rem;background:rgba(94,106,210,.16);border:1px solid rgba(94,106,210,.45);border-radius:2rem;color:#c4ccff;font-family:var(--sans);font-size:.68rem;letter-spacing:.02em;font-weight:600;max-width:100%;overflow:hidden}
.stock-picker-chip.on{display:inline-flex}
.stock-picker-chip .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:14rem}
.stock-picker-chip button{background:transparent;border:0;color:currentColor;cursor:pointer;font-size:.9rem;line-height:1;padding:0 .1rem;-webkit-tap-highlight-color:transparent}
/* GPS + theme toggles en toolbar */
.stock-tb-btn.geo-on{background:rgba(66,133,244,.18);border-color:rgba(66,133,244,.5);color:#8ab4f8}
.stock-tb-btn.geo-on:hover{background:rgba(66,133,244,.28)}
/* Route panel flotante inferior */
.stock-route-panel{position:absolute;left:.65rem;right:.65rem;bottom:.65rem;padding:.65rem .8rem;background:linear-gradient(180deg,rgba(10,37,64,.96),rgba(4,9,15,.94));border:1px solid rgba(94,106,210,.45);border-radius:.6rem;box-shadow:0 6px 20px rgba(0,0,0,.55);color:#fff;font-family:var(--sans);display:none;align-items:center;gap:.7rem;z-index:5;backdrop-filter:blur(8px)}
.stock-route-panel.on{display:flex}
.stock-route-text{flex:1;min-width:0;font-size:.72rem;line-height:1.3;color:#e8ecff}
.stock-route-cta{flex-shrink:0;padding:.45rem .8rem;background:#5E6AD2;border:0;border-radius:.4rem;color:#fff;font-family:var(--sans);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
.stock-route-cta:hover{background:#7883e6}
.stock-route-line{stroke:#5E6AD2;stroke-width:3;stroke-dasharray:8,10;fill:none;filter:drop-shadow(0 0 4px rgba(94,106,210,.6));animation:stockDash 1s linear infinite}
@keyframes stockDash{to{stroke-dashoffset:-18}}
/* A11y live region visually hidden */
.stock-sr-live{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (prefers-reduced-motion:reduce){
  #stockOverlay,.stock-list-item,.stock-pin,.stock-marker-bounce .stock-pin,.stock-region-tab,.stock-region-tab.on::after,.stock-hover-preview,.stock-cluster{transition:none!important;transform:none!important;animation:none!important}
  #stockMap.skeleton,.stock-skel-thumb,.stock-skel-line{animation:none!important;background:rgba(212,184,105,.08)!important}
  .stock-user-pulse,.stock-marker-abundant .stock-pin::before,.stock-marker-abundant .stock-pin::after,.stock-route-line{animation:none!important}
  .stock-user-arrow{transition:none!important}
  #stockOverlay{background:#0a0612}
  #stockOverlay::before{display:none}
}
