/* --- Overlay full-screen / popup --- */ .my-listing-item { position: relative; } /* Popup principal - Fixed para ocupar toda la pantalla */ .item-popup { position: fixed; inset: 0; padding:0; width: 100dvw; display: flex; align-items: flex-end; justify-content: center; z-index: 99999999; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, visibility 0s 0.25s; background: transparent; } /* Backdrop oscuro */ .item-popup::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } /* Estado abierto */ .item-popup.open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.25s ease, visibility 0s 0s; } .item-popup.open::before { opacity: 1; pointer-events: auto; } /* Panel interior - animación desde abajo */ .item-popup__content { width: min(95vw, 1200px); min-height: 80vh; max-height: calc(100vh - 40px); border-radius: 12px 12px 0 0; background: #fff; transform: translateY(100%); transition: transform 0.38s cubic-bezier(0.2, 0.9, 0.25, 1); will-change: transform; overflow: auto; position: relative; z-index: 2; outline: none; box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.2); -webkit-overflow-scrolling: touch; margin-bottom: 0; transform-origin: bottom center; } /* Panel visible */ .item-popup.open .item-popup__content { transform: translateY(0); } /* Botón cerrar */ .popup-close { position: sticky; top: 10px; right: 12px; float: right; background: rgba(0, 0, 0, 0.1); border: none; font-size: 24px; line-height: 1; cursor: pointer; padding: 8px 12px; border-radius: 50%; transition: background 0.2s; z-index: 10; } .popup-close:hover { background: rgba(0, 0, 0, 0.2); } /* Responsive móvil */ @media (max-width: 768px) { .item-popup__content { width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; min-height: 90vh; } } /* Bloqueo de scroll en body */ body.modal-open { position: fixed; width: 100%; overflow: hidden; }ight: var(--popup-backdrop-height, 100vh); /* calculado por JS */ background: rgba(0,0,0,0.45); z-index: 1; /* detrás del contenido (que tendrá z-index:2) */ opacity: 0; transition: opacity .25s ease; pointer-events: none; /* para no bloquear clicks cuando no está visible */ } .item-popup.open { visibility: visible; opacity: 1; pointer-events: auto; } .item-popup.open::before { opacity: 1; pointer-events: auto; /* cuando está abierto, overlay recibe clicks (cierra por click outside desde JS) */ } /* Panel interior — pegado abajo, sube desde abajo */ .item-popup__content { width: 100vw; /* corregido */ min-height: 80vh; /* puedes ajustar este valor */ border-radius: 12px 12px 0 0; /* curvatura superior */ background: #fff; transform: translateY(100%); /* fuera de pantalla al inicio */ transition: transform .38s cubic-bezier(.2,.9,.25,1), box-shadow .18s; will-change: transform; max-height: calc(100vh - 40px); overflow: auto; /* scroll interno */ position: relative; z-index: 2; /* encima del backdrop */ outline: none; box-shadow: 0 -6px 30px rgba(0,0,0,0.2); -webkit-overflow-scrolling: touch; margin: 0; /* separacion lateral y pequeña separación inferior */ transform-origin: bottom center; /* origen para animación natural */ } /* Estado abierto: sube desde abajo */ .item-popup.open .item-popup__content { transform: translateY(0); } /* Botón cerrar */ .popup-close { position: absolute; top: 10px; right: 12px; background: transparent; border: none; font-size: 18px; line-height: 1; cursor: pointer; } /* Ajustes en móvil: panel ocupa casi toda la altura */ @media (max-width: 600px) { .item-popup__content { max-width: 100%; width: calc(100% - 12px); border-radius: 12px 12px 0 0; margin-bottom: 8px; } } /* Clase que aplicaremos al body para bloqueo de scroll (usada por JS) */ body.modal-open { position: fixed; width: 100%; overflow: hidden; } /** * Popup full-screen con animación bottom->top para Listing items * SOLUCIÓN: Mueve el popup al body para escapar del contenedor del slider * - Usa clases: .preview-toggle, .my-listing-item, .item-popup, .item-popup__content, .popup-close */ (function () { "use strict"; // helpers function findAncestor(el, selector) { return el ? el.closest(selector) : null; } // trap de tab simple en el panel (content) function trapFocus(container) { const focusableSel = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'; let nodes = Array.from(container.querySelectorAll(focusableSel)).filter( (n) => n.offsetParent !== null ); if (nodes.length === 0) { if (!container.hasAttribute("tabindex")) container.setAttribute("tabindex", "-1"); container.focus(); } else { nodes[0].focus(); } function keyHandler(e) { if (e.key !== "Tab") return; nodes = Array.from(container.querySelectorAll(focusableSel)).filter( (n) => n.offsetParent !== null ); if (nodes.length === 0) { e.preventDefault(); return; } const first = nodes[0], last = nodes[nodes.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } } container.__focusKeyHandler = keyHandler; container.addEventListener("keydown", keyHandler); return function remove() { container.removeEventListener("keydown", keyHandler); delete container.__focusKeyHandler; }; } // bloqueo/desbloqueo scroll guardando scrollY function lockBodyScroll() { const scrollY = window.scrollY || window.pageYOffset; document.documentElement.style.scrollBehavior = "auto"; document.body.style.top = `-${scrollY}px`; document.body.classList.add("modal-open"); document.body.__savedScrollY = scrollY; } function unlockBodyScroll() { const saved = document.body.__savedScrollY || 0; document.body.classList.remove("modal-open"); document.body.style.top = ""; window.scrollTo(0, saved); delete document.body.__savedScrollY; } // NUEVO: Mover popup al body para escapar del slider function movePopupToBody(popup) { // Guardar el padre original y la posición if (!popup.__originalParent) { popup.__originalParent = popup.parentElement; popup.__originalNextSibling = popup.nextSibling; } // Mover al body if (popup.parentElement !== document.body) { document.body.appendChild(popup); } } // NUEVO: Devolver popup a su posición original function restorePopupPosition(popup) { if (popup.__originalParent && popup.parentElement === document.body) { if (popup.__originalNextSibling) { popup.__originalParent.insertBefore(popup, popup.__originalNextSibling); } else { popup.__originalParent.appendChild(popup); } } } // abrir popup (panel) function openPopup(popup, trigger) { if (!popup || popup.classList.contains("open")) return; const content = popup.querySelector(".item-popup__content") || popup; // IMPORTANTE: Mover al body ANTES de abrir movePopupToBody(popup); popup.classList.add("open"); popup.setAttribute("aria-hidden", "false"); if (trigger) trigger.setAttribute("aria-expanded", "true"); // guardar foco previo popup.__previousFocused = document.activeElement; // bloquear scroll lockBodyScroll(); // focus trap sobre el panel interior popup.__removeTrap = trapFocus(content); // Esc: escucha global popup.__escHandler = function (e) { if (e.key === "Escape") closePopup(popup, trigger); }; document.addEventListener("keydown", popup.__escHandler); // click fuera: si se clickea fuera de .item-popup__content cerrar popup.__clickOutsideHandler = function (ev) { const insideContent = content.contains(ev.target); if (!insideContent) { closePopup(popup, trigger); } }; document.addEventListener("click", popup.__clickOutsideHandler, true); } // cerrar popup function closePopup(popup, trigger) { if (!popup || !popup.classList.contains("open")) return; popup.classList.remove("open"); popup.setAttribute("aria-hidden", "true"); if (trigger) trigger.setAttribute("aria-expanded", "false"); // restaurar foco try { const prev = popup.__previousFocused; if (prev && typeof prev.focus === "function") prev.focus(); } catch (e) { /* ignore */ } // quitar trap de foco y event handlers if (popup.__removeTrap) { popup.__removeTrap(); popup.__removeTrap = null; } if (popup.__escHandler) { document.removeEventListener("keydown", popup.__escHandler); popup.__escHandler = null; } if (popup.__clickOutsideHandler) { document.removeEventListener("click", popup.__clickOutsideHandler, true); popup.__clickOutsideHandler = null; } // desbloquear scroll unlockBodyScroll(); // IMPORTANTE: Esperar a que termine la animación antes de devolver al DOM original setTimeout(() => { restorePopupPosition(popup); }, 400); // 400ms coincide con la duración de la animación (0.38s + margen) } // Delegación global: clicks en preview y en close buttons document.addEventListener("click", function (e) { // 1) abrir/toggle desde preview-toggle const preview = e.target.closest(".preview-toggle"); if (preview) { const item = findAncestor(preview, ".my-listing-item") || document; const popup = item.querySelector(".item-popup"); if (!popup) return; if (popup.classList.contains("open")) closePopup(popup, preview); else openPopup(popup, preview); return; } // 2) botón de cerrar - busca en todos los popups abiertos const closeBtn = e.target.closest(".popup-close"); if (closeBtn) { e.preventDefault(); e.stopPropagation(); // Buscar el popup más cercano (puede estar en el body) const popup = closeBtn.closest(".item-popup"); if (popup && popup.classList.contains("open")) { const trigger = popup.__triggerElement || null; closePopup(popup, trigger); } return; } }); // Abrir con teclado (Enter / Space) document.addEventListener("keydown", function (e) { if (e.key === "Enter" || e.key === " ") { const el = document.activeElement; if (el && el.classList && el.classList.contains("preview-toggle")) { e.preventDefault(); const item = findAncestor(el, ".my-listing-item") || document; const popup = item.querySelector(".item-popup"); if (popup) openPopup(popup, el); } } }); })();