/* ══════════════════════════════════════════════════════════════
   MOBILE UX SYSTEM — GelatoMaps v6.0
   ══════════════════════════════════════════════════════════════
   Upgrade from v5: Added fluid typography system, standardized
   spacing, enhanced visual density, improved line-heights.

   Architecture:
     0. Typography & Spacing System (NEW)
     1. Global foundations (font, tap, zoom, safe areas)
     2. DragCream popup (bottom sheet + mini icon + drawer)
     3. Header
     4. Panels
     5. Modals (generic + specialized)
     6. Profile panel
     7. Discovery
     8. CTA banner/card
     9. Carta (flavor voting)
    10. Sabores (flavor cards)
    11. Notifications
    12. Sidebar
    13. Heladero
    14. Scoring
    15. Demo banner
    16. Loading/splash
    17. Chat widget
    18. SEO content (NEW)
    19. Accessibility (focus, contrast, reduced-motion)
    20. Anti-overflow
    21. Print

   Breakpoints:  360 · 600 · 640 · 768 · 900
   Touch target: 44×44 minimum (WCAG 2.5.5 AAA)
   Width rule:   NEVER use 100vw — always 100% to prevent
                 scrollbar-induced overflow.
   Typography:   Uses --font-* variables from base.css :root
                 with clamp() for fluid scaling.
   ══════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   0. TYPOGRAPHY & SPACING SYSTEM
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Mobile body typography baseline ── */
@media(max-width:600px){
  body{
    font-size:var(--font-base);
    line-height:var(--lh-normal);
  }

  /* ── Heading hierarchy: clear visual rhythm ── */
  .modal-title,
  .pnl-name,
  .sobre-hdr-text h2,
  .prof-name,
  .account-hdr-info h2{
    font-size:var(--font-xl);
    line-height:var(--lh-tight);
    letter-spacing:-.01em;
  }

  .sobre-sec h3,
  .fid-hdr h3,
  .vote-hdr h3,
  .hp-section h3,
  .prem-section-title,
  .cta-dual-title,
  .hel-info-name{
    font-size:var(--font-lg);
    line-height:var(--lh-snug);
    letter-spacing:-.01em;
  }

  /* ── Body text: comfortable reading ── */
  .sobre-sec p,
  .prem-story,
  .prem-highlight-text,
  .hel-bio,
  .claim-info,
  .ival,
  .vote-explainer{
    font-size:var(--font-base);
    line-height:var(--lh-relaxed);
  }

  /* ── UI text: labels, meta, secondary ── */
  .irow,
  .chip,
  .carta-chip,
  .carta-sabor-name,
  .sabor-quick-name,
  .hel-social,
  .hel-tab-name,
  .cta-txt h4,
  .demo-banner-text,
  .hp-field label,
  .gm-signal,
  .account-tab,
  .mtab{
    font-size:var(--font-sm);
    line-height:var(--lh-normal);
  }

  /* ── Small text: captions, badges, micro-labels ── */
  .disco-name,
  .sabor-card-prem-name,
  .carta-sabor-desc,
  .cta-txt p,
  .sb-card-sub,
  .sobre-criteria-item span,
  .gm-score-label,
  .hdr-info-btn,
  .pop-tipo{
    font-size:var(--font-xs);
    line-height:var(--lh-snug);
  }

  /* ── Micro text: timestamps, version numbers ── */
  .disco-meta,
  .dc-trust,
  .dc-new-badge,
  .hdr-brand sub{
    font-size:var(--font-2xs);
    line-height:var(--lh-snug);
  }

  /* ── Button text: clear and tappable ── */
  .fid-btn,
  .vote-submit,
  .cta-card-btn,
  .vote-summary-cta,
  .carta-vote-counter-btn{
    font-size:var(--font-md);
    font-weight:600;
    letter-spacing:.01em;
  }

  /* ── Input text: 16px minimum to prevent iOS zoom ── */
  input,select,textarea{
    font-size:max(16px,var(--font-md));
    line-height:var(--lh-normal);
  }
  button{
    font-size:var(--font-sm);
    line-height:var(--lh-normal);
  }

  /* ── Standardized component spacing ── */
  .modal-body,
  .sobre-body,
  .fid-body,
  .vote-body,
  .claim-body,
  .carta-body{
    padding:var(--sp-base);
  }

  .modal-hdr,
  .sobre-hdr,
  .fid-hdr,
  .prem-section,
  .prof-section,
  .hel-section{
    padding:var(--sp-base);
  }
}

