/**
 * Nubecom Header Styles
 * Diferentes layouts para desktop y móvil con prioridad al buscador
 */

/* ======================
   Z-INDEX SYSTEM CENTRALIZADO
   ====================== */

/* 
   INSTRUCCIONES DE USO:
   
   1. TODOS los z-index del header deben usar estas variables CSS
   2. Para agregar nuevos elementos, añadir nueva variable aquí
   3. NUNCA usar valores z-index directos en el código
   4. Mantener jerarquía: header < dropdown < modal < overlay < drawer < floating
   
   PROBLEMAS CONOCIDOS:
   - Jetpack Search usa z-index: 9999999999999
   - Leaflet Maps usa z-index: 99999
   - Por eso usamos valores aún más altos para el drawer
   
   PARA DEBUGGEAR:
   - Descomentar la sección DEBUG más abajo
   - Usar devtools para verificar z-index computed values
   - Si el drawer no aparece, verificar que no haya nuevos plugins con z-index altos
*/

:root {
  /* Base z-index levels */
  --z-header: 100;
  --z-dropdown: 1000;
  --z-modal: 10000;
  /* High priority levels to override plugin interference 
     (Jetpack Search uses 9999999999999, so we use higher values) */
  --z-overlay: 100000;
  --z-drawer: 99999999999991;
  --z-drawer-close: 99999999999992;
  --z-floating-menu: 99999999999993;
  --z-emergency: 99999999999999;
}

/* Header principal */
#nubecom-header {
  background: var(--white);
  box-shadow: var(--shadow);
  position: relative;
}

/* ======================
   DESKTOP HEADER LAYOUT
   ====================== */
#nubecom-header .desktop-header {
  display: block;
  padding: 1rem 0;
}

#nubecom-header .desktop-content {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 2rem;
  align-items: center;
  min-height: 60px;
}

#nubecom-header .desktop-logo {
  justify-self: start;
}

#nubecom-header .desktop-search {
  justify-self: center;
}

#nubecom-header .desktop-cart {
  justify-self: end;
}

/* Lista del carrito en desktop */
#nubecom-header .desktop-cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* ======================
   MOBILE HEADER LAYOUT
   ====================== */
#nubecom-header .mobile-header {
  display: none;
  padding: 1rem 0 0.5rem 0;
}

/* Primera línea móvil: Logo + Carrito */
#nubecom-header .mobile-top-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: 1rem;
}

#nubecom-header .mobile-logo {
  justify-self: start;
}

#nubecom-header .mobile-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-self: end;
}

/* Segunda línea móvil: Buscador completo */
#nubecom-header .mobile-search-bar {
  width: 100%;
  margin-bottom: 0.5rem;
}

#nubecom-header .mobile-search {
  width: 100%;
}

/* Listas del carrito móvil */
#nubecom-header .mobile-cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* ======================
   LOGOS COMPARTIDOS
   ====================== */
#nubecom-header .logo .site-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0;
}

#nubecom-header .logo .site-title a {
  color: var(--primary-color);
  text-decoration: none;
}

#nubecom-header .logo .site-title a:hover {
  color: var(--primary-hover);
}

/* ======================
   BUSCADOR COMPARTIDO
   ====================== */
#nubecom-header .header-search-form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0;
  align-items: stretch;
  border-radius: var(--border-radius);
  padding: 0.25rem;
  width: 100%;
}

#nubecom-header .header-search-form form {
  display: contents;
}

#nubecom-header .header-search-select {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
  border-right: none;
  padding: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-color);
  cursor: pointer;
  min-width: 140px;
  height: var(--icon-container-size);
  transition: var(--transition);
  display: flex;
  align-items: center;
}

#nubecom-header .header-search-input {
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-left: none;
  border-right: none;
  border-radius: 0;
  font-size: 0.9rem;
  background: var(--white);
  height: var(--icon-container-size);
  box-sizing: border-box;
}

#nubecom-header .header-search-button {
  background: var(--primary-color);
  color: var(--icon-color);
  border: 1px solid var(--primary-color);
  border-left: none;
  width: var(--icon-container-size);
  height: var(--icon-container-size);
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

