/*!
 * Menu Columns Feature
 * Supertronic Codemized Features v2.0.1
 * Built-in functionality for menu organization
 */

/* BASE: Solo aplicar cuando el menú está visible por hover */
.elementor-nav .sub-menu li:hover > .sub-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    min-width: 320px !important;
    max-width: 800px !important;
    width: auto !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    padding: 15px !important;
    top: 0 !important;
    left: 100% !important;
    position: absolute !important;
    z-index: 9999 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    border-radius: 4px !important;
}

/* Items del tercer nivel - Estructura base (2 columnas por defecto) */
.elementor-nav .sub-menu li:hover > .sub-menu li {
    width: 50% !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

/* Separador vertical entre columnas (columna izquierda) */
.elementor-nav .sub-menu li:hover > .sub-menu li:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.1) !important;
}

/* Quitar borders de últimos elementos (2 columnas) */
.elementor-nav .sub-menu li:hover > .sub-menu li:nth-last-child(-n+2) {
    border-bottom: none !important;
}

/* Enlaces - Estilo base con texto completo */
.elementor-nav .sub-menu li:hover > .sub-menu li a {
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    transition: padding-left 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.3 !important;
    min-height: 40px !important;
}

/* Hover con animación sutil */
.elementor-nav .sub-menu li:hover > .sub-menu li a:hover {
    padding-left: 20px !important;
    background-color: rgba(255,255,255,0.05) !important;
}

/* POCOS ELEMENTOS (4-8): 2 columnas anchas */
.elementor-nav .sub-menu li:hover > .sub-menu.has-few-items {
    min-width: 500px !important;
    max-width: 650px !important;
}

.elementor-nav .sub-menu li:hover > .sub-menu.has-few-items li a {
    padding: 12px 20px !important;
    min-height: 45px !important;
}

/* MUCHOS ELEMENTOS (15-29): 3 columnas */
.elementor-nav .sub-menu li:hover > .sub-menu.has-many-items {
    min-width: 600px !important;
    max-width: 750px !important;
}

.elementor-nav .sub-menu li:hover > .sub-menu.has-many-items li {
    width: 33.333% !important;
}

.elementor-nav .sub-menu li:hover > .sub-menu.has-many-items li a {
    padding: 8px 12px !important;
    min-height: 35px !important;
}

/* Separadores para 3 columnas */
.elementor-nav .sub-menu li:hover > .sub-menu.has-many-items li:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.1) !important;
}

.elementor-nav .sub-menu li:hover > .sub-menu.has-many-items li:nth-child(3n-2),
.elementor-nav .sub-menu li:hover > .sub-menu.has-many-items li:nth-child(3n-1) {
    border-right: 1px solid rgba(255,255,255,0.1) !important;
}

.elementor-nav .sub-menu li:hover > .sub-menu.has-many-items li:nth-child(3n) {
    border-right: none !important;
}

/* Quitar borders de últimos elementos (3 columnas) */
.elementor-nav .sub-menu li:hover > .sub-menu.has-many-items li:nth-last-child(-n+3) {
    border-bottom: none !important;
}

/* DEMASIADOS ELEMENTOS (30-49): 4 columnas */
.elementor-nav .sub-menu li:hover > .sub-menu.has-very-many-items {
    min-width: 700px !important;
    max-width: 900px !important;
}

.elementor-nav .sub-menu li:hover > .sub-menu.has-very-many-items li {
    width: 25% !important;
}

.elementor-nav .sub-menu li:hover > .sub-menu.has-very-many-items li a {
    padding: 6px 10px !important;
    font-size: 0.95em !important;
    min-height: 30px !important;
}

/* Separadores para 4 columnas */
.elementor-nav .sub-menu li:hover > .sub-menu.has-very-many-items li:nth-child(odd) {
    border-right: none !important;
}