/* ── Tiny screens: tighter spacing ── */
@media(max-width:360px){
  :root{
    --sp-base:12px;
    --sp-md:10px;
    --sp-lg:16px;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. GLOBAL FOUNDATIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Prevent iOS auto-zoom on text */
html{
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* Remove tap highlight on all touch targets */
*{-webkit-tap-highlight-color:transparent}

/* Prevent iOS zoom when focusing inputs (requires ≥16px) */
@media(max-width:600px){
  input,button,select,textarea{font-size:max(16px,1em)}
}

/* ── Safe areas: notch + gesture bar ── */
@supports(padding:env(safe-area-inset-bottom)){
  .cta-banner,.cta-card,.sabor-vote-toast,
  .carta-vote-counter,.chat-fab{
    padding-bottom:calc(var(--sp-md) + env(safe-area-inset-bottom));
  }
  /* Panel body: avoid iOS home indicator hiding the bottom CTA area */
  #panel .pnl-body{
    padding-bottom:calc(58px + env(safe-area-inset-bottom));
  }
  /* Sidebar: avoid home indicator clipping bottom controls */
  #sidebar{
    padding-bottom:env(safe-area-inset-bottom);
  }
}

/* ── Touch targets: 44×44 minimum on coarse pointers ── */
@media(pointer:coarse){
  button:not(.dc-spark):not(.dc-mini-badge),
  [role="button"],
  .hdr-pill,.carta-chip,.chip,
  .fid-stamp,.sabor-card-prem,.disco-card,
  .social-btn,.hel-social,.prof-action,
  .ud-item,.mtab,.account-tab{
    min-height:44px;
    min-width:44px;
  }
  /* Slider thumbs: 32px for easier grip */
  .vote-slider::-webkit-slider-thumb,
  .gm-bola-slider::-webkit-slider-thumb{
    width:32px;height:32px;
  }
  .vote-slider::-moz-range-thumb,
  .gm-bola-slider::-moz-range-thumb{
    width:32px;height:32px;
  }
  /* Star ratings: fat touch area */
  .star-rate span,.sq-star{
    font-size:28px;min-width:36px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;
  }
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. HEADER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px){
  #hdr{
    height:62px;padding:0 var(--sp-sm);gap:var(--sp-xs);
    overflow:visible;
  }
  .hdr-logo{height:50px;width:50px;border-radius:11px}
  .hdr-brand{font-size:var(--font-md);letter-spacing:-.3px}

  /* Search: expand to fill */
  .hdr-srch{flex:1;max-width:none;min-width:0}
  .hdr-srch input{
    font-size:16px; /* fixed: prevents iOS zoom */
    padding:var(--sp-sm) 10px var(--sp-sm) 32px;
    border-radius:10px;
    min-height:44px; position:relative; z-index:100;
  }

  /* Login: 44px touch target */
  .hdr-login-btn{
    min-height:44px!important;
    padding:var(--sp-sm) 14px!important;
    font-size:var(--font-sm)!important;
    display:flex;align-items:center;justify-content:center;
  }

  /* Mobile hamburger: 44px target */
  #btnMob{
    min-height:44px;min-width:44px;
    padding:var(--sp-xs) 10px;font-size:var(--font-base);
    display:flex;align-items:center;justify-content:center;
  }

  /* User avatar wrapper: visual 32px, touch 44px */
  .hdr-user-avatar{
    width:32px;height:32px;
    padding:6px;box-sizing:content-box;
  }

  /* Dropdown: almost full-width, no clipping */
  .user-dropdown{
    position:fixed;top:50px;right:var(--sp-xs);left:var(--sp-xs);
    width:auto;min-width:auto;max-width:none;
    border-radius:var(--radius);
    max-height:calc(100dvh - 60px);
    overflow-y:auto;
  }
  .ud-item{
    padding:var(--sp-md) var(--sp-base);
    min-height:48px;
    font-size:var(--font-base);
    line-height:var(--lh-normal);
  }
}

