/* =================================================== */
/* MEGA MENÚ TIPO 3 y 4 - ANCHO COMPLETO CON SCROLLBAR */
/* =================================================== */
/* 
 * DESCRIPCIÓN:
 * Esta hoja de estilos controla el comportamiento del mega menú (tipos 3 y 4)
 * para que ocupe el 100% del ancho del viewport sin tapar el scrollbar vertical.
 * 
 * CARACTERÍSTICAS PRINCIPALES:
 * - Ancho del viewport completo (100vw) con compensación para scrollbar (-17px)
 * - Posicionamiento absoluto con z-index elevado
 * - Distribución de columnas centrada horizontalmente
 * - No afecta a otros menús (solo aplica a clase .one-mega-menu-fullwidth)
 * 
 * PROBLEMA RESUELTO:
 * El mega menú original tapaba el scrollbar vertical de la derecha porque usaba
 * width: 100%. La solución es usar width: calc(100vw - 17px) para compensar
 * el ancho del scrollbar (típicamente 17px en navegadores modernos).
 * 
 * DISTRIBUCIÓN DE COLUMNAS:
 * - Gap de 10px entre columnas para permitir que 6 columnas quepan en pantallas de 1920px
 * - Min-width de 200px por columna con padding de 15px horizontal
 * - Flexbox distribuye equitativamente el espacio disponible
 * - Centrado horizontal con justify-content: center
 * 
 * SELECTORES ESPECIALES:
 * - .one-mega-menu-fullwidth: Clase aplicada solo al mega menú tipo 3/4
 * - Los estilos NO afectan a .dropdown-menu sin esta clase (otros menús)
 */

/* =================================================== */
/* CARROUSEL TIPO 4 – MEGA MENÚ IMÁGENES (Slick)       */
/* Ámbito estricto: solo dentro de .one-mega-menu-fullwidth */
/* =================================================== */
.one-mega-menu-fullwidth .pt-menu-grid.header-menu-product {
    /* El dropdown no debe recortar las flechas ni las tarjetas */
    overflow: visible !important;
}

.one-mega-menu-fullwidth .pt-menu-grid.header-menu-product .slick-list {
    /* Slick usa overflow:hidden; lo mantenemos para el viewport del carrusel */
    overflow: hidden;
}

.one-mega-menu-fullwidth .pt-menu-grid.header-menu-product .slick-track {
    display: flex !important;   /* Alinea las tarjetas en fila */
    gap: 10px;                  /* Separación entre tarjetas */
}

.one-mega-menu-fullwidth .pt-menu-grid.header-menu-product .slick-slide {
    float: none;                /* Usamos flex del track, no float */
    height: auto;               /* Evita alturas forzadas inconsistentes */
}

/* Tarjeta de producto estable dentro del carrusel */
.one-mega-menu-fullwidth .pt-product { display: block; text-decoration: none; }
.one-mega-menu-fullwidth .pt-img-blox .pt-img img {
    display: block;
    width: 100%;
    height: auto;
}

/* Flechas sobre el dropdown (no quedar tapadas) */
.one-mega-menu-fullwidth .pt-menu-grid.header-menu-product .slick-arrow { z-index: 5; }
.one-mega-menu-fullwidth .pt-menu-grid.header-menu-product .slick-prev { left: -6px; }
.one-mega-menu-fullwidth .pt-menu-grid.header-menu-product .slick-next { right: -6px; }

/* Opcional: ocultar dots en menú */
.one-mega-menu-fullwidth .pt-menu-grid.header-menu-product .slick-dots { display: none; }

/* Opcional: 3 tarjetas visibles en desktop */
@media (min-width: 992px) {
    .one-mega-menu-fullwidth .pt-menu-grid.header-menu-product .slick-slide {
        width: calc((100% - 20px) / 3) !important; /* 3 por fila con 10px gap */
    }
}

/* PERMITIR QUE EL MEGAMENU SALGA DEL HEADER */
header,
header .headinfo-box,
header .navinfo,
header .pt-desctop-parent-menu-categories,
.pt-desctop-menu,
.pt-desctop-menu nav,
.pt-desctop-menu nav ul {
    overflow: visible !important;
}

