/* LeonPeru V27.5 · Visual Final
   Capa de cierre: solo corrige jerarquía visual, responsive y consistencia.
   No modifica lógica de negocio. */

/* ---------- HEADER DESKTOP: reservar aire real para el logo ---------- */
@media (min-width:901px){
  .header .nav{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 248px minmax(0,1fr)!important;
    align-items:center!important;
    gap:26px!important;
    min-height:96px!important;
    height:96px!important;
    overflow:visible!important;
  }
  .header .links{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    min-width:0!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
  }
  .header .nav .brand{
    grid-column:2!important;
    grid-row:1!important;
    position:relative!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    justify-self:center!important;
    width:248px!important;
    min-width:248px!important;
    height:96px!important;
    min-height:96px!important;
    margin:0!important;
    padding:0 10px!important;
    z-index:10!important;
  }
  .header .nav .brand-logo-clean{
    width:224px!important;
    max-width:224px!important;
    height:auto!important;
    max-height:78px!important;
    transform:none!important;
  }
  .header .nav .nav-actions{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    min-width:0!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
  }
}
@media (min-width:901px) and (max-width:1140px){
  .header .nav{grid-template-columns:minmax(0,1fr) 210px minmax(0,1fr)!important;gap:14px!important;}
  .header .nav .brand{width:210px!important;min-width:210px!important;padding:0 6px!important;}
  .header .nav .brand-logo-clean{width:194px!important;max-width:194px!important;}
  .header .links{gap:2px!important;}
  .header .links a,.header .links .home-navbtn{padding-left:7px!important;padding-right:7px!important;font-size:10.5px!important;}
  .header .nav .nav-actions{gap:4px!important;}
  .header .nav .nav-actions>button{padding-left:7px!important;padding-right:7px!important;font-size:10.5px!important;}
}

/* ---------- TIENDA: tarjetas con aspecto de catálogo real ---------- */
#tienda .product-grid{gap:20px;align-items:stretch;}
#tienda .product-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border:1px solid #e1e5ea;
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 32px rgba(16,24,40,.06);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
@media (hover:hover) and (pointer:fine){
  #tienda .product-card:hover{transform:translateY(-4px);border-color:#efb4b8;box-shadow:0 20px 42px rgba(16,24,40,.11);}
  #tienda .product-card:hover .product-img.big img{transform:scale(1.035);}
}
#tienda .product-img.big{
  position:relative;
  height:224px;
  min-height:224px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#f8f9fb 0%,#eef1f5 100%);
  border-bottom:1px solid #edf0f3;
}
#tienda .product-card.has-image .product-img.big{background:#f3f4f6;}
#tienda .product-img.big img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .28s ease;}
#tienda .product-fallback-icon{
  display:grid;
  place-items:center;
  width:108px;
  height:108px;
  border:1px solid #e3e7ec;
  border-radius:28px;
  background:#fff;
  font-size:58px;
  line-height:1;
  box-shadow:0 12px 28px rgba(16,24,40,.07);
}
#tienda .product-stock-badge{
  position:absolute;
  top:13px;
  right:13px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:0 10px;
  border:1px solid #bde6cc;
  border-radius:999px;
  background:rgba(243,252,247,.96);
  color:#167a46;
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}
#tienda .product-stock-badge.low{border-color:#ffd6a6;background:rgba(255,249,237,.97);color:#a55b00;}
#tienda .product-info{display:flex;flex:1;flex-direction:column;padding:20px 20px 18px;background:#fff;}
#tienda .product-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;}
#tienda .product-cat{color:#d80b16;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;}
#tienda .product-card h3{margin:0 0 8px;color:#111827;font-size:22px;line-height:1.15;letter-spacing:-.025em;}
#tienda .product-desc{min-height:42px;margin-bottom:17px;color:#667085;font-size:12px;line-height:1.55;}
#tienda .product-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:auto;padding-top:15px;border-top:1px solid #edf0f3;}
#tienda .product-price{color:#111827;font-size:26px;font-weight:950;letter-spacing:-.035em;white-space:nowrap;}
#tienda .add-product{min-height:42px;padding:0 15px;border:1px solid #e50914;border-radius:11px;background:#e50914;color:#fff;font-size:10px;font-weight:900;letter-spacing:.04em;box-shadow:0 8px 18px rgba(229,9,20,.16);}
#tienda .add-product:hover{background:#c9000b;border-color:#c9000b;}

