/* ═══════════════════════════════════════════════
   SIDEBAR v3 — Premium Redesign (Card + Pill System)
   Inspiration: Stripe / Linear / Notion / Airbnb
   ═══════════════════════════════════════════════ */

/* ── CONTAINER ── */
#sidebar{width:272px;flex-shrink:0;background:var(--white);
  border-right:1px solid rgba(0,0,0,.04);overflow-y:auto;
  display:flex;flex-direction:column;z-index:500;
  transition:transform .3s cubic-bezier(.2,0,0,1)}
#sidebar.closed{transform:translateX(-100%);position:absolute;top:0;height:100%;z-index:800}
#sidebar.mob-open{transform:translateX(0)!important}
#sidebar::-webkit-scrollbar{width:3px}
#sidebar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.08);border-radius:3px}
#sidebar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.15)}

/* ── CARD SYSTEM ── */
.sb-card{border-bottom:1px solid rgba(0,0,0,.04)}
.sb-card:last-child{border-bottom:none}
.sb-card-inner{padding:16px 18px}
.sb-card-title{font-size:13px;font-weight:700;color:var(--navy);letter-spacing:.04em}
.sb-card-sub{font-size:11px;color:var(--mid);margin-top:2px;font-weight:500}
.sb-lbl{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);margin-bottom:10px}

/* ── STATS ── */
.stats{display:flex;gap:6px;padding:14px 18px}
.stat{flex:1;background:var(--smoke);border-radius:10px;padding:10px 4px;text-align:center;
  transition:transform .2s ease,box-shadow .2s}
.stat:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(11,31,56,.06)}
.stat-v{font-size:15px;font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.02em}
.stat-l{font-size:11px;color:var(--mid);margin-top:4px;font-weight:500;letter-spacing:.02em}

/* ── SELECTS ── */
.sel{width:100%;padding:7px 10px;border-radius:8px;border:1.5px solid var(--border);
  background:var(--color-white);color:var(--navy);font-size:12px;font-family:'DM Sans',sans-serif;
  cursor:pointer;outline:none;transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
.sel:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.08)}

/* ── TAG BUTTONS ── */
.t-list{display:flex;flex-direction:column;gap:4px}
.tbtn{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:8px;
  border:1.5px solid var(--border);background:var(--color-white);cursor:pointer;font-size:13px;
  font-family:'DM Sans',sans-serif;color:var(--gray);transition:all .15s cubic-bezier(.4,0,.2,1);text-align:left}
.tbtn:hover{background:var(--smoke);transform:translateX(2px)}
.tbtn:hover img.sb-cat-ico{transform:scale(1.35);filter:drop-shadow(0 2px 6px rgba(0,0,0,.2))}
.tbtn.on{font-weight:600;background:var(--smoke)}
.tbtn img{transition:transform .25s cubic-bezier(.34,1.56,.64,1),filter .2s ease}
.tdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tcnt{margin-left:auto;font-size:11px;color:var(--mid);font-weight:400}

/* ── SLIDERS ── */
.sl-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.sl-lbl{font-size:12px;color:var(--gray);font-weight:500}
.sl-val{font-size:12px;font-weight:700;color:var(--teal)}
input[type=range]{width:100%;accent-color:var(--teal);cursor:pointer;height:4px}

/* ── TOGGLES ── */
.tog-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0}
.tog-lbl{font-size:13px;color:var(--gray);font-weight:500}
.tog{position:relative;width:36px;height:20px}
.tog input{opacity:0;width:0;height:0}
.tog-sl{position:absolute;inset:0;background:var(--border);border-radius:20px;cursor:pointer;transition:.2s}
.tog-sl:before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:var(--color-white);border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.tog input:checked+.tog-sl{background:var(--teal)}
.tog input:checked+.tog-sl:before{transform:translateX(16px)}

/* ── RESET BUTTON ── */
.btn-rst{width:100%;padding:9px;border-radius:8px;border:1.5px solid var(--border);
  background:var(--color-white);color:var(--gray);font-size:13px;font-weight:600;font-family:'DM Sans',sans-serif;
  cursor:pointer;transition:all .2s}
.btn-rst:hover{border-color:var(--navy);color:var(--navy);background:var(--smoke)}