/* =================================================== */
/* ANCHO Y POSICIONAMIENTO DEL MEGAMENU */
/* =================================================== */
/* 
 * Múltiples selectores con alta especificidad para sobrescribir
 * los estilos del tema original que usan width: 100%
 * 
 * IMPORTANTE: La regla final sobrescribe específicamente el estilo
 * de .pt-desctop-menu .megamenu .dropdown-menu que viene del tema.
 */
.pt-desctop-menu .megamenu .dropdown-menu.one-mega-menu-fullwidth,
.pt-desctop-menu .megamenu.one-mega-menu-fullwidth,
.pt-desctop-menu li.megamenu .dropdown-menu.one-mega-menu-fullwidth,
.pt-desctop-menu li.dropdown.megamenu .dropdown-menu.one-mega-menu-fullwidth,
.one-mega-menu-fullwidth,
.dropdown-menu.one-mega-menu-fullwidth {
    /* Ancho completo del viewport sin tapar scrollbar */
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    
    /* Posicionamiento y márgenes */
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    
    /* Stacking context */
    position: absolute !important;
    z-index: 999 !important;
    
    /* Prevenir scroll horizontal */
    overflow-x: hidden !important;
}

/* 
 * REGLA ESPECÍFICA PARA SOBRESCRIBIR EL TEMA
 * ------------------------------------------------------------
 * El archivo style.css del tema aplica:
 * .pt-desctop-menu .megamenu .dropdown-menu { width: 100%; }
 * 
 * Esta regla más específica sobrescribe ese estilo y aplica
 * calc(100vw - 17px) para compensar el ancho del scrollbar.
 */
.pt-desctop-menu .megamenu .dropdown-menu.one-mega-menu-fullwidth {
    /* Restamos 17px que es el ancho típico del scrollbar en navegadores */
    width: calc(100vw - 17px) !important;
}

/* =================================================== */
/* PADDING TOP PARA TIPO_MENU = 3 */
/* =================================================== */
/* 
 * Aplicar padding-top de 10px específicamente para mega menú tipo 3
 */
.one-mega-menu-fullwidth[data-tipo-menu="3"],
.dropdown-menu.one-mega-menu-fullwidth[data-tipo-menu="3"],
.pt-desctop-menu .megamenu .dropdown-menu.one-mega-menu-fullwidth[data-tipo-menu="3"] {
    padding-top: 10px !important;
}

/* =================================================== */
/* PADDING TOP PARA TIPO_MENU = 4 */
/* =================================================== */
/* 
 * Aplicar padding-top de 30px específicamente para mega menú tipo 4
 */
.one-mega-menu-fullwidth[data-tipo-menu="4"],
.dropdown-menu.one-mega-menu-fullwidth[data-tipo-menu="4"],
.pt-desctop-menu .megamenu .dropdown-menu.one-mega-menu-fullwidth[data-tipo-menu="4"] {
    padding-top: 30px !important;
}

/* =================================================== */
/* CONTENEDOR INTERNO DEL MEGAMENU */
/* =================================================== */
/* 
 * Estilos para .container-fluid dentro del mega menú.
 * Se aplica compensación de scrollbar para mantener el contenido
 * centrado correctamente.
 */
.one-mega-menu-fullwidth .container-fluid,
.pt-desctop-menu .one-mega-menu-fullwidth .container-fluid {
    max-width: 1200px !important;  /* Ancho máximo del contenido */
    margin: 0 auto !important;      /* Centrar horizontalmente */
    width: calc(100vw - 17px) !important;  /* Compensar scrollbar */
    padding: 13px 20px !important;  /* Padding a 1/3 de 40px (13px) */
}

/* =================================================== */
/* DISTRIBUCIÓN DE COLUMNAS */
/* =================================================== */
/* 
 * Las columnas del mega menú se distribuyen en fila (flexbox)
 * y se centran horizontalmente. El flex-wrap: nowrap evita
 * que las columnas se apilen verticalmente.
 */