#nubecom-header .header-search-button:hover {
  background: var(--primary-hover);
}

#nubecom-header .header-search-button i {
  font-size: var(--icon-size);
  color: var(--icon-color);
}

/* Buscador en desktop: ancho máximo */
#nubecom-header .desktop-search .header-search-form {
  max-width: 750px;
}

/* Buscador en móvil: ancho completo */
#nubecom-header .mobile-search .header-search-form {
  max-width: none;
}

/* ======================
   CARRITO COMPARTIDO
   ====================== */
#nubecom-header .cart-wrapper {
  display: flex;
  align-items: center;
}

#nubecom-header .cart-main {
  position: relative;
}

#nubecom-header .cart-link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 1rem;
  color: var(--text-color);
  text-decoration: none;
  border-radius: var(--border-radius);
  transition: var(--transition);
}

#nubecom-header .cart-link:hover {
  background: var(--gray-100);
  color: var(--primary-color);
}

#nubecom-header .e-commerce-corn {
  position: relative;
  background: var(--primary-color);
  color: var(--icon-color);
  width: var(--icon-container-size);
  height: var(--icon-container-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

#nubecom-header .cart-link:hover .e-commerce-corn {
  background: var(--primary-hover);
}

#nubecom-header .e-commerce-corn i {
  font-size: var(--icon-size);
  color: var(--icon-color);
}

#nubecom-header .cart-counts {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #e74c3c;
  color: var(--icon-color);
  font-size: 0.75rem;
  font-weight: bold;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#nubecom-header .cart-info p {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
}

#nubecom-header .cart-label {
  font-size: 1rem;
  font-weight: bold;
  color: var(--primary-color);
}

/* ======================
   FLOATING MENU BUTTON
   ====================== */
.floating-menu-toggle {
  position: fixed !important;
  bottom: 25px !important;
  left: 25px !important;
  z-index: var(--z-floating-menu) !important;
  display: none !important; /* Hidden on desktop by default */
  animation: menu-toggle-pulse 4s infinite ease-in-out;
  /* Force new stacking context */
  transform-style: preserve-3d !important;
}

.menu-toggle {
  width: 50px;
  height: 50px;
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-light)
  );
  color: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0, 20, 92, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Font Awesome icon styles */
.menu-toggle .menu-icon,
.menu-toggle .close-icon {
  position: absolute;
  font-size: 1.2rem;
  color: var(--white);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Show menu icon by default, hide close icon */
.menu-toggle .menu-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.menu-toggle .close-icon {
  opacity: 0;
  transform: scale(0.8) rotate(180deg);
}

.menu-toggle:hover {
  background: linear-gradient(135deg, var(--primary-hover), #0066cc);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 20, 92, 0.6);
}

.menu-toggle:active {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 15px rgba(0, 20, 92, 0.5);
}

.menu-toggle:focus {
  outline: 3px solid rgba(0, 20, 92, 0.5);
  outline-offset: 2px;
}

/* Icon animation when menu is active/expanded */
.menu-toggle[aria-expanded="true"] .menu-icon {
  opacity: 0;
  transform: scale(0.8) rotate(-180deg);
}

.menu-toggle[aria-expanded="true"] .close-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Enhanced styling when menu is expanded */
.menu-toggle[aria-expanded="true"] {
  background: linear-gradient(135deg, var(--primary-hover), #0066cc);
  box-shadow: 0 8px 25px rgba(0, 20, 92, 0.6);
  animation: none; /* Stop pulse when active */
}

/* Pulse animation for menu toggle */
@keyframes menu-toggle-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

/* ======================
   MENÚ MÓVIL DRAWER
   ====================== */
#nubecom-header .home-menu-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 320px !important;
  height: 100vh !important;
  background: var(--primary-color) !important;
  box-shadow: 2px 0 25px rgba(0, 0, 0, 0.15) !important;
  z-index: var(--z-drawer) !important;
  transform: translateX(-100%) !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  overflow-y: auto !important;
  padding: 0 !important;
  /* Force new stacking context */
  transform-style: preserve-3d !important;
  will-change: transform !important;
}

#nubecom-header .home-menu-container.open {
  transform: translateX(0) !important;
}

/* Drawer Overlay */
.drawer-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: var(--z-overlay) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease !important;
  /* Force new stacking context */
  transform-style: preserve-3d !important;
}

