/* ═══════════════════════════════════════════════════════════════════ VModa Native v2 — estilos del modo app iOS Reglas activas SOLO cuando (clase que agrega el layout inline al detectar Capacitor + el bridge). Para un navegador web normal este archivo es inerte. Fuente de verdad: vmoda-ios-v2/web/vmoda-native.css → npm run sync:web ═══════════════════════════════════════════════════════════════════ */ html.is-native-app { -webkit-tap-highlight-color: transparent; color-scheme: light; /* iOS WKWebView: evitar zoom involuntario en double-tap */ touch-action: manipulation; } /* Safe areas + espacio para las barras nativas (solo cuando existen). !important obligatorio: site.css declara `body { padding: 0 !important }` y sin esto el contenido queda abajo del Dynamic Island. Con !important en ambos lados gana la especificidad (html.is-native-app body > body). */ html.is-native-app body { padding-top: env(safe-area-inset-top) !important; overscroll-behavior-y: contain; } html.is-native-app body.has-vmoda-topbar { /* dos filas: main (46px) + chips de navegación (38px) */ padding-top: calc(84px + env(safe-area-inset-top)) !important; } html.is-native-app body.has-vmoda-tabbar { padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important; } /* Inputs: prevenir el zoom automático de iOS (font-size mínimo 16px) */ html.is-native-app input:not([type="checkbox"]):not([type="radio"]), html.is-native-app textarea, html.is-native-app select { font-size: 16px; } html.is-native-app .btn, html.is-native-app button, html.is-native-app a.btn, html.is-native-app [role="button"] { touch-action: manipulation; } .vmoda-native-share-btn { border-radius: 999px; font-weight: 700; min-height: 44px; padding: 0 18px; } /* ═══════════════════════════════════════════════════════════════════ TAB BAR NATIVO z-index 1030: por debajo de modales Bootstrap (1055) y offcanvas (1045) para que los popups queden POR ENCIMA. ═══════════════════════════════════════════════════════════════════ */ .vmoda-native-tabbar { position: fixed; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 1030; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 4px; padding: 6px 8px 8px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 28px; background: rgba(20, 20, 24, .82); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 14px 38px rgba(0, 0, 0, .28); pointer-events: auto; transition: opacity 180ms ease, transform 220ms ease; } /* Ocultar el tab bar cuando hay un modal u offcanvas abierto */ body.modal-open .vmoda-native-tabbar, body:has(.offcanvas.show) .vmoda-native-tabbar, body:has(.modal.show) .vmoda-native-tabbar { opacity: 0; transform: translateY(20px); pointer-events: none; } .vmoda-native-tab { position: relative; display: flex; min-height: 50px; align-items: center; justify-content: center; flex-direction: column; gap: 3px; border-radius: 18px; color: rgba(255, 255, 255, .72); text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: .01em; -webkit-tap-highlight-color: transparent; } .vmoda-native-tab:hover, .vmoda-native-tab:active, .vmoda-native-tab:focus { color: #fff; text-decoration: none; } .vmoda-native-tab-icon { display: inline-flex; align-items: center; justify-content: center; } .vmoda-native-tab svg { width: 22px; height: 22px; fill: currentColor; } .vmoda-native-tab.is-active { color: #fff; background: rgba(255, 255, 255, .14); } .vmoda-native-tab.is-featured { transform: translateY(-10px); } .vmoda-native-tab.is-featured .vmoda-native-tab-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; color: #111; background: linear-gradient(135deg, #fff, #f1d7aa); box-shadow: 0 10px 22px rgba(0, 0, 0, .28); } .vmoda-native-tab-badge { position: absolute; min-width: 18px; height: 18px; top: 2px; right: calc(50% - 22px); display: grid; place-items: center; padding: 0 5px; border-radius: 999px; background: #ff3b30; color: #fff; font-size: 10px; line-height: 1; box-shadow: 0 0 0 2px rgba(20, 20, 24, .9); } /* ═══════════════════════════════════════════════════════════════════ BANNER DE NOTIFICACIÓN IN-APP (push en foreground) ═══════════════════════════════════════════════════════════════════ */ .vmoda-native-notification { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%; z-index: 1080; width: min(92vw, 420px); display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; border: 0; border-radius: 22px; color: #fff; text-align: left; background: rgba(18, 18, 22, .92); box-shadow: 0 14px 40px rgba(0, 0, 0, .32); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; transform: translate(-50%, -120%) scale(.96); transition: transform 380ms cubic-bezier(.2, 1.35, .25, 1), opacity 220ms ease; cursor: pointer; } .vmoda-native-notification.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); } .vmoda-native-notification strong { font-size: 14px; font-weight: 700; } .vmoda-native-notification span { color: rgba(255, 255, 255, .76); font-size: 12.5px; line-height: 1.4; } /* ═══════════════════════════════════════════════════════════════════ PILL DE ESTADO DE RED (offline / conexión recuperada) ═══════════════════════════════════════════════════════════════════ */ .vmoda-native-netpill { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; z-index: 1090; padding: 8px 18px; border-radius: 999px; background: rgba(18, 18, 22, .92); color: #fff; font-size: 12.5px; font-weight: 700; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; transform: translate(-50%, -24px); transition: transform 260ms cubic-bezier(.2, 1.2, .3, 1), opacity 200ms ease; pointer-events: none; } .vmoda-native-netpill.is-visible { opacity: 1; transform: translate(-50%, 0); } .vmoda-native-netpill.is-ok { background: rgba(22, 130, 60, .95); } /* ═══════════════════════════════════════════════════════════════════ PULL-TO-REFRESH ═══════════════════════════════════════════════════════════════════ */ .vmoda-native-pull-refresh { position: fixed; top: calc(env(safe-area-inset-top) - 52px); left: 50%; z-index: 1025; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px; background: rgba(20, 20, 24, .86); box-shadow: 0 10px 24px rgba(0, 0, 0, .24); opacity: 0; transform: translate(-50%, -52px); transition: opacity 160ms ease, transform 180ms ease; pointer-events: none; } .vmoda-native-pull-refresh span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: vmoda-spin 800ms linear infinite; } .vmoda-native-pull-refresh.is-ready { background: rgba(11, 132, 255, .94); } @keyframes vmoda-spin { to { transform: rotate(360deg); } } /* ═══════════════════════════════════════════════════════════════════ HEADER WEB OCULTO + TOP BAR NATIVA El header del sitio chocaba con el Dynamic Island y delataba "página web". En la app se oculta por completo y lo reemplaza la top bar nativa que inyecta el bridge (moduleTopBar): logo + buscar + notificaciones + bolsa, con blur estilo UIKit y safe-area real. ═══════════════════════════════════════════════════════════════════ */ html.is-native-app .app-header { display: none !important; } .vmoda-native-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1029; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); background: rgba(255, 255, 255, .88); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); border-bottom: 1px solid rgba(0, 0, 0, .06); -webkit-user-select: none; user-select: none; } .vmoda-topbar-main { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 8px 0 14px; } .vmoda-topbar-logo { display: flex; align-items: center; -webkit-tap-highlight-color: transparent; } .vmoda-topbar-logo img { height: 24px; width: auto; display: block; } .vmoda-topbar-actions { display: flex; align-items: center; gap: 2px; } .vmoda-topbar-login { display: inline-flex; align-items: center; min-height: 34px; margin: 0 4px; padding: 0 15px; border-radius: 999px; background: #111; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: transparent; } .vmoda-topbar-login:hover, .vmoda-topbar-login:active, .vmoda-topbar-login:focus { color: #fff; text-decoration: none; } .vmoda-topbar-login:active { transform: scale(.95); transition: transform 90ms ease; } /* Fila 2: navegación secundaria (Lives / Tiendas / Comunidad) */ .vmoda-topbar-nav { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 6px; overflow-x: auto; scrollbar-width: none; } .vmoda-topbar-nav::-webkit-scrollbar { display: none; } .vmoda-topbar-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 14px; border-radius: 999px; background: #f2f0ed; color: #1c1a18; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .vmoda-topbar-chip:hover, .vmoda-topbar-chip:active, .vmoda-topbar-chip:focus { color: #1c1a18; text-decoration: none; } .vmoda-topbar-chip:active { transform: scale(.95); transition: transform 90ms ease; } .vmoda-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: vmoda-chip-pulse 1.3s ease-in-out infinite; } @keyframes vmoda-chip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .vmoda-topbar-btn { position: relative; width: 42px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: #111; border-radius: 12px; -webkit-tap-highlight-color: transparent; } .vmoda-topbar-btn:hover, .vmoda-topbar-btn:active, .vmoda-topbar-btn:focus { color: #111; } .vmoda-topbar-btn svg { width: 21px; height: 21px; fill: currentColor; } .vmoda-topbar-btn:active { transform: scale(.88); transition: transform 90ms ease; } .vmoda-topbar-badge { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: #ff3b30; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; } /* Widget de chat flotante: subirlo para que no choque con el tab bar */ html.is-native-app .vm-chat-fab, html.is-native-app [data-vm-chat-fab], html.is-native-app #vmChatFab { bottom: calc(100px + env(safe-area-inset-bottom)) !important; } html.is-native-app footer, html.is-native-app .site-footer { margin-bottom: 8px; } /* ═══════════════════════════════════════════════════════════════════ SENSACIÓN DE NAVEGACIÓN Barra de progreso estilo iOS + dim del contenido saliente + entrada del
en cada carga. Clases manejadas por moduleNavFeel (js). ═══════════════════════════════════════════════════════════════════ */ .vmoda-nav-progress { position: fixed; top: env(safe-area-inset-top); left: 0; right: 0; height: 3px; z-index: 1095; background: linear-gradient(90deg, #7c3aed, #a78bfa); border-radius: 0 2px 2px 0; transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; } .vmoda-nav-progress.is-active { opacity: 1; animation: vmoda-nav-progress 8s cubic-bezier(.08, .6, .18, 1) forwards; } @keyframes vmoda-nav-progress { 0% { transform: scaleX(0); } 10% { transform: scaleX(.32); } 40% { transform: scaleX(.68); } 100% { transform: scaleX(.94); } } /* Dim del contenido al salir. Solo opacity: no crea containing block, así los position:fixed (tab bar, banners) no se rompen. */ html.vmoda-nav-out body { opacity: .78; transition: opacity 220ms ease; } /* Entrada de página: el
del layout sube con fade. CSS pura → corre en cada carga sin JS. */ html.is-native-app main.page { animation: vmoda-page-in 240ms ease-out; } @keyframes vmoda-page-in { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ═══════════════════════════════════════════════════════════════════ FEEDBACK TÁCTIL INSTANTÁNEO + SUPRESIÓN DE GESTOS "DE BROWSER" ═══════════════════════════════════════════════════════════════════ */ /* Long-press sobre links/imágenes ya no abre el menú estilo Safari. */ html.is-native-app a, html.is-native-app img { -webkit-touch-callout: none; } /* Presión con respuesta inmediata (estilo UIKit highlight). */ html.is-native-app .btn:active:not(:disabled), html.is-native-app .exp-card:active { transform: scale(.97); transition: transform 90ms ease; } /* Touch targets cómodos (HIG: mínimo ~44pt) */ html.is-native-app .btn-sm { min-height: 38px; padding-top: .45rem; padding-bottom: .45rem; } html.is-native-app .form-control, html.is-native-app .form-select { min-height: 44px; } /* Barra de búsqueda flotante: a lo ancho de la pantalla en la app */ html.is-native-app .mobile-search-bar { padding-left: 8px !important; padding-right: 8px !important; } html.is-native-app .mobile-search-inner { width: 100% !important; max-width: none !important; } .vmoda-native-tabbar { -webkit-user-select: none; user-select: none; } .vmoda-native-tab:active:not(.is-featured) { transform: scale(.94); transition: transform 90ms ease; } .vmoda-native-tab.is-featured:active { transform: translateY(-10px) scale(.94); transition: transform 90ms ease; } /* ═══════════════════════════════════════════════════════════════════ ACCESIBILIDAD: sin animaciones si el usuario redujo el movimiento ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html.is-native-app main.page { animation: none; } html.vmoda-nav-out body { transition: none; opacity: 1; } .vmoda-nav-progress.is-active { animation: none; transform: scaleX(.6); } .vmoda-native-notification, .vmoda-native-netpill { transition: opacity 120ms ease; transform: translate(-50%, 0); } }