.one-mega-menu-fullwidth .pt-col-list,
.pt-desctop-menu .one-mega-menu-fullwidth .pt-col-list {
    display: flex !important;          /* Layout flexbox */
    gap: 10px !important;              /* Espacio mínimo entre columnas para que quepan 6 */
    flex-wrap: nowrap !important;      /* No permitir salto de línea */
    width: 100% !important;            /* Ancho completo del contenedor */
    margin: 0 !important;              /* Sin margen adicional */
    justify-content: center !important; /* Centrar columnas horizontalmente */
    align-items: flex-start !important; /* Alinear al inicio verticalmente */
}

/* =================================================== */
/* ESTILOS DE COLUMNAS INDIVIDUALES */
/* =================================================== */
/* 
 * Estilos para las columnas individuales (.col-lg-2, .col-sm-2, etc.)
 * Se aplica distribución equitativa del espacio disponible.
 * 
 * IMPORTANTE: Las columnas ocupan todo el ancho disponible sin límite máximo
 * para que cubran el 100% del contenedor.
 * 
 * ANTERIOR (Problemático):
 * - max-width: 16.666% limitaba cada columna a 1/6 del ancho total
 * - En 6 columnas quedaban espacios vacíos a los lados
 * - No se aprovechaba todo el espacio disponible del mega menú
 * 
 * ACTUAL (Solucionado):
 * - max-width: none permite que las columnas se expandan libremente
 * - Con flex: 1 1 0, cada columna recibe una porción equitativa del espacio
 * - Las columnas cubren el 100% del ancho del contenedor
 * - Mínimo 200px por columna para mantener legibilidad
 */
.one-mega-menu-fullwidth .col-lg-2,
.pt-desctop-menu .one-mega-menu-fullwidth .col-lg-2,
.one-mega-menu-fullwidth .col-sm-2,
.pt-desctop-menu .one-mega-menu-fullwidth .col-sm-2,
.one-mega-menu-fullwidth .col-sm-3,
.pt-desctop-menu .one-mega-menu-fullwidth .col-sm-3,
.one-mega-menu-fullwidth .col-sm-4,
.pt-desctop-menu .one-mega-menu-fullwidth .col-sm-4,
.one-mega-menu-fullwidth .col-sm-6,
.pt-desctop-menu .one-mega-menu-fullwidth .col-sm-6,
.one-mega-menu-fullwidth .col,
.pt-desctop-menu .one-mega-menu-fullwidth .col,
.one-mega-menu-fullwidth > div > div > div,
.pt-desctop-menu .one-mega-menu-fullwidth > div > div > div {
    flex: 1 1 0 !important;         /* Distribución equitativa del espacio */
    width: auto !important;         /* Ancho automático según flex */
    max-width: none !important;     /* SIN límite máximo - ocupa todo el espacio */
    min-width: 200px !important;    /* Ancho mínimo para legibilidad */
    padding: 0 15px !important;     /* Sin padding vertical, solo horizontal */
    margin: 0 !important;           /* Sin márgenes */
}

/* ALINEACIÓN DE LISTAS - SOLO PARA .one-mega-menu-fullwidth */
.one-mega-menu-fullwidth .pt-megamenu-submenu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =================================================== */
/* ESTILOS DE ELEMENTOS DE LISTA */
/* =================================================== */
/* 
 * Cada <li> representa un item del menú (categoría o subcategoría).
 * - margin inferior de 1px: separación mínima entre items
 * - padding 0: sin padding interno
 */
.one-mega-menu-fullwidth .pt-megamenu-submenu li {
    margin: 0 0 1px 0 !important;
    padding: 0 !important;
}