.drawer-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Prevent body scroll when drawer is open */
body.drawer-open {
  overflow: hidden;
}

/* Drawer Header */
#nubecom-header .home-menu-container .close-menu {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  z-index: var(--z-drawer-close);
}

#nubecom-header .home-menu-container .close-menu:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}

/* Drawer Content */
#nubecom-header .mobile-navigation-wrapper {
  padding: 4rem 0 2rem 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--z-drawer-close);
  position: relative;
  /* Estilo del scrollbar para navegadores webkit */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
}

/* Estilo personalizado del scrollbar para mobile drawer */
#nubecom-header .mobile-navigation-wrapper::-webkit-scrollbar {
  width: 6px;
}

#nubecom-header .mobile-navigation-wrapper::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

#nubecom-header .mobile-navigation-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

#nubecom-header .mobile-navigation-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

#nubecom-header .mobile-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#nubecom-header .mobile-navigation li {
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#nubecom-header .mobile-navigation li:last-child {
  border-bottom: none;
}

#nubecom-header .mobile-navigation a {
  color: var(--white);
  text-decoration: none;
  font-size: 1.1rem;
  padding: 1.25rem 2rem;
  display: block;
  transition: var(--transition);
  font-weight: 500;
}

#nubecom-header .mobile-navigation a:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}

/* ======================
   HOME-MENU IN HEADER
   ====================== */
/* Override any conflicting styles from other CSS files */
#nubecom-header .mobile-header .home-menu-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 300px !important;
  height: 100vh !important;
  background: linear-gradient(
    135deg,
    #1a365d,
    var(--primary-color),
    #2c5282
  ) !important;
  transform: translateX(-100%) !important;
  transition: transform 0.3s ease !important;
  z-index: var(--z-drawer) !important;
}

#nubecom-header .mobile-header .home-menu-container.open {
  transform: translateX(0) !important;
}

/* Mobile Drawer Menu - Accordion Style */
#nubecom-header .home-menu-container .main-menu-mobile {
  background: transparent !important;
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

#nubecom-header .home-menu-container .main-menu-mobile li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  position: relative !important;

  background: transparent;
  color: var(--primary-color) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Parent menu items with accordion functionality */
#nubecom-header .home-menu-container .main-menu-mobile > li > a {
  color: var(--white) !important;
  padding: 1.25rem 2rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: var(--transition) !important;
  text-decoration: none !important;
  position: relative !important;
}

#nubecom-header .home-menu-container .main-menu-mobile > li > a:hover,
#nubecom-header .home-menu-container .main-menu-mobile > li > a:focus {
  color: var(--white) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Accordion toggle icon */
#nubecom-header
  .home-menu-container
  .home-page-menu
  li.menu-item-has-children
  > a::after {
  content: "\f107" !important; /* FontAwesome chevron-down */
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  color: var(--white) !important;
  transition: transform 0.3s ease !important;
  margin-left: auto !important;
}

#nubecom-header
  .home-menu-container
  .home-page-menu
  li.menu-item-has-children.accordion-open
  > a::after {
  transform: rotate(180deg) !important;
}

#nubecom-header .home-menu-container .main-menu-mobile li:last-child > a {
  border-bottom: none !important;
}

/* Sub-menu styling for mobile drawer - accordion layout */
#nubecom-header .home-menu-container .main-menu-mobile .sub-menu {
  background: #1e3a8a !important; /* Solid medium blue for submenu level */
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: none !important; /* Hidden by default, accordion will show/hide */
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  max-height: 400px; /* Límite de altura para submenús */
  overflow-y: auto; /* Scroll cuando sea necesario */
  overflow-x: hidden;
}

