/* =========================
   PidoNeiva — styles.css (LIMPIO)
   ✅ sin duplicados
   ✅ sin llaves rotas en responsive
   ✅ chips pastilla + chip-card (sin conflictos)
   ========================= */

/* =========================
   Variables / Base
   ========================= */
:root{
  --brand:#E11D2E;
  --brand-2:#F97316;
  --bg:#F8FAFC;
  --text:#0F172A;
  --muted:#64748B;
  --line:#EAEFF5;
}

body{
  background: var(--bg);
}

.navbar{
  background:#fff;
}

.shadow-soft{
  box-shadow: 0 10px 30px rgba(2, 6, 23, .08);
}

/* =========================
   Navbar actions
   ========================= */
.nav-actions{
  gap: 10px !important;
}

.nav-pill-btn{
  min-height: 38px;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.nav-btn{
  min-height: 40px;
  padding: 0 16px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent !important;
}

.nav-btn-primary{
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
}

.nav-btn-primary:hover{
  background: #c51624 !important;
  border-color: #c51624 !important;
  color: #fff !important;
}

.nav-btn-soft{
  background: #fff !important;
  color: #2563eb !important;
  border: 1px solid #cfd8e3 !important;
}

.nav-btn-soft:hover{
  background: #f8fafc !important;
  color: #1d4ed8 !important;
  border-color: #bfcad8 !important;
}

.nav-btn-danger-outline{
  background: #fff !important;
  color: var(--brand) !important;
  border: 1px solid rgba(225, 29, 46, 0.75) !important;
}

.nav-btn-danger-outline:hover{
  background: rgba(225, 29, 46, 0.06) !important;
  color: var(--brand) !important;
}

/* 🔥 FIX BOTÓN INGRESAR */
.nav-btn.dropdown-toggle{
  background: #ffffff !important;
  color: #2563eb !important;
  border: 1px solid #cfd8e3 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px !important;
}

.nav-btn.dropdown-toggle:hover{
  background: #f8fafc !important;
  color: #1d4ed8 !important;
  border-color: #bfcad8 !important;
}

.dropdown-toggle::after{
  margin-left: 6px;
  vertical-align: middle;
}

.nav-login-dropdown{
  min-width: 230px;
  border-radius: 14px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10) !important;
  padding: 8px !important;
}

.nav-login-dropdown .dropdown-item{
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
  color: #0f172a;
}

.nav-login-dropdown .dropdown-item:hover{
  background: #f8fafc;
  color: #111827;
}

@media (max-width: 768px){
  .nav-actions{
    gap: 8px !important;
  }

  .nav-btn,
  .nav-pill-btn{
    min-height: 36px;
    padding: 0 12px !important;
    font-size: 0.92rem;
  }

  .nav-login-dropdown{
    min-width: 210px;
  }
}
/* =========================
   Navbar / Branding
   ========================= */
.navbar{
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
}
.brand-logo{
  height: 36px;
  width: auto;
  display: block;
}
.brand-name{
  font-weight: 900;
  letter-spacing: .2px;
}

/* =======================
   Chips (Carrusel categorías) — PASTILLA (ACTIVO)
   ======================= */

/* contenedor con scroll horizontal */
.chip-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.chip-scroll::-webkit-scrollbar{ display:none; } /* Chrome */

/* fila */
.chips-row{
  display:flex;
  gap:10px;
  padding: 2px 2px 8px;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
}

/* chip base */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:999px;
  background:#F1F5F9;
  border:1px solid #E2E8F0;
  color: var(--text);
  font-size:14px;
  font-weight:700;
  flex:0 0 auto;
  scroll-snap-align:start;

  text-decoration:none;
  cursor:pointer;
  user-select:none;

  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* efecto táctil */
.chip:active{ transform: scale(.97); }

/* hover */
.chip:hover{
  background: rgba(225,29,46,.10);
  border-color: rgba(225,29,46,.35);
  transform: translateY(-1px);
}

/* activo */
.chip-active{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow:
    0 6px 14px rgba(0,0,0,.08),
    0 10px 28px rgba(225,29,46,.25);
  transform: translateY(-1px);
}
.chip-active:hover{ filter: brightness(.95); }

/* chip “Más” */
.chip-more{
  background:#fff;
  border:1px dashed rgba(249,115,22,.70);
  color: var(--brand-2);
}
.chip-more:hover{
  background: var(--brand-2);
  border-color: var(--brand-2);
  color:#fff;
}

/* =========================
   Buttons / Tags / Shadows
   ========================= */
.btn-brand,
.btn.btn-brand{
  background: var(--brand) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 999px !important;
}
.btn-brand:hover{ filter: brightness(.92); }

.btn-outline-secondary{
  border-radius: 999px !important;
  border-color: #D9E2EC !important;
  color: #334155 !important;
}
.btn-outline-secondary:hover{ background: #F1F5F9 !important; }

.shadow-soft{
  box-shadow: 0 14px 40px rgba(2,6,23,.06) !important;
}

.tag{
  background: #ECFEFF !important;
  color: #0E7490 !important;
  border-radius: 999px !important;
  padding: .35rem .7rem !important;
  font-weight: 700 !important;
}

.text-secondary{ color: var(--muted) !important; }

/* =========================
   Cards (general)
   ========================= */
.card{
  border: 0 !important;
  border-radius: 22px !important;
  transition: box-shadow .25s ease;
}

/* ✅ no mover todas las cards */
.card:hover{
  transform: none !important;
  box-shadow: none !important;
}

/* =========================
   Business Card PRO
   ========================= */
.business-card{
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.business-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(2,6,23,.12);
}

/* Portada */
.business-hero{ position: relative; height: 180px; }

.business-cover{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.business-card:hover .business-cover{ transform: scale(1.03); }

.business-cover-fallback{
  width: 100%;
  height: 180px;
  background: #eef2ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gradiente */
.hero-gradient{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.08));
  z-index: 2;
}

/* Texto */
.hero-title{
  position: absolute;
  left: 14px;
  bottom: 16px;
  z-index: 4;
  color: #fff;
  max-width: calc(100% - 28px);
  padding-left: 52px;
}
.hero-name{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.1;
  text-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.hero-sub{ font-size: 12px; opacity: .92; }

/* Logo flotante */
.hero-logo{
  position: absolute;
  left: 14px;
  bottom: -18px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  overflow: hidden;
  border: 3px solid #fff;
  background: #fff;
  z-index: 6;
  box-shadow: 0 10px 26px rgba(2,6,23,.18);
}
.hero-logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* para no chocar con logo */
.business-card .p-3{ padding-top: 38px !important; }

/* Badges */
.badge-absolute{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 7;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.badge-absolute-right{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 7;
}

/* Pills */
.pill{
  font-size: 12px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(0,0,0,.65);
  color: #fff;
}
.pill.featured{ background: rgba(249,115,22,.92); }
.pill.popular{
  background: rgba(225,29,46,.92);
  animation: glowPopular 2s ease-in-out infinite;
}
.pill-success{ background: rgba(16,185,129,.92); }
.pill-muted{ background: rgba(100,116,139,.88); }

.pill-success .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.75);
  animation: pulseDot 1.2s infinite;
}

@keyframes pulseDot{
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.75); transform: scale(1); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); transform: scale(1); }
}
@keyframes glowPopular{
  0%   { box-shadow: 0 0 0 rgba(239,68,68,0); }
  50%  { box-shadow: 0 0 14px rgba(239,68,68,.55); }
  100% { box-shadow: 0 0 0 rgba(239,68,68,0); }
}