/* =================================================== */
/* ESTILOS DE ENLACES DEL MENÚ */
/* =================================================== */
/* 
 * Los enlaces <a> dentro de cada <li>.
 * 
 * ESPACIADO ENTRE CATEGORÍAS DIFERENTES:
 * - padding: 3px 0 = 3px arriba y 3px abajo
 * - margin del <li>: 1px adicional
 * - line-height: 1.2 (altura de línea del texto)
 * 
 * TOTAL DE SEPARACIÓN ENTRE CATEGORÍAS:
 * 3px (padding inferior) + 1px (margin del li) + 3px (padding superior siguiente) = 7px
 * Sumado al line-height, da un espaciado visual aprox de 9-10px entre categorías
 * 
 * ESPACIADO ENTRE LÍNEAS DE LA MISMA CATEGORÍA:
 * Cuando un nombre de categoría se divide en múltiples líneas (ejemplo: "LIMPIEZA Y LAVANDERÍA"),
 * el line-height de 1.2 crea un espaciado compacto de aproximadamente 4-5px entre líneas.
 * 
 * RELACIÓN DE ESPACIOS:
 * El espaciado entre líneas de la misma categoría (4-5px) es aproximadamente la mitad
 * que el espaciado entre categorías diferentes (9-10px).
 * 
 * PROPIEDADES DE TEXTO:
 * - white-space: normal - Permite que el texto se ajuste a múltiples líneas
 * - word-wrap: normal - NO corta palabras completas (las mantiene íntegras)
 * - overflow-wrap: normal - Alternativa moderna para word-wrap
 */
.one-mega-menu-fullwidth .pt-megamenu-submenu li a {
    display: block !important;
    padding: 3px 0 !important;           /* 3px arriba y abajo - separación entre categorías */
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    line-height: 1.2 !important;         /* Compacto: separa líneas del mismo nombre con ~4-5px */
    white-space: normal !important;      /* Permitir múltiples líneas si es necesario */
    word-wrap: normal !important;        /* NO cortar palabras, solo entre espacios */
    overflow-wrap: normal !important;    /* Alternativa para navegadores modernos */
}

/* ALINEACIÓN DE TÍTULOS CON BADGES - SOLO PARA .one-mega-menu-fullwidth */
.one-mega-menu-fullwidth .one-title-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
}

.one-mega-menu-fullwidth .one-title-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* BADGES PROMOCIONALES - SOLO ESTRUCTURA, SIN COLORES - SOLO PARA .one-mega-menu-fullwidth */
.one-mega-menu-fullwidth .one-badge-promo {
    display: inline-block !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    border-radius: 3px !important;
    margin-left: 8px !important;
    white-space: nowrap !important;
    /* NO aplicar colores aquí - se aplican desde BD via style inline */
}

/* =================================================== */
/* ENLACES CON IMAGEN DE CATEGORÍA */
/* =================================================== */
/* 
 * Cuando un enlace contiene una imagen (icono de categoría desde BD),
 * ajustar el display para que la imagen quede arriba del texto sin encimarlo.
 * 
 * COMPORTAMIENTO:
 * - La imagen se muestra con width: 100% del contenedor
 * - margin-bottom: 8px separa la imagen del texto
 * - El texto se muestra en bloque debajo de la imagen
 * - No se centra: mantiene alineación natural
 * 
 * ESTRUCTURA HTML GENERADA:
 * <li class="...">
 *     <a href="...">
 *         <img src="..." class="lazyload" data-src="...">
 *         <span>Nombre categoría</span>
 *         <span class="badge">...</span>
 *     </a>
 * </li>
 * 
 * SELECTOR :has(img):
 * - Aplica solo a enlaces que contienen una imagen
 * - Compatible con navegadores modernos
 * 
 * EFECTO VISUAL:
 * - Las imágenes tienen un efecto fade-in con desplazamiento diagonal
 * - Estado inicial: opacity 0, desplazado 15px arriba-izquierda
 * - Estado final: opacity 1, en posición original
 * - Duración: 2.5 segundos con easing smooth
 * - JavaScript agrega clase 'loaded' cuando la imagen carga para activar el efecto
 */
/* 0) Desactiva el subrayado previo que tengas en li/a (hover o activo) */
.one-mega-menu-fullwidth .pt-megamenu-submenu li a::after,
.one-mega-menu-fullwidth .pt-megamenu-submenu li::after {
  content: none !important;
}

/* 1) Asegura el contenedor del enlace y la imagen por encima */
.one-mega-menu-fullwidth .pt-megamenu-submenu li a {
  position: relative !important;
  overflow: visible !important;
}