/* ---------- RECARGAS: jamás mostrar servicios sin productos activos ---------- */
#rechargeServiceGrid .recarga-card-v2[hidden],
#rechargeServiceGrid .recarga-card-v2.catalog-empty{display:none!important;}
#rechargeFilters button[hidden]{display:none!important;}

/* ---------- MÓVIL ---------- */
@media (max-width:900px){
  /* Reserva: título largo compacto y legible. */
  .professional-booking .booking-hero-head{margin-bottom:16px!important;padding-right:46px!important;}
  .professional-booking .booking-hero-head .eyebrow{font-size:9px!important;letter-spacing:.18em!important;}
  .professional-booking #bookingTitle{
    max-width:100%!important;
    margin:6px 0 8px!important;
    font-size:clamp(29px,8.5vw,38px)!important;
    line-height:.92!important;
    letter-spacing:-.025em!important;
    text-wrap:balance;
    overflow-wrap:anywhere;
  }
  .professional-booking .booking-hero-head p{font-size:12px!important;line-height:1.5!important;}

  /* Más aire real debajo del contenido para que el menú no tape footer / botones. */
  body:not(.admin-open){padding-bottom:calc(116px + env(safe-area-inset-bottom,0px))!important;}
  footer{padding-bottom:26px!important;}
  footer .footer-wrap{padding-bottom:12px!important;}
  #lpMobileNav,.lp-mobile-nav{bottom:calc(9px + env(safe-area-inset-bottom,0px))!important;}

  /* Tienda móvil: imagen más protagonista y acciones cómodas. */
  #tienda .product-grid{gap:16px!important;}
  #tienda .product-img.big{height:230px!important;min-height:230px!important;}
  #tienda .product-info{padding:18px 17px 16px!important;}
  #tienda .product-card h3{font-size:21px!important;}
  #tienda .product-bottom{align-items:center!important;}
  #tienda .add-product{min-width:112px!important;min-height:44px!important;}

  /* ADMIN: navegación superior más clara y desplazable por chips. */
  #admin .admin-side,.admin-overlay .admin-side{
    scroll-snap-type:x proximity!important;
    scroll-padding-left:8px!important;
    scrollbar-width:none!important;
    gap:6px!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
    background:rgba(255,255,255,.985)!important;
    border-bottom:1px solid #e4e7ec!important;
    box-shadow:0 6px 20px rgba(15,23,42,.06)!important;
    backdrop-filter:blur(14px)!important;
  }
  #admin .admin-side::-webkit-scrollbar,.admin-overlay .admin-side::-webkit-scrollbar{display:none!important;}
  #admin .side-item{
    scroll-snap-align:start!important;
    min-height:40px!important;
    padding:0 11px!important;
    border:1px solid #e4e7ec!important;
    border-radius:10px!important;
    background:#f8fafc!important;
    color:#475467!important;
    font-size:10.5px!important;
    font-weight:850!important;
    box-shadow:none!important;
  }
  #admin .side-item:hover{background:#f2f4f7!important;color:#101828!important;}
  #admin .side-item.active{
    background:#101828!important;
    color:#fff!important;
    border-color:#101828!important;
    box-shadow:0 5px 12px rgba(16,24,40,.14)!important;
  }
  #admin .side-item span{background:#e50914!important;color:#fff!important;}
}

@media (max-width:380px){
  .professional-booking #bookingTitle{font-size:28px!important;}
  #tienda .product-img.big{height:205px!important;min-height:205px!important;}
  #tienda .product-bottom{gap:9px!important;}
  #tienda .add-product{min-width:104px!important;padding:0 10px!important;font-size:9px!important;}
}