#nubecom-header
  .home-menu-container
  .main-menu-mobile
  .sub-menu.accordion-open {
  display: block !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#nubecom-header .home-menu-container .main-menu-mobile .sub-menu li {
  width: 100% !important;
  margin: 0 !important;
  background: #1e3a8a !important; /* Solid medium blue for submenu items */
}

#nubecom-header .home-menu-container .main-menu-mobile .sub-menu a {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  padding: 1rem 3rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: block !important;
  transition: var(--transition) !important;
}

#nubecom-header .home-menu-container .main-menu-mobile .sub-menu a:hover,
#nubecom-header .home-menu-container .main-menu-mobile .sub-menu a:focus {
  color: var(--white) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Third level sub-menus */
#nubecom-header .home-menu-container .main-menu-mobile .sub-menu .sub-menu {
  background: #3b82f6 !important; /* Solid lighter blue for third level */
}

#nubecom-header .home-menu-container .main-menu-mobile .sub-menu .sub-menu li {
  background: #3b82f6 !important; /* Consistent solid blue for third level items */
}

#nubecom-header .home-menu-container .main-menu-mobile .sub-menu .sub-menu a {
  padding-left: 4rem !important;
  font-size: 0.95rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Smooth animation for accordion */
#nubecom-header .home-menu-container .main-menu-mobile .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

#nubecom-header
  .home-menu-container
  .main-menu-mobile
  .sub-menu.accordion-open {
  max-height: 1000px; /* Large enough value */
  transition: max-height 0.3s ease-in;
  padding: 1rem 0;
  height: 100%;
}

/* ======================
   DESKTOP NAVIGATION AREA
   ====================== */
.nav-area {
  background: var(--primary-color);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  /* Estilo del scrollbar horizontal para navegadores webkit */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
}

/* Estilo personalizado del scrollbar horizontal para nav-area */
.nav-area::-webkit-scrollbar {
  height: 6px;
}

.nav-area::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.nav-area::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.nav-area::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.navbar-area {
  padding: 0;
  min-width: 100%;
}

.theme-menu {
  display: flex;
  justify-content: flex-start;
  min-width: fit-content; /* Permite que el menú se expanda según el contenido */
}

.menubar .navbar-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  flex-wrap: nowrap; /* Evita que los elementos se envuelvan */
  white-space: nowrap; /* Mantiene los elementos en una línea */
}

.menubar .navbar-nav li {
  margin: 0;
  position: relative;
  background-color: transparent;
}

.menubar .navbar-nav > li > a {
  color: var(--white);
  text-decoration: none;
  padding: 1rem 1.5rem;
  display: block;
  font-weight: 500;
  font-size: 1rem;
  transition: var(--transition);
  border-bottom: 3px solid transparent;
}

.menubar .navbar-nav > li > a:hover,
.menubar .navbar-nav > li > a:focus {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

.menubar .navbar-nav li.current-menu-item > a,
.menubar .navbar-nav li.current-menu-parent > a {
  background: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

/* Desktop Dropdown Menus */
.menubar .navbar-nav li ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius);
  min-width: 220px;
  max-height: 80vh; /* Máximo 80% de la altura de la ventana */
  overflow-y: auto; /* Scroll cuando sea necesario */
  overflow-x: hidden;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: var(--z-dropdown);
  list-style: none;
  margin: 0;
  /* Estilo del scrollbar para navegadores webkit */
  scrollbar-width: thin;
  scrollbar-color: var(--gray-400) var(--gray-100);
}

/* Estilo personalizado del scrollbar para desktop dropdowns */
.menubar .navbar-nav li ul.sub-menu::-webkit-scrollbar {
  width: 6px;
}

.menubar .navbar-nav li ul.sub-menu::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 3px;
}

.menubar .navbar-nav li ul.sub-menu::-webkit-scrollbar-thumb {
  background: var(--gray-400);
  border-radius: 3px;
}