/* Espaciado cards */
.row.g-3{ row-gap: 28px !important; }

/* =========================
   Hero Search (Home panel)
   ========================= */
.hero-search{
  border: 1px solid var(--line) !important;
  box-shadow: 0 16px 44px rgba(2,6,23,.06) !important;
}

/* =========================
   HOME — UI (tabs + search + filtros)
   ========================= */
.home-tabs{ display:flex; gap:12px; }

.home-tab{
  flex: 1 1 0;
  text-align:center;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background:#fff;
  text-decoration:none;
  font-weight: 900;
  color: var(--text);
}
.home-tab.active{
  border-color: rgba(225,29,46,.35);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  color: var(--brand);
}

/* Searchbar */
.home-searchbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 14px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background:#fff;
  box-shadow: 0 10px 26px rgba(2,6,23,.05);
}
.home-search-icon{ opacity:.7; font-size: 16px; }
.home-search-input{
  border:0;
  outline:0;
  width:100%;
  font-weight:800;
  background: transparent;
}

/* Filtros */
.home-filters{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap: wrap;
}
.home-filter-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background:#fff;
  box-shadow: 0 10px 26px rgba(2,6,23,.04);
}
.home-filter-ic{ opacity:.8; }

.home-filter-label{
  font-weight:900;
  color: var(--text);
  font-size: 13px;
}
.home-filter-select{
  border:0;
  outline:0;
  font-weight: 900;
  background: transparent;
  color: var(--text);
  padding-right: 6px;
}

/* Switch */
.home-switch{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background:#fff;
  box-shadow: 0 10px 26px rgba(2,6,23,.04);
  cursor:pointer;
  user-select:none;
}
.home-switch input{ display:none; }

.home-slider{
  width: 42px;
  height: 24px;
  border-radius: 999px;
  position: relative;
  background: #E2E8F0;
  transition: .2s ease;
}
.home-slider::after{
  content:"";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background:#fff;
  position:absolute;
  top:3px;
  left:3px;
  transition: .2s ease;
  box-shadow: 0 8px 16px rgba(2,6,23,.18);
}
.home-switch input:checked + .home-slider{
  background: rgba(16,185,129,.85);
}
.home-switch input:checked + .home-slider::after{ left: 21px; }

.home-switch-text{
  font-weight: 900;
  font-size: 13px;
  color: var(--text);
}

/* =========================
   Chip-cards (opcional) — SIN CONFLICTO
   (Solo si algún día usas .chip-card)
   ========================= */
.chipcard-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.chipcard-scroll::-webkit-scrollbar{ display:none; }