/* ── Header: 320px ── */
@media(max-width:360px){
  #hdr{height:68px} /* más margen para el logo sin nombre de marca */
  .hdr-brand{display:none}
  .hdr-logo{height:54px;width:54px;border-radius:12px} /* único identificador de marca en pantallas muy pequeñas */
  .hdr-srch input{padding:7px 8px 7px 28px}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. PANELS — Detail/profile slide-in
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:640px){
  #panel,#panel.premium-mode{
    width:100%!important;max-width:100%;
    border-radius:0;border-left:none;
  }
  .pnl-x{
    width:44px;height:44px;font-size:18px;
    top:var(--sp-sm);right:var(--sp-sm);
    background:rgba(255,255,255,.15);
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
  }
  .pnl-hero-img{height:200px}
  .pnl-hero-content{padding:var(--sp-base)}
  .pnl-hero-content .pnl-name{
    font-size:var(--font-2xl);
    line-height:var(--lh-tight);
  }

  .prem-section{padding:var(--sp-base)}
  .prem-highlights{grid-template-columns:1fr}
  .prem-gallery{grid-template-columns:repeat(2,1fr);gap:var(--sp-xs)}

  .prem-heladero{
    flex-direction:column;gap:var(--sp-md);padding:14px;
    align-items:center;text-align:center;
  }
  .prem-heladero img{width:64px;height:64px}
  .prem-heladero-info h4{
    font-size:var(--font-lg);
    line-height:var(--lh-snug);
  }
  .prem-heladero-info p{
    font-size:var(--font-base);
    line-height:var(--lh-relaxed);
  }

  .irow{font-size:var(--font-sm);gap:var(--sp-xs)}
  .irow .ival{
    font-size:var(--font-base);
    line-height:var(--lh-relaxed);
  }
  .chips{gap:var(--sp-xs);flex-wrap:wrap}
  .chip{
    padding:var(--sp-xs) var(--sp-md);
    font-size:var(--font-xs);
    min-height:40px;
    display:inline-flex;align-items:center;
  }

  /* ── Panel section headings ── */
  .psec-h{
    font-size:var(--font-2xs);
    letter-spacing:.12em;
    line-height:var(--lh-snug);
  }

  /* ── Panel info rows: more breathing room ── */
  .pnl-body .prem-section + .prem-section{
    border-top:1px solid var(--border);
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. MODALS — Full-screen on mobile
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px){
  /* ── Generic ── */
  .modal{
    width:100%!important;max-width:100%;
    max-height:100dvh;
    border-radius:0;
  }
  .modal-bg{align-items:flex-end}
  .modal-hdr{padding:14px var(--sp-base)}
  .modal-title{
    font-size:var(--font-xl);
    line-height:var(--lh-tight);
  }
  .modal-x{
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
  }
  .modal-body{padding:var(--sp-base)}

  /* ── Sobre ── */
  .sobre-modal{
    width:100%;max-width:100%;
    max-height:100dvh;border-radius:0;
  }
  .sobre-hdr{padding:var(--sp-lg) var(--sp-base) 14px;gap:10px}
  .sobre-hdr img{height:36px;border-radius:6px}
  .sobre-hdr-text h2{
    font-size:var(--font-xl);
    line-height:var(--lh-tight);
  }
  .sobre-body{padding:var(--sp-base)}
  .sobre-sec h3{
    font-size:var(--font-lg);
    line-height:var(--lh-snug);
    margin-bottom:var(--sp-sm);
  }
  .sobre-sec p{
    font-size:var(--font-base);
    line-height:var(--lh-relaxed);
  }
  .sobre-sec{margin-bottom:var(--sp-lg)}
  .sobre-criteria{grid-template-columns:1fr;gap:var(--sp-sm)}
  .sobre-criteria-item{
    padding:var(--sp-md);
    font-size:var(--font-sm);
  }
  .sobre-trophies{
    padding:14px var(--sp-md);
    flex-wrap:wrap;gap:var(--sp-sm);justify-content:center;
  }
  .sobre-trophy img{width:56px;height:56px}
  .sobre-trophy-connector{width:14px;margin-bottom:var(--sp-md)}
  .sobre-bola{
    font-size:var(--font-2xs);
    line-height:var(--lh-snug);
  }

  /* ── Vote modal → bottom sheet ── */
  .vote-card{
    width:100%;max-width:100%;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    position:fixed;bottom:0;left:0;right:0;top:auto;
    max-height:88dvh;
  }
  .vote-body{padding:14px var(--sp-base)}
  .vote-slider-wrap{gap:10px}
  .vote-label{
    font-size:var(--font-xs);
    line-height:var(--lh-snug);
  }
  .vote-comment{min-height:48px;font-size:16px}
  .vote-name{min-height:44px;font-size:16px}
  .vote-submit{
    min-height:48px;
    font-size:var(--font-md);
    border-radius:var(--radius);
    font-weight:600;
  }
  .vote-x{
    width:44px;height:44px;top:var(--sp-sm);right:var(--sp-sm);
    display:flex;align-items:center;justify-content:center;
  }

  /* ── Fidelización → bottom sheet ── */
  .fid-modal{
    width:100%;max-width:100%;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  }
  .fid-hdr{padding:var(--sp-lg) var(--sp-base) var(--sp-md)}
  .fid-hdr h3{
    font-size:var(--font-lg);
    line-height:var(--lh-snug);
  }
  .fid-body{padding:var(--sp-base)}
  .fid-btn{
    min-height:48px;
    font-size:var(--font-md);
    font-weight:600;
  }
  .fid-input{
    min-height:48px;font-size:16px;
    padding:var(--sp-md) 14px;
  }
  .fid-stamp-grid{grid-template-columns:repeat(5,1fr);gap:var(--sp-sm)}
  .fid-stamp-title{
    font-size:var(--font-xs);
    line-height:var(--lh-snug);
  }

  /* ── Account ── */
  .account-modal{width:100%;max-width:100%;border-radius:0}
  .account-tabs{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;scrollbar-width:none;
  }
  .account-tabs::-webkit-scrollbar{display:none}
  .account-tab{
    flex-shrink:0;white-space:nowrap;
    min-height:44px;padding:10px 14px;
    font-size:var(--font-sm);
  }
  .acct-stat-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-sm)}
  .acct-stat-val{
    font-size:var(--font-lg);
    font-weight:700;
  }
  .acct-stat-lbl{
    font-size:var(--font-2xs);
    line-height:var(--lh-snug);
  }

  /* ── Admin → full-screen ── */
  #adminModal .modal{
    width:100%!important;max-width:100%;
    height:100dvh;max-height:none;
    border-radius:0;
  }
  #adminModal .mtab{
    min-height:44px;padding:10px var(--sp-md);
    font-size:var(--font-sm);
  }
  #adminModal .modal-body{padding:var(--sp-md)}

  /* ── Claim → bottom sheet ── */
  .claim-modal{
    width:100%;max-width:100%;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  }
  .claim-body{padding:var(--sp-base)}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. PROFILE PANEL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px){
  .profile-panel{width:100%!important;max-width:100%}
  .prof-hero{padding:var(--sp-lg) var(--sp-base) var(--sp-lg)}
  .prof-name{
    font-size:var(--font-xl);
    line-height:var(--lh-tight);
  }
  .prof-level-title{
    font-size:var(--font-2xs);
    line-height:var(--lh-snug);
  }
  .prof-close{
    width:44px;height:44px;top:var(--sp-md);right:var(--sp-md);
    display:flex;align-items:center;justify-content:center;
  }
  .prof-stats{grid-template-columns:repeat(2,1fr)}
  .prof-stat{padding:var(--sp-md) var(--sp-sm)}
  .prof-stat-val{
    font-size:var(--font-lg);
    font-weight:700;
  }
  .prof-stat-lbl{
    font-size:var(--font-2xs);
    line-height:var(--lh-snug);
  }
  .prof-fav-grid{grid-template-columns:1fr}
  .prof-section{padding:14px var(--sp-base)}
  .prof-section-title{
    font-size:var(--font-2xs);
    letter-spacing:.06em;
  }
  .prof-action{
    padding:var(--sp-md) 14px;gap:var(--sp-md);
    min-height:56px;
    font-size:var(--font-base);
  }
  .prof-action-ico{width:38px;height:38px;border-radius:10px}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. DISCOVERY — Carousel + curiosity tabs
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px){
  .disco-scroll{padding:14px 10px var(--sp-2xl);gap:var(--sp-sm)}
  .disco-card{flex:0 0 156px}
  .disco-card:hover{transform:none;box-shadow:0 2px 12px rgba(11,31,56,.10)}
  .disco-card:active{transform:scale(.97)}
  .disco-hover-overlay{display:none}
  .disco-img-wrap{height:70px}
  .disco-body{padding:5px var(--sp-sm) 6px}
  .disco-name{
    font-size:var(--font-xs);
    line-height:var(--lh-snug);
  }
  .disco-meta{
    font-size:var(--font-2xs);
    line-height:var(--lh-snug);
  }

  .disco-toggle{
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
  }

  .curiosity-tab.left{left:var(--sp-sm);bottom:80px}
  .curiosity-panel{width:calc(100% - var(--sp-xl));max-width:320px}
  .curiosity-handle{min-height:44px}
  .curiosity-text{
    font-size:var(--font-sm);
    line-height:var(--lh-normal);
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. CTA BANNER & CARD
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px){
  .cta-banner{
    padding:10px var(--sp-md);gap:var(--sp-sm);
    flex-wrap:wrap;justify-content:center;
  }
  .cta-col{padding:var(--sp-sm) var(--sp-md);border-radius:10px;flex:1;min-width:0}
  .cta-ico{font-size:22px}
  .cta-txt h4{
    font-size:var(--font-sm);
    line-height:var(--lh-snug);
  }
  .cta-txt p{
    font-size:var(--font-xs);
    line-height:var(--lh-snug);
  }
  .cta-close{
    top:var(--sp-2xs);right:var(--sp-sm);
    min-height:44px;min-width:44px;
    font-size:20px;
    display:flex;align-items:center;justify-content:center;
  }

  /* CTA card → full-width */
  .cta-card{
    left:0!important;right:0;
    transform:translateY(calc(100% - 54px))!important;
    max-width:100%;width:100%;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding:var(--sp-sm) 14px var(--sp-base);
  }
  .cta-card.expanded{transform:translateY(0)!important}
  .cta-dual{flex-direction:column;gap:var(--sp-md)}
  .cta-dual-sep{display:none}
  .cta-dual-path{padding:var(--sp-xs) 0}
  .cta-dual-title{
    font-size:var(--font-base);
    line-height:var(--lh-snug);
  }
  .cta-dual-list{
    font-size:var(--font-xs);
    line-height:var(--lh-normal);
  }
  .cta-card-btn{
    min-height:48px;padding:var(--sp-md) var(--sp-base);
    font-size:var(--font-sm);width:100%;
    display:flex;align-items:center;justify-content:center;
  }
  .cta-card-close{
    top:2px;right:var(--sp-xs);
    min-height:44px;min-width:44px;
    display:flex;align-items:center;justify-content:center;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. CARTA — Flavor voting overlay
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px){
  .carta-panel{
    width:100%;max-width:100%;
    height:100dvh;max-height:100dvh;
    border-radius:0;
  }
  .carta-header{
    border-radius:0;padding:var(--sp-base) var(--sp-base) var(--sp-md);
    position:sticky;top:0;z-index:2;
  }
  .carta-header h3{
    font-size:var(--font-lg);
    line-height:var(--lh-snug);
  }
  .carta-close{
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    top:var(--sp-sm);right:var(--sp-sm);
  }
  .carta-body{padding:10px var(--sp-md) 88px}
  .carta-sabor{padding:10px;gap:var(--sp-sm);min-height:64px}
  .carta-sabor-img{width:44px;height:44px}
  .carta-sabor-name{
    font-size:var(--font-sm);
    font-weight:600;
    line-height:var(--lh-snug);
  }
  .carta-sabor-desc{
    font-size:var(--font-xs);
    line-height:var(--lh-normal);
  }
  .star-rate{gap:var(--sp-2xs)}
  .star-rate span{
    font-size:26px;min-width:34px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
  }

  /* Chips: horizontal scroll, no wrap */
  .carta-chips{
    padding:var(--sp-sm) var(--sp-md) var(--sp-2xs);gap:var(--sp-xs);
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;flex-wrap:nowrap;
  }
  .carta-chips::-webkit-scrollbar{display:none}
  .carta-chip{
    flex-shrink:0;min-height:44px;
    padding:10px var(--sp-lg);
    font-size:var(--font-sm);
    display:inline-flex;align-items:center;
  }

  /* Vote counter: fixed bottom */
  .carta-vote-counter{
    position:fixed;bottom:0;left:0;right:0;
    border-radius:0;padding:14px var(--sp-base);z-index:10;
  }
  .carta-vote-counter-btn{
    min-height:48px;padding:var(--sp-md) var(--sp-lg);
    font-size:var(--font-base);
    font-weight:600;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. SABORES — Flavor cards & quick vote
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px){
  .prem-sabor-cards{grid-template-columns:repeat(3,1fr);gap:var(--sp-xs)}
  .prem-sabor-cards-4{grid-template-columns:repeat(2,1fr)}
  .sabor-card-prem{padding:var(--sp-sm) var(--sp-2xs) var(--sp-xs);border-radius:var(--radius)}
  .sabor-card-prem-img{width:44px;height:44px}
  .sabor-card-prem-name{
    font-size:var(--font-xs);
    line-height:var(--lh-snug);
  }

  .sabor-quick-card{padding:10px var(--sp-md);gap:10px;min-height:56px}
  .sabor-quick-icon{width:40px;height:40px;font-size:18px}
  .sabor-quick-name{
    font-size:var(--font-sm);
    line-height:var(--lh-snug);
  }
  .sabor-quick-stars{gap:var(--sp-xs)}
  .sq-star{font-size:26px;min-width:34px;min-height:44px}

  /* Toast: bottom, edge-to-edge with margin */
  .sabor-vote-toast{
    bottom:var(--sp-sm);left:var(--sp-sm);right:var(--sp-sm);
    transform:translateX(0) translateY(100px);
  }
  .sabor-vote-toast.visible{transform:translateX(0) translateY(0)}
  .sabor-toast-inner{
    min-width:auto;max-width:none;
    padding:var(--sp-md) 14px;
    font-size:var(--font-base);
  }
  .sabor-toast-close{
    min-height:44px;min-width:44px;
    display:flex;align-items:center;justify-content:center;
  }

  /* Summary overlay */
  .vote-summary-card{
    width:calc(100% - var(--sp-xl));max-width:none;
    padding:var(--sp-xl) var(--sp-lg);border-radius:var(--radius-xl);
  }
  .vote-summary-score{font-size:44px}
  .vote-summary-cta{
    min-height:48px;padding:14px var(--sp-2xl);
    font-size:var(--font-md);font-weight:600;
    width:100%;display:flex;justify-content:center;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. NOTIFICATIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px){
  .notify{
    bottom:auto;top:54px;
    right:var(--sp-sm);left:var(--sp-sm);
    max-width:none;border-radius:var(--radius);
    padding:var(--sp-md) var(--sp-base);
    font-size:var(--font-sm);
    line-height:var(--lh-normal);
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. SIDEBAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:900px){
  #sidebar.open~.sidebar-backdrop{display:block;opacity:1}
  .sb-card{margin-bottom:var(--sp-xs)}
  .sb-card:hover{transform:none;box-shadow:none}
  .sb-card-title{
    font-size:var(--font-sm);
    line-height:var(--lh-snug);
    font-weight:600;
  }
  .sb-card-sub{
    font-size:var(--font-xs);
    line-height:var(--lh-snug);
  }
  .sb-pill,.sb-chip{
    min-height:40px;padding:var(--sp-sm) 14px;
    font-size:var(--font-sm);
    display:inline-flex;align-items:center;
  }
  .sb-lbl{
    font-size:var(--font-2xs);
    letter-spacing:.15em;
    line-height:var(--lh-snug);
  }
  /* Sidebar selects and inputs */
  .sel{
    font-size:var(--font-sm);
    min-height:40px;
    padding:var(--sp-sm) var(--sp-md);
  }
  .tog-lbl{
    font-size:var(--font-sm);
    line-height:var(--lh-normal);
  }
}

/* ── Sidebar on small phones ── */
@media(max-width:600px){
  .bolas-hero{padding:var(--sp-base)}
  .bolas-hero-title{
    font-size:var(--font-2xs);
    letter-spacing:.1em;
  }
  .bolas-hero-sub{
    font-size:var(--font-2xs);
    line-height:var(--lh-snug);
  }
  .rank-title{
    font-size:var(--font-2xs);
    letter-spacing:.12em;
  }
  .rank-item-name{
    font-size:var(--font-sm);
    line-height:var(--lh-snug);
  }
  .rank-item-sub{
    font-size:var(--font-2xs);
    line-height:var(--lh-snug);
  }
  .stat-v{
    font-size:var(--font-lg);
    font-weight:700;
    line-height:var(--lh-tight);
  }
  .stat-l{
    font-size:var(--font-3xs);
    line-height:var(--lh-snug);
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. HELADERO TAB
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px){
  .hel-tab-header{padding:14px;min-height:56px}
  .hel-tab-avatar{width:40px;height:40px}
  .hel-tab-name{
    font-size:var(--font-sm);
    line-height:var(--lh-snug);
  }
  .hel-tab-label{
    font-size:var(--font-xs);
    letter-spacing:.08em;
  }
  .hel-socials{gap:var(--sp-xs);padding:0 14px 14px}
  .hel-social{
    min-height:44px;padding:10px 14px;
    font-size:var(--font-sm);
  }
  .hel-section{padding:var(--sp-md) 14px;gap:10px}
  .hel-section-text{
    font-size:var(--font-base);
    line-height:var(--lh-relaxed);
  }
  .hel-info-name{
    font-size:var(--font-lg);
    line-height:var(--lh-snug);
  }
  .hel-lema{
    font-size:var(--font-sm);
    line-height:var(--lh-normal);
    font-style:italic;
  }
  .hel-bio{
    font-size:var(--font-base);
    line-height:var(--lh-relaxed);
  }
  .hel-stat-val{
    font-size:var(--font-lg);
    font-weight:700;
  }
  .hel-stat-lbl{
    font-size:var(--font-3xs);
    letter-spacing:.04em;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14. SCORING
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px){
  .gm-score-section{padding:var(--sp-md) 14px 10px}
  .gm-score-value{
    font-size:var(--font-2xl);
    font-weight:700;
    line-height:var(--lh-tight);
  }
  .gm-score-label{
    font-size:var(--font-2xs);
    line-height:var(--lh-snug);
  }
  .gm-signals{gap:var(--sp-2xs);margin-top:var(--sp-sm)}
  .gm-signal{
    padding:var(--sp-xs) 10px var(--sp-xs) var(--sp-xs);
    font-size:var(--font-xs);
    min-height:36px;
    line-height:var(--lh-snug);
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15. DEMO BANNER (purple bar)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px){
  .demo-banner-inner{padding:var(--sp-sm) 10px;gap:var(--sp-xs);flex-wrap:nowrap;overflow:hidden}
  .demo-banner-ico{font-size:18px}
  .demo-banner-text{
    font-size:var(--font-xs);
    line-height:var(--lh-snug);
    min-width:0;
  }
  .demo-banner-cta{
    padding:var(--sp-xs) 14px;
    font-size:var(--font-xs);
    min-height:40px;
    display:flex;align-items:center;
  }
  .demo-banner-close{
    min-height:44px;min-width:44px;
    display:flex;align-items:center;justify-content:center;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   16. LOADING / SPLASH
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px){
  .ld-title-row{font-size:clamp(34px,10vw,42px)}
  .ld-slogan{
    font-size:var(--font-lg);
    letter-spacing:4px;
    line-height:var(--lh-snug);
  }
  .ld-sponsor .sp-label{
    font-size:var(--font-xs);
    letter-spacing:2px;
  }
  .ld-sponsor .sp-name{
    font-size:var(--font-md);
    line-height:var(--lh-snug);
  }
  .ld-bar{width:clamp(220px,65vw,260px)}
  .ld-logo{
    width:clamp(120px,35vw,140px);
    height:clamp(120px,35vw,140px);
    border-radius:clamp(24px,6vw,28px);
  }
  .ld-rank-block{padding:14px var(--sp-base) 10px;min-width:0}
  .ld-rank-title{
    font-size:var(--font-base);
    letter-spacing:1px;
    line-height:var(--lh-snug);
  }
  .ld-rank-sub{
    font-size:var(--font-xs);
    line-height:var(--lh-snug);
  }
}
@media(max-width:360px){
  .ld-title-row{font-size:34px}
  .ld-slogan{font-size:14px;letter-spacing:3px}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   17. CHAT WIDGET
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px){
  .chat-fab{bottom:14px;right:10px;width:52px;height:52px}
  .chat-panel{
    position:fixed;inset:0;
    width:100%!important;max-width:100%;
    height:100dvh;
    border-radius:0;
    right:0!important;bottom:0!important;
  }
  .ga-header h3{
    font-size:var(--font-lg);
    line-height:var(--lh-snug);
  }
  .ga-msg-bubble{
    font-size:var(--font-base);
    line-height:var(--lh-relaxed);
  }
  .ga-input{
    font-size:16px; /* prevent iOS zoom */
    min-height:44px;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   18. SEO CONTENT — Typography for inline-styled article
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px){
  /* Override inline article styles for mobile readability */
  #seo-content{
    padding:var(--sp-xl) var(--sp-base)!important;
  }
  #seo-content h1{
    font-size:clamp(22px,5.5vw,28px)!important;
    line-height:var(--lh-tight)!important;
    margin-bottom:var(--sp-md)!important;
  }
  #seo-content h2{
    font-size:clamp(16px,4vw,20px)!important;
    line-height:var(--lh-snug)!important;
    margin-top:var(--sp-lg)!important;
  }
  #seo-content p{
    font-size:var(--font-base)!important;
    line-height:var(--lh-relaxed)!important;
  }
  #seo-content ul{
    columns:1!important;
    font-size:var(--font-base)!important;
    line-height:var(--lh-relaxed)!important;
  }

  /* Footer */
  #seo-footer{
    padding:var(--sp-lg) var(--sp-base) var(--sp-2xl)!important;
  }
  #seo-footer>div{
    flex-direction:column!important;
    gap:var(--sp-lg)!important;
  }
  #seo-footer a{
    font-size:var(--font-sm)!important;
    line-height:var(--lh-relaxed)!important;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19. ACCESSIBILITY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Focus ring: visible on keyboard, hidden on mouse/touch ── */
:focus-visible{
  outline:3px solid var(--color-accent-a60, rgba(13,148,136,.6));
  outline-offset:2px;
  border-radius:4px;
}
:focus:not(:focus-visible){outline:none}

/* ── Reduced motion: respect user preference ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .dc-mini-btn,.dc-mini-ico,.dc-mini-badge,
  .disco-card,.celeb-icon,.ld-trophy,
  .fid-stamp.just-filled,.notif-badge{
    animation:none!important;
  }
}

/* ── Tooltips: hide on touch ── */
@media(pointer:coarse){
  [data-tip]::after{display:none!important}
}

/* ── Skip link for keyboard ── */
.skip-link{
  position:absolute;top:-100%;left:var(--sp-base);
  padding:var(--sp-md) var(--sp-xl);
  background:var(--teal,#0D9488);color:var(--color-white,#fff);
  border-radius:0 0 var(--sp-sm) var(--sp-sm);
  font-size:var(--font-base);font-weight:600;
  z-index:99999;transition:top .2s ease;
}
.skip-link:focus{top:0}

/* ── Forced high contrast (Windows) ── */
@media(forced-colors:active){
  .dc-x,.modal-x,.vote-x,.pnl-x,.carta-close,.prof-close{
    border:2px solid ButtonText;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   20. ANTI-OVERFLOW
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html,body{overflow-x:hidden}
#app,#body{max-width:100%;overflow-x:hidden}

/* Tables: horizontal scroll */
.hor-t{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Long text: prevent blowout */
.ival,.prem-story,.sobre-sec p,.claim-info,.sobre-highlight,
.disco-loc,.sabor-card-prem-name{
  word-break:break-word;overflow-wrap:break-word;
}

/* ── Images: prevent layout shifts ── */
@media(max-width:600px){
  img{max-width:100%;height:auto}
  /* Excluir disco-img: necesita height:100% para que object-fit:cover funcione */
  .disco-img{height:100%!important;max-width:none!important}
  .prem-gallery img,.pnl-hero-img img{
    object-fit:cover;width:100%;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   21. MAP POPUPS — Leaflet touch optimization
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px){
  .leaflet-popup-content{
    font-size:var(--font-base);
    line-height:var(--lh-normal);
    margin:var(--sp-md) var(--sp-base);
  }
  .pop-name{
    font-size:var(--font-md);
    line-height:var(--lh-snug);
    font-weight:600;
  }
  .pop-tipo{
    font-size:var(--font-2xs);
    line-height:var(--lh-snug);
  }
  .pop-stars{
    font-size:var(--font-sm);
  }
  .pop-btns a,.pop-btns button{
    min-height:44px;
    padding:var(--sp-sm) var(--sp-md);
    font-size:var(--font-sm);
    display:inline-flex;align-items:center;
  }
  /* Nearby banner */
  .nearby-section{
    font-size:var(--font-xs);
    line-height:var(--lh-normal);
  }
  .geo-btn{
    min-height:44px;
    font-size:var(--font-sm);
    padding:var(--sp-sm) var(--sp-md);
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   22. PRINT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media print{
  .cta-banner,.cta-card,.chat-fab,.chat-panel,
  .notify,.demo-banner{display:none!important}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   23. MOBILE TOUCH TARGET FIXES (v6.1)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:768px){
  /* Panel close button: 30px → 44px */
  .pnl-x{
    width:44px!important;height:44px!important;
    top:10px!important;right:10px!important;
    font-size:18px!important;
  }
  /* Carta close button: 32px → 44px */
  .carta-close{
    width:44px!important;height:44px!important;
    top:8px!important;right:10px!important;
    font-size:20px!important;
  }
  /* Panel name: more padding to not overlap close btn */
  .pnl-name{padding-right:54px!important}

  /* Discovery toggle: reposition when sidebar is hidden on mobile */
  .disco-toggle{
    left:12px!important;
    top:58px!important;
  }

  /* Chat FAB: fix left position on mobile (sidebar hidden) */
  .ga-fab{
    left:16px!important;
    bottom:80px!important;
  }
  .ga-panel{
    left:8px!important;
    bottom:132px!important;
    width:calc(100% - 16px)!important;
  }

  /* Panel hero photo: smaller on mobile */
  .pnl-hero-img,.pnl-photo img{height:200px!important}
  .pnl-hero-content .pnl-name{font-size:22px!important}
}

@media(max-width:480px){
  /* Extra small: even tighter layout */
  .pnl-hero-img,.pnl-photo img{height:160px!important}
  .pnl-hdr{padding:14px 16px 12px!important}
  .pnl-body{padding-bottom:20px}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   24. PORTRAIT MOBILE OPTIMIZATIONS (v6.2)
   Fixes for vertical phone view (≤600px wide)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px) and (orientation:portrait){

  /* ══════════════════════════════════════════════════════════
     A. CARRUSEL — techo duro 104px, mapa protagonista
     ══════════════════════════════════════════════════════════ */
  #discoveryBanner{
    top:56px!important;
    max-height:104px!important;
    overflow:hidden!important;
  }
  #discoveryBanner .disco-scroll{
    padding:4px 10px 6px!important;
    gap:6px!important;
    overflow-y:hidden!important;
  }
  #discoveryBanner .disco-card{
    flex:0 0 148px!important;
    min-height:0!important;
    max-height:94px!important;
    overflow:hidden!important;
  }
  #discoveryBanner .disco-category-label{
    font-size:11px!important;
    padding:2px 0!important;
    line-height:1.2!important;
  }
  #discoveryBanner .disco-img-wrap{
    height:40px!important;
    max-height:40px!important;
    min-height:0!important;
    overflow:hidden!important;
    transition:none!important;
  }
  #discoveryBanner .disco-img{
    width:100%!important;
    height:40px!important;
    max-height:40px!important;
    object-fit:cover!important;
    object-position:center 35%!important;
  }
  #discoveryBanner .disco-body{
    padding:3px 7px 4px!important;
  }
  #discoveryBanner .disco-name{
    font-size:10.5px!important;
    line-height:1.15!important;
    margin-bottom:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #discoveryBanner .disco-meta{
    font-size:11px!important;
    gap:2px!important;
    margin-top:1px!important;
  }
  /* Ocultar todo lo que no cabe en tarjeta compacta */
  #discoveryBanner .disco-loc,
  #discoveryBanner .disco-bolas,
  #discoveryBanner .disco-hover-overlay,
  #discoveryBanner .disco-badge{
    display:none!important;
  }
  .disco-toggle{
    top:calc(56px + 108px)!important;
    left:10px!important;
  }

  /* ══════════════════════════════════════════════════════════
     B. MAPA — ancho completo, altura máxima
     ══════════════════════════════════════════════════════════ */
  #map{
    width:100%!important;
    left:0!important;
  }

  /* ══════════════════════════════════════════════════════════
     C. CONTROLES DERECHA — zoom y FAB accesibles y no solapados
     ══════════════════════════════════════════════════════════ */
  .leaflet-bottom.leaflet-right{
    bottom:calc(env(safe-area-inset-bottom,0px) + 16px)!important;
    right:10px!important;
    z-index:900!important;
  }
  .leaflet-control-zoom a{
    width:40px!important;
    height:40px!important;
    line-height:40px!important;
    font-size:18px!important;
  }
  .ga-fab{
    bottom:calc(env(safe-area-inset-bottom,0px) + 104px)!important;
    left:auto!important;
    right:14px!important;
    z-index:950!important;
  }
  .ga-panel{
    left:8px!important;
    right:8px!important;
    bottom:calc(env(safe-area-inset-bottom,0px) + 168px)!important;
    width:auto!important;
    max-height:60vh!important;
    z-index:949!important;
  }
  body.gm-panel-open .ga-fab{ display:none!important; }
  body.gm-panel-open .leaflet-bottom.leaflet-right{ display:none!important; }

  /* ══════════════════════════════════════════════════════════
     D. LIMPIEZA GENERAL portrait
     ══════════════════════════════════════════════════════════ */
  .curiosity-tab.right{ display:none!important; }
  .curiosity-tab.left{ left:8px!important; bottom:80px!important; }
  body.gm-panel-open .curiosity-tab.left{ display:none!important; }
  .hdr-pills{ display:none!important; }
  #btnMob{ padding:6px 14px!important; font-size:13px!important; min-height:40px!important; }
  #panel .pnl-body{ padding-bottom:env(safe-area-inset-bottom,20px)!important; }
  .cta-banner{ padding:8px 12px!important; font-size:12px!important; }
  .cta-banner-btn{ padding:6px 14px!important; font-size:12px!important; min-height:40px!important; }
}

/* Extra pequeño: ≤390px (iPhone SE, Pixel) */
@media(max-width:390px) and (orientation:portrait){
  #discoveryBanner .disco-card{flex:0 0 140px!important}
  #discoveryBanner .disco-img-wrap{height:38px!important;max-height:38px!important}
  #discoveryBanner .disco-img{max-height:38px!important}
  #hdr .hdr-logo-txt{display:none} /* solo icono del logo */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   25. PORTRAIT MOBILE — Conos + Bottom Sheet Panel
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   En portrait el mapa tiene ~390px de ancho. Los conos de 55-68px
   de alto ocupan demasiado espacio visual. Los escalamos al 65%.
   El panel de detalle pasa a bottom-sheet (sube desde abajo) para
   que el usuario siempre vea el mapa parcialmente.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media(max-width:600px) and (orientation:portrait){

  /* ── Conos de heladerías: escalar al 65% ── */
  /* transform en el div interno para no interferir con el
     translate3d que Leaflet aplica al wrapper externo        */
  .leaflet-marker-icon.gm-marker > div{
    transform:scale(0.65)!important;
    transform-origin:bottom center!important;
  }
  /* Clusters: escalar al 78% */
  .leaflet-marker-icon.gm-cluster > div{
    transform:scale(0.78)!important;
    transform-origin:center center!important;
  }

  /* ── Panel detalle → bottom sheet ── */
  /* Posición base: oculto bajo la pantalla                   */
  #panel,#panel.premium-mode{
    position:fixed!important;
    top:auto!important;
    left:0!important;
    right:0!important;
    bottom:-92vh!important;
    width:100%!important;
    height:88vh!important;
    max-height:88vh!important;
    border-radius:20px 20px 0 0!important;
    border-left:none!important;
    border-top:1px solid rgba(0,0,0,.08)!important;
    box-shadow:0 -8px 40px rgba(0,0,0,.18)!important;
    /* transición vertical en lugar de horizontal */
    transition:bottom .35s cubic-bezier(.4,0,.2,1)!important;
    z-index:1200!important;
    overflow:hidden!important;
  }
  /* Panel abierto: visible */
  #panel.open,#panel.premium-mode.open{
    bottom:0!important;
    right:0!important; /* anular la herencia del right:-X */
  }

  /* Drag handle decorativo en la parte superior del panel    */
  #panel::before{
    content:'';
    display:block;
    width:40px;height:4px;
    border-radius:2px;
    background:rgba(0,0,0,.18);
    margin:10px auto 0;
    flex-shrink:0;
  }

  /* Header del panel: fondo opaco y botón cerrar más grande  */
  .pnl-hdr{
    padding-top:8px!important;
  }
  .pnl-x{
    top:12px!important;
    right:14px!important;
    width:44px!important;
    height:44px!important;
  }

  /* Zona de scroll: usar el espacio restante del sheet       */
  #panel .pnl-body{
    height:calc(88vh - 180px)!important;
    max-height:none!important;
    padding-bottom:calc(env(safe-area-inset-bottom, 16px) + 16px)!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  /* Hero image: más compacta en el sheet                     */
  .pnl-hero-img{height:160px!important}
  .pnl-photo img{height:160px!important}
}

