/* ======================================================
   CORRECCIÓN VISUAL PARA EDITOR IQIT ELEMENTOR (MENU)
   Contrarresta el reset CSS de Elementor que rompe el menú
   ====================================================== */

/* 1. Forzar que el contenedor del menú sea horizontal - SOLO cuando Elementor está activo */
.elementor-editor-active #cbp-hrmenu > ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff; /* Fondo blanco para leer mejor */
    height: auto !important;
    min-height: 50px;
}

/* 2. Ajustar cada pestaña (TÉRMICOS, FLAMATE, etc) para que no ocupe el 100% */
.elementor-editor-active #cbp-hrmenu > ul > li.cbp-hrmenu-tab {
    display: inline-block !important;
    width: auto !important;
    border: none !important;
    padding: 0 15px !important;
    margin: 0 !important;
    position: relative !important; /* Necesario para los submenús */
}

/* 3. Reducir el tamaño de la letra gigante y forzar estilo limpio */
.elementor-editor-active #cbp-hrmenu .nav-link,
.elementor-editor-active #cbp-hrmenu .cbp-tab-title {
    font-size: 14px !important;
    line-height: 40px !important;
    color: #333 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

/* 4. IMPORTANTE: Ocultar los submenús desplegables (las listas grandes) 
   para que no rompan el editor. Solo se verán si pasas el mouse por encima */
.elementor-editor-active #cbp-hrmenu .cbp-hrsub {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    display: none !important; /* Ocultos por defecto para limpiar la vista */
}

/* 5. Mostrar submenú solo al pasar el mouse (hover) en el editor */
#cbp-hrmenu > ul > li.cbp-hrmenu-tab:hover .cbp-hrsub {
    display: block !important;
}

/* Eliminar iconos de flechas si molestan en la visualización */
.elementor-editor-active #cbp-hrmenu .cbp-submenu-aindicator {
    font-size: 12px !important;
    margin-left: 5px !important;
}