/* ── GEOLOCATION ── */
.sb-geo-active{background:var(--color-success-bg);border-radius:10px;padding:10px 12px;margin-top:8px;border:1px solid var(--color-success-light)}
.sb-geo-active .sb-geo-label{font-size:11px;color:#065F46;font-weight:600}
.sb-geo-active .sb-geo-dist{font-size:11px;color:var(--mid);margin-top:2px}
.sb-geo-clear{background:none;border:none;color:var(--red);font-size:11px;cursor:pointer;text-decoration:underline;margin-top:4px}

/* ═══════════════════════════════════════
   BOLAS HERO — Dark premium header
   ═══════════════════════════════════════ */
.bolas-hero{
  background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-mid) 60%,var(--color-primary-panel-2) 100%);
  padding:18px 18px 16px;
  border-bottom:2px solid var(--teal);
}
.bolas-hero-header{margin-bottom:12px}
.bolas-hero-title{
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-white);display:flex;align-items:center;gap:8px;
}
.bolas-hero-title::before{
  content:'';display:inline-block;width:18px;height:18px;
  background:var(--teal);border-radius:50%;
  box-shadow:0 0 16px rgba(13,148,136,.5);flex-shrink:0;
}
.bolas-hero-sub{
  font-size:11px;color:rgba(255,255,255,.4);margin-top:3px;
  font-weight:500;letter-spacing:.04em;
}
.bolas-list .tbtn{
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.7);padding:10px 12px;border-radius:10px;gap:12px;
}
.bolas-list .tbtn:hover{
  background:rgba(255,255,255,.1);transform:translateX(3px);
  border-color:rgba(255,255,255,.18);color:var(--color-white);
}
.bolas-list .tbtn:hover img{transform:scale(1.4)!important;filter:drop-shadow(0 3px 8px rgba(255,255,255,.3))}
.bolas-list .tbtn.on{
  background:rgba(13,148,136,.2);border-color:var(--teal);
  color:var(--color-white);font-weight:700;box-shadow:0 2px 12px rgba(13,148,136,.25);
}
.bolas-list .tcnt{color:rgba(255,255,255,.35);font-size:12px;font-weight:600}
.bolas-list .tbtn.on .tcnt{color:var(--teal)}

/* ═══════════════════════════════════════
   RANKINGS (Gold warm section)
   ═══════════════════════════════════════ */
.rank-sec{padding:14px 18px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--color-warning-bg) 0%,#FFF8E1 100%)}
.rank-title{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--color-gold-dark);margin-bottom:10px}
.rank-item{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;cursor:pointer;transition:color .15s}
.rank-item:hover{color:var(--teal)}
.rank-pos{font-weight:800;color:var(--gold);min-width:18px;text-align:center;font-size:11px}
.rank-name{flex:1;color:var(--navy);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.rank-val{color:var(--mid);font-size:11px;flex-shrink:0}
.rank-tabs{display:flex;gap:0;margin-bottom:8px;border-radius:8px;overflow:hidden;border:1px solid var(--color-warning-border)}
.rank-tab{flex:1;padding:6px;text-align:center;font-size:11px;font-weight:600;cursor:pointer;
  background:transparent;color:var(--color-gold-dark);border:none;font-family:'DM Sans',sans-serif;transition:all .15s}
.rank-tab.active{background:var(--color-gold-dark);color:var(--color-white)}

/* ── Sabores Ranking ── */
.sabor-rank-list{display:flex;flex-direction:column;gap:2px}
.sabor-rank-row{cursor:pointer;padding:6px 4px;border-radius:8px;transition:background .15s}
.sabor-rank-row:hover{background:rgba(146,64,14,.05)}
.sabor-rank-main{display:flex;align-items:center;gap:6px}
.sabor-rank-pos{font-weight:800;min-width:22px;text-align:center;font-size:12px;color:var(--color-gold-dark)}
.sabor-rank-swatch{width:13px;height:13px;border-radius:50%;flex-shrink:0;border:1.5px solid rgba(0,0,0,.08);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.sabor-rank-name{flex:1;font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sabor-rank-votes{font-size:11px;color:var(--mid);flex-shrink:0;font-weight:500}
.sabor-rank-bar{height:3px;border-radius:3px;background:var(--color-neutral-bg);margin:4px 28px 2px;overflow:hidden}
.sabor-rank-bar-fill{height:100%;border-radius:3px;transition:width .6s cubic-bezier(.4,0,.2,1);min-width:3px}
.sabor-rank-expand{max-height:0;overflow:hidden;transition:max-height .3s ease;margin-left:28px}
.sabor-rank-expand.open{max-height:260px}
.sabor-rank-shops{display:flex;flex-direction:column;gap:2px;padding:4px 0 2px}
.sabor-rank-shop{font-size:11px;color:var(--gray);padding:2px 6px;border-radius:4px;cursor:pointer;transition:background .1s}
.sabor-rank-shop:hover{background:var(--color-success-bg);color:var(--teal)}
.sabor-rank-shop em{font-style:normal;color:var(--mid)}
.sabor-rank-more{font-size:11px;color:var(--teal);font-weight:600;padding:2px 6px}
.sabor-rank-viewall{background:none;border:1px solid var(--color-warning-border);border-radius:16px;
  padding:5px 14px;font-size:11px;font-weight:600;color:var(--color-gold-dark);
  font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .15s}
.sabor-rank-viewall:hover{background:var(--color-gold-dark);color:var(--color-white);border-color:var(--color-gold-dark)}

/* ═══════════════════════════════════════
   RANKING CARDS (Sector + Clientes)
   ═══════════════════════════════════════ */
.sb-rank-card{padding:0;overflow:hidden}
.sb-rank-card .sb-card-inner{padding:16px 18px 12px}

/* ── PILL BUTTONS (accordion triggers) ── */
.sb-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:20px;border:none;
  font-size:11px;font-weight:600;font-family:'DM Sans',sans-serif;
  cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);
  margin-top:10px;
}
.sb-pill svg{
  transition:transform .3s cubic-bezier(.2,0,0,1);
  flex-shrink:0;
}
.sb-pill.open svg{transform:rotate(180deg)}

.sb-pill--teal{
  background:rgba(13,148,136,.08);color:var(--teal);
}
.sb-pill--teal:hover{background:rgba(13,148,136,.14)}

.sb-pill--gold{
  background:rgba(217,119,6,.08);color:var(--gold);
}
.sb-pill--gold:hover{background:rgba(217,119,6,.14)}

/* ── ACCORDION (criterios reveal) ── */
.sb-accordion{
  max-height:0;overflow:hidden;
  transition:max-height .35s cubic-bezier(.2,0,0,1);
}
.sb-accordion.open{max-height:280px}

.sb-acc-body{
  padding:12px 0 4px;
}
.sb-criterio{
  font-size:11px;color:var(--gray);padding:3px 0;line-height:1.5;
  display:flex;align-items:center;gap:8px;
}

/* ── COLORED DOTS ── */
.sb-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
}
.sb-dot--teal{background:var(--teal)}
.sb-dot--gold{background:var(--gold)}

