/**
 * ============================================
 * NAVBAR.CSS - Estilos para la Barra de Navegación
 * ============================================
 * 
 * Este archivo contiene todos los estilos relacionados con la navbar,
 * incluyendo:
 * - Logo de la navbar
 * - Logo del hero (solo en index.html)
 * - Menú móvil (hamburguesa)
 * - Menú desktop
 * - Dropdowns y submenús
 * - Media queries para responsive
 */

/* Bloquear zoom por gestos en móvil (pinch): solo permite desplazamiento vertical */
html, body {
  touch-action: pan-x pan-y;
  -ms-touch-action: pan-x pan-y;
}

/* Evitar desplazamiento horizontal: página centrada y bloqueada a los lados */
html, body {
  overflow-x: hidden;
  overscroll-behavior-x: none;
  max-width: 100vw;
}

/* ============================================
   BLOQUEO DE SCROLL CUANDO MENÚ MÓVIL ESTÁ ABIERTO
   ============================================ */
html.menu-mobile-open,
body.menu-mobile-open {
  overflow: hidden !important;
  touch-action: none !important;
  -ms-touch-action: none !important;
  overscroll-behavior: none !important;
}

/* Bloquear el scroll-container-mobile cuando el menú está abierto */
.menu-mobile-open .scroll-container-mobile {
  overflow: hidden !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
}

/* En móvil: solo permitir gestos verticales (scroll), no arrastrar la página a los lados */
@media (max-width: 767px) {
  html, body {
    touch-action: pan-y;
    -ms-touch-action: pan-y;
    overflow-x: hidden !important;
    /* Evitar rebote al llegar al tope/fondo: la navbar no se sube ni hace “bounce” */
  }
}

/* ============================================
   LOGO NAVBAR
   ============================================ */

/* Logo navbar debe ser instantáneo - sin shimmer effect */
.logo-navbar {
  opacity: 1 !important;
  /* Sin rotación - posición original */
}

html.dark .logo-navbar {
  filter: brightness(0) invert(1);
}

/* ============================================
   LOGO HERO (solo en index.html)
   ============================================ */

/* Logo hero siempre blanco en ambos modos (fondo oscuro) */
#inicio .logo-hero,
.logo-hero {
  filter: brightness(0) invert(1) !important;
  -webkit-filter: brightness(0) invert(1) !important;
  /* Sin rotación - posición original */
  max-height: 450px !important;
  width: auto !important;
}

@media (min-width: 640px) {
  .logo-hero {
    max-height: 560px !important;
  }
}

@media (min-width: 768px) {
  .logo-hero {
    max-height: 670px !important;
  }
}

@media (min-width: 1024px) {
  .logo-hero {
    max-height: 780px !important;
  }
}

/* ============================================
   GRUPO DULCES (Dropdown Desktop)
   ============================================ */

/* Solo en dispositivos con hover (no móvil táctil) */
@media (hover: hover) {
  .grupo-dulces:hover .grupo-dulces-hover {
    opacity: 1;
    visibility: visible;
  }
}

/* ============================================
   MENÚ MÓVIL CON CSS PURO (CHECKBOXES)
   ============================================ */

/* Checkboxes ocultos para controlar el menú móvil */
#menu-mobile-toggle,
#menu-mobile-productos-toggle,
#menu-mobile-dulces-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Menú móvil: oculto por defecto, visible cuando el checkbox está marcado */
#menu-mobile {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  pointer-events: none; /* No clickeable cuando está cerrado */
  padding: 0 !important; /* Sin padding cuando está cerrado para evitar áreas clickeables */
  display: flex !important; /* Asegurar que sea flex */
  flex-direction: column !important; /* Vertical */
  width: 100% !important; /* Ancho completo */
  align-items: stretch !important; /* Estirar elementos al ancho completo */
}

/* Asegurar que todos los elementos dentro del menú móvil no sean clickeables cuando está cerrado */
#menu-mobile * {
  pointer-events: none;
}