/* ── Landscape en móvil: panel vuelve a deslizar desde la derecha ── */
@media(max-width:900px) and (orientation:landscape){
  #panel,#panel.premium-mode{
    position:absolute!important;
    top:0!important;
    bottom:auto!important;
    right:-100%!important;
    left:auto!important;
    width:380px!important;
    height:100%!important;
    max-height:100%!important;
    border-radius:0!important;
    border-left:1px solid rgba(0,0,0,.06)!important;
    border-top:none!important;
    transition:right .32s cubic-bezier(.4,0,.2,1)!important;
  }
  #panel.open,#panel.premium-mode.open{
    right:0!important;
    bottom:auto!important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   26. PORTRAIT MOBILE — Controles mapa, FAB, scroll lock
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media(max-width:600px) and (orientation:portrait){

  /* ── Zoom controls: subir para no tapar el bottom sheet ── */
  .leaflet-bottom.leaflet-right{
    bottom:calc(env(safe-area-inset-bottom, 0px) + 16px)!important;
    right:10px!important;
  }
  /* Cuando el panel está abierto, los controles quedan tapados bajo
     el sheet (88vh) — los ocultamos; el usuario puede cerrar el
     panel con swipe o el botón ✕                                */
  body.gm-panel-open .leaflet-bottom.leaflet-right{
    display:none!important;
  }

  /* ── Botones de zoom: más grandes para touch ── */
  .leaflet-control-zoom a{
    width:38px!important;
    height:38px!important;
    line-height:38px!important;
    font-size:18px!important;
  }

  /* ── Chat FAB: esquina inferior derecha, POR ENCIMA del zoom de Leaflet ── */
  /* Leaflet zoom (+/-) ocupa ~80px de alto en bottom:16px — subimos el FAB
     para que no se solapen y ambos sean pulsables                          */
  .ga-fab{
    bottom:calc(env(safe-area-inset-bottom, 0px) + 104px)!important;
    left:auto!important;
    right:14px!important;
  }
  .ga-panel{
    left:8px!important;
    right:8px!important;
    /* FAB en portrait está a bottom:104px + 56px alto = 160px — el panel abre por encima */
    bottom:calc(env(safe-area-inset-bottom, 0px) + 168px)!important;
    width:auto!important;
    max-height:60vh!important;
  }
  /* Ocultar FAB cuando panel de heladería está abierto */
  body.gm-panel-open .ga-fab{
    display:none!important;
  }

  /* ── Curiosity tab izquierda: sube cuando panel abierto ── */
  body.gm-panel-open .curiosity-tab.left{
    display:none!important;
  }

  /* ── Scroll lock: evitar que el fondo se mueva bajo el sheet ── */
  body.gm-panel-open{
    overflow:hidden!important;
  }

  /* ── Sidebar: full-height scrollable en portrait ── */
  /* Usamos 100dvh (dynamic viewport, excluye la barra de Safari) para que
     el sidebar no sea más alto que lo visible, y el footer de términos/política
     sea siempre alcanzable con scroll.                                         */
  #sidebar{
    top:0!important;
    padding-top:56px!important; /* altura header móvil */
    height:100dvh!important;
    max-height:100dvh!important;
    overflow-y:scroll!important; /* scroll forzado — más fiable que auto en iOS */
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important; /* evita que el scroll del sidebar
                                                 active el bounce del body       */
    touch-action:pan-y!important;
    /* Padding inferior: empuja el footer por encima del home indicator de iPhone */
    padding-bottom:calc(env(safe-area-inset-bottom, 16px) + 24px)!important;
  }

  /* ── Panel heladero (heladero dashboard): full screen ── */
  #heladeroPanel,#heladero-panel{
    width:100%!important;
    max-width:100%!important;
  }

  /* ── Nearby panel: posición correcta con header de 56px ── */
  .nearby-panel{
    top:64px!important;
    max-height:calc(100vh - 72px)!important;
  }

  /* ── Search results dropdown ── */
  .search-results-dropdown,.autocomplete-results{
    left:0!important;
    right:0!important;
    max-width:100%!important;
    border-radius:0 0 12px 12px!important;
  }

  /* ── Notification toasts: ancho completo en portrait ── */
  .notify-toast,.notification-toast{
    left:8px!important;
    right:8px!important;
    max-width:none!important;
    min-width:auto!important;
  }

  /* ── Sidebar ranking lists: altura reducida en portrait ──
     En desktop el .sb-rank-list tiene max-height:300px — en portrait eso
     ocupa demasiado del sidebar y su propio scroll captura los eventos táctiles
     impidiendo llegar al footer con términos/política.
     Reducimos a 160px para que no domine y el sidebar sea fácil de scrollear. */
  .sb-rank-list{
    max-height:160px!important;
    overscroll-behavior-y:contain!important;
  }
  /* El accordion de criterios también limitado */
  .sb-accordion.open{
    max-height:180px!important;
  }
  .sb-expand-body.open{
    max-height:160px!important;
  }
  /* Footer visible y con separación clara */
  .sb-footer{
    margin-top:16px!important;
    padding-bottom:calc(env(safe-area-inset-bottom, 16px) + 20px)!important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   27. VOTAR.HTML — Layout responsive portrait móvil
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media(max-width:480px){
  /* Canvas del juego dragcream: limitar altura */
  #dragcream-canvas{
    max-height:55vh!important;
    width:100%!important;
  }
  /* Contenedor del juego */
  #dragcream-step{
    padding:8px!important;
  }
  /* Sabores grid: 2 columnas en portrait */
  .flavor-grid,#saborGrid{
    grid-template-columns:repeat(2,1fr)!important;
    gap:8px!important;
  }
  /* Flavor card: más compacta */
  .flavor-card{
    padding:10px 8px!important;
    font-size:12px!important;
  }
  .flavor-card img,.flavor-img{
    width:48px!important;
    height:48px!important;
  }
  /* Step container: sin padding lateral excesivo */
  .votar-step,.step-container{
    padding:12px 16px!important;
  }
  /* Header votar: compacto */
  .votar-header,.vg-header{
    padding:10px 16px!important;
    font-size:14px!important;
  }
  /* Score display */
  #dragcream-score-display{
    font-size:28px!important;
  }
}