/* ── RANKING TABS (inside card) ── */
.sb-rank-tabs{
  display:flex;gap:0;margin:0 18px 8px;border-radius:8px;overflow:hidden;
  border:1.5px solid var(--border);background:var(--smoke);
}
.sb-rank-tab{
  flex:1;padding:6px 4px;text-align:center;font-size:11px;font-weight:600;
  cursor:pointer;background:transparent;color:var(--mid);border:none;
  font-family:'DM Sans',sans-serif;transition:all .15s;
}
.sb-rank-tab.active{background:var(--navy);color:var(--color-white);border-radius:6px;box-shadow:0 1px 4px rgba(11,31,56,.15)}
.sb-rank-tab:hover:not(.active){background:rgba(0,0,0,.03)}

/* ── CITY FILTER ── */
.sb-rank-city-filter{margin:0 18px 8px}
.sb-rank-city-sel{font-size:11px;padding:6px 8px}

/* ── BOLAS FILTER ── */
.sb-bolas-filter{display:flex;gap:6px;align-items:flex-end}
.sb-bola-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px 6px;border-radius:10px;border:1.5px solid var(--border);
  background:var(--color-white);cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;
}
.sb-bola-btn span{font-size:11px;font-weight:700;color:var(--mid);transition:color .2s}
.sb-bola-btn:hover{background:var(--smoke);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.sb-bola-btn.on{border-color:var(--teal);background:rgba(13,148,136,.06);box-shadow:0 2px 10px rgba(13,148,136,.12)}
.sb-bola-btn.on span{color:var(--teal)}

/* ── RANKING LIST ── */
.sb-rank-list{max-height:300px;overflow-y:auto;scrollbar-width:thin;padding:0 10px 10px}
.sb-rank-list::-webkit-scrollbar{width:3px}
.sb-rank-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.08);border-radius:3px}
.sb-rk-item{
  display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:8px;
  cursor:pointer;transition:all .15s;
}
.sb-rk-item:hover{background:var(--smoke);transform:translateX(2px)}
.sb-rk-pos{font-size:11px;font-weight:800;color:var(--mid);min-width:18px;text-align:center}
.sb-rk-pos.gold{color:var(--color-bronze)}
.sb-rk-pos.silver{color:var(--color-text-3)}
.sb-rk-pos.bronze{color:var(--color-gold-dark)}
.sb-rk-emblem{flex-shrink:0}
.sb-rk-info{flex:1;min-width:0}
.sb-rk-name{font-size:11px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-rk-meta{font-size:11px;color:var(--mid);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-rk-score{font-size:11px;font-weight:700;flex-shrink:0;min-width:30px;text-align:right}
.sb-rk-empty{text-align:center;color:var(--mid);font-size:11px;padding:20px 8px;line-height:1.5}
.sb-rk-custom-msg{text-align:center;padding:16px 12px;font-size:11px;color:var(--mid);line-height:1.5}
.sb-rk-custom-msg strong{color:var(--navy);font-weight:700}

/* Ranking button rows (emblem style) */
.sb-rank-btn{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;
  border:1.5px solid var(--border);background:var(--color-white);cursor:pointer;font-size:12px;
  font-family:'DM Sans',sans-serif;color:var(--gray);transition:all .15s;text-align:left;width:100%}
.sb-rank-btn:hover{background:var(--smoke);transform:translateX(2px)}
.sb-rank-btn.on{font-weight:600;background:var(--smoke);border-color:var(--teal)}
.sb-rank-btn img{transition:transform .25s cubic-bezier(.34,1.56,.64,1),filter .2s ease}
.sb-rank-btn:hover img{transform:scale(1.3);filter:drop-shadow(0 2px 6px rgba(0,0,0,.2))}
.sb-rank-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.sb-rank-label{font-size:11px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-rank-score{display:flex;align-items:center;gap:6px}
.sb-rank-bar{flex:1;height:3px;background:var(--border);border-radius:3px;overflow:hidden}
.sb-rank-bar-fill{height:100%;border-radius:3px;transition:width .6s ease}
.sb-rank-val{font-size:11px;font-weight:700;min-width:28px;text-align:right}
.sb-rank-cnt{margin-left:auto;font-size:11px;color:var(--mid);font-weight:400;flex-shrink:0}

/* ═══════════════════════════════════════
   LEGAL / REPUTACIONAL CARD
   ═══════════════════════════════════════ */
.sb-legal-card{
  background:linear-gradient(180deg,#FAFAF8 0%,var(--white) 100%);
}
.sb-legal-card .sb-card-inner{padding:16px 18px 18px}

.sb-legal-title{
  font-size:12px;font-weight:700;color:var(--navy);
  letter-spacing:.02em;margin-bottom:6px;
}
.sb-legal-text{
  font-size:11px;color:var(--gray);line-height:1.55;
  margin:0 0 14px;
}

/* ── CHIPS (legal action links) ── */
.sb-legal-chips{display:flex;flex-wrap:wrap;gap:6px}

.sb-chip{
  display:inline-flex;align-items:center;
  padding:5px 12px;border-radius:16px;
  font-size:11px;font-weight:600;font-family:'DM Sans',sans-serif;
  text-decoration:none;
  background:var(--smoke);color:var(--gray);
  border:1px solid var(--border);
  transition:all .2s cubic-bezier(.4,0,.2,1);
  cursor:pointer;white-space:nowrap;
}
.sb-chip:hover{
  background:var(--white);border-color:var(--navy);color:var(--navy);
  transform:translateY(-1px);box-shadow:0 2px 8px rgba(11,31,56,.06);
}

.sb-chip--action{
  background:rgba(13,148,136,.06);color:var(--teal);
  border-color:rgba(13,148,136,.2);
}
.sb-chip--action:hover{
  background:rgba(13,148,136,.12);border-color:var(--teal);color:var(--teal);
  transform:translateY(-1px);box-shadow:0 2px 8px rgba(13,148,136,.1);
}

/* ═══════════════════════════════════════
   FILTERS CARD (Unified)
   ═══════════════════════════════════════ */
.sb-filters-card .sb-card-inner{padding:16px 18px 14px}

.sb-filter-group{
  margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(0,0,0,.04);
}
.sb-filter-group:first-of-type{
  margin-top:12px;padding-top:0;border-top:none;
}

/* ── EXPAND / MORE FILTERS ── */
.sb-expand-btn{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:10px 0;margin-top:10px;background:none;border:none;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;
  color:var(--mid);transition:color .15s;
  border-top:1px solid rgba(0,0,0,.04);
}
.sb-expand-btn:hover{color:var(--navy)}
.sb-expand-btn svg:first-child{flex-shrink:0;opacity:.6}

.sb-expand-chevron{
  margin-left:auto;flex-shrink:0;
  transition:transform .3s cubic-bezier(.2,0,0,1);
}
.sb-expand-btn.open .sb-expand-chevron{transform:rotate(180deg)}

.sb-expand-body{
  max-height:0;overflow:hidden;
  transition:max-height .3s cubic-bezier(.2,0,0,1);
}
.sb-expand-body.open{max-height:220px}

/* ═══════════════════════════════════════
   PRODUCT NARRATIVE (inside bolas hero)
   ═══════════════════════════════════════ */
.sb-narrative{
  font-size:11px;color:rgba(255,255,255,.55);line-height:1.6;
  margin:0 0 14px;padding:0;font-weight:400;
}

/* ═══════════════════════════════════════
   CALIDAD MÍNIMA CHIPS
   ═══════════════════════════════════════ */
.sb-calidad-chips{
  display:flex;gap:4px;flex-wrap:wrap;
}
.sb-calidad-chip{
  padding:5px 12px;border-radius:16px;border:1.5px solid var(--border);
  background:var(--color-white);color:var(--gray);font-size:11px;font-weight:600;
  font-family:'DM Sans',sans-serif;cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
}
.sb-calidad-chip:hover{
  background:var(--smoke);border-color:var(--teal);color:var(--teal);
  transform:translateY(-1px);
}
.sb-calidad-chip.active{
  background:var(--teal);color:var(--color-white);border-color:var(--teal);
  box-shadow:0 2px 8px rgba(13,148,136,.2);
}

/* ═══════════════════════════════════════
   FILTER LABELS & HINTS
   ═══════════════════════════════════════ */
.sb-filter-label{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mid);margin-bottom:8px;
}
.sb-filter-hint{
  font-size:11px;color:var(--mid);margin-top:4px;line-height:1.4;
  font-style:italic;
}

/* ═══════════════════════════════════════
   SCORING TOOLTIP
   ═══════════════════════════════════════ */
.gm-score-tooltip{
  z-index:9999;position:absolute;pointer-events:none;
  animation:gmTooltipIn .2s ease;
}
@keyframes gmTooltipIn{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

/* Tooltip trigger cursor */
.gm-bolas-trigger{
  position:relative;cursor:help;
}
.gm-bolas-trigger:hover{
  filter:brightness(1.1);
}

/* ═══════════════════════════════════════
   ARTESANAL BADGE
   ═══════════════════════════════════════ */
.gm-badge-artesanal{
  transition:all .15s ease;
}
.gm-badge-artesanal:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(13,148,136,.12);
}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.sb-footer{
  text-align:center;padding:20px 18px 24px;
  border-top:1px solid rgba(0,0,0,.04);margin-top:auto;
}
.sb-footer-logo{height:20px;width:20px;border-radius:5px;opacity:.4;margin-bottom:6px}
.sb-footer-brand{font-size:11px;color:var(--mid);font-weight:600;margin-bottom:2px}
.sb-footer-tagline{font-size:11px;color:var(--mid);opacity:.6;margin-bottom:10px}
.sb-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;font-size:11px}
.sb-footer-links a{color:var(--teal);text-decoration:none;font-weight:500;transition:opacity .15s}
.sb-footer-links a:hover{opacity:.7;text-decoration:underline}

/* ═══════════════════════════════════════
   RESPONSIVE / MOBILE
   ═══════════════════════════════════════ */
@media(max-width:768px){
  #sidebar{
    position:fixed;top:0;left:0;width:88vw;max-width:320px;height:100dvh;
    transform:translateX(-100%);z-index:900;
    box-shadow:4px 0 24px rgba(0,0,0,.12);
  }
  #sidebar.mob-open{transform:translateX(0)!important}

  .sb-card-inner{padding:14px 16px}
  .stats{padding:12px 16px}
  .rank-sec{padding:12px 16px}
  .sb-rank-tabs{margin:0 16px 8px}
  .sb-rank-city-filter{margin:0 16px 8px}
  .sb-rank-list{padding:0 8px 8px}
  .sb-footer{padding:16px 16px 20px}
  .bolas-hero{padding:16px}
  .sb-filters-card .sb-card-inner{padding:14px 16px 12px}
  .sb-legal-card .sb-card-inner{padding:14px 16px 16px}
  .sb-rank-card .sb-card-inner{padding:14px 16px 10px}
  .sb-footer-links{gap:4px 8px}
}