/* Asegurar que los elementos del menú móvil sean block (vertical) */
#menu-mobile > *,
#menu-mobile > a,
#menu-mobile > div {
  display: block !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

#menu-mobile-toggle:checked ~ #menu-mobile {
  max-height: calc(100vh - 2.75rem);
  overflow-y: auto;
  pointer-events: auto; /* Clickeable cuando está abierto */
  padding: 1rem !important; /* Restaurar padding cuando está abierto */
  touch-action: pan-y !important; /* Permitir scroll táctil vertical dentro del menú */
  overscroll-behavior: contain; /* Evitar que el scroll se propague al body */
  -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
}

/* Restaurar pointer-events en los elementos cuando el menú está abierto */
#menu-mobile-toggle:checked ~ #menu-mobile * {
  pointer-events: auto;
}

/* Submenú Productos: oculto por defecto, visible cuando el checkbox está marcado */
#menu-mobile-productos {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

#menu-mobile-productos > *,
#menu-mobile-productos > a,
#menu-mobile-productos > div {
  display: block !important;
  width: 100% !important;
}

#menu-mobile-productos-toggle:checked + label + #menu-mobile-productos {
  max-height: 500px; /* Suficiente para el contenido */
}

/* Rotar flecha cuando el submenú está abierto */
#menu-mobile-productos-toggle:checked + label #menu-mobile-productos-arrow {
  transform: rotate(180deg);
}

/* Submenú Dulces: oculto por defecto, visible cuando el checkbox está marcado */
#menu-mobile-dulces {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

#menu-mobile-dulces > *,
#menu-mobile-dulces > a {
  display: block !important;
  width: 100% !important;
}

#menu-mobile-dulces-toggle:checked + label + #menu-mobile-dulces {
  max-height: 200px; /* Suficiente para las opciones de dulces */
}

/* Rotar flecha cuando el submenú está abierto */
#menu-mobile-dulces-toggle:checked + label #menu-mobile-dulces-arrow {
  transform: rotate(180deg);
}

/* Cerrar menú móvil automáticamente en pantallas grandes */
@media (min-width: 768px) {
  #menu-mobile-toggle:checked ~ #menu-mobile {
    max-height: 0;
  }
}

/* Prevenir scroll del body cuando el menú móvil está abierto */
#menu-mobile-toggle:checked ~ #menu-mobile {
  overscroll-behavior: contain;
}

/* ============================================
   OCULTAR MENÚ DESKTOP EN MÓVIL
   ============================================ */

/* Asegurar que el menú desktop esté completamente oculto y no clickeable en móvil */
@media (max-width: 767px) {
  /* Ocultar completamente el menú desktop y todos sus elementos */
  header nav.hidden,
  header > div > div > nav.hidden,
  #navbar-menu-container nav.hidden {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: fixed !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    z-index: -1 !important;
  }
  
  /* Ocultar todos los elementos hijos del menú desktop */
  header nav.hidden *,
  header nav.hidden a,
  header nav.hidden button,
  header nav.hidden div,
  header nav.hidden span,
  header nav.hidden svg,
  #navbar-menu-container nav.hidden *,
  #navbar-menu-container nav.hidden a,
  #navbar-menu-container nav.hidden button,
  #navbar-menu-container nav.hidden div {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: fixed !important;
    left: -9999px !important;
    top: -9999px !important;
  }
  
  /* Asegurar que los dropdowns y submenús del menú desktop también estén ocultos */
  header nav.hidden .group,
  header nav.hidden .group > *,
  header nav.hidden .group > div,
  header nav.hidden .grupo-dulces,
  header nav.hidden .grupo-dulces-hover,
  #navbar-menu-container nav.hidden .group,
  #navbar-menu-container nav.hidden .group > * {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: fixed !important;
    left: -9999px !important;
    top: -9999px !important;
  }
  
  /* Asegurar que cualquier elemento con clase relacionada al menú desktop esté oculto */
  header nav:not(#menu-mobile),
  #navbar-menu-container nav:not(#menu-mobile) {
    display: none !important;
    pointer-events: none !important;
  }
}

