/* ── Header: Logo, brand, search, pills, counter, mobile menu, admin button ── */

/* ── HEADER ── */
#hdr{height:72px;flex-shrink:0;background:linear-gradient(180deg,var(--color-bg-hdr-from,#0D1B2E) 0%,var(--navy) 100%);
  display:flex;align-items:center;padding:0 16px;gap:8px;
  z-index:3000;box-shadow:0 1px 0 rgba(255,255,255,.04),0 4px 20px rgba(0,0,0,.4);
  border-bottom:1px solid rgba(255,255,255,.06);
  /* overflow:visible es crítico — overflow:hidden cortaría los dropdowns (.legend-panel, .user-dropdown) */
  overflow:visible}

/* ── ORDEN DE ELEMENTOS EN HEADER ── */
#hdr picture        { order:1; flex-shrink:0; }
#hdr .hdr-brand     { display:none!important; }
#hdr .hdr-div       { display:none!important; }
#hdr .hdr-nav       { order:2; }
#hdr .geo-btn       { order:3; margin-left:auto; }
#hdr .hdr-srch      { order:4; }
#hdr .hdr-vote-wrap { order:5; }
#hdr .hdr-user-area { order:6; }
#hdr .hdr-count     { order:99; }
#hdr .hdr-demo-btn  { order:99; }
#hdr .sabor-map-btn { order:99; }
#hdr .hdr-info-btn  { order:99; }
.hdr-logo{height:56px;width:56px;border-radius:var(--radius-md);flex-shrink:0;filter:drop-shadow(0 1px 4px rgba(0,0,0,.3));cursor:pointer;transition:transform .15s ease;object-fit:contain}
.hdr-logo:hover{transform:scale(1.08)}
.hdr-brand{display:none;align-items:baseline;gap:0;cursor:pointer;font-family:'Playfair Display',serif;
  font-size:20px;font-weight:700;color:var(--color-white,#fff);letter-spacing:-.5px;white-space:nowrap;flex-shrink:0}
.hdr-brand em{color:var(--teal);font-style:normal}
.hdr-brand sub{font-size:11px;color:rgba(255,255,255,.35);font-weight:400;letter-spacing:1px;margin-left:6px;
  text-transform:uppercase;font-family:'DM Sans',sans-serif;vertical-align:baseline}
.hdr-tagline{display:none}
.hdr-info-btn{padding:5px 12px;border-radius:var(--radius-pill);font-size:11px;font-weight:500;
  border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.85);background:rgba(255,255,255,.04);
  cursor:pointer;white-space:nowrap;font-family:'DM Sans',sans-serif;transition:var(--transition);flex-shrink:0}
.hdr-info-btn:hover{border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.9);background:rgba(255,255,255,.08)}

.hdr-div{width:1px;height:24px;background:rgba(255,255,255,.12);flex-shrink:0}
.hdr-srch{flex:1;max-width:220px;min-width:100px;position:relative}
.hdr-srch input{width:100%;padding:7px 12px 7px 34px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.07);color:var(--color-white,#fff);font-size:16px;
  font-family:'DM Sans',sans-serif;outline:none;transition:var(--transition)}
.hdr-srch input::placeholder{color:rgba(255,255,255,.3)}
.hdr-srch input:focus{background:rgba(255,255,255,.14);border-color:rgba(13,148,136,.5);box-shadow:0 0 0 3px rgba(13,148,136,.1)}
.hdr-srch-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:rgba(255,255,255,.35);font-size:14px;pointer-events:none}

.hdr-pills{display:flex;gap:4px;flex-wrap:nowrap;overflow:hidden;flex-shrink:1}
.hdr-pill{padding:6px 14px;border-radius:var(--radius-pill);font-size:12px;font-weight:500;
  border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.04);cursor:pointer;white-space:nowrap;
  font-family:'DM Sans',sans-serif;transition:all .2s ease;
  display:flex;align-items:center;gap:6px}