.one-mega-menu-fullwidth .pt-megamenu-submenu li a > img {
  position: absolute !important;
  top: -10px !important;
  left: 0 !important;
  width: 200px !important;
  height: auto !important;
  display: block !important;
  z-index: 999999 !important;        /* z-index extremo para estar por encima */
  pointer-events: none !important;
  
  /* FADE IN EFFECT CON DESPLAZAMIENTO DIAGONAL */
  opacity: 0 !important;
  transform: translate(-15px, -15px) !important;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out !important;
}

/* 2) Imagen aparece al hacer hover (sin JavaScript) */
.one-mega-menu-fullwidth .pt-megamenu-submenu li:hover a > img {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* 3) El texto va en inline-block para medir su propio ancho */
.one-mega-menu-fullwidth .pt-megamenu-submenu li a > span:first-of-type {
  position: relative !important;
  display: inline-block !important;   /* clave: el subrayado solo mide el texto */
  z-index: 1 !important;              /* z-index muy bajo para estar debajo de la imagen */
}

/* 3) EL SUBRAYADO DEL NOMBRE DE LA CATEGORÍA FUE ELIMINADO */

/* 4) Badges y otros spans siguen debajo de la imagen */
.one-mega-menu-fullwidth .pt-megamenu-submenu li a .one-badge-promo,
.one-mega-menu-fullwidth .pt-megamenu-submenu li a .one-badge-subcategoria {
  position: relative !important;
  z-index: 1 !important;
}

/* 5) (Opcional) Si algún ancestro crea stacking context, neutralízalo */
.one-mega-menu-fullwidth .pt-megamenu-submenu li {
  transform: none !important;
  will-change: auto !important;
}

/* =================================================== */
/* CATEGORÍAS PRINCIPALES (CABECERAS DE GRUPO) */
/* =================================================== */
/* 
 * Las categorías principales (mega-menu-categoria-principal) tienen
 * un espaciado mayor para diferenciarlas de las subcategorías.
 * 
 * Ejemplos: "HOGAR", "COCINA", "BAÑO" con subcategorías debajo
 * 
 * ESPACIADO VERTICAL:
 * - margin inferior: 12px (separación del grupo siguiente)
 * - padding inferior: 6px (espacio antes de sus subcategorías)
 * - padding de enlace: 6px (el doble que subcategorías normales)
 * - line-height: 1.6 (más alto que subcategorías)
 */
.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal {
    margin: 0 0 12px 0 !important;  /* Separación del siguiente grupo */
    padding: 0 0 6px 0 !important;  /* Espacio antes de subcategorías */
}

.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 0 !important;         /* El doble que subcategorías */
    line-height: 1.6 !important;       /* Más espacio vertical */
}

/* FORZAR SIN SUBRAYADO EN EL NOMBRE DE LA CATEGORÍA */
.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal a,
.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal a span {
    text-decoration: none !important;
}

/* SUBRAYADO FIJO EN EL LI (NO HOVER) */
.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal {
    position: relative !important;
}

.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 2px !important;
    background-color: currentColor !important;  /* Color del texto */
    display: block !important;
}

/* QUITAR SUBRAYADO PARA ESTILOS QUE TIENEN SU PROPIO BORDER */
.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal.one-estilo-li-0::after,
.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal.one-estilo-li-2::after,
.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal.one-estilo-li-4::after,
.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal.one-estilo-li-5::after,
.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal.one-estilo-li-7::after,
.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal.one-estilo-li-11::after {
    display: none !important;
}

/* =================================================== */
/* RESPONSIVE - SOLO PARA .one-mega-menu-fullwidth */
/* =================================================== */
/* 
 * MEDIA QUERIES PARA DIFERENTES TAMAÑOS DE PANTALLA:
 * 
 * < 576px (móviles): Una columna, sin ancho mínimo
 * 576px - 768px (tablets): 2 columnas, mantener legibilidad
 * > 768px (desktop): Layout completo según configuración
 */