/* ============================================
   NAVBAR CONTAINER
   ============================================ */

#navbar-container {
  min-height: 2.75rem;
}

@media (min-width: 640px) {
  #navbar-container {
    min-height: 3rem;
  }
}

@media (min-width: 768px) {
  #navbar-container {
    min-height: 3.5rem;
  }
  /* En desktop la navbar fija al hacer scroll (mobile no se toca) */
  header#navbar-container,
  #navbar-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 50;
  }
  body {
    padding-top: 3.5rem;
  }
  /* Desktop: con mucho zoom no debe deshabilitarse el desplazamiento ni desaparecer la barra */
  html,
  body {
    overflow-y: auto !important;
    min-height: 100%;
  }
}

/* ============================================
   NAVBAR DINÁMICA (solo en index.html)
   ============================================ */

/* Contenedor principal de la navbar - posición relativa para elementos absolutos */
#navbar-container > div {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Por defecto: justify-end para estado inicial (menús centrados en desktop) */
}

/* Asegurar que el menú de navegación esté completamente oculto en móvil */
@media (max-width: 767px) {
  /* En móvil, el logo a la izquierda y los iconos a la derecha */
  #navbar-container > div {
    justify-content: space-between !important;
  }
  
  /* Ocultar completamente el contenedor del menú y su contenido */
  #navbar-menu-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #navbar-menu-container nav {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* En móvil, la navbar siempre en estado normal - sin efectos dinámicos */
  #navbar-container #navbar-logo-container {
    opacity: 1 !important;
    transform: translateX(0) !important;
    width: auto !important;
    margin: 0 !important;
    margin-right: auto !important;
    pointer-events: auto !important;
    overflow: visible !important;
    flex-basis: auto !important;
  }
  
  /* Asegurar que los iconos estén a la derecha */
  #navbar-icons-container {
    margin-left: auto !important;
  }
  
  /* En móvil, navbar siempre fija: no debe moverse con el scroll.
     position: fixed + capa GPU (translateZ(0)) evita saltos en iOS al ocultar la barra de direcciones. */
  header#navbar-container,
  #navbar-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 9999 !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  body {
    overflow: hidden !important;
    height: 100vh;
    padding-top: 0 !important;
  }
  /* Contenedor de scroll creado por JS: evita rebote (overscroll-behavior) sin romper el scroll */
  .scroll-container-mobile {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    height: 100vh;
    padding-top: 2.75rem;
    padding-bottom: 2rem;
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    max-width: 100vw;
    box-sizing: border-box;
  }
}

/* Desktop con mucho zoom: (min-width: 768px) deja de cumplirse en CSS pixels.
   Con puntero fino (ratón/trackpad) mantener siempre scroll, barra visible y mismo layout
   para que el zoom no provoque salto al inicio (padding-top y height evitan aplicar estilos móviles). */
@media (pointer: fine) {
  html,
  body {
    overflow-y: auto !important;
    min-height: 100%;
  }
  body {
    padding-top: 3.5rem !important;
    height: auto !important;
  }
  
  /* Desactivar scroll-container-mobile en desktop con puntero fino */
  .scroll-container-mobile {
    overflow: visible !important;
    height: auto !important;
    padding-top: 0 !important;
  }
}

/* ============================================
   NAVBAR DINÁMICA (solo en index.html - desktop)
   ============================================ */

/* ============================================
   NAVBAR DINÁMICA (solo en index.html - desktop)
   ============================================ */

