/* ═══════════════════════════════════════════════════════════════════ VModa Native (Capacitor iOS) — base styles Reglas activas SOLO cuando Diseñadas para NO romper la UI existente: mantienen header, modales, offcanvas y todos los flujos web. Sólo agregan tab bar nativo + safe-areas + estilos táctiles. ═══════════════════════════════════════════════════════════════════ */ 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 tab bar abajo (sólo cuando hay tab bar) */ html.is-native-app body { padding-top: env(safe-area-inset-top); overscroll-behavior-y: contain; } html.is-native-app body.has-vmoda-tabbar { /* Reservar espacio para que el tab bar no tape el contenido del footer */ padding-bottom: calc(78px + env(safe-area-inset-bottom)); } /* Inputs: prevenir zoom en iOS Safari/WKWebView (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; } /* Botones táctiles cómodos (44pt según HIG de Apple) */ 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; } /* ═══════════════════════════════════════════════════════════════════ FILE INPUT NATIVO (opt-in) Sólo se oculta cuando el bridge agrega data-vmoda-native-camera="1" Y el input está marcado para reemplazo total con .vmoda-native-replace De este modo NO se rompen file inputs que ya manejan su propio UI (ej. buscador por imagen del header). ═══════════════════════════════════════════════════════════════════ */ html.is-native-app .vmoda-native-file-original.vmoda-native-replace { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; /* IMPORTANTE: NO usar pointer-events:none — algunos forms hacen .click() programático */ clip: rect(0 0 0 0) !important; } .vmoda-native-file-actions { display: flex; gap: 10px; margin-top: 8px; } .vmoda-native-camera-btn, .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 aparezcan POR ENCIMA del tab bar. ═══════════════════════════════════════════════════════════════════ */ .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); /* Asegurar que sea clickeable y no herede transforms raros */ pointer-events: auto; transition: opacity 180ms ease, transform 220ms ease; } /* Ocultar tab bar cuando hay un modal o 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); } /* ═══════════════════════════════════════════════════════════════════ NOTIFICACIÓN IN-APP (banner desde arriba) z-index alto pero por debajo de modales activos ═══════════════════════════════════════════════════════════════════ */ .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; } /* ═══════════════════════════════════════════════════════════════════ PULL-TO-REFRESH (sólo el spinner; sin animación de page transition) ═══════════════════════════════════════════════════════════════════ */ .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); } } /* ═══════════════════════════════════════════════════════════════════ AJUSTES DEL HEADER EXISTENTE en modo nativo NO LO OCULTAMOS — sólo lo hacemos más compacto y respetuoso de safe area. El "burger" del offcanvas y el carrito siguen funcionando como en web. ═══════════════════════════════════════════════════════════════════ */ html.is-native-app .app-header .announce-bar { display: none; /* Anuncio superior es redundante con el chrome de iOS */ } html.is-native-app .app-header { position: sticky; top: 0; z-index: 1020; } /* El 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; } /* Footer del sitio: agregar espacio extra para que no quede pegado al tab bar */ html.is-native-app footer, html.is-native-app .site-footer { margin-bottom: 8px; }