/* APPSUR MEGA MENU v2.1.0
*
* Cambios criticos vs v2.0.x:
* - Todos los selectores base usan `:where()` -> especificidad 0,0,0.
* Asi cualquier control de Elementor (selectores tipo `.elementor-element-X .clase`)
* gana siempre, sin necesidad de !important.
*
* - Fix del icono SVG: el SVG de Elementor renderiza SIN
* `fill="currentColor"`, asi que `color: ...` no afecta al path. Aqui forzamos
* `fill: currentColor` en TODOS los svg dentro del trigger y del close, de modo
* que cuando un control aplique `color: ...` al boton, el SVG lo herede.
*
* - Estilos del PORTAL: cuando el JS mueve el panel + overlay al , viven
* dentro de ``.
*
* - El boton cerrar tiene z-index alto y pointer-events: auto para garantizar
* que el click llega siempre.
*/
/* ────────────────────────────────────────────────
* 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;
}
:where(.appsur-mm-trigger:hover) { opacity: 0.85; }
:where(.appsur-mm-trigger:focus) { outline: none; }
:where(.appsur-mm-trigger:focus-visible) { outline: 2px solid currentColor; outline-offset: 3px; }
/*
* FIX: SVG del trigger hereda el color del boton.
* Es lo que el plugin v2.0 ya hacia bien para el trigger via `selectors`.
*/
:where(.appsur-mm-trigger svg) { fill: currentColor; }
:where(.appsur-mm-trigger svg *) { fill: currentColor; }
/* ────────────────────────────────────────────────
* OVERLAY (fondo oscuro)
* ──────────────────────────────────────────────── */
:where(.appsur-mm-overlay) {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 99998;
opacity: 0;
transition: opacity 0.3s ease;
}
.appsur-mm-overlay.is-visible { display: block; }
.appsur-mm-overlay.is-open { opacity: 1; }
/* ────────────────────────────────────────────────
* PANEL (deslizante)
* ──────────────────────────────────────────────── */
:where(.appsur-mm-panel) {
position: fixed;
top: 0;
z-index: 99999;
height: 100vh; /* fallback */
height: 100dvh; /* cubre barra del navegador en mobile */
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: center;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
color: #ffffff; /* color por defecto del contenido del panel */
}
/* Posicion vertical del contenido */
.appsur-mm-panel.valign-top { justify-content: flex-start; }
.appsur-mm-panel.valign-center { justify-content: center; }
.appsur-mm-panel.valign-bottom { justify-content: flex-end; }
/* Direccion de apertura */
.appsur-mm-panel--right { right: 0; transform: translateX(110%); }
.appsur-mm-panel--right.is-open { transform: translateX(0); }
.appsur-mm-panel--left { left: 0; transform: translateX(-110%); }
.appsur-mm-panel--left.is-open { transform: translateX(0); }
.appsur-mm-panel--top { top: 0; left: 0; right: 0; width: 100% !important; transform: translateY(-110%); }
.appsur-mm-panel--top.is-open { transform: translateY(0); }
/* ────────────────────────────────────────────────
* CLOSE BUTTON — bug critico v2.0 corregido
* ──────────────────────────────────────────────── */
:where(.appsur-mm-close) {
position: absolute;
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;
}
/*
* NOTA: el close NO usa :where() para z-index y pointer-events.
* Queremos especificidad real (0,1,0) para garantizar que el boton
* siempre sea clickable y este por encima del nav.
*/
.appsur-mm-close {
z-index: 10 !important; /* por encima del nav */
pointer-events: auto !important; /* siempre clickable */
}
:where(.appsur-mm-close:hover) { opacity: 0.75; }
:where(.appsur-mm-close:focus) { outline: none; }
:where(.appsur-mm-close:focus-visible) { outline: 2px solid currentColor; outline-offset: 3px; }
/*
* FIX CRITICO v2.1.0: el SVG del icono de cierre hereda el color del boton.
* Sin esto, el path renderiza siempre en negro (default del navegador).
* Lo aplicamos con especificidad ligeramente mayor que :where para garantizar
* que sobrescriba al :where(.appsur-mm-trigger svg) si la X tambien lleva esa
* clase por algun motivo.
*/
.appsur-mm-close svg,
.appsur-mm-close svg * { fill: currentColor; }
/* ────────────────────────────────────────────────
* NAV y LIST
* ──────────────────────────────────────────────── */
:where(.appsur-mm-nav) { width: 100%; }
:where(.appsur-mm-list) {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
/* Alineacion horizontal de items via clase en nav */
.appsur-mm-nav.align-left .appsur-mm-list { align-items: flex-start; }
.appsur-mm-nav.align-center .appsur-mm-list { align-items: center; }
.appsur-mm-nav.align-right .appsur-mm-list { align-items: flex-end; }
:where(.appsur-mm-item) { margin: 0; padding: 0; }
:where(.appsur-mm-link) {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: inherit;
transition: opacity 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
: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;
white-space: nowrap;
}
/* Sin outline molesto en mobile */
:where(.appsur-mm-item, .appsur-mm-item a, .appsur-mm-item span, .appsur-mm-link) {
-webkit-tap-highlight-color: transparent;
}
/* ────────────────────────────────────────────────
* PORTAL — cuando el JS mueve el panel al
*
* Nota: NO usamos :where() en el portal porque queremos especificidad real
* para garantizar que el panel salga POR ENCIMA de todo en la pagina.
* ──────────────────────────────────────────────── */
.appsur-mm-portal {
position: fixed;
inset: 0;
z-index: 99999;
pointer-events: none; /* el contenedor no captura; sus hijos si */
}
.appsur-mm-portal.is-open { pointer-events: auto; }
.appsur-mm-portal .appsur-mm-overlay { pointer-events: auto; }
.appsur-mm-portal .appsur-mm-panel { pointer-events: auto; }
/* Reset block-level del wrapper cuando esta vacio tras mover su panel al portal */
.appsur-mm-wrapper.has-portal { /* nada que ajustar; el panel ya no esta aqui */ }
/* ────────────────────────────────────────────────
* Bloqueo de scroll del body
* ──────────────────────────────────────────────── */
html.appsur-mm-locked,
html.appsur-mm-locked body {
overflow: hidden;
touch-action: none;
}
/* ────────────────────────────────────────────────
* Accesibilidad: prefers-reduced-motion
* ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
:where(.appsur-mm-panel),
:where(.appsur-mm-overlay) {
transition-duration: 0.001ms !important;
}
}