/* MÓVILES: Pantallas pequeñas (< 576px) */
@media (max-width: 575.98px) {
    .one-mega-menu-fullwidth .pt-col-list {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .one-mega-menu-fullwidth .col-lg-2,
    .one-mega-menu-fullwidth .col-md-4,
    .one-mega-menu-fullwidth .col-sm-6,
    .one-mega-menu-fullwidth .col-sm-4,
    .one-mega-menu-fullwidth .col-sm-3,
    .one-mega-menu-fullwidth .col-sm-2,
    .one-mega-menu-fullwidth .col {
        min-width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        padding: 0 !important;
    }
}

/* TABLETS: Pantallas medianas (576px - 768px) */
@media (min-width: 576px) and (max-width: 768px) {
    .one-mega-menu-fullwidth .pt-col-list {
        flex-wrap: wrap !important;
        gap: 20px !important;
    }
    
    .one-mega-menu-fullwidth .col-lg-2,
    .one-mega-menu-fullwidth .col-md-4,
    .one-mega-menu-fullwidth .col-sm-6,
    .one-mega-menu-fullwidth .col-sm-4,
    .one-mega-menu-fullwidth .col-sm-3,
    .one-mega-menu-fullwidth .col-sm-2,
    .one-mega-menu-fullwidth .col {
        min-width: calc(50% - 10px) !important; /* 2 columnas con gap */
        flex: 0 0 calc(50% - 10px) !important;
    }
}

/* TABLETS GRANDES: Pantallas grandes (768px - 992px) */
@media (min-width: 769px) and (max-width: 991.98px) {
    .one-mega-menu-fullwidth .pt-col-list {
        flex-wrap: wrap !important;
        gap: 25px !important;
    }
    
    .one-mega-menu-fullwidth .col-lg-2,
    .one-mega-menu-fullwidth .col-md-4 {
        min-width: calc(33.333% - 17px) !important; /* 3 columnas */
        flex: 0 0 calc(33.333% - 17px) !important;
    }
}

/* =================================================== */
/* ESTILOS DINÁMICOS PARA MEGA MENÚ */
/* =================================================== */
/* 
 * Estos estilos se aplican según el valor de 'estilo_li' en la base de datos.
 * Cada estilo tiene su propia clase: one-estilo-li-0, one-estilo-li-1, etc.
 * 
 * IMPORTANTE: Los estilos que tienen su propio border quitan el ::after por defecto
 * para evitar conflictos con el subrayado automático de las categorías principales.
 */

/* ESTILO 0: Sin decoración */
/* DOCUMENTACIÓN: Se eliminó el padding original (6px 0) que estaba afectando el line-height.
 * Ahora se aplica margin y padding 0 para que el line-height desde la BD se respete correctamente.
 * Esto asegura que el interlineado configurado dinámicamente no sea interferido por espaciado CSS fijo.
 */
li.one-estilo-li-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Aplicar también a los enlaces dentro de one-estilo-li-0 */
/* DOCUMENTACIÓN: Se aplican los mismos valores al <a> para consistencia y evitar
 * cualquier interferencia con el line-height configurado desde la base de datos.
 */
li.one-estilo-li-0 > a {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ESTILO 1: Hairline muy fino */
/* Línea inferior muy delgada usando ::after con transform scaleY */
li.one-estilo-li-1 { 
    position: relative !important; 
    padding: 6px 0 !important; 
}
li.one-estilo-li-1::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 1px !important;
    background: currentColor !important;
    transform: scaleY(.5) !important; /* visual más fino que 1px */
    transform-origin: bottom !important;
    opacity: .8 !important;
}
li.one-estilo-li-1:last-child::after { display: none !important; }

/* ESTILO 2: Línea inferior gruesa y marcada */
/* Border-bottom sólido de 3px */
li.one-estilo-li-2 {
    border-bottom: 3px solid currentColor !important;
    padding-bottom: 5px !important;
}
li.one-estilo-li-2:last-child { border-bottom: none !important; }

/* ESTILO 4: Línea superior en lugar de inferior */
/* Border-top sólido de 2px con máxima especificidad */
li.one-estilo-li-4 {
    border-top: 2px solid currentColor !important;
    padding-top: 9px !important;
}

/* MAYOR ESPECIFICIDAD PARA MEGA MENÚ */
.one-mega-menu-fullwidth li.one-estilo-li-4 {
    border-top: 2px solid currentColor !important;
    padding-top: 9px !important;
}

.pt-desctop-menu .one-mega-menu-fullwidth li.one-estilo-li-4 {
    border-top: 2px solid currentColor !important;
    padding-top: 9px !important;
}

/* ESTILO 5: Borde inferior punteado */
/* Border-bottom punteado de 1px */
li.one-estilo-li-5 {
    border-bottom: 1px dotted currentColor !important;
    padding-bottom: 5px !important;
}
li.one-estilo-li-5:last-child { border-bottom: none !important; }

/* ESTILO 7: Línea lateral izquierda fina + borde inferior ultra fino */
/* Border-left + border-bottom ultra fino con padding especial */
li.one-estilo-li-7 {
    border-left: 1px solid currentColor !important;
    border-bottom: 0.1px solid currentColor !important;
    padding: 8px 14px 10px 22px !important; /* espacio extra a la izquierda */
    margin-left: 2px !important;
}

/* ESPECIFICIDAD MÁXIMA PARA ESTILO-7 */
.one-mega-menu-fullwidth .pt-megamenu-submenu li.one-estilo-li-7 {
    border-bottom: 0.1px solid currentColor !important;
    margin-bottom: 0 !important;
}

li.one-estilo-li-7 > a {
    /* Sin margin en el enlace completo */
}

li.one-estilo-li-7 > a span:not(.icono-nivel) {
    margin-left: 16px !important; /* margin-left solo al texto de la categoría, no al prefijo */
}

/* ESTILO 11: Viñeta + borde inferior ultra fino + hover */
/* Basado en estilo 7 pero con viñeta y efecto hover */
li.one-estilo-li-11 {
    border-bottom: 0.1px solid currentColor !important;
    padding: 8px 14px 10px 22px !important; /* espacio extra a la izquierda */
    margin-left: 2px !important;
}

/* ESPECIFICIDAD MÁXIMA PARA ESTILO-11 */
.one-mega-menu-fullwidth .pt-megamenu-submenu li.one-estilo-li-11 {
    border-bottom: 0.1px solid currentColor !important;
    margin-bottom: 0 !important;
}

li.one-estilo-li-11 > a {
    position: relative !important;
    /* Sin margin en el enlace completo */
}

li.one-estilo-li-11 > a span:not(.icono-nivel) {
    margin-left: 16px !important; /* margin-left solo al texto de la categoría, no al prefijo */
}

/* Viñeta a la izquierda del texto */
li.one-estilo-li-11 > a::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 6px !important;
    height: 6px !important;
    background-color: currentColor !important;
    border-radius: 50% !important;
    opacity: 0.8 !important;
}