@media (min-width: 768px) {
  /* Estado normal por defecto en todas las páginas (logo visible, menús a la derecha) */
  #navbar-container #navbar-logo-container {
    opacity: 1;
    transform: translateX(0) translateZ(0);
    width: auto;
    margin: 0;
    pointer-events: auto;
    overflow: visible;
    flex-basis: auto;
    will-change: opacity, transform, width;
    transition: opacity 0.25s ease, transform 0.25s ease, width 0.25s ease, margin 0.25s ease, flex-basis 0.25s ease;
  }
  
  #navbar-container #navbar-menu-container {
    /* Estado normal: menú a la derecha con posicionamiento relativo */
    position: relative;
    left: auto;
    right: auto;
    transform: translateX(0) translateZ(0);
    flex: 0 1 auto;
    flex-basis: auto;
    margin-left: auto;
    margin-right: 0;
    padding-right: 5.5rem;
    width: auto;
  }
  
  /* Estado inicial dinámico SOLO en index.html (cuando body tiene clase navbar-dynamic) */
  /* La clase se agrega directamente en el HTML para evitar el flash */
  body.navbar-dynamic #navbar-container #navbar-menu-container {
    /* Forzar posicionamiento absoluto solo para navbar-dynamic */
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-186px) translateZ(0) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    will-change: transform;
    transition: transform 0.3s ease;
  }
  
  body.navbar-dynamic:not(.navbar-initialized) #navbar-container:not(.logo-hero-not-visible) #navbar-logo-container {
    opacity: 0;
    transform: translateX(-20px);
    width: 0;
    margin: 0;
    pointer-events: none;
    overflow: hidden;
    flex-basis: 0;
    transition: none; /* Sin transición en el estado inicial para evitar el flash */
  }
  
  body.navbar-dynamic:not(.navbar-initialized) #navbar-container:not(.logo-hero-not-visible) #navbar-menu-container {
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateZ(0);
    margin-left: 0;
    margin-right: 0;
    padding-right: 0;
    flex: 0 0 0;
    flex-basis: 0;
    width: auto;
    transition: none; /* Sin transición en el estado inicial para evitar el flash */
  }
  
  /* Estado dinámico después de inicializar (con transiciones activas) */
  body.navbar-dynamic.navbar-initialized #navbar-container:not(.logo-hero-not-visible) #navbar-logo-container {
    opacity: 0;
    transform: translateX(-20px) translateZ(0);
    width: 0;
    margin: 0;
    pointer-events: none;
    overflow: hidden;
    flex-basis: 0;
    will-change: opacity, transform, width;
    transition: opacity 0.25s ease, transform 0.25s ease, width 0.25s ease, margin 0.25s ease, flex-basis 0.25s ease;
  }
  
  body.navbar-dynamic.navbar-initialized #navbar-container:not(.logo-hero-not-visible) #navbar-menu-container {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateZ(0) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 0;
    flex-basis: 0;
    width: auto;
    will-change: transform;
    transition: transform 0.3s ease;
  }
  
  /* Cuando el logo del hero NO es visible: mover a la derecha manteniendo absolute */
  body.navbar-dynamic.navbar-initialized #navbar-container.logo-hero-not-visible #navbar-logo-container {
    opacity: 1 !important;
    transform: translateX(0) translateZ(0) !important;
    width: auto !important;
    margin: 0 !important;
    pointer-events: auto !important;
    overflow: visible !important;
    flex-basis: auto !important;
  }
  
  body.navbar-dynamic.navbar-initialized #navbar-container.logo-hero-not-visible #navbar-menu-container {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-186px) translateZ(0) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
    will-change: transform;
    transition: transform 0.3s ease;
  }
  
  body.navbar-dynamic #navbar-container.logo-hero-not-visible > div {
    justify-content: space-between;
  }
}

/* Los iconos (lupa y tema) siempre a la derecha */
#navbar-icons-container {
  position: absolute;
  right: 1rem;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
  z-index: 10;
}

/* Asegurar que los iconos no se muevan */
@media (min-width: 768px) {
  #navbar-icons-container {
    right: 1rem;
  }
}

/* Asegurar que el menú móvil esté completamente oculto en desktop */
@media (min-width: 768px) {
  #menu-mobile {
    display: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
}

/* ============================================
   CARDS DE PRODUCTO: sin efectos hover en móvil
   ============================================
   En mobile las cards no deben escalar ni cambiar sombra al tocar.
   En desktop los efectos hover siguen igual (Tailwind). */
@media (max-width: 767px) {
  .card-producto:hover {
    transform: none !important;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05) !important;
  }
  .card-producto:hover img {
    transform: none !important;
  }
}