/* APPSUR MEGA MENU v3.0.0 * * CORRECCIONES CRITICAS: * * 1) Z-INDEX ABSOLUTO MAXIMO + ISOLATION * El portal usa `z-index: 2147483647` (max integer CSS) Y `isolation: isolate`. * Esto garantiza que aparezca POR ENCIMA de CUALQUIER cosa en la pagina, * incluso plugins de marquee/ticker/anuncios con z-index altos o transform. * * 2) MODO LATERAL ELIMINADO * El panel es siempre pantalla completa. La direccion de aparicion (slide, * fade, scale) se configura desde el control "panel_animation". * * 3) :where() PARA BAJA ESPECIFICIDAD * Los selectores base usan :where() para que los controles de Elementor * siempre ganen, sin necesidad de !important. * * 4) BLOQUEO DE SCROLL ROBUSTO * Cuando .appsur-mm-locked esta en , bloqueamos el scroll en * y , con anti-iOS (-webkit-overflow-scrolling). */ /* ────────────────────────────────────────────────────── * WRAPPER y TRIGGER * ────────────────────────────────────────────────────── */ :where(.appsur-mm-wrapper) { display: inline-block; position: relative; } :where(.appsur-mm-trigger) { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; line-height: 1; color: inherit; -webkit-tap-highlight-color: transparent; outline: none; transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } :where(.appsur-mm-trigger:focus) { outline: none; } :where(.appsur-mm-trigger:focus-visible) { outline: 2px solid currentColor; outline-offset: 3px; } :where(.appsur-mm-trigger svg) { fill: currentColor; } :where(.appsur-mm-trigger svg *) { fill: currentColor; } /* ────────────────────────────────────────────────────── * PORTAL — donde el JS mueve el panel y el overlay * * Z-INDEX MAXIMO + ISOLATION = garantia de que el menu * siempre quede por encima de TODO en la pagina. * ────────────────────────────────────────────────────── */ .appsur-mm-portal { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2147483647; /* maximo entero CSS */ isolation: isolate; /* nuevo stacking context propio */ pointer-events: none; /* el portal no captura clicks; sus hijos si */ visibility: hidden; } .appsur-mm-portal.is-open { pointer-events: auto; visibility: visible; } /* ────────────────────────────────────────────────────── * OVERLAY BACKDROP — opcional, transparente por defecto * ────────────────────────────────────────────────────── */ .appsur-mm-portal .appsur-mm-overlay { position: absolute; inset: 0; background: transparent; /* el usuario lo configura via control */ opacity: 0; transition: opacity var(--appsur-mm-duration, 400ms) var(--appsur-mm-easing, ease); z-index: 1; } .appsur-mm-portal.is-open .appsur-mm-overlay { opacity: 1; } /* ────────────────────────────────────────────────────── * PANEL — siempre pantalla completa * * La direccion de aparicion la determina la clase * .appsur-mm-panel--anim-* aplicada en el render. * ────────────────────────────────────────────────────── */ .appsur-mm-portal .appsur-mm-panel { position: absolute; inset: 0; /* fullscreen */ width: 100%; height: 100%; background-color: #0028B3; /* fallback por si Group_Control_Background no aplico */ color: #ffffff; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; z-index: 2; transition: transform var(--appsur-mm-duration, 400ms) var(--appsur-mm-easing, ease), opacity var(--appsur-mm-duration, 400ms) var(--appsur-mm-easing, ease); will-change: transform, opacity; } /* Capa overlay sobre el fondo (opcional, ::before) */ .appsur-mm-portal .appsur-mm-panel::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: transparent; /* se rellena via Group_Control_Background */ } .appsur-mm-portal .appsur-mm-panel > * { position: relative; z-index: 1; /* contenido por encima del ::before */ } /* ────────────────────────────────────────────────────── * ANIMACIONES — estados INICIAL (cerrado) y FINAL (abierto) * ────────────────────────────────────────────────────── */ /* Estado base CERRADO segun animacion */ .appsur-mm-portal .appsur-mm-panel--anim-slide-right { transform: translateX(100%); opacity: 1; } .appsur-mm-portal .appsur-mm-panel--anim-slide-left { transform: translateX(-100%); opacity: 1; } .appsur-mm-portal .appsur-mm-panel--anim-slide-top { transform: translateY(-100%); opacity: 1; } .appsur-mm-portal .appsur-mm-panel--anim-slide-bottom{ transform: translateY(100%); opacity: 1; } .appsur-mm-portal .appsur-mm-panel--anim-fade { transform: none; opacity: 0; } .appsur-mm-portal .appsur-mm-panel--anim-scale { transform: scale(0.85); opacity: 0; } /* Estado ABIERTO — todas las animaciones convergen aqui */ .appsur-mm-portal.is-open .appsur-mm-panel { transform: none; opacity: 1; } .appsur-mm-portal.is-open .appsur-mm-panel--anim-scale { transform: scale(1); } /* ────────────────────────────────────────────────────── * CLOSE BUTTON — SIEMPRE arriba a la derecha (v3.1.1) * * Decision de diseno: el boton cerrar va FIJO arriba-derecha. * Lo forzamos con !important y alta especificidad para que NO * dependa de que Elementor inyecte selectores con {{ID}} (que * fallaban en widgets guardados con versiones anteriores y * dejaban el boton cayendo al centro sobre el contenido). * * La separacion exacta desde la esquina la ajusta el control * `close_offset` (en em por defecto) sobreescribiendo top/right. * ────────────────────────────────────────────────────── */ .appsur-mm-portal .appsur-mm-close, .appsur-mm-wrapper .appsur-mm-close, .appsur-mm-panel .appsur-mm-close { position: absolute !important; top: 1.2em; right: 1.2em; left: auto !important; bottom: auto !important; transform: none !important; margin: 0; } /* ────────────────────────────────────────────────────── * CLOSE BUTTON — base styles * ────────────────────────────────────────────────────── */ :where(.appsur-mm-close) { background: transparent; border: none; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: inherit; -webkit-tap-highlight-color: transparent; outline: none; transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } /* El close NO usa :where porque queremos especificidad real para z-index y pointer-events */ .appsur-mm-close { z-index: 10 !important; pointer-events: auto !important; } :where(.appsur-mm-close:focus) { outline: none; } :where(.appsur-mm-close:focus-visible) { outline: 2px solid currentColor; outline-offset: 3px; } /* FIX: el SVG del cierre hereda el color */ .appsur-mm-close svg, .appsur-mm-close svg * { fill: currentColor; } /* ────────────────────────────────────────────────────── * NAV y LISTA * * v3.1.2 — items con texto largo ya NO desbordan. * Permitimos wrap natural del texto + overflow-wrap por si * hay palabras muy largas sin espacios. * ────────────────────────────────────────────────────── */ :where(.appsur-mm-nav) { width: 100%; max-width: 100%; } :where(.appsur-mm-list) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 100%; /* Margen de seguridad para que items multi-linea nunca toquen el borde */ padding-inline: 8%; box-sizing: border-box; /* * Ya NO usamos `align-items` para alinear items en el eje cruzado. * En su lugar cada item ocupa ancho completo y se autoalinea con * `text-align`. Ventaja: el text-align tambien alinea el texto cuando * se rompe en varias lineas (el align-items no hacia eso). */ } :where(.appsur-mm-item) { margin: 0; padding: 0; width: 100%; /* ocupa todo el ancho para que text-align funcione */ max-width: 100%; box-sizing: border-box; text-align: center; /* default; el control items_align lo sobreescribe */ } :where(.appsur-mm-link) { display: inline-flex; align-items: center; gap: 8px; /* * FIX v3.1.2 — clave para wrap de texto: * `flex-wrap: wrap` permite que el flex container (.appsur-mm-link) se * convierta en multi-linea si el contenido no cabe. Sin esto, el flex * container intenta mantener todo en una sola fila. */ flex-wrap: wrap; justify-content: inherit; /* respeta text-align del padre */ text-decoration: none; color: inherit; transition: opacity 0.2s ease; -webkit-tap-highlight-color: transparent; max-width: 100%; min-width: 0; /* permite shrink real del flex container */ box-sizing: border-box; } :where(.appsur-mm-link:hover) { opacity: 0.85; } :where(.appsur-mm-item-text) { display: inline-block; line-height: 1.2; letter-spacing: 0.05em; transition: font-size 0.2s ease, color 0.2s ease; /* * FIX v3.1.2 — wrap del texto cuando es largo: * * - `white-space: normal` permite que el texto se rompa por espacios. * - `overflow-wrap: anywhere` rompe tambien palabras largas sin espacios * (urls, palabras compuestas). * - `min-width: 0` es CRITICO: sin esto, los flex items heredan * `min-width: auto` (= ancho del contenido sin wrap) y el wrap nunca * se aplica aunque overflow-wrap diga lo contrario. Este es el bug * clasico de flexbox que rompia el wrap en v3.1.1. * - `text-align: inherit` hereda del item para que el texto multilinea * se alinee con la alineacion elegida en items_align. */ white-space: normal; overflow-wrap: anywhere; word-break: normal; min-width: 0; max-width: 100%; flex: 0 1 auto; /* puede shrinkear */ text-align: inherit; } :where(.appsur-mm-item, .appsur-mm-item a, .appsur-mm-item span, .appsur-mm-link) { -webkit-tap-highlight-color: transparent; } /* ────────────────────────────────────────────────────── * DEFENSA FINAL contra texto que desborda * * Aunque el flex-wrap deberia bastar, blindamos con selectores * de especificidad alta (sin :where) para que ningun otro CSS * pueda re-introducir nowrap o overflow visible. * ────────────────────────────────────────────────────── */ .appsur-mm-portal .appsur-mm-item-text, .appsur-mm-wrapper .appsur-mm-item-text, .appsur-mm-list .appsur-mm-item-text { white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal; max-width: 100%; } .appsur-mm-portal .appsur-mm-item, .appsur-mm-portal .appsur-mm-link, .appsur-mm-portal .appsur-mm-list, .appsur-mm-portal .appsur-mm-nav { overflow-wrap: anywhere; } /* ────────────────────────────────────────────────────── * BLOQUEO DE SCROLL — version robusta * * Cuando se abre el menu, el JS aplica .appsur-mm-locked a . * Bloqueamos tanto como con overflow:hidden y, para * iOS, ademas position:fixed (lo hace el JS preservando scrollTop). * ────────────────────────────────────────────────────── */ html.appsur-mm-locked, html.appsur-mm-locked body { overflow: hidden !important; touch-action: none; } /* ────────────────────────────────────────────────────── * ACCESIBILIDAD: prefers-reduced-motion * ────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .appsur-mm-portal .appsur-mm-panel, .appsur-mm-portal .appsur-mm-overlay { transition-duration: 0.001ms !important; } } /* ────────────────────────────────────────────────────── * EDITOR DE ELEMENTOR * Mientras el panel esta dentro del wrapper original * (porque el JS aun no lo ha movido al body), lo ocultamos * por defecto. El JS encarga del traslado al portal. * ────────────────────────────────────────────────────── */ .appsur-mm-wrapper > .appsur-mm-panel, .appsur-mm-wrapper > .appsur-mm-overlay { display: none; } .appsur-mm-wrapper.has-portal > .appsur-mm-panel, .appsur-mm-wrapper.has-portal > .appsur-mm-overlay { /* ya estan en el body, ya no nos preocupamos */ }