/* =====================================================
   SUB NAVBAR DESKTOP — CATEGORÍAS Y SUBCATEGORÍAS
   ===================================================== */

.subNavbarLista {
  list-style: none;
  margin: 0;
  padding: 0 16px;
  display: flex;

  align-items: center;
  background: var(--colorNavbar);
  font-family: var(--fontPrincipal);
}

/* Cada item raíz */
.subNavbarLista > li {
  position: relative;
}

/* Categoría principal */
.subNavbarLista .menuItemPremium {
  display: flex;
  align-items: center;
  padding: 8px 6px;
  color: var(--colorTextoNavbar);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}

.subNavbarLista .menuItemPremium:hover {
  background: rgba(0,0,0,.04);
}

/* Flecha ▼ */
.categoriaToggle i {
  font-size: .7rem;
  transition: transform .2s ease;
  color: var(--colorTextoNavbar);
}

.categoriaItem.abierta .categoriaToggle i {
  transform: rotate(180deg);
}

/* ===============================
   SUBCATEGORÍAS (DROPDOWN)
   =============================== */

.subcategoriasDesktop {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 6px 0;

  position: absolute;        /* 🔥 CLAVE */
  top: 100%;
  left: 0;

  min-width: 220px;
  background: var(--colorCardFondo);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  z-index: 3000;

  display: none;             /* 🔒 oculto por defecto */
}

.navCategoriaItem.abierta > .subcategoriasDesktop {
  display: block;
}

@media (min-width: 992px) {
  .subNavbarCategorias {
    min-height: 52px !important;
    max-height: 52px !important;
  }
}

.subcategoriasDesktop li a:hover {
  background: var(--colorPrincipal);
  color: #fff;
}

/* ===============================
   ESTADO ACTIVO
   =============================== */

.subNavbarLista .menuItemPremium.activa {
  background: var(--colorPrincipal);
  color: #fff;
}

.subNavbarLista .menuItemPremium.activa i {
  color: #fff;
}

/* =========================================================
   📱 SIDEBAR — CATEGORÍAS DESPLEGABLES
   ========================================================= */

.sidebarCategoriaItem {
  list-style: none;
}

/* Subcategorías */
.sidebarSubcategorias {
  list-style: none;
  padding-left: 18px;
  margin: 6px 0 10px;
}

/* Item subcategoría */
.sidebarSubcategoriaItem {
  display: block;
  padding: 8px 14px;
  font-size: 0.9rem;
  color: var(--colorTextoPanel);
  text-decoration: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease;
}

.sidebarSubcategoriaItem:hover {
  background: rgba(0,0,0,.06);
  color: var(--colorPrincipal);
}

/* Flecha */
.sidebarCategoriaToggle i {
  font-size: 0.75rem;
  transition: transform .2s ease;
}

.sidebarCategoriaItem.abierta .sidebarCategoriaToggle i {
  transform: rotate(180deg);
}

/* ===============================
   🛒 ICONO CARRITO – PNG
   =============================== */

.iconoCarritoCatalogo {
  display: block;
  object-fit: contain;
  pointer-events: none;
}

/* 📱 Mobile pequeño */
@media (max-width: 480px) {
  .btnCarritoCatalogo {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }

  .iconoCarritoCatalogo {
    width: 40px;
    height: 40px;
  }
}

/* 📱 Mobile grande */
@media (min-width: 481px) and (max-width: 767px) {
  .btnCarritoCatalogo {
    width: 56px;
    height: 56px;
    margin-right: 20px;
  }

  .iconoCarritoCatalogo {
    width: 40px;
    height: 40px;
  }
}

/* 📲 Tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .btnCarritoCatalogo {
    width: 60px;
    height: 60px;
    margin-right: 50px;
  }

  .iconoCarritoCatalogo {
    width: 40px;
    height: 40px;
  }
}

/* 🖥️ Desktop */
@media (min-width: 992px) {
  .btnCarritoCatalogo {
    width: 52px;
    height: 52px;
    margin-right: 60px; /* aire desktop */
  }

  .iconoCarritoCatalogo {
    width: 40px;
    height: 40px;
  }
}

