/* [NM2-2026-05-26 RAIL-TOOLTIP-FIX] Mejora del tooltip del rail de filtros en /tienda
 * Problema: cuando el sidebar está colapsado y se hace hover sobre los íconos
 * del rail (Filtros activos / Marcas / Categorías / Precio / Especificaciones),
 * la pestañita con el label aparece cortada por debajo/al lado de la tarjeta
 * del producto adyacente.
 *
 * Causa: el tooltip ::after tenía z-index:100 pero el contenedor padre creaba
 * un stacking context limitado, y/o la grid de productos quedaba por encima.
 *
 * Solución (sin tocar el bundle 30021):
 * 1) Forzar overflow:visible en el sidebar y el rail para evitar clipping.
 * 2) Subir z-index del tooltip a 9999 para garantizar que pase por encima.
 * 3) Restyle al color de marca (azul nexusm2) con sombra suave y mejor tipografía.
 */

/* 1) Garantizar que el tooltip no quede clippeado por el contenedor */
.nm2-shop-sidebar,
.nm2-shop-sidebar-rail,
.nm2-shop-sidebar.is-collapsed,
.nm2-shop-layout-grid.is-sidebar-collapsed .nm2-shop-sidebar {
  overflow: visible !important;
}

/* CRITICAL: cuando el sidebar está colapsado, elevar TODO el aside 
   para que su stacking context quede por encima de la grid de productos.
   Sin esto, el tooltip aunque tenga z-index:9999 queda detrás porque
   el aside compite con el contenedor del producto en stacking context
   paralelo.
   Usamos selector con ID (#nm2-shop-sidebar) para maximizar especificidad. */
aside#nm2-shop-sidebar.is-collapsed,
#nm2-shop-sidebar.nm2-shop-sidebar.is-collapsed {
  position: sticky !important;
  z-index: 1000 !important;
}

/* El rail-item necesita un stacking context propio elevado */
.nm2-shop-rail-item {
  position: relative;
  z-index: 1;
}

.nm2-shop-rail-item:hover {
  z-index: 9999 !important;
}

/* 2) Override del tooltip: color de marca (--nm2-primary #1B4FE0) + sombra + más legibilidad */
.nm2-shop-rail-item::after {
  background: var(--nm2-primary, #1B4FE0) !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(27, 79, 224, 0.32),
              0 2px 6px rgba(15, 23, 42, 0.10) !important;
  z-index: 9999 !important;
  /* Pequeño slide-in para que se sienta vivo sin ser molesto */
  transform: translateY(-50%) translateX(-4px) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

.nm2-shop-rail-item:hover::after {
  transform: translateY(-50%) translateX(0) !important;
}

/* 3) Flechita lateral en color de marca */
.nm2-shop-rail-item::before {
  background: var(--nm2-primary, #1B4FE0) !important;
  z-index: 9999 !important;
  box-shadow: -2px 2px 4px rgba(27, 79, 224, 0.12) !important;
}

/* 4) Cuando el rail-item está activo (filtro abierto), el tooltip
   sigue funcionando bien al hover */
.nm2-shop-rail-item.is-active::after,
.nm2-shop-rail-item.is-active::before {
  z-index: 9999 !important;
}