.chipcard-row{
  display:flex;
  gap:12px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.chip-card{
  min-width: 98px;
  height: 88px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  gap:8px;
  text-decoration:none;
  box-shadow: 0 12px 28px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.chip-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(2,6,23,.10);
  border-color: #dbe6f2;
}
.chip-emoji{ font-size: 28px; line-height: 1; }
.chip-text{
  font-weight: 950;
  font-size: 13px;
  color: var(--text);
}
.chip-card-active{
  background: rgba(225,29,46,.10);
  border-color: rgba(225,29,46,.22);
}
.chip-card-active .chip-text{ color: var(--brand); }
.chip-card-more{
  background: rgba(249,115,22,.10);
  border-color: rgba(249,115,22,.22);
}

/* =========================
   Ranking sidebar
   ========================= */
.ranked-list{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}
.ranked-item{
  display: grid !important;
  grid-template-columns: 28px 40px 1fr 14px;
  gap: 10px;
  align-items: center;
  padding: 12px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  text-decoration: none !important;
  background: #fff !important;
}
.ranked-item:last-child{ border-bottom: 0 !important; }
.ranked-item:hover{ background: #F8FAFC !important; }

.rank-badge{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 12px;
  color: #fff;
  background: rgba(249,115,22,.95);
}
.ranked-thumb{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
  background: #fff;
}
.ranked-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ranked-thumb-fallback{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #EEF2FF;
  font-size: 18px;
}
.ranked-meta{ min-width: 0; }
.ranked-name{
  font-weight: 900;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}
.ranked-sub{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 18px;
  border-radius: 999px;
  background: rgba(225,29,46,.12);
  color: var(--brand);
  font-weight: 900;
  font-size: 12px;
}
.ranked-status{
  display: flex;
  justify-content:center;
  align-items:center;
}
.mini-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.mini-dot-open{ background: #16A34A; }
.mini-dot-closed{ background: #94A3B8; }

/* Sidebar sticky */
.sidebar-sticky{ position: sticky; top: 90px; }
@media (max-width: 991px){
  .sidebar-sticky{ position: static; top: auto; }
}

/* =========================
   Banner Premium Sidebar
   ========================= */
.premium-banner{
  background: linear-gradient(135deg, #E11D2E, #F97316);
  border-radius: 22px;
  padding: 22px;
  color: white;
  box-shadow: 0 20px 50px rgba(225,29,46,.25);
  position: relative;
  overflow: hidden;
}
.premium-banner::after{
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
}
.premium-content{ position: relative; z-index: 2; }
.premium-title{
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 6px;
}
.premium-sub{
  font-size: 13px;
  opacity: .95;
  margin-bottom: 14px;
}
.premium-btn{
  border-radius: 999px !important;
  font-weight: 800 !important;
  padding: 8px 18px !important;
  color: #E11D2E !important;
}

/* Sidebar card border */
.sidebar-card{ border: 1px solid var(--line); }

/* =========================
   Home metrics
   ========================= */
.home-metrics{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}
.metric-card{
  flex: 1 1 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(2,6,23,.05);
}
.metric-number{
  font-weight: 950;
  font-size: 28px;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.5px;
}
.metric-label{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

/* =========================
   CART FLOAT BAR
   ========================= */
.cart-floatbar{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(760px, calc(100% - 24px));
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  padding: 12px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 1200;
  box-shadow: 0 22px 44px rgba(2,6,23,.22);
  animation: cartSlideUp .35s ease;
}
@keyframes cartSlideUp{
  from{ opacity: 0; transform: translate(-50%, 20px); }
  to{ opacity: 1; transform: translate(-50%, 0); }
}
.cart-floatbar-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cart-floatbar-icon{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: 0 0 auto;
}
.cart-floatbar-title{
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 2px;
}
.cart-floatbar-sub{
  font-size: 12px;
  opacity: .95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52vw;
}
.cart-floatbar-btn{
  border-radius: 999px !important;
  font-weight: 900 !important;
  padding: 10px 14px !important;
}

/* =========================
   Responsive tweaks (mobile)
   ========================= */
@media (max-width: 576px){

  .hero-search{ padding: 14px !important; }

  .row.g-3{ row-gap: 14px !important; }
  .business-hero{ height: 120px; }
  .business-cover{ height: 120px; }
  .hero-name{ font-size: 17px; }

  .cart-floatbar{
    border-radius: 18px;
    padding: 12px 14px;
    bottom: 10px;
  }
  .cart-floatbar-btn{ padding: 8px 12px !important; }
  body{ padding-bottom: 110px; }

  .home-tabs{ gap:10px; }
  .home-tab{ padding: 10px 12px; }

  .home-filters{
    flex-wrap: nowrap;
    gap: 10px;
  }
  .home-filter-pill{
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
  }
  .home-filter-select{ max-width: 110px; }

  .home-switch{
    flex: 0 0 auto;
    padding: 10px 12px;
    white-space: nowrap;
    gap: 8px;
  }

  .home-switch-text{
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
  }
}

/* =========================
   BUSINESS DETAIL HERO (si lo usas en detail)
   ========================= */
.business-hero-card{
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
  margin-bottom: 16px;
}

.business-hero-bg{ position: relative; height: 210px; }
.business-hero-img{
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}
.business-hero-gradient{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.10));
}
.business-hero-status{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
}
.business-hero-content{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 4;
  display: flex;
  gap: 14px;
  align-items: flex-end;
}
.business-hero-logo{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  overflow: hidden;
  border: 3px solid #fff;
  background: #fff;
  box-shadow: 0 12px 26px rgba(2,6,23,.20);
  flex: 0 0 auto;
}
.business-hero-logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.business-hero-text{ color: #fff; min-width: 0; }
.business-hero-name{
  margin: 0;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  text-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.business-hero-sub{ font-size: 13px; opacity: .92; }

.business-hero-link{
  color: #dbeafe;
  text-decoration: none;
  font-weight: 600;
}
.business-hero-link:hover{ text-decoration: underline; }

.business-hero-actions{
  padding: 14px 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================
   HOME — Sticky + mobile compact (FINAL)
   ========================= */

/* Por defecto (desktop/tablet): no sticky */
.home-sticky{
  background: transparent;
}

/* Oculta título en móvil (solo si tu H1 tiene class="home-title") */
@media (max-width: 576px){
  .home-title{ display:none; }
}

/* Sticky SOLO en móvil */
@media (max-width: 576px){

  .home-sticky{
    position: sticky;
    top: 56px;
    z-index: 60;
    background: var(--bg);
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(234,239,245,.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .home-search{ margin-bottom: 0; }

  .home-filters{
    flex-wrap: nowrap;
    gap: 10px;
  }

  .home-filter-pill{
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
  }

  .home-filter-select{
    max-width: 120px;
  }

  .home-switch{
    flex: 0 0 auto;
    padding: 10px 12px;
    white-space: nowrap;
  }

  .home-switch-text{
  display: inline-block !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  }
}

/* =========================
   DASHBOARD - BOTONES PANEL
   ========================= */
.panel-actions-wrap{
  margin-top: 10px;
}

.panel-actions-scroll{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px 10px;
  scroll-snap-type: x mandatory;
}

.panel-actions-scroll::-webkit-scrollbar{
  height:6px;
}

.panel-actions-scroll::-webkit-scrollbar-thumb{
  background:rgba(2,6,23,.15);
  border-radius:999px;
}

.panel-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  flex:0 0 auto;
  scroll-snap-align:start;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid #E5E7EB;
  background:#fff;
  color:#0F172A;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(2,6,23,.06);
  transition:transform .12s ease, box-shadow .12s ease;
}

.panel-btn:active{
  transform:scale(.97);
}

.panel-btn-primary{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  box-shadow:0 10px 22px rgba(225,29,46,.18);
}

.panel-btn-outline{
  border:1px solid #3B82F6;
  color:#1D4ED8;
  background:#fff;
  box-shadow:none;
}

.panel-btn-link{
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
  border:2px solid #3B82F6;
  color:#1D4ED8;
  font-weight:800;
  box-shadow:none;
}

.panel-badge{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  flex:0 0 auto;
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  scroll-snap-align:start;
}

.panel-badge-warning{
  background:#FEF3C7;
  border:1px solid #F59E0B;
  color:#92400E;
}

.panel-btn i{
  font-size:14px;
  margin-right:6px;
}

.panel-badge i{
  margin-right:6px;
}

/* =========================
   Business meta (tiempo, visitas, etc.)
   ========================= */
.business-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 6px;
}

.meta-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #F1F5F9;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* =========================
   Scroll horizontal productos
   ========================= */
.products-row{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}

.products-row::-webkit-scrollbar{
  display: none;
}

.products-row{
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.product-card{
  flex: 0 0 220px;
  scroll-snap-align: start;
}

/* ✅ NUEVO: cuando solo hay una categoría visible, llenar con grilla */
.products-row.products-grid-fill{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  overflow: visible;
  padding-bottom: 0;
  scroll-snap-type: none;
}

.products-row.products-grid-fill .product-card{
  flex: unset;
  width: 100%;
  min-width: 0;
}

@media (min-width: 768px){
  .products-row.products-grid-fill{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== Categorías (chips) ===== */
.menu-categories{
  display:flex;
  gap:10px;
  overflow-x:auto;
  flex-wrap:nowrap;
  padding:8px 2px 10px;
  scroll-snap-type:x mandatory;
}

.menu-categories::-webkit-scrollbar{ display:none; }
.menu-categories{ -ms-overflow-style:none; scrollbar-width:none; }

.menu-category{
  flex:0 0 auto;
  scroll-snap-align:start;
  padding:8px 14px;
  border-radius:999px;
  background:#F1F5F9;
  border:1px solid #E2E8F0;
  font-weight:700;
  font-size:14px;
  white-space:nowrap;
  text-decoration:none;
  color:#0f172a !important;
}

.menu-category:hover{
  background:#E2E8F0;
}

.menu-category-active{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff !important;
}

/* ✅ cuando hay pocas categorías, llenar mejor el ancho */
.menu-categories.menu-categories-fill{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  overflow:visible;
  white-space:normal;
  scroll-snap-type:none;
}

.menu-categories.menu-categories-fill .menu-category{
  width:100%;
  text-align:center;
  white-space:normal;
}

@media (min-width: 768px){
  .menu-categories.menu-categories-fill{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

/* =========================
   Clamp (limitar líneas)
   ========================= */
.clamp-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25rem;
  max-height: calc(1.25rem * 2);
}

/* =========================
   PidoNeiva HOME NUEVA
   ✅ bloque aislado
   ✅ sin conflicto con estilos actuales
   ========================= */
.pn-home-page{
  padding: 16px;
}

.pn-home-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

.pn-home-brand-logo{
  height:38px;
  object-fit:contain;
}

.pn-home-panel-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#444;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  font-size:22px;
}

.pn-home-search-card{
  background:#fff;
  border-radius:18px;
  padding:14px;
  box-shadow:0 6px 22px rgba(0,0,0,.06);
  margin-bottom:18px;
}

.pn-home-search-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.pn-home-search-box{
  display:flex;
  align-items:center;
  background:#f7f7f7;
  border:1px solid #ececec;
  border-radius:16px;
  overflow:hidden;
}

.pn-home-search-btn{
  width:52px;
  height:52px;
  border:none;
  background:transparent;
  color:#666;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.pn-home-search-input{
  flex:1;
  height:52px;
  border:none;
  outline:none;
  background:transparent;
  padding:0 14px 0 0;
  font-size:16px;
  color:var(--text);
}

.pn-home-search-input::placeholder{
  color:#94A3B8;
}

.pn-home-filters-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.pn-home-zone-pill,
.pn-home-status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  background:#f7f7f7;
  border:1px solid #ececec;
  font-size:14px;
  color:#555;
  font-weight:700;
}

.pn-home-status-pill.active{
  background:#eaf8ee;
  color:#218838;
  border-color:#d8f0df;
}

.pn-home-section{
  margin-bottom:22px;
}

.pn-home-section-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.pn-home-section-title{
  margin:0;
  font-size:22px;
  font-weight:800;
  color:#1f2937;
}

.pn-home-featured-scroll{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
}

.pn-home-featured-scroll::-webkit-scrollbar{
  display:none;
}

.pn-home-featured-scroll{
  -ms-overflow-style:none;
  scrollbar-width:none;
}

.pn-home-featured-card{
  flex:0 0 150px;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  scroll-snap-align:start;
}

.pn-home-featured-card-media{
  height:120px;
  background:#f3f4f6;
  display:flex;
  align-items:center;
  justify-content:center;
}

.pn-home-featured-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.pn-home-featured-card-placeholder{
  width:58px;
  height:58px;
  border-radius:16px;
  background:#ddd;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:700;
  color:#555;
}

.pn-home-featured-card-body{
  padding:10px 12px 12px;
}

.pn-home-featured-card-name{
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  min-height:36px;
}

.pn-home-featured-card-meta{
  margin-top:6px;
  font-size:13px;
  color:#666;
  display:flex;
  align-items:center;
  gap:6px;
}

.pn-home-chips-row{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
}

.pn-home-chips-row::-webkit-scrollbar{
  display:none;
}

.pn-home-chips-row{
  -ms-overflow-style:none;
  scrollbar-width:none;
}

.pn-home-chip{
  white-space:nowrap;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid #e7e7e7;
  background:#fff;
  color:#444;
  text-decoration:none;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.pn-home-chip:hover{
  background:#fff1ed;
  color:#e4572e;
  border-color:#ffd8cc;
}

.pn-home-chip-active{
  background:#fff1ed;
  color:#e4572e;
  border-color:#ffd8cc;
}

.pn-home-business-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.pn-home-business-row-card{
  display:flex;
  gap:14px;
  align-items:center;
  background:#fff;
  border-radius:18px;
  padding:14px;
  text-decoration:none;
  color:inherit;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}

.pn-home-business-row-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.pn-home-business-row-logo{
  flex:0 0 68px;
  width:68px;
  height:68px;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1px solid #eee;
  display:flex;
  align-items:center;
  justify-content:center;
}

.pn-home-business-row-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
}

.pn-home-business-row-logo-placeholder{
  width:44px;
  height:44px;
  border-radius:12px;
  background:#ddd;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#555;
}

.pn-home-business-row-info{
  flex:1;
  min-width:0;
}

.pn-home-business-row-name{
  font-size:20px;
  font-weight:800;
  color:#1f2937;
  line-height:1.15;
  margin-bottom:4px;
}

.pn-home-business-row-category{
  font-size:15px;
  color:#6b7280;
  margin-bottom:6px;
}

.pn-home-business-row-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  font-size:14px;
  color:#4b5563;
}

.pn-home-meta-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.pn-home-dot-open,
.pn-home-dot-closed{
  width:9px;
  height:9px;
  border-radius:50%;
  display:inline-block;
}

.pn-home-dot-open{
  background:#28a745;
}

.pn-home-dot-closed{
  background:#dc3545;
}

.pn-home-empty-state{
  background:#fff;
  padding:18px;
  border-radius:16px;
  text-align:center;
  color:#666;
  box-shadow:0 6px 20px rgba(0,0,0,.05);
}

/* =========================
   Responsive HOME NUEVA
   ========================= */
@media (max-width: 576px){

  .pn-home-page{
    padding:12px;
  }

  .pn-home-brand-logo{
    height:34px;
  }

  .pn-home-panel-btn{
    width:40px;
    height:40px;
    font-size:20px;
  }

  .pn-home-search-card{
    padding:12px;
    border-radius:16px;
  }

  .pn-home-search-btn{
    width:46px;
    height:46px;
    font-size:18px;
  }

  .pn-home-search-input{
    height:46px;
    font-size:15px;
  }

  .pn-home-filters-row{
    gap:8px;
  }

  .pn-home-zone-pill,
  .pn-home-status-pill{
    font-size:13px;
    padding:7px 10px;
  }

  .pn-home-section-title{
    font-size:19px;
  }

  .pn-home-featured-card{
    flex:0 0 132px;
    border-radius:16px;
  }

  .pn-home-featured-card-media{
    height:102px;
  }

  .pn-home-featured-card-name{
    font-size:14px;
    min-height:32px;
  }

  .pn-home-chip{
    padding:9px 14px;
    font-size:14px;
  }

  .pn-home-business-row-card{
    padding:12px;
    gap:12px;
    border-radius:16px;
  }

  .pn-home-business-row-logo{
    flex:0 0 60px;
    width:60px;
    height:60px;
    border-radius:14px;
  }

  .pn-home-business-row-name{
    font-size:17px;
  }

  .pn-home-business-row-category{
    font-size:14px;
  }

  .pn-home-business-row-meta{
    font-size:13px;
    gap:6px 10px;
  }
}

/* ocultar botón buscar home temporal */
.hide-home-search-btn{
  display:none;
}

.service-pill{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.25rem .6rem;
  border-radius:999px;
  font-size:.75rem;
  font-weight:600;
  line-height:1;
}

.service-delivery{
  background:#e0f2fe;
  color:#0369a1;
}

.service-pickup{
  background:#fef3c7;
  color:#b45309;
}

.service-both{
  background:#dcfce7;
  color:#15803d;
}

/* =========================
🌙 NIGHT MODE
========================= */

.night-mode {
  background: radial-gradient(circle at top, #111827 0%, #0b1220 45%, #091224 100%);
  padding: 20px;
  border-radius: 20px;
}

.night-mode .bg-white,
.night-mode .sidebar-card,
.night-mode .hero-search,
.night-mode .pn-home-search-card {
  background: #111827 !important;
  color: #e5e7eb;
}

.night-mode .pn-home-business-row-card {
  background: #1e293b !important;
  border: 1px solid #334155;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.night-mode .pn-home-business-row-name {
  color: #fff;
}

.night-mode .pn-home-business-row-category,
.night-mode .pn-home-business-row-meta,
.night-mode .text-secondary {
  color: #9ca3af !important;
}

.night-mode .pn-home-chip {
  background: #1f2937;
  color: #e5e7eb;
  border: 1px solid #374151;
}

.night-mode .pn-home-chip-active {
  background: #7c3aed;
  color: #fff;
  border: none;
}

.night-mode .home-tab {
  background: #1f2937;
  color: #d1d5db !important;
  border: 1px solid #374151;
}

.night-mode .home-tab.active {
  background: #7c3aed;
  color: #fff;
}

.night-mode .pn-home-featured-card {
  background: #1f2937;
}

.night-mode .pn-home-section-title {
  color: #fff;
}

.night-mode input,
.night-mode select {
  background: #111827;
  color: #fff;
  border: 1px solid #374151;
}

.night-mode .premium-banner {
  background: linear-gradient(135deg, #7c3aed, #4c1d95);
  color: #fff;
}

/* =========================
🌙 NIGHT DETAIL MODE
========================= */

.night-detail {
  background: #0b0f1a;
  color: #e5e7eb;
}

/* textos */
.night-detail h1,
.night-detail h2,
.night-detail h3,
.night-detail .fw-bold {
  color: #fff;
}

/* tarjetas */
.night-detail .card {
  background: #111827;
  border: 1px solid #1f2937;
}

/* botones */
.night-detail .btn-outline-secondary {
  color: #d1d5db;
  border-color: #374151;
}

.night-detail .btn-outline-secondary:hover {
  background: #1f2937;
}

/* tabs */
.night-detail .nav-pills .nav-link {
  background: #1f2937;
  color: #9ca3af;
}

.night-detail .nav-pills .nav-link.active {
  background: #7c3aed;
  color: #fff;
}

/* inputs */
.night-detail input,
.night-detail textarea {
  background: #111827;
  color: #fff;
  border: 1px solid #374151;
}

/* tabla carrito */
.night-detail .table {
  color: #e5e7eb;
}

.night-detail .table thead {
  background: #1f2937;
}

/* alertas */
.night-detail .alert {
  background: #1f2937;
  border: 1px solid #374151;
  color: #e5e7eb;
}

/* float cart */
.night-detail .cart-floatbar {
  background: #111827;
  border-top: 1px solid #374151;
}

/* categorías */
.night-detail .menu-category {
  background: #1f2937;
  color: #d1d5db;
}

.night-detail .menu-category.active {
  background: #7c3aed;
  color: #fff;
}
/* =========================
   EXTRA NIGHT HOME
   ========================= */

.text-purple{
  color:#a855f7 !important;
}

.night-mode .pn-home-business-row-card:hover{
  box-shadow:0 10px 24px rgba(124,58,237,.18);
}

.night-mode .pn-home-business-row-logo{
  background:#111827;
  border:1px solid #374151;
}

.night-mode .pn-home-business-row-logo-placeholder{
  background:#374151;
  color:#e5e7eb;
}

.night-mode .pn-home-featured-card-name,
.night-mode .pn-home-featured-card-meta,
.night-mode .pn-home-featured-card-body{
  color:#e5e7eb;
}

.night-mode .pn-home-zone-pill,
.night-mode .home-switch{
  background:#1f2937;
  border:1px solid #374151;
  color:#e5e7eb;
}

.night-mode .home-switch-text{
  color:#e5e7eb;
}

.night-mode .home-slider{
  background:#374151;
}

.night-mode .pn-home-search-box{
  background:#1f2937;
  border:1px solid #374151;
}

.night-mode .pn-home-search-input::placeholder{
  color:#9ca3af;
}

.night-mode .ranked-list,
.night-mode .ranked-item{
  background:#111827 !important;
  border-color:#374151 !important;
}

.night-mode .ranked-name{
  color:#f9fafb;
}

.night-mode .ranked-sub{
  color:#9ca3af;
}

.night-mode .small.text-warning{
  color:#fbbf24 !important;
}

/* =========================
   NIGHT BUSINESS DETAIL
========================= */
.night-business-wrapper {
  background: linear-gradient(180deg, #08101f 0%, #0f172a 100%);
  border-radius: 24px;
  padding: 20px;
  color: #f3f4f6;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.night-hero-card {
  border-radius: 22px;
  overflow: hidden;
  background: #111827;
  border: 1px solid rgba(255,255,255,.08);
}

.night-hero-cover {
  min-height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.night-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 10, 30, 0.30) 0%,
    rgba(5, 8, 24, 0.72) 55%,
    rgba(3, 6, 20, 0.92) 100%
  );
}

.night-hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 24px;
  gap: 16px;
}

.night-hero-left {
  display: flex;
  align-items: end;
  gap: 16px;
}

.night-logo {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.85);
  background: #fff;
}

.night-title {
  margin: 0 0 6px;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
}

.night-meta-line {
  color: #d1d5db;
  font-size: .95rem;
  margin-bottom: 8px;
}

.night-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 700;
}

.night-status-badge.open {
  background: rgba(34,197,94,.18);
  color: #86efac;
  border: 1px solid rgba(34,197,94,.35);
}

.night-status-badge.closed {
  background: rgba(239,68,68,.18);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,.35);
}

.night-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.night-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.night-info-card {
  background: linear-gradient(180deg, rgba(18, 24, 48, 0.96), rgba(10, 16, 34, 0.96));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 18px;
  color: #f3f4f6;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.night-info-card h5 {
  margin-bottom: 10px;
  font-weight: 800;
  color: #fff;
}

.night-section {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 18px;
}

.night-section-title {
  color: #fff;
  font-weight: 800;
}

.night-gallery-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-behavior: smooth;
}

.night-gallery-scroll::-webkit-scrollbar {
  height: 8px;
}

.night-gallery-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 20px;
}

.night-gallery-item {
  flex: 0 0 240px;
  height: 150px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #0b1220;
}

.night-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.night-tabs .nav-link {
  background: rgba(255,255,255,.06);
  color: #d1d5db;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  margin-right: 8px;
  padding: 10px 16px;
  font-weight: 600;
}

.night-tabs .nav-link.active {
  background: linear-gradient(90deg, #7c3aed, #ec4899);
  color: #fff;
  border-color: transparent;
}

.night-review-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.night-review-item:last-child {
  border-bottom: none;
}

@media (max-width: 991px) {
  .night-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .night-hero-content {
    flex-direction: column;
    align-items: flex-start;
    justify-content: end;
  }

  .night-hero-cover {
    min-height: 240px;
  }
}

@media (max-width: 767px) {
  .night-info-grid {
    grid-template-columns: 1fr;
  }

  .night-title {
    font-size: 1.5rem;
  }

  .night-logo {
    width: 68px;
    height: 68px;
  }

  .night-gallery-item {
    min-width: 200px;
    max-width: 200px;
    height: 130px;
  }
}


/* =========================
   NIGHT UI FINAL
========================= */

.night-ui-wrap {
  --night-bg: #081120;
  --night-card: linear-gradient(180deg, #121a31 0%, #18223f 100%);
  --night-border: rgba(255,255,255,0.08);
  --night-text: #f8fafc;
  --night-soft: #cbd5e1;
  --night-muted: #94a3b8;
  --night-accent: linear-gradient(90deg, #7c3aed 0%, #ec4899 100%);
  --night-success: #16a34a;
  --night-danger: #b91c1c;
}

.night-ui-wrap,
.night-ui-wrap * {
  color: var(--night-text);
}

.night-hero {
  position: relative;
  border-radius: 24px;
  min-height: 280px;
  background: linear-gradient(135deg, #050b16 0%, #0f172a 50%, #111827 100%);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--night-border);
}

.night-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(2, 6, 23, 0.25), rgba(2, 6, 23, 0.92));
  z-index: 1;
}

.night-hero-content {
  z-index: 2;
  padding: 28px;
}

.night-logo-wrap {
  width: 92px;
  height: 92px;
  min-width: 92px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.night-logo-img,
.night-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.night-logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.night-title {
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
}

.night-subinfo {
  color: var(--night-soft);
  font-size: 0.98rem;
}

.night-hero-text {
  max-width: 820px;
  color: #e2e8f0;
  font-size: 1rem;
  line-height: 1.7;
}

.night-badge-type {
  background: linear-gradient(90deg, #6d28d9, #db2777);
  color: #fff;
  border: 0;
  font-weight: 700;
  padding: 8px 12px;
}

.night-badge-open {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.35);
  font-weight: 700;
  padding: 8px 12px;
}

.night-badge-closed {
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.35);
  font-weight: 700;
  padding: 8px 12px;
}

.night-top-btn {
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 600;
}

.night-btn-reserve {
  background: var(--night-accent);
  color: #fff !important;
  border: 0;
  border-radius: 14px;
  font-weight: 700;
  padding: 12px 18px;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.22);
}

.night-btn-reserve:hover {
  transform: translateY(-1px);
  color: #fff !important;
}

.night-info-card,
.night-section-card,
.night-mini-box,
.night-review-card,
.night-reserve-box {
  background: var(--night-card);
  border: 1px solid var(--night-border);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.24);
}

.night-info-card {
  padding: 22px 18px;
  height: 100%;
  transition: 0.2s ease;
}

.night-info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.night-info-title,
.night-section-title {
  font-size: 1.45rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.night-info-text {
  color: var(--night-soft);
  font-size: 1rem;
  line-height: 1.7;
}

.night-ok {
  color: #86efac;
}

.night-no {
  color: #fca5a5;
}

.night-section-card {
  padding: 20px;
  background: linear-gradient(180deg, rgba(18, 24, 48, 0.96), rgba(10, 16, 34, 0.96));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.night-gallery-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-behavior: smooth;
}

.night-gallery-scroll::-webkit-scrollbar {
  height: 8px;
}

.night-gallery-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 20px;
}

.night-gallery-item {
  flex: 0 0 260px;
  height: 180px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #0b1220;
}

.night-tabs {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.night-tab-btn {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.2s ease;
}

.night-tab-btn:hover {
  background: rgba(255,255,255,0.10);
}

.night-tab-btn.active {
  background: linear-gradient(90deg, #7c3aed, #db2777);
  border-color: transparent;
  color: #fff;
}

.night-tab-panel {
  display: none;
  margin-top: 18px;
}

.night-tab-panel.active {
  display: block;
}

.night-mini-box {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}

.night-mini-title {
  font-weight: 800;
  margin-bottom: 8px;
  color: #fff;
}

.night-review-summary {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fde68a;
}

.night-review-card {
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.night-empty-state {
  color: var(--night-muted);
  padding: 12px 0;
}

.night-reserve-box {
  padding: 24px;
  border-radius: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}

.night-floating-wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  padding: 14px 18px;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.night-floating-wa:hover {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.32);
}

@media (max-width: 991.98px) {
  .night-hero-content {
    padding: 20px;
  }

  .night-gallery-item {
    flex: 0 0 220px;
    height: 150px;
  }
}

@media (max-width: 575.98px) {
  .night-title {
    font-size: 1.8rem;
  }

  .night-logo-wrap {
    width: 78px;
    height: 78px;
    min-width: 78px;
  }

  .night-floating-wa {
    right: 14px;
    bottom: 14px;
    padding: 12px 16px;
  }
}


/* LISTADO NEGOCIOS */
.night-business-list {
  margin-top: 14px;
}

.night-business-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(30, 41, 59, 0.82);
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  transition: all .2s ease;
}

.night-business-card:hover {
  transform: translateY(-2px);
  border-color: rgba(167, 139, 250, 0.35);
}

.night-business-thumb {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
  background: #0f172a;
}

.night-business-content {
  min-width: 0;
}

.night-business-name {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 3px;
}

.night-business-type {
  color: #c4b5fd;
  font-weight: 600;
  margin-bottom: 5px;
  font-size: .95rem;
}

.night-business-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 5px;
}

.night-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.night-pill.info {
  background: rgba(59, 130, 246, 0.18);
  color: #bfdbfe;
}

.night-pill.warning {
  background: rgba(245, 158, 11, 0.18);
  color: #fde68a;
}

.night-pill.success {
  background: rgba(16, 185, 129, 0.18);
  color: #a7f3d0;
}

.night-business-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #cbd5e1;
  font-size: 0.88rem;
}

/* DESTACADOS DERECHA */
.night-right-featured-wrap {
  margin-top: 4px;
}

.night-right-featured-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.night-right-featured-head h6 {
  color: #fff;
  font-weight: 800;
  margin: 0;
}

.night-right-featured-head a {
  text-decoration: none;
  font-weight: 600;
}

.night-right-featured-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(8, 15, 30, 0.9);
  border: 1px solid rgba(255,255,255,0.08);
}

.night-right-rank {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f97316;
  color: #fff;
  font-weight: 800;
  flex-shrink: 0;
}

.night-right-thumb {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.night-right-name {
  color: #fff;
  font-weight: 700;
  line-height: 1.1;
}

.night-right-meta {
  color: #cbd5e1;
  font-size: .9rem;
}

/* BOTÓN RESERVAR */
.night-btn-reserve {
  background: linear-gradient(135deg, #9333ea, #ec4899);
  border: none;
  color: white;
  transition: all 0.2s ease;
}

/* HOVER */
.night-btn-reserve:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* =========================
   NIGHT ACTIONS - FIX BOTONES
========================= */

.night-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.night-hero-actions .btn,
.night-hero-actions a.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px !important;
  border-radius: 999px !important; /* 🔥 ESTE ES EL FIX */
  font-weight: 600;
  line-height: 1 !important;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}

.night-btn-reserve,
.night-hero-actions .night-btn-reserve {
  background: linear-gradient(90deg, #7c3aed, #ec4899) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.22);
}

.night-btn-reserve:hover,
.night-hero-actions .night-btn-reserve:hover {
  color: #fff !important;
  opacity: .96;
}

.night-hero-actions .btn-outline-light {
  border: 1px solid rgba(255,255,255,.75) !important;
  background: transparent !important;
  color: #fff !important;
}

/* =========================
   NIGHT HERO ACTIONS - FIX REAL
========================= */

.night-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.night-hero-actions > a,
.night-hero-actions > .btn,
.night-hero-actions a.btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
  padding:0 18px !important;
  border-radius:999px !important;
  font-weight:700 !important;
  line-height:1 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

.night-hero-actions a.night-btn-reserve,
.night-hero-actions .night-btn-reserve{
  background:linear-gradient(90deg, #7c3aed, #ec4899) !important;
  border:1px solid transparent !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(124,58,237,.22) !important;
}

.night-hero-actions a.night-btn-reserve:hover,
.night-hero-actions .night-btn-reserve:hover{
  color:#fff !important;
  opacity:.96 !important;
  transform:none !important;
}

.night-hero-actions .btn-outline-light{
  background:transparent !important;
  border:1px solid rgba(255,255,255,.8) !important;
  color:#fff !important;
}

/* =========================
   NIGHT RESERVE SELECTOR
========================= */

.night-reserve-box{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 18px;
}

.night-reserve-title{
  color:#fff;
  font-weight:800;
  font-size:1.05rem;
}

.night-reserve-box .form-label{
  color:#cbd5e1;
  font-weight:600;
}

.night-reserve-box .form-control,
.night-reserve-box .form-select{
  background:#111827;
  color:#fff;
  border:1px solid #374151;
  border-radius:14px;
  min-height:44px;
}

.night-reserve-box .form-control::placeholder{
  color:#9ca3af;
}

.night-reserve-box .form-control:focus,
.night-reserve-box .form-select:focus{
  background:#111827;
  color:#fff;
  border-color:#7c3aed;
  box-shadow:0 0 0 .2rem rgba(124,58,237,.18);
}

.night-reserve-box{
  background: rgba(7, 15, 30, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 18px;
  max-width: 100%;
}

.night-reserve-title{
  color:#fff;
  font-weight:800;
  font-size:1.05rem;
}

.night-reserve-box .form-label{
  color:#cbd5e1;
  font-weight:600;
}

.night-reserve-box .form-control,
.night-reserve-box .form-select{
  background:#0f172a;
  color:#fff;
  border:1px solid #374151;
  border-radius:14px;
  min-height:44px;
}

.night-reserve-box .form-control::placeholder{
  color:#9ca3af;
}

.night-reserve-box .form-control:focus,
.night-reserve-box .form-select:focus{
  background:#0f172a;
  color:#fff;
  border-color:#7c3aed;
  box-shadow:0 0 0 .2rem rgba(124,58,237,.18);
}

/* =========================
   MODAL NIGHT
========================= */

.night-modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.night-modal-overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}

.night-modal-content{
  position: relative;
  z-index: 2;
  max-width: 500px;
  margin: auto;
  margin-top: 10vh;
  background: #0f172a;
  border-radius: 20px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.night-modal-header{
  display:flex;
  justify-content: space-between;
  align-items:center;
  color:#fff;
}

.night-modal-close{
  background:none;
  border:none;
  color:#fff;
  font-size:20px;
  cursor:pointer;
}

.night-btn-map {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(90deg, #7c3aed, #ec4899);
  border: none;
  box-shadow: 0 8px 20px rgba(236, 72, 153, 0.25);
  transition: all 0.2s ease;
}

.night-btn-map:hover {
  transform: translateY(-1px);
  color: #fff;
  opacity: 0.95;
}

.night-info-card p {
  margin-bottom: 10px;
}

.night-btn-parking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border: none;
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.25);
  transition: all 0.2s ease;
  cursor: pointer;
}

.night-btn-parking:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

/* =========================
   NAVBAR LIMPIO MÓVIL
   ========================= */
.mobile-clean-navbar{
  background: #ffffff;
  min-height: 72px;
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid #eaeff5;
}

/* Navbar en modo NIGHT */
body.night-layout-body .mobile-clean-navbar{
  background: #050816;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.brand-logo{
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-name{
  font-size: 1.55rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
  letter-spacing: -.02em;
}

body.night-layout-body .brand-name{
  color: #fff;
}

/* Botones desktop */
.top-nav-btn{
  color: #0f172a !important;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 999px;
  padding: .52rem .95rem;
  min-height: 42px;
  font-size: .96rem;
  font-weight: 700;
  line-height: 1;
  transition: .2s ease;
}

.top-nav-btn:hover{
  color: #0f172a !important;
  background: #eef2f7;
  border-color: #d7e0ea;
}

body.night-layout-body .top-nav-btn{
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  padding: .52rem .95rem;
  min-height: 42px;
  font-size: .96rem;
  line-height: 1;
}

body.night-layout-body .top-nav-btn:hover{
  color: #fff !important;
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
}

.active-top-btn{
  background: #eef2f7;
  border-color: #d7e0ea;
  color: #0f172a !important;
}

body.night-layout-body .active-top-btn{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.25);
  color: #fff !important;
}

/* Botón menú móvil */
.mobile-menu-btn{
  border-radius: 14px;
  padding: 8px 14px;
  font-size: 1.35rem;
  min-width: 52px;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.mobile-menu-btn:hover,
.mobile-menu-btn:focus{
  color: #0f172a;
  background: #eef2f7;
  border-color: #d7e0ea;
  box-shadow: none;
}

/* Botón menú móvil en NIGHT */
body.night-layout-body .mobile-menu-btn{
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

body.night-layout-body .mobile-menu-btn:hover,
body.night-layout-body .mobile-menu-btn:focus{
  color: #fff;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.24);
  box-shadow: none;
}

/* Overlay */
.mobile-menu-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.58);
  opacity: 0;
  visibility: hidden;
  transition: .25s ease;
  z-index: 1040;
}

.mobile-menu-overlay.show{
  opacity: 1;
  visibility: visible;
}

/* Drawer */
.mobile-drawer{
  position: fixed;
  top: 0;
  right: -320px;
  width: 295px;
  max-width: 88vw;
  height: 100vh;
  background: #ffffff;
  box-shadow: -12px 0 30px rgba(0,0,0,.18);
  transition: right .28s ease;
  z-index: 1050;
  display: flex;
  flex-direction: column;
}

.mobile-drawer.show{
  right: 0;
}

.mobile-drawer-night{
  background: linear-gradient(180deg, #07101f 0%, #09061a 50%, #0d0823 100%);
  box-shadow: -12px 0 30px rgba(0,0,0,.35);
}

.mobile-drawer-header{
  padding: 16px;
  border-bottom: 1px solid #eaeff5;
  color: #0f172a;
}

.mobile-drawer-night .mobile-drawer-header{
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
}

.mobile-drawer-body{
  padding: 14px;
  overflow-y: auto;
}

.mobile-menu-section{
  margin-bottom: 18px;
}

.mobile-menu-title{
  font-size: .82rem;
  color: #64748b;
  font-weight: 800;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.mobile-drawer-night .mobile-menu-title{
  color: #9ea7bc;
}

.mobile-menu-link{
  display: block;
  text-decoration: none;
  color: #0f172a;
  padding: 13px 14px;
  margin-bottom: 9px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-weight: 700;
  transition: .2s ease;
}

.mobile-menu-link:hover{
  color: #0f172a;
  background: #eef2f7;
  transform: translateX(2px);
}

.mobile-drawer-night .mobile-menu-link{
  color: #fff;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
}

.mobile-drawer-night .mobile-menu-link:hover{
  color: #fff;
  background: rgba(255,255,255,.08);
}

.mobile-menu-cta{
  background: linear-gradient(135deg, #e11d2e, #ff4d5c);
  border: none;
  color: #fff !important;
}

.mobile-menu-danger{
  color: #dc2626 !important;
}

.mobile-drawer-night .mobile-menu-danger{
  color: #ff8b8b !important;
}

@media (max-width: 991.98px){
  .mobile-clean-navbar .container{
    padding-left: 14px;
    padding-right: 14px;
  }

  .brand-name{
    font-size: 1.55rem;
  }

  .brand-logo{
    width: 38px;
    height: 38px;
  }
}

@media (min-width: 992px){
  .nav-actions{
    gap: 10px !important;
  }

  .nav-pill-btn{
    min-height: 40px;
    padding: 0 18px !important;
    font-size: .98rem;
  }

  .nav-btn{
    min-height: 40px;
    padding: 0 18px !important;
    font-size: .98rem;
  }

  .brand-logo{
    height: 34px;
  }

  .brand-name{
    font-size: 1.05rem;
  }
}

/* =========================================
   HEADER DESKTOP COMPACTO
========================================= */
@media (min-width: 992px){
  .nav-actions{
    gap: 10px !important;
  }

  .nav-pill-btn{
    min-height: 42px !important;
    padding: 0 18px !important;
    font-size: .96rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
  }

  .nav-btn,
  .nav-btn.dropdown-toggle{
    min-height: 42px !important;
    padding: 0 18px !important;
    font-size: .96rem !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
  }

  .brand-logo{
    height: 32px !important;
    width: auto !important;
  }

  .brand-name{
    font-size: 1rem !important;
    line-height: 1 !important;
  }
}

/* =========================================
   FILTROS ESTILO NIGHT PARA HOME
========================================= */

.pn-home-zone-pill{
  display:flex;
  align-items:center;
  gap:6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 8px 12px;
}

.home-filter-select{
  border:0;
  background:transparent;
  font-weight:800;
  max-width:90px;
}

/* NUEVO CHECKBOX */
.pn-home-open-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:8px 14px;
  margin:0;
  white-space:nowrap;
  cursor:pointer;
  line-height:1;
}

.pn-home-open-pill input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:#22c55e;
  cursor:pointer;
  flex:0 0 auto;
  display:block;
}

.pn-home-open-text{
  display:inline-flex;
  align-items:center;
  line-height:1;
  font-weight:800;
  color:#0f172a;
}

@media (max-width: 576px){
  .pn-home-filters-row{
    align-items:center;
    gap:8px;
  }

  .pn-home-zone-pill,
  .pn-home-open-pill{
    min-height:42px;
    padding:7px 12px;
  }

  .pn-home-open-text{
    font-size:13px;
  }
}