/* HOVER: fondo blanco alpha 30% */
li.one-estilo-li-11:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
}

/* =================================================== */
/* GESTIÓN DE CONFLICTOS CON SUBRAYADO AUTOMÁTICO */
/* =================================================== */
/* 
 * Las categorías principales tienen un ::after que crea un subrayado automático.
 * Los estilos que tienen su propio border deben quitar este ::after para evitar conflictos.
 * 
 * ESTILOS QUE QUITAN EL ::after AUTOMÁTICO:
 * - Estilo 0: Sin decoración
 * - Estilo 2: Tiene border-bottom propio
 * - Estilo 4: Tiene border-top propio  
 * - Estilo 5: Tiene border-bottom punteado propio
 * - Estilo 7: Tiene border-left y border-bottom propios
 * - Estilo 11: Tiene border-bottom propio
 */

/* QUITAR SUBRAYADO AUTOMÁTICO PARA ESTILOS CON BORDER PROPIO */
.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal.one-estilo-li-0::after,
.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal.one-estilo-li-2::after,
.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal.one-estilo-li-4::after,
.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal.one-estilo-li-5::after,
.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal.one-estilo-li-7::after,
.one-mega-menu-fullwidth .pt-megamenu-submenu li.mega-menu-categoria-principal.one-estilo-li-11::after {
    display: none !important;
}