/**
 * Vertical Menu — Frontend CSS
 */

/* ── Container ─────────────────────────────────────────────────────── */
.wew-vm-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .10);
    background-color: #ffffff;
}


/* ── Header ────────────────────────────────────────────────────────── */
.wew-vm-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    /* Usa el color primario global de Elementor por defecto */
    background-color: var(--e-global-color-primary, var(--e-global-color-accent, #3557d4));
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s ease;
}

.wew-vm-header:hover {
    opacity: 0.92;
}

.wew-vm-header-icon {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}

.wew-vm-header-title {
    flex: 1;
    font-weight: 700;
    color: #fff;
    font-size: 15px;
}

.wew-vm-header-toggle {
    display: flex;
    align-items: center;
    color: #fff;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When the list is visible, the arrow points down */
.wew-vm-header[aria-expanded="true"] .wew-vm-header-toggle {
    transform: rotate(180deg);
}

/* ── Main list ───────────────────────────────────────────────────── */
.wew-vm-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.wew-vm-list-wrap {
    /* border-box: max-height:0 also includes padding, avoiding residual space */
    box-sizing: border-box;
    /* overflow is managed by JS only during collapse animation */
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.wew-vm-list-hidden {
    max-height: 0;
    overflow: hidden;
}

/* Class to suppress padding when the list is collapsed.
   It is added/removed by JS instead of using inline styles,
   so that Elementor padding controls work in expanded state. */
.wew-vm-list-wrap.wew-vm-list-no-padding {
    padding: 0 !important;
}

/* ── Level 0 items ────────────────────────────────────────────────── */
.wew-vm-item {
    position: relative;
    display: block !important;
    float: none !important;
    width: 100% !important;
}

/* Bordes entre filas — solo hijos directos de .wew-vm-list */
.wew-vm-list>li,
.wew-vm-item {
    border-bottom: 1px solid #e0e0e0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.wew-vm-list>li:last-child,
.wew-vm-item:last-child {
    border-bottom: none !important;
}

/* ── Enlace de cada ítem — solo hijos directos ───────────────────────── */
.wew-vm-list>li>a {
    display: flex !important;
    align-items: center !important;
    gap: 6px;
    padding: 14px 16px !important;
    text-decoration: none !important;
    color: inherit;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.wew-vm-list>li>a .wew-vm-badge {
    margin-left: 8px;
}

/* ── Enlace: posición relativa para el ::before del hover ────────────── */
.wew-vm-list>li>a {
    position: relative;
    z-index: 0;
}

/* ── ::before: capa visual del hover tipo Card ───────────────────────── */
/* Solo se muestra content cuando el modo es 'card' */
.wew-vm-hover-card .wew-vm-list>li>a::before {
    content: '';
    position: absolute;
    top: 4px;
    right: 8px;
    bottom: 4px;
    left: 8px;
    /* inset por defecto */
    border-radius: 8px;
    background: linear-gradient(135deg,
            var(--e-global-color-primary, #6b5de7) 0%,
            color-mix(in srgb, var(--e-global-color-primary, #6b5de7) 70%, #9b59b6 30%) 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

/* Contenido del enlace por encima del ::before */
.wew-vm-hover-card .wew-vm-list>li>a>* {
    position: relative;
    z-index: 1;
}

/* ── CARD: activar ::before en hover/activo ──────────────────────────── */
.wew-vm-hover-card .wew-vm-list>li>a:hover::before,
.wew-vm-hover-card .wew-vm-list>li.wew-vm-mega-open>a::before,
.wew-vm-hover-card .wew-vm-list>li.current-menu-item>a::before,
.wew-vm-hover-card .wew-vm-list>li.current-menu-ancestor>a::before {
    opacity: 1;
}

/* ── CARD: color de texto en hover (default blanco — configurable en Elementor) ── */
.wew-vm-hover-card .wew-vm-list>li>a:hover,
.wew-vm-hover-card .wew-vm-list>li.wew-vm-mega-open>a,
.wew-vm-hover-card .wew-vm-list>li.current-menu-item>a,
.wew-vm-hover-card .wew-vm-list>li.current-menu-ancestor>a {
    color: #ffffff;
    /* La flecha hereda este color automáticamente via color:inherit */
}

/* ── NORMAL: fondo que rellena toda la fila ──────────────────────────── */
.wew-vm-hover-normal .wew-vm-list>li>a:hover,
.wew-vm-hover-normal .wew-vm-list>li.wew-vm-mega-open>a,
.wew-vm-hover-normal .wew-vm-list>li.current-menu-item>a,
.wew-vm-hover-normal .wew-vm-list>li.current-menu-ancestor>a {
    background-color: var(--e-global-color-primary, #6b5de7);
    /* Sin color de texto forzado: el usuario lo controla con 'Color del texto' en Elementor.
       La flecha hereda el color del <a> via color:inherit. */
}

/* ── NONE: sin efecto hover ──────────────────────────────────────────── */
/* (No se necesita CSS, simplemente no se aplica ningún estilo) */

/* Empujar la flecha al final */
.wew-vm-arrow {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 18px;
    transition: transform 0.25s ease, color 0.2s ease;
    color: inherit;
}

/* ── Badge ───────────────────────────────────────────────────────────── */
.wew-vm-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    background: #e74c3c;
    color: #fff;
    flex-shrink: 0;
}

/* ── Panel Megamenú ──────────────────────────────────────────────────── */
.wew-vm-mega-panel {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 500px;
    background: #ffffff;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transform: translateX(8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
}

.wew-vm-item.wew-vm-mega-open>.wew-vm-mega-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* Flecha activa cuando el panel está abierto: gira 180° (chevron-down → chevron-up) */
.wew-vm-item.wew-vm-mega-open>a>.wew-vm-arrow {
    transform: rotate(180deg);
}

/* ── Submenú simple (móvil) ──────────────────────────────────────────── */
.wew-vm-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f8f8f8;
}

.wew-vm-item.wew-vm-sub-open>.wew-vm-submenu {
    max-height: 1000px;
}

.wew-vm-submenu li a {
    display: block !important;
    padding: 10px 16px 10px 24px !important;
    text-decoration: none !important;
    color: inherit;
    font-size: 14px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.wew-vm-submenu li a:hover {
    background-color: rgba(0, 0, 0, .04);
}

/* Flecha en submenú móvil: gira 180° cuando abierto */
.wew-vm-item.wew-vm-sub-open>a>.wew-vm-arrow {
    transform: rotate(180deg);
}

/* ── Responsive: Mega Panel OFF en móvil/tablet ──────────────────────── */
.wew-vm-wrap.wew-vm-mobile .wew-vm-mega-panel {
    display: none !important;
}

.wew-vm-wrap.wew-vm-mobile .wew-vm-item.wew-vm-mega-open>a>.wew-vm-arrow {
    transform: none;
}

/* ── Estilos según estilo del widget ─────────────────────────────────── */
.wew-vm-style-plain .wew-vm-header {
    display: none;
}

/* ── Reset padding Elementor dentro del panel ────────────────────────── */
/* Elimina el espacio extra que añaden las secciones externas de Elementor */
.wew-vm-mega-panel>.elementor>.elementor-section-wrap>.elementor-section,
.wew-vm-mega-panel>.elementor>.elementor-section-wrap>.e-container,
.wew-vm-mega-panel>.elementor>.elementor-section-wrap>.e-con,
.wew-vm-mega-panel>.elementor>.e-container,
.wew-vm-mega-panel>.elementor>.e-con {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* El panel mismo no tiene padding (viene de la plantilla de Elementor) */
.wew-vm-mega-panel {
    padding: 0 !important;
}

/* Elementor wrapper sin margen */
.wew-vm-mega-panel>.elementor {
    margin: 0 !important;
}

/* ── Reset: evitar que los estilos del menú de nav se hereden al contenido ── */
/* Los li y a dentro del panel deben ser neutros */
.wew-vm-mega-panel li {
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    display: revert !important;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wew-vm-mega-panel a {
    padding: revert !important;
    display: revert !important;
    width: auto !important;
    font-weight: revert !important;
    box-sizing: revert !important;
}