.menubar .navbar-nav li ul.sub-menu::-webkit-scrollbar-thumb:hover {
  background: var(--gray-600);
}

.menubar .navbar-nav li:hover ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menubar .navbar-nav li ul.sub-menu li {
  width: 100%;
  margin: 0;
}

.menubar .navbar-nav li ul.sub-menu a {
  color: var(--text-color);
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 400;
  border-bottom: none;
  border-radius: 0;
}

.menubar .navbar-nav li ul.sub-menu a:hover {
  color: var(--primary-color);
  background: var(--gray-50);
}

/* Third level dropdowns */
.menubar .navbar-nav li ul.sub-menu li ul.sub-menu {
  top: 0;
  left: 100%;
}

/* Nested dropdown indicators - point right for submenus */
.menubar .navbar-nav li ul.sub-menu .menu-dropdown-icon i::before {
  content: "\f054"; /* fa-chevron-right */
}

/* Dropdown indicators */
.menu-dropdown-icon {
  display: inline-block;
  margin-left: 5px;
  font-size: 0.8em;
  transition: transform 0.3s ease;
}

.menu-dropdown-icon i {
  vertical-align: middle;
}

/* Rotate icon on hover */
.menubar .navbar-nav li:hover > a .menu-dropdown-icon {
  transform: rotate(180deg);
}

/* For mobile menu accordion */
.home-menu-container .menu-dropdown-icon {
  float: right;
  margin-right: 10px;
}

.home-menu-container .accordion-open > a .menu-dropdown-icon {
  transform: rotate(180deg);
}

/* ======================
   RESPONSIVE BREAKPOINT
   ====================== */
@media (max-width: 991px) {
  /* Ocultar header desktop */
  #nubecom-header .desktop-header {
    display: none;
  }

  /* Mostrar header móvil */
  #nubecom-header .mobile-header {
    display: block;
  }

  /* Mostrar botón flotante en móvil */
  .floating-menu-toggle {
    display: block !important;
  }
}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 480px) {
  #nubecom-header .mobile-search .header-search-form {
    grid-template-columns: 1fr auto;
  }

  #nubecom-header .header-search-select {
    display: none;
  }

  /* Cuando no hay selector, el input toma todo el borde izquierdo */
  #nubecom-header .mobile-search .header-search-input {
    border-left: 1px solid var(--border-color);
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
  }

  /* En móvil pequeño, ocultar texto del carrito */
  #nubecom-header .cart-info {
    display: none;
  }

  #nubecom-header .cart-link {
    grid-template-columns: auto;
    gap: 0;
    padding: 0.5rem;
  }

  /* Menu drawer ocupa toda la pantalla en móviles pequeños */
  #nubecom-header .home-menu-container {
    width: 100%;
    max-width: 280px;
  }

  /* Botón flotante en móviles pequeños */
  .floating-menu-toggle {
    bottom: 15px;
    left: 15px;
  }
}

/* ======================
   DEBUG & TESTING (Remove in production)
   ====================== */
/* 
.debug-zindex-info::before {
  content: "Drawer Z-Index: " attr(data-z-index);
  position: fixed;
  top: 10px;
  right: 10px;
  background: #ff0000;
  color: white;
  padding: 5px;
  font-size: 12px;
  z-index: 999999999999999;
}
*/

/* ======================
   ACCESSIBILITY & ANIMATIONS
   ====================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .floating-menu-toggle,
  .menu-toggle {
    animation: none;
    transition: none;
  }

  .menu-toggle .menu-icon,
  .menu-toggle .close-icon {
    transition: none;
  }

  .menu-toggle:hover,
  .menu-toggle:active {
    transform: none;
  }
}

/* Ajustes para tablets en landscape */
@media (min-width: 768px) and (max-width: 991px) {
  #nubecom-header .mobile-top-bar {
    margin-bottom: 1.5rem;
  }

  #nubecom-header .mobile-search-bar {
    margin-bottom: 1rem;
  }

  #nubecom-header .mobile-search .header-search-form {
    max-width: 600px;
    margin: 0 auto;
  }
}