/* ============================================================
   SABROSIA — FIX FINAL: HAMBURGER + ADMIN PANEL MÓVIL
   Agrega ÚLTIMO en el HTML después de todos los CSS:
   <link rel="stylesheet" href="css/final-fix.css">
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   1. FIX HAMBURGER — MENÚ DESPLEGABLE
   El JS añade clase "open" al #mainNav directamente
   ══════════════════════════════════════════════════════════════ */

/* Estado cerrado — oculto en móvil */
#mainNav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Estado abierto — JS añade .open al #mainNav */
#mainNav.open {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: var(--nav-height, 72px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  flex-direction: column !important;
  align-items: stretch !important;
  background: rgba(250, 247, 244, 0.99) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 12px 16px 24px !important;
  border-top: 1px solid rgba(90,45,27,0.12) !important;
  box-shadow: 0 12px 40px rgba(90,45,27,0.15) !important;
  z-index: 99999 !important;
  gap: 6px !important;
  animation: menuSlideDown 0.28s cubic-bezier(0.25,0.46,0.45,0.94) both !important;
}

@keyframes menuSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

#mainNav.open .nav-link,
#mainNav.open a {
  display: block !important;
  width: 100% !important;
  padding: 13px 16px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--texto, #2A1810) !important;
  border-radius: 10px !important;
  text-align: left !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: background 0.18s !important;
  border-bottom: 1px solid rgba(90,45,27,0.06) !important;
}

#mainNav.open .nav-link:last-child,
#mainNav.open a:last-child {
  border-bottom: none !important;
}

#mainNav.open .nav-link:hover,
#mainNav.open a:hover {
  background: rgba(90,45,27,0.06) !important;
  color: var(--marron, #5A2D1B) !important;
}

/* Desktop: mostrar nav normalmente */
@media (min-width: 768px) {
  #mainNav {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: static !important;
    flex-direction: row !important;
    align-items: center !important;
    background: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: auto !important;
    gap: 4px !important;
    width: auto !important;
    animation: none !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
  }

  #mainNav .nav-link,
  #mainNav a {
    width: auto !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-bottom: none !important;
    text-align: center !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   2. FIX ADMIN SIDEBAR — BOTONES MÓVIL
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* El panel admin ocupa toda la pantalla */
  .admin-panel {
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important;
  }

  /* Sidebar se convierte en barra horizontal con scroll */
  .admin-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 10px !important;
    gap: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-shrink: 0 !important;
  }

  .admin-sidebar::-webkit-scrollbar {
    display: none !important;
  }

  /* Header del admin — compacto */
  .admin-header {
    flex-shrink: 0 !important;
    padding: 8px 12px !important;
    border-right: 1px solid rgba(255,255,255,0.12) !important;
    border-bottom: none !important;
    gap: 8px !important;
  }

  .admin-header h2 {
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  .btn-logout {
    font-size: 11px !important;
    padding: 5px 8px !important;
    white-space: nowrap !important;
  }

  /* Nav del admin — botones horizontales */
  .admin-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    padding: 0 6px !important;
    gap: 3px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .admin-nav-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    border-left: none !important;
    border-bottom: 3px solid transparent !important;
  }

  .admin-nav-btn.active {
    border-left: none !important;
    border-bottom: 3px solid var(--rosa, #E8B7C8) !important;
    background: rgba(255,255,255,0.15) !important;
  }

  /* Contenido principal del admin — con scroll */
  .admin-main {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 16px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Secciones del admin */
  .admin-section {
    padding: 16px !important;
    border-radius: 14px !important;
  }

  .admin-section-header {
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
  }

  .admin-section-header h3 {
    font-size: 22px !important;
  }

  .admin-section-eyebrow {
    font-size: 10px !important;
  }
}

/* Pantallas muy pequeñas */
@media (max-width: 400px) {
  .admin-header h2 {
    font-size: 12px !important;
  }

  .admin-nav-btn {
    font-size: 11px !important;
    padding: 7px 9px !important;
  }

  .btn-logout {
    font-size: 10px !important;
    padding: 5px 6px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   3. FIX NAV PRINCIPAL — MÓVIL COMPACTA
   ══════════════════════════════════════════════════════════════ */

.nav {
  padding: 0 10px !important;
  gap: 6px !important;
  overflow: visible !important;
}

/* Logo */
.nav .brand .logo {
  height: 34px !important;
}

/* Carrito */
.nav-cart {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  margin: 0 2px !important;
}

/* Hamburger — siempre al final */
.hamburger {
  order: 99 !important;
  font-size: 20px !important;
  padding: 7px !important;
  flex-shrink: 0 !important;
}

/* Nav-actions: solo muestra lo justo */
.nav-actions,
#navUser {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}

/* Botones de cuenta y sesión — muy compactos */
.nav-account-btn,
.nav-logout-btn,
.nav-admin-btn,
.nav-actions button,
.nav-actions a,
#navUser button,
#navUser a {
  font-size: 11px !important;
  padding: 6px 8px !important;
  border-radius: 7px !important;
  max-width: 120px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 380px) {
  .nav-account-btn,
  .nav-logout-btn,
  .nav-admin-btn,
  .nav-actions button,
  .nav-actions a,
  #navUser button,
  #navUser a {
    font-size: 10px !important;
    padding: 5px 6px !important;
    max-width: 90px !important;
  }

  .nav .brand .logo {
    height: 28px !important;
  }

  .nav-cart {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }
}

/* Desktop — restaurar tamaños normales */
@media (min-width: 768px) {
  .nav {
    padding: 0 32px !important;
    gap: 12px !important;
  }

  .nav .brand .logo {
    height: 44px !important;
  }

  .nav-cart {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
  }

  .hamburger {
    display: none !important;
  }

  .nav-account-btn,
  .nav-logout-btn,
  .nav-admin-btn,
  .nav-actions button,
  .nav-actions a,
  #navUser button,
  #navUser a {
    font-size: 13px !important;
    padding: 8px 14px !important;
    max-width: none !important;
  }
}