.elementor-nav .sub-menu li:hover > .sub-menu.has-very-many-items li:nth-child(4n-3),
.elementor-nav .sub-menu li:hover > .sub-menu.has-very-many-items li:nth-child(4n-2),
.elementor-nav .sub-menu li:hover > .sub-menu.has-very-many-items li:nth-child(4n-1) {
    border-right: 1px solid rgba(255,255,255,0.1) !important;
}

.elementor-nav .sub-menu li:hover > .sub-menu.has-very-many-items li:nth-child(4n) {
    border-right: none !important;
}

/* Quitar borders de últimos elementos (4 columnas) */
.elementor-nav .sub-menu li:hover > .sub-menu.has-very-many-items li:nth-last-child(-n+4) {
    border-bottom: none !important;
}

/* EXTREMOS ELEMENTOS (50+): 5 columnas */
.elementor-nav .sub-menu li:hover > .sub-menu.has-extreme-items {
    min-width: 800px !important;
    max-width: 1000px !important;
}

.elementor-nav .sub-menu li:hover > .sub-menu.has-extreme-items li {
    width: 20% !important;
}

.elementor-nav .sub-menu li:hover > .sub-menu.has-extreme-items li a {
    padding: 5px 8px !important;
    font-size: 0.9em !important;
    min-height: 25px !important;
}

/* Separadores para 5 columnas */
.elementor-nav .sub-menu li:hover > .sub-menu.has-extreme-items li:nth-child(odd) {
    border-right: none !important;
}

.elementor-nav .sub-menu li:hover > .sub-menu.has-extreme-items li:nth-child(5n-4),
.elementor-nav .sub-menu li:hover > .sub-menu.has-extreme-items li:nth-child(5n-3),
.elementor-nav .sub-menu li:hover > .sub-menu.has-extreme-items li:nth-child(5n-2),
.elementor-nav .sub-menu li:hover > .sub-menu.has-extreme-items li:nth-child(5n-1) {
    border-right: 1px solid rgba(255,255,255,0.1) !important;
}

.elementor-nav .sub-menu li:hover > .sub-menu.has-extreme-items li:nth-child(5n) {
    border-right: none !important;
}

/* Quitar borders de últimos elementos (5 columnas) */
.elementor-nav .sub-menu li:hover > .sub-menu.has-extreme-items li:nth-last-child(-n+5) {
    border-bottom: none !important;
}

/* Asegurar que el menú no se muestre por defecto */
.elementor-nav .sub-menu .sub-menu {
    display: none !important;
}

/* Solo mostrar cuando se hace hover en el elemento padre */
.elementor-nav .sub-menu li:hover > .sub-menu {
    display: flex !important;
}

/* Responsive */
@media (max-width: 1200px) {
    .elementor-nav .sub-menu li:hover > .sub-menu.has-extreme-items,
    .elementor-nav .sub-menu li:hover > .sub-menu.has-very-many-items {
        min-width: 600px !important;
        max-width: 750px !important;
    }
    
    .elementor-nav .sub-menu li:hover > .sub-menu.has-extreme-items li,
    .elementor-nav .sub-menu li:hover > .sub-menu.has-very-many-items li {
        width: 33.333% !important;
    }
}

@media (max-width: 900px) {
    .elementor-nav .sub-menu li:hover > .sub-menu {
        min-width: 280px !important;
        max-width: 90vw !important;
    }
    
    .elementor-nav .sub-menu li:hover > .sub-menu.has-many-items,
    .elementor-nav .sub-menu li:hover > .sub-menu.has-very-many-items,
    .elementor-nav .sub-menu li:hover > .sub-menu.has-extreme-items {
        min-width: 400px !important;
        max-width: 85vw !important;
    }
    
    .elementor-nav .sub-menu li:hover > .sub-menu.has-many-items li,
    .elementor-nav .sub-menu li:hover > .sub-menu.has-very-many-items li,
    .elementor-nav .sub-menu li:hover > .sub-menu.has-extreme-items li {
        width: 50% !important;
    }
}