.hdr-pill img{transition:transform .35s cubic-bezier(.34,1.56,.64,1),filter .2s;height:28px}
.hdr-pill:hover img{transform:scale(2.2);filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}
.hdr-pill img.zoomed{transform:scale(2.6);filter:drop-shadow(0 6px 16px rgba(0,0,0,.4));z-index:10}
.hdr-pill:hover{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.9);background:rgba(255,255,255,.08);transform:translateY(-1px)}
.hdr-pill.on{background:var(--teal);border-color:var(--teal);color:var(--color-white,#fff);box-shadow:0 2px 8px rgba(13,148,136,.3)}
.hdr-pill.on img{filter:brightness(1.15) drop-shadow(0 1px 3px rgba(0,0,0,.35))}

.hdr-count{margin-left:8px;font-size:11px;color:rgba(255,255,255,.35);white-space:nowrap;flex-shrink:0;letter-spacing:.02em}
.hdr-count strong{color:var(--teal);font-weight:700}

/* Pills row count — puntos de venta en subnav, inline con las pills */
.pills-count{
  font-size:11px;color:rgba(255,255,255,.38);white-space:nowrap;
  cursor:pointer;letter-spacing:.02em;flex-shrink:0;
  transition:color .15s;user-select:none;
  margin-left:10px;padding-left:12px;
  border-left:1px solid rgba(255,255,255,.1);
  min-width:max-content;overflow:visible;
}
.pills-count:hover{color:rgba(255,255,255,.65)}
.pills-count strong{color:var(--teal-lt,#5EEAD4);font-weight:700}

/* ── HDR NAV LINKS (inline en header, mismo estilo que páginas auxiliares) ── */
.hdr-nav{
  display:flex;align-items:center;gap:2px;flex-shrink:0;
  /* NO margin-left:auto — la user-area ya tiene auto */
}
.hdr-nav-link{
  padding:6px 12px;border-radius:16px;font-size:14px;font-weight:500;
  color:rgba(255,255,255,.62);text-decoration:none!important;font-family:'DM Sans',sans-serif;
  white-space:nowrap;transition:color .15s,background .15s;
  display:inline-flex;align-items:center;letter-spacing:.01em;
}
.hdr-nav-link:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.07)}
.hdr-nav-link.active{color:var(--teal-lt,#5EEAD4);background:rgba(13,148,136,.18);font-weight:700}

/* ── PILLS en header: solo icono, sin texto (para no ocupar espacio) ── */
#hdr .hdr-pills{
  display:flex;gap:2px;flex-shrink:0;overflow:visible;
}
#hdr .hdr-pill{
  padding:4px 5px;
  font-size:0!important; /* oculta el label de texto */
  gap:0;border-radius:var(--radius-sm);
  line-height:0;
}
#hdr .hdr-pill img{
  height:22px;display:block;
  transition:transform .2s ease,filter .2s;
}
#hdr .hdr-pill:hover img{transform:scale(1.25);filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
#hdr .hdr-pill.on{background:rgba(13,148,136,.25);border-color:rgba(13,148,136,.5)}
#hdr .hdr-pill.on img{filter:brightness(1.2) drop-shadow(0 1px 4px rgba(13,148,136,.5))}

/* ── Pro nav gate — link simple con candado ── */
.nav-pro-lock{
  font-size:10px; margin-left:3px; opacity:.45;
  transition:opacity .2s; vertical-align:middle;
}
.hdr-nav-pro.pro-unlocked .nav-pro-lock{ display:none; }
.hdr-nav-pro.pro-locked{ opacity:.65; }
.hdr-nav-pro.pro-locked:hover{ opacity:.9; }

/* Responsive */
@media(max-width:1380px){.hdr-nav-link[href="/promociones.html"]{display:none}}
@media(max-width:1260px){.hdr-nav-link[href="/sabores.html"]{display:none}}
@media(max-width:1120px){.hdr-nav-link[href="/recomendaciones.html"]{display:none}}
@media(max-width:980px){.hdr-nav-link[href="/ranking.html"]{display:none}}
@media(max-width:880px){.hdr-nav{display:none}}
@media(max-width:720px){#hdr .hdr-pills{display:none}}

#btnMob{display:none;min-width:44px;min-height:44px;border-radius:8px;
  border:1.5px solid rgba(255,255,255,.2);background:transparent;
  color:rgba(255,255,255,.7);font-size:13px;font-family:'DM Sans',sans-serif;
  cursor:pointer;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;justify-content:center}

/* ── ADMIN BTN (removed from header — admin access via user dropdown) ── */
.hdr-admin-btn{display:none}

/* ── USER MENU ── */
.hdr-user-area{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.hdr-login-btn{padding:7px 18px;border-radius:24px;font-size:12px;font-weight:600;
  border:none;color:var(--color-white,#fff);background:var(--teal);
  cursor:pointer;white-space:nowrap;font-family:'DM Sans',sans-serif;transition:var(--transition);
  box-shadow:0 2px 8px rgba(13,148,136,.3)}
.hdr-login-btn:hover{background:var(--teal2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(13,148,136,.4)}
.hdr-user-avatar{width:44px;height:44px;border-radius:50%;border:2px solid rgba(13,148,136,.6);
  cursor:pointer;object-fit:cover;transition:var(--transition);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.hdr-user-avatar:hover{transform:scale(1.08);border-color:var(--teal)}
.user-dropdown{position:absolute;top:68px;right:8px;background:var(--color-white,#fff);border-radius:16px;
  box-shadow:0 12px 48px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.04);min-width:260px;padding:6px 0;z-index:6000;
  display:none;animation:dropdownIn .2s cubic-bezier(.2,0,.2,1);transform-origin:top right}
.user-dropdown.open{display:block}
@keyframes dropdownIn{from{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:none}}
.ud-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.ud-header img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--border)}
.ud-header-text{flex:1}
.ud-header-text strong{font-size:13px;color:var(--navy);display:block}
.ud-header-text span{font-size:11px;color:var(--mid)}
.ud-item{padding:10px 16px;display:flex;align-items:center;gap:10px;cursor:pointer;
  font-size:13px;color:var(--navy);transition:background .1s}
.ud-item:hover{background:var(--smoke)}
.ud-item .ud-ico{width:20px;height:20px;flex-shrink:0;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--color-white,#fff)}
.ud-ico-account{background:var(--teal)}
.ud-ico-account::before{content:'U'}
.ud-ico-heart{background:var(--color-ico-heart,#E11D48)}
.ud-ico-heart::before{content:'\2665';font-size:12px}
.ud-ico-shop{background:var(--gold)}
.ud-ico-shop::before{content:'H'}
.ud-ico-claim{background:var(--color-ico-claim,#6366F1)}
.ud-ico-claim::before{content:'R'}
.ud-ico-admin{background:var(--navy)}
.ud-ico-admin::before{content:'A'}
.ud-ico-exit{background:var(--red)}
.ud-ico-exit::before{content:'\2192';font-size:12px}
.ud-divider{height:1px;background:var(--border);margin:4px 0}
.ud-role{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.ud-role.user{background:var(--color-info-pale,#DBEAFE);color:var(--color-info-dark,#1D4ED8)}
.ud-role.shop_owner{background:var(--color-role-shop-bg,#D1FAE5);color:var(--color-role-shop-text,#065F46)}
.ud-role.editor{background:var(--color-role-editor-bg,#FEF3C7);color:var(--color-gold-dark,#92400E)}
.ud-role.admin{background:var(--color-role-admin-bg,#FEE2E2);color:var(--color-error-dark,#991B1B)}

/* ── DRAGTRY DEMO BUTTON (header) ── */
.hdr-demo-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;
  border-radius:22px;text-decoration:none;font-size:13px;font-weight:700;
  font-family:'DM Sans',sans-serif;white-space:nowrap;flex-shrink:0;
  background:linear-gradient(135deg,var(--color-premium,#7C3AED),var(--color-premium-light,#A855F7));color:var(--color-white,#fff);
  border:none;cursor:pointer;transition:all .25s ease;
  box-shadow:0 2px 8px rgba(124,58,237,.35);animation:demoPulse 3s ease-in-out infinite}
.hdr-demo-btn:hover{transform:translateY(-1px) scale(1.04);
  box-shadow:0 4px 16px rgba(124,58,237,.5);background:linear-gradient(135deg,var(--color-premium-dark,#6D28D9),var(--color-premium-mid,#9333EA))}
.hdr-demo-ico{line-height:1;display:inline-flex;align-items:center;justify-content:center}
.hdr-demo-txt{letter-spacing:.04em}
@keyframes demoPulse{0%,100%{box-shadow:0 2px 8px rgba(124,58,237,.35)}50%{box-shadow:0 2px 16px rgba(168,85,247,.55)}}

/* DragTry cone icon with gentle wobble */
.dt-cone{height:32px;object-fit:contain;transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));animation:dtWobble 4s ease-in-out infinite}
.hdr-demo-btn:hover .dt-cone{transform:scale(1.25) rotate(-8deg)}
@keyframes dtWobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}

/* ── DRAGCREAM DEMO BANNER ── */
.demo-banner{background:linear-gradient(135deg,var(--color-premium,#7C3AED) 0%,var(--color-premium-light,#A855F7) 50%,var(--color-premium-dark,#6D28D9) 100%);
  padding:0;overflow:hidden;position:relative;z-index:2999;
  box-shadow:0 2px 12px rgba(124,58,237,.25)}
.demo-banner.hidden{display:none}
.demo-banner-inner{display:flex;align-items:center;gap:12px;padding:8px 16px;max-width:100%}
.demo-banner-ico{font-size:22px;flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.demo-banner-text{flex:1;color:rgba(255,255,255,.95);font-size:13px;font-family:'DM Sans',sans-serif;line-height:1.4}
.demo-banner-text strong{color:var(--color-white,#fff);font-weight:700;letter-spacing:.02em}
.demo-banner-sub{display:block;font-size:11px;color:rgba(255,255,255,.7);margin-top:1px}
.demo-banner-cta{display:inline-flex;align-items:center;padding:6px 18px;border-radius:20px;
  background:var(--color-white,#fff);color:var(--color-premium,#7C3AED);font-size:12px;font-weight:700;text-decoration:none;
  font-family:'DM Sans',sans-serif;white-space:nowrap;flex-shrink:0;
  transition:all .2s ease;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.demo-banner-cta:hover{transform:scale(1.04);box-shadow:0 4px 12px rgba(0,0,0,.2);background:var(--color-premium-wash,#F5F3FF);color:var(--color-premium-dark,#6D28D9)}
.demo-banner-close{background:none;border:none;color:rgba(255,255,255,.7);font-size:20px;
  cursor:pointer;padding:4px 8px;flex-shrink:0;transition:color .15s;line-height:1}
.demo-banner-close:hover{color:var(--color-white,#fff)}

/* Mobile: hide header demo btn text, show only icon */
@media(max-width:768px){
  .hdr-demo-txt{display:none}
  .hdr-demo-btn{padding:0 10px;height:30px}
  .demo-banner-inner{flex-wrap:wrap;gap:8px}
  .demo-banner-sub{display:none}
}

/* ── PILLS SUBNAV ROW — solo sobre mapa (no cubre sidebar) ── */
#hdr-pills-row{
  position:absolute;top:0;left:272px;right:0;height:42px;
  z-index:50;
  background:linear-gradient(180deg,rgba(11,20,35,.92) 0%,rgba(8,16,30,.88) 100%);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
  padding:0 16px;overflow:visible;
}
/* Wrapper que centra pills + count como una unidad */
.pills-inner-group{
  display:flex;align-items:center;gap:0;
  overflow:visible;min-width:0;max-width:100%;
}
/* Pills inside subnav: centered, show icon + text — shrink before pills-count loses visibility */
#hdr-pills-row .hdr-pills{
  display:flex;gap:6px;overflow:hidden;
  align-items:center;flex-wrap:nowrap;
  flex-shrink:1;min-width:0;
}
#hdr-pills-row .hdr-pill{
  padding:5px 14px!important;font-size:11px!important;
  gap:6px!important;border-radius:20px!important;line-height:normal!important;
  border-color:rgba(255,255,255,.12)!important;
  color:rgba(255,255,255,.75)!important;
  background:rgba(255,255,255,.05)!important;
}
#hdr-pills-row .hdr-pill img{height:20px!important}
#hdr-pills-row .hdr-pill:hover{
  border-color:rgba(255,255,255,.32)!important;
  color:var(--color-white,#fff)!important;background:rgba(255,255,255,.10)!important;
}
#hdr-pills-row .hdr-pill.on{
  background:rgba(13,148,136,.28)!important;
  border-color:rgba(13,148,136,.6)!important;
  color:var(--color-white,#fff)!important;
}
@media(max-width:720px){#hdr-pills-row{display:none}}

/* Sabores CTA in main header */
.hdr-sabores-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 15px;border-radius:20px;
  background:linear-gradient(135deg,rgba(217,119,6,.18),rgba(251,191,36,.1));
  border:1.5px solid rgba(217,119,6,.4);
  color:var(--color-gold,#F59E0B);font-size:12px;font-weight:700;
  text-decoration:none;white-space:nowrap;flex-shrink:0;
  font-family:'DM Sans',sans-serif;
  transition:all .22s;letter-spacing:.01em;
}
.hdr-sabores-btn:hover{
  background:linear-gradient(135deg,rgba(217,119,6,.3),rgba(251,191,36,.18));
  border-color:rgba(217,119,6,.7);color:var(--color-gold-highlight,#FCD34D);transform:translateY(-1px);
}

@media(max-width:900px){.hdr-sabores-btn{display:none}}
@media(max-width:720px){#hdr-pills-row{display:none}}

/* ── HeladoPro layer toggle (pills row, right side) ── */
#pro-layer-toggle{
  display:none;   /* shown via JS when user is authenticated pro */
  align-items:center;gap:4px;
  margin-left:auto;padding-left:14px;
  border-left:1px solid rgba(255,255,255,.1);flex-shrink:0;
}
.pro-layer-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:20px;
  background:rgba(13,148,136,.1);border:1px solid rgba(94,234,212,.2);
  color:rgba(255,255,255,.6);font-size:12px;font-weight:600;
  cursor:pointer;transition:all .2s;white-space:nowrap;font-family:'DM Sans',sans-serif;
}
.pro-layer-btn:hover{
  background:rgba(13,148,136,.2);border-color:rgba(94,234,212,.4);color:var(--color-white,#fff);
}
.pro-layer-btn.active{
  background:rgba(13,148,136,.25);border-color:rgba(94,234,212,.5);color:var(--teal-lt,#5EEAD4);
}
.pro-layer-icon{ font-size:13px; }
.pro-layer-label{ font-size:11px; }
.pro-layer-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(94,234,212,.4);flex-shrink:0;
  transition:background .2s;
}
.pro-layer-btn.active .pro-layer-dot{ background:var(--teal-lt,#5EEAD4); }
.pro-layer-link{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.35);text-decoration:none;
  transition:all .18s;flex-shrink:0;
}
.pro-layer-link:hover{ background:rgba(94,234,212,.1);color:var(--teal-lt,#5EEAD4);border-color:rgba(94,234,212,.3); }
@media(max-width:960px){ .pro-layer-label{display:none} }
@media(max-width:720px){ #pro-layer-toggle{display:none!important} }