/* =========================================================
   🔥 FIX DEFINITIVO — SUBCATEGORÍAS DESKTOP
   ========================================================= */

/* =========================================================
   🔥 FIX DEFINITIVO — SUB NAVBAR RESPETA :root
   ========================================================= */

/* CONTENEDOR */
.subNavbarCategorias {
  background: var(--colorNavbar) !important;
  color: var(--colorTextoNavbar) !important;
  font-family: var(--fontPrincipal);
}

/* LISTA */
.subNavbarLista {
  background: transparent;
  color: inherit;
}

/* ITEM PRINCIPAL */
.subNavbarLista .menuItemPremium {
  color: var(--colorTextoNavbar) !important;
  font-weight: 600;
  background: transparent;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}

/* HOVER */
.subNavbarLista .menuItemPremium:hover {
  background: rgba(0,0,0,0.05);
  color: var(--colorPrincipal) !important;
}

/* ACTIVO */
.subNavbarLista .menuItemPremium.activa {
  background: rgba(245, 151, 154, 0.15); /* fallback suave */
  color: var(--colorPrincipal) !important;
}

/* LÍNEA INFERIOR ACTIVA */
.subNavbarLista .menuItemPremium.activa::after {
  background: var(--colorPrincipal);
}

/* ===============================
   DROPDOWN SUBCATEGORÍAS
   =============================== */

.subcategoriasDesktop {
  background: var(--colorCardFondo) !important;
  color: var(--colorCardTexto) !important;
  font-family: var(--fontPrincipal);
}

/* HOVER SUBCATEGORÍA */
.subcategoriasDesktop li a:hover {
  background: var(--colorPrincipal);
  color: #fff !important;
}

/* SOMBRA ELEVACIÓN */
.subcategoriasDesktop {
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* ===============================
   FIX ICONOS / FLECHAS
   =============================== */

.categoriaToggle i {
  color: var(--colorTextoNavbar);
}

/* ACTIVO */
.navCategoriaItem.abierta > .categoriaToggle {
  color: var(--colorPrincipal);
}


/* =====================================================
   🎯 SIDEBAR – SUBCATEGORÍAS
   Diferenciación visual clara
   ===================================================== */

/* Contenedor UL de subcategorías */
.sidebarSubcategorias {
  margin-top: 6px !important;
  margin-bottom: 10px !important;
  padding-left: 14px !important; /* sangría general */
}

/* Cada LI de subcategoría */
.sidebarSubcategorias li {
  margin-bottom: 6px !important; /* interlineado */
}

/* Link de subcategoría */
.sidebarSubcategorias .subcategoriaItem {
  display: block;
  padding: 4px 6px 4px 14px !important; /* sangría real */
  font-size: 0.85rem !important;       /* más chico que categoría */
  line-height: 1.4 !important;
  color: var(--colorTextoPanel) !important;
  opacity: 0.85;
  font-family: var(--fontPrincipal);
  position: relative;
  border-radius: 6px;
}

/* Indicador visual sutil (guía lateral) */
.sidebarSubcategorias .subcategoriaItem::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: var(--colorSecundario);
  opacity: 0.6;
}

/* Hover elegante */
.sidebarSubcategorias .subcategoriaItem:hover {
  background-color: rgba(0, 0, 0, 0.04);
  opacity: 1;
}

/* Estado activo (si luego lo usas) */
.sidebarSubcategorias .subcategoriaItem.activa {
  background-color: rgba(245, 151, 154, 0.15);
  color: var(--colorPrincipal) !important;
  font-weight: 500;
}

/* =====================================================
   🎯 REDES SOCIALES – NAVBAR
   Visible SOLO en tablet y desktop
   ===================================================== */

/* Oculto por defecto (mobile) */
.navbarRedesCatalogo {
  display: none !important;
}

/* Tablet y desktop (≥ 992px – Bootstrap lg) */
@media (min-width: 992px) {
  .navbarRedesCatalogo {
    display: flex !important;
    gap: 10px;
    align-items: center;
  }
}

/* =====================================================
   🎯 NAVBAR – REDES VISIBLES Y PROTAGONISTAS
   ===================================================== */

