/* Aviso "Estamos trabajando en ello..." -- version SITE-WIDE (se carga en todas las paginas, no solo tienda/categoria/ficha, ver global-feedback.php). Autocontenido (no depende de las variables --mq-* de mq-woo.css, que no esta presente en Home/paginas corporativas): mismo componente que usan TODOS los elementos interactivos del sitio (mq-global-feedback.js delega aqui, y mq-woo.js tambien via window.mqBusyToast), para que se vea siempre igual en todo el sitio. Centrado en pantalla (pedido expreso del cliente, 30/08/2026: quiere que sea imposible no darse cuenta de que la pagina esta cargando algo para el), con icono de engranaje giratorio, y colores reales de la marca en vez de un negro generico: fondo azul marino (el mismo de la cabecera fija del sitio, --mp-azul definido en el CSS Adicional de Astra) y el icono en el naranja de acento (--ast-global-color-0, el color de marca configurado en el Personalizador). Ambas variables son globales (estan en el de CUALQUIER pagina), pero se incluye ademas un valor de respaldo fijo por si algun dia se quitan del CSS Adicional. */ #mq-busy-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.94); display: inline-flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 1em 1.5em; background: var(--mp-azul, #1F2F45); color: #ffffff; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.35); font-family: 'Montserrat', sans-serif; font-size: .98rem; font-weight: 600; line-height: 1.3; /* El valor mas alto posible (limite real de CSS/32-bit): asi este aviso queda SIEMPRE por encima de absolutamente todo lo demas del sitio -- cabecera fija, popups de reserva, banner de cookies, chat de terceros, etc. -- sea cual sea su propio z-index, presente o futuro. */ z-index: 2147483647; opacity: 0; /* No bloquea clics: es un aviso, no un overlay que impida seguir interactuando (por ejemplo, cancelar la navegacion). */ pointer-events: none; transition: opacity .18s ease, transform .18s ease; } #mq-busy-toast.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); } #mq-busy-toast .mq-busy-toast__icon { width: 28px; height: 28px; flex: 0 0 auto; color: var(--ast-global-color-0, #FC5F28); animation: mq-gear-spin 1.4s linear infinite; } #mq-busy-toast .mq-busy-toast__icon svg { width: 100%; height: 100%; display: block; } @keyframes mq-gear-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #mq-busy-toast { transition: opacity .18s ease; } #mq-busy-toast .mq-busy-toast__icon { animation-duration: 2.4s; } } /* ---------- Responsive: movil / tablet / escritorio ---------- Centrado (top/left 50% + transform) funciona igual en cualquier tamano de pantalla sin cambios; solo se ajustan tipografia/relleno/icono para que la caja no se vea desproporcionada en pantallas pequenas, y se respeta el notch/isla dinamica en iOS con env(safe-area-inset-*). */ @media (max-width: 600px) { #mq-busy-toast { font-size: .9rem; padding: .85em 1.15em; gap: 10px; border-radius: 12px; max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); } #mq-busy-toast .mq-busy-toast__icon { width: 22px; height: 22px; } } @media (max-width: 360px) { #mq-busy-toast { font-size: .82rem; padding: .75em .95em; gap: 8px; } #mq-busy-toast .mq-busy-toast__icon { width: 19px; height: 19px; } } /* Pantallas muy bajas (movil en horizontal): evita que la caja, ya centrada, quede pegada al borde superior/inferior en un viewport corto. */ @media (max-height: 420px) { #mq-busy-toast { padding: .6em 1em; font-size: .82rem; } #mq-busy-toast .mq-busy-toast__icon { width: 18px; height: 18px; } }