/* ============================================================ Mobile Mega Menu — Beps PuroOmega Widgets Off-canvas desde la izquierda + drill-down de dos niveles. El bloque .beps-mm-offcanvas se mueve a vía JS; el host conserva las clases del wrapper para que apliquen los selectores {{WRAPPER}} de Elementor. ============================================================ */ /* === RESET FOCUS — el tema aplica background/outline rosado a button:focus. Eliminamos el efecto visual en click de ratón (:focus sin :focus-visible) y conservamos un outline limpio para navegación por teclado. === */ .beps-mm-burger:focus:not(:focus-visible), .beps-mm-close:focus:not(:focus-visible), .beps-mm-back:focus:not(:focus-visible) { outline: none; background-color: transparent; box-shadow: none; } .beps-mm-burger:focus-visible, .beps-mm-close:focus-visible, .beps-mm-back:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* === BOTÓN HAMBURGUESA === */ .beps-mm-burger { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 6px; cursor: pointer; color: #141436; font-size: 26px; line-height: 1; appearance: none; -webkit-appearance: none; transition: color 0.2s ease, background-color 0.2s ease; } /* === OVERLAY === */ .beps-mm-overlay { position: fixed; inset: 0; background-color: rgba(20, 20, 54, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 9998; } /* .beps-mm-open va en el host (frontend) o en el propio off-canvas (editor) */ .beps-mm-open .beps-mm-overlay { opacity: 1; visibility: visible; } /* === PANEL (slide desde la izquierda) === */ .beps-mm-panel { position: fixed; top: 0; left: 0; height: 100dvh; width: 420px; max-width: 100vw; background-color: #ffffff; z-index: 9999; display: flex; flex-direction: column; transform: translateX(-105%); transition: transform 0.35s ease; box-shadow: 4px 0 30px rgba(20, 20, 54, 0.12); } .beps-mm-open .beps-mm-panel { transform: translateX(0); } /* Bloqueo de scroll del body con el menú abierto */ html.beps-mm-lock, html.beps-mm-lock body { overflow: hidden !important; } /* === TOPBAR (X de cierre) === */ .beps-mm-topbar { flex-shrink: 0; padding: 20px 24px 14px; } .beps-mm-close { display: inline-flex; background: none; border: none; padding: 4px; cursor: pointer; color: #141436; font-size: 20px; line-height: 1; appearance: none; -webkit-appearance: none; transition: color 0.2s ease, background-color 0.2s ease; } /* === VIEWS (contenedor del drill-down) === */ .beps-mm-views { position: relative; flex: 1; overflow: hidden; } /* — Nivel 1 — */ .beps-mm-root { position: absolute; inset: 0; overflow-y: auto; padding: 0 24px 30px; transition: transform 0.3s ease, opacity 0.3s ease; } .beps-mm-panel.beps-mm-sub-open .beps-mm-root { transform: translateX(-25%); opacity: 0; pointer-events: none; } .beps-mm-list { list-style: none; margin: 0; padding: 0; } .beps-mm-list li { border-bottom: 1px solid #ECECF1; } .beps-mm-list a, .beps-mm-list .beps-mm-go { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 18px 0; background: none; border: none; cursor: pointer; text-align: left; text-decoration: none; color: #141436; font-size: 16px; font-weight: 600; line-height: 1.3; appearance: none; -webkit-appearance: none; } .beps-mm-list .beps-mm-go svg { flex-shrink: 0; opacity: 0.7; } /* — Nivel 2 (panel único con título dinámico) — */ .beps-mm-sub-shell { position: absolute; inset: 0; overflow-y: auto; background-color: #ffffff; padding: 0 24px 30px; transform: translateX(100%); transition: transform 0.3s ease, visibility 0.3s ease; visibility: hidden; z-index: 2; } .beps-mm-panel.beps-mm-sub-open .beps-mm-sub-shell { transform: translateX(0); visibility: visible; } /* Todos los contenedores hijos viven aquí en orden de item; solo se muestra el activo (el JS pone .beps-mm-cont-active). :not() preserva el display natural del contenedor (flex/grid). */ .beps-mm-sub-conts > :not(.beps-mm-cont-active) { display: none !important; } /* Botón volver */ .beps-mm-back { display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 0; margin-bottom: 8px; background: none; border: none; border-bottom: 1px solid #ECECF1; cursor: pointer; text-align: left; color: #555570; font-size: 13px; line-height: 1; appearance: none; -webkit-appearance: none; transition: color 0.2s ease, background-color 0.2s ease; } /* Título del sub-panel */ .beps-mm-sub-title { color: #141436; font-size: 18px; font-weight: 700; line-height: 1.3; margin: 10px 0 16px; } /* ============================================================ MODO EDITOR — preview real del off-canvas. La hamburguesa, los items, "Volver", la X y el overlay son clicables (clase .elementor-clickable): se navega el menú igual que en frontend y se maqueta DENTRO del panel abierto. ============================================================ */ body.elementor-editor-active .beps-mm-burger { cursor: pointer; } /* Con el menú abierto en el editor, los elementos ocultos por "Adaptabilidad → Visibilidad" (que Elementor muestra atenuados en el preview) no deben solaparse con el panel. Se excluye la cadena propia (.beps-mm-raise) por si el widget del menú también está oculto en el breakpoint actual. */ body.beps-mm-editor-open .elementor-hidden-desktop:not(.beps-mm-raise), body.beps-mm-editor-open .elementor-hidden-laptop:not(.beps-mm-raise), body.beps-mm-editor-open .elementor-hidden-tablet:not(.beps-mm-raise), body.beps-mm-editor-open .elementor-hidden-tablet_extra:not(.beps-mm-raise), body.beps-mm-editor-open .elementor-hidden-mobile:not(.beps-mm-raise), body.beps-mm-editor-open .elementor-hidden-mobile_extra:not(.beps-mm-raise), body.beps-mm-editor-open .elementor-hidden-widescreen:not(.beps-mm-raise) { visibility: hidden !important; } /* El panel del editor va por debajo de los paneles de la UI de Elementor. .beps-mm-raise lo añade el JS a toda la cadena de ancestros mientras el menú está abierto, para que el panel no quede atrapado bajo el stacking context de otras secciones del preview. */ body.elementor-editor-active .beps-mm-raise { /* z-index solo aplica en elementos posicionados: los contenedores y secciones de Elementor suelen ser estáticos, por eso el panel quedaba por detrás aunque tuviera z-index alto. */ position: relative; z-index: 999 !important; } body.elementor-editor-active .beps-mm-overlay, body.elementor-editor-active .beps-mm-panel { z-index: 9999; } /* Si los contenedores hijos no se montaron (config del editor cacheada), avisar en vez de mostrar un panel vacío sin explicación */ body.elementor-editor-active .beps-mm-sub-conts:empty::before { content: 'No se han montado los contenedores. Recarga el editor con Ctrl+F5.'; display: block; padding: 10px 12px; background: #FDECEA; border: 1px dashed #D9534F; border-radius: 6px; color: #8a2b27; font-size: 12px; line-height: 1.4; } body.elementor-editor-active .beps-mm-panel { height: 100vh; /* el editor no soporta dvh en algunos navegadores embebidos */ } /* Zona de drop cómoda: alto mínimo del contenedor hijo activo */ body.elementor-editor-active .beps-mm-sub-conts > .e-con { min-height: 120px; } /* El panel de nivel 2 debe permitir hacer scroll y soltar widgets */ body.elementor-editor-active .beps-mm-sub-shell { overscroll-behavior: contain; }