.navbarRedesCatalogo .navbarRedSocial {
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.35rem;          /* 👈 MÁS GRANDE */
  color: var(--colorTextoNavbar);

  border-radius: 50%;
  opacity: 0.85;

  cursor: pointer;
  transition: all .2s ease;
}

.navbarRedesCatalogo .navbarRedSocial:hover {
  background: rgba(0,0,0,0.06);
  opacity: 1;
  transform: translateY(-1px);
}


/* =====================================================
   🎯 NAVBAR – REDES A LA IZQUIERDA DEL CARRITO
   ===================================================== */

@media (min-width: 992px) {

  /* Forzamos orden visual */
  #navbarCatalogo {
    display: flex;
    align-items: center;
  }

  .navbarRedesCatalogo {
    order: 2;              /* 👈 antes del carrito */
    margin-left: auto;     /* empuja a la derecha */
    margin-right: 8px;
  }

  .btnCarritoCatalogo {
    order: 3;
  }

  /* Logo queda al inicio */
  #navbarCatalogo > .d-flex {
    order: 1;
  }
}

/* =====================================================
   🎯 SIDEBAR – REDES SOCIALES CENTRADAS
   ===================================================== */

.sidebarRedesCatalogo {
  display: flex;
  justify-content: center;   /* 👈 CENTRADO REAL */
  align-items: center;
  gap: 18px;

  margin-top: 20px;
  margin-bottom: 12px;
}

/* Cada icono */
.sidebarRedesCatalogo .sidebarRedSocial {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.6rem;         /* 👈 GRANDES */
  color: var(--colorTextoPanel);

  border-radius: 50%;
  cursor: pointer;

  transition: all .2s ease;
}

.sidebarRedesCatalogo .sidebarRedSocial:hover {
  background: rgba(0,0,0,0.06);
  color: var(--colorPrincipal);
  transform: translateY(-2px);
}

/* =====================================================
   🎯 REDES SOCIALES – PNG (SIDEBAR + NAVBAR)
   ===================================================== */

/* Base común */
.sidebarRedSocial img,
.navbarRedSocial img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ---------- SIDEBAR (mobile) ---------- */
.sidebarRedSocial {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  cursor: pointer;
  transition: all .2s ease;
}

.sidebarRedSocial:hover {
  background: rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

/* ---------- NAVBAR (desktop) ---------- */
.navbarRedSocial {
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  cursor: pointer;
  transition: all .2s ease;
}

.navbarRedSocial:hover {
  background: rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .sidebarRedSocial {
    width: 52px;
    height: 52px;
  }
}

.btnCarritoCatalogo {
  position: relative;
  padding-right: 14px; /* aire interno para el badge */
}

/* Wrapper del logo en navbar */
.logoNavbarWrapper {
  display: flex;
  align-items: center;
}


/* 🖥️ Desktop: separado del borde izquierdo */
@media (min-width: 992px) {
  .logoNavbarWrapper {
    margin-left: 35px;   /* ajusta aquí si quieres más/menos aire */
    margin-right: 0;
  }

.navbarLogoCatalogo {
  height: 50px !important;
  width: auto !important;
}
}

.subcategoriasDesktop li a {
  display: block;
  max-width: 280px;        /* ajusta si quieres */
  padding: 8px 16px;

  white-space: normal;     /* ✅ permite wrap */
  word-break: normal;      /* ✅ no corta palabras */
  overflow-wrap: break-word;

  line-height: 1.35;
}

.subcategoriasDesktop {
  max-width: 280px;
}

/* =====================================================
   🧭 SUB NAVBAR — 2 LÍNEAS MÁX + ELLIPSIS
   ===================================================== */

@media (min-width: 768px) {

  .subNavbarLista > li {
    max-width: 150px;
    flex-shrink: 0;
  }

  .subNavbarLista > li > .menuItemPremium {
    max-width: 150px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;     /* 🔥 máximo 2 líneas */

    overflow: hidden;
    text-overflow: ellipsis;

    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;

    text-align: center;
    line-height: 1.25;
    padding: 6px 8px;
  }
}