/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE MENU UNIFIER - CSS ÚNICO ANTI-PURGA
   v2.0 - Header visible + Body bloqueado
   ═══════════════════════════════════════════════════════════════════════════ */

/* ===== VARIABLES ===== */
:root {
  /* Altura del header en móvil: h-14 ≈ 56px */
  --mm-header-h: 56px;
}

/* ===== OVERLAY BASE - SOLO MÓVIL ===== */
@media (max-width: 1023.98px) {
  #mobile-menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: var(--mm-header-h) !important;  /* << Clave: header visible */
    z-index: 40 !important;              /* Header tiene z-50 */
    display: none !important;
    flex-direction: column !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  /* Bloquear body cuando menú abierto */
  html.menu-open,
  body.menu-open {
    overflow: hidden !important;
    height: 100svh !important;
    position: fixed !important;
    width: 100% !important;
  }

  /* Previene scroll bleed en iOS */
  body.menu-open {
    overscroll-behavior: contain !important;
    touch-action: none !important;
  }
}

/* ===== CONTENEDOR DE LA TARJETA ===== */
@media (max-width: 1023.98px) {
  #mobile-menu-overlay .js-mobile-card {
    max-height: calc(100svh - var(--mm-header-h) - 24px) !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    background-color: white !important;
    border-radius: 1rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  }

  /* ===== ÁREA DE SCROLL INTERNO ===== */
  #mobile-menu-overlay .js-mobile-scroll {
    max-height: calc(100svh - var(--mm-header-h) - 180px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
}

/* ===== SCROLLBAR PERSONALIZADO (WEBKIT) ===== */
#mobile-menu-overlay .js-mobile-scroll::-webkit-scrollbar {
  width: 6px !important;
}

#mobile-menu-overlay .js-mobile-scroll::-webkit-scrollbar-track {
  background-color: #f3f4f6 !important;
  border-radius: 10px !important;
}

#mobile-menu-overlay .js-mobile-scroll::-webkit-scrollbar-thumb {
  background-color: #d1d5db !important;
  border-radius: 10px !important;
  transition: background-color 0.2s ease !important;
}

#mobile-menu-overlay .js-mobile-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af !important;
}

/* ===== SCROLLBAR PERSONALIZADO (FIREFOX) ===== */
#mobile-menu-overlay .js-mobile-scroll {
  scrollbar-width: thin !important;
  scrollbar-color: #d1d5db #f3f4f6 !important;
}

/* ===== NEUTRALIZAR WRAPPERS PROBLEMÁTICOS ===== */
@media (max-width: 1023.98px) {
  #mobile-menu-overlay .h-full,
  #mobile-menu-overlay .-mt-16,
  #mobile-menu-overlay [class*="-mt-"] {
    margin-top: 0 !important;
    height: auto !important;
  }
}

/* ===== BOTÓN DE CIERRE ===== */
#mobile-menu-overlay [data-close-mobile-menu] {
  color: white !important;
  cursor: pointer !important;
  padding: 0.5rem !important;
  background: transparent !important;
  border: none !important;
  transition: opacity 0.2s ease !important;
}

#mobile-menu-overlay [data-close-mobile-menu]:hover {
  opacity: 0.8 !important;
}

/* ===== ANIMACIONES SUAVES - SOLO MÓVIL ===== */
@media (max-width: 1023.98px) {
  #mobile-menu-overlay {
    animation: fadeIn 0.2s ease-out !important;
  }

  #mobile-menu-overlay .js-mobile-card {
    animation: slideUp 0.3s ease-out !important;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== RESPONSIVE: OCULTAR EN DESKTOP ===== */
@media (min-width: 1024px) {
  #mobile-menu-overlay {
    display: none !important;
  }
}

/* ===== UTILIDADES CRÍTICAS (ANTI-PURGE) ===== */
.space-y-6 > * + * { margin-top: 1.5rem !important; }
.space-y-3 > * + * { margin-top: 0.75rem !important; }
.space-y-2 > * + * { margin-top: 0.5rem !important; }

.text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
.text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }

.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }

.text-black { color: #000 !important; }
.text-gray-600 { color: #4b5563 !important; }

.border-b { border-bottom-width: 1px !important; }
.border-t { border-top-width: 1px !important; }
.border-gray-200 { border-color: #e5e7eb !important; }

.pb-2 { padding-bottom: 0.5rem !important; }
.pt-4 { padding-top: 1rem !important; }

.rounded-full { border-radius: 9999px !important; }

.opacity-60 { opacity: 0.6 !important; }
.group:hover .group-hover\:opacity-100 { opacity: 1 !important; }

.transition-colors { transition-property: color, background-color, border-color !important; }
.duration-150 { transition-duration: 150ms !important; }

.flex { display: flex !important; }
.flex-1 { flex: 1 1 0% !important; }
.items-center { align-items: center !important; }

.block { display: block !important; }
.w-full { width: 100% !important; }
.text-center { text-align: center !important; }