/* ═══════════════════════════════════════════════════════════ FITFINDER · mobile-app.css Experiencia nativa Android — Solo afecta a móvil (≤768px) Desktop queda exactamente igual que antes. CÓMO AÑADIR AL PROYECTO: En el de cada PHP, añade DESPUÉS de style.css: ═══════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════ 1. PWA GLOBAL — Comportamiento nativo (todos los tamaños) ══════════════════════════════════════════════════════════ */ /* Eliminar el highlight azul/gris al tocar en Android */ * { -webkit-tap-highlight-color: transparent; } /* Deshabilitar selección de texto fuera de inputs */ body { -webkit-user-select: none; user-select: none; } input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; } /* Scroll nativo sin rebote */ html { overscroll-behavior: none; } /* ══════════════════════════════════════════════════════════ 2. SÓLO MÓVIL — Todo lo siguiente aplica únicamente en ≤768px ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── Safe areas (notch, punch-hole, barra home) ─────── */ body { padding-top: env(safe-area-inset-top); padding-bottom: calc(64px + env(safe-area-inset-bottom)); /* Espacio para bottom nav */ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* Header ajuste con safe-area */ header { padding-top: calc(var(--space-10, 40px) + env(safe-area-inset-top)); } /* Footer: reduce padding inferior porque ya hay bottom nav */ footer { padding-bottom: calc(var(--space-6, 24px) + 64px + env(safe-area-inset-bottom)) !important; margin-bottom: 0 !important; } /* Ocultar el float-contact en móvil (reemplazado por el menú) */ .float-contact { display: none !important; } /* Scroll momentum nativo */ .container, .guia-container, main { -webkit-overflow-scrolling: touch; } /* Eliminar subrayados en enlaces de nav */ a { text-decoration: none; } } /* ══════════════════════════════════════════════════════════ 3. BOTTOM NAVIGATION BAR — Barra inferior nativa Android ══════════════════════════════════════════════════════════ */ .app-bottom-nav { display: none; /* Oculto por defecto (desktop) */ } @media (max-width: 768px) { .app-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #FFFFFF; border-top: 1px solid #E4E4E7; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08); align-items: stretch; justify-content: space-around; } /* Modo oscuro */ body.dark .app-bottom-nav { background: #111111; border-top-color: #222222; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4); } /* ── Cada ítem del nav ─────────────────────────────── */ .app-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 2px; padding: 8px 4px; color: #71717A; text-decoration: none; border: none; background: transparent; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; position: relative; overflow: hidden; transition: color 0.15s ease; -webkit-tap-highlight-color: transparent; min-width: 0; } body.dark .app-nav-item { color: #71717A; } .app-nav-item.active { color: #E85D3A; } body.dark .app-nav-item.active { color: #FF7F4D; } .app-nav-item:active { transform: scale(0.92); transition: transform 0.1s ease; } /* ── Icono SVG ─────────────────────────────────────── */ .app-nav-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; position: relative; } .app-nav-icon svg { width: 22px; height: 22px; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .app-nav-item.active .app-nav-icon svg { transform: scale(1.1); } /* Indicador activo — pill debajo del icono */ .app-nav-item.active .app-nav-icon::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; background: #E85D3A; border-radius: 999px; } body.dark .app-nav-item.active .app-nav-icon::after { background: #FF7F4D; } /* ── Label ─────────────────────────────────────────── */ .app-nav-label { font-size: 10px; font-weight: 500; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; letter-spacing: 0; margin-top: 4px; } .app-nav-item.active .app-nav-label { font-weight: 700; letter-spacing: -0.01em; } /* ── Botón central Nutrición (FAB elevado) ─────────── */ .app-nav-center { flex: 1.2; position: relative; } .app-nav-fab { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: linear-gradient(135deg, #E85D3A 0%, #F59E0B 100%); border-radius: 16px; box-shadow: 0 4px 14px rgba(232, 93, 58, 0.45); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; margin-top: -8px; /* Elevado sobre la barra */ } .app-nav-fab svg { width: 22px; height: 22px; stroke: #FFFFFF; } .app-nav-center:active .app-nav-fab { transform: scale(0.9) !important; box-shadow: 0 2px 8px rgba(232, 93, 58, 0.3); } .app-nav-center.active .app-nav-fab { background: linear-gradient(135deg, #B2442E 0%, #E85D3A 100%); } /* El indicador de active no aplica al centro */ .app-nav-center.active .app-nav-icon::after { display: none; } /* ── Ripple Effect (Material) ───────────────────────── */ .app-ripple { position: absolute; border-radius: 50%; background: rgba(232, 93, 58, 0.15); animation: app-ripple-anim 0.5s linear; pointer-events: none; z-index: 0; } @keyframes app-ripple-anim { from { transform: scale(0); opacity: 1; } to { transform: scale(1); opacity: 0; } } } /* ══════════════════════════════════════════════════════════ 4. BOTTOM SHEET — Menú "Más" estilo Android ══════════════════════════════════════════════════════════ */ .app-sheet-overlay, .app-sheet { display: none; } @media (max-width: 768px) { /* Overlay oscuro detrás del sheet */ .app-sheet-overlay { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0); z-index: 9998; pointer-events: none; transition: background 0.3s ease; } .app-sheet-overlay.open { background: rgba(0, 0, 0, 0.5); pointer-events: all; } /* El Sheet */ .app-sheet { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #FFFFFF; border-radius: 24px 24px 0 0; padding: 0 0 calc(80px + env(safe-area-inset-bottom)) 0; box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15); transform: translateY(110%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); will-change: transform; } body.dark .app-sheet { background: #1a1a1a; } .app-sheet.open { transform: translateY(0); } /* Handle drag visual */ .app-sheet-handle { width: 36px; height: 4px; background: #D4D4D8; border-radius: 999px; margin: 12px auto 0; } body.dark .app-sheet-handle { background: #3F3F46; } /* Título del sheet */ .app-sheet-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 600; color: #A1A1AA; text-transform: uppercase; letter-spacing: 0.08em; padding: 16px 20px 8px; } body.dark .app-sheet-title { color: #52525B; } /* Grid de opciones */ .app-sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px 12px; } /* Cada ítem */ .app-sheet-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; border-radius: 16px; text-decoration: none; color: #18181B; border: none; background: transparent; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; position: relative; overflow: hidden; transition: background 0.15s ease; -webkit-tap-highlight-color: transparent; } .app-sheet-item:active { background: rgba(232, 93, 58, 0.08); } body.dark .app-sheet-item { color: #F4F4F5; } body.dark .app-sheet-item:active { background: rgba(232, 93, 58, 0.12); } .app-sheet-icon { font-size: 28px; line-height: 1; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: #F5F4F1; border-radius: 16px; } body.dark .app-sheet-icon { background: #2A2A2A; } .app-sheet-label { font-size: 11px; font-weight: 500; color: #3F3F46; text-align: center; line-height: 1.2; } body.dark .app-sheet-label { color: #A1A1AA; } } /* ══════════════════════════════════════════════════════════ 5. BANNER INSTALAR PWA — Estilo Android nativo ══════════════════════════════════════════════════════════ */ .app-install-banner { display: none; /* JS lo muestra cuando aplica */ } @media (max-width: 768px) { .app-install-banner { position: fixed; bottom: calc(72px + env(safe-area-inset-bottom)); left: 12px; right: 12px; z-index: 9990; background: #FFFFFF; border-radius: 20px; padding: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1); flex-direction: column; gap: 12px; animation: app-banner-slide-up 0.4s cubic-bezier(0.32, 0.72, 0, 1); } body.dark .app-install-banner { background: #1F1F1F; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); } @keyframes app-banner-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .app-install-info { display: flex; align-items: center; gap: 12px; } .app-install-logo { font-size: 36px; width: 52px; height: 52px; background: linear-gradient(135deg, #E85D3A, #F59E0B); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .app-install-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 700; color: #18181B; line-height: 1.2; } body.dark .app-install-title { color: #F4F4F5; } .app-install-sub { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; color: #71717A; margin-top: 2px; } .app-install-actions { display: flex; gap: 8px; justify-content: flex-end; } .app-install-dismiss { padding: 10px 16px; border: none; background: transparent; color: #71717A; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; } .app-install-dismiss:active { background: #F4F4F5; } .app-install-cta { padding: 10px 20px; border: none; background: linear-gradient(135deg, #E85D3A 0%, #F59E0B 100%); color: #FFFFFF; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; border-radius: 12px; box-shadow: 0 3px 10px rgba(232, 93, 58, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; -webkit-tap-highlight-color: transparent; } .app-install-cta:active { transform: scale(0.95); box-shadow: 0 1px 5px rgba(232, 93, 58, 0.25); } } /* ══════════════════════════════════════════════════════════ 6. TRANSICIONES DE PÁGINA — Estilo Android ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Fade suave al cargar página */ body { animation: app-page-enter 0.2s ease-out; } @keyframes app-page-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Botones con feedback táctil más expresivo */ .btn-primary, .cta-card, .guia-btn-afiliado, .btn-cta-white, .btn-cta-outline { transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease !important; } .btn-primary:active, .cta-card:active, .guia-btn-afiliado:active, .btn-cta-white:active, .btn-cta-outline:active { transform: scale(0.96) !important; } /* Cards con press feedback */ .guia-card:active, .step-card:active, .pro-mini-card:active { transform: scale(0.98); transition: transform 0.1s ease; } } /* ══════════════════════════════════════════════════════════ 7. SCROLL NATIVO — Mejoras UX móvil ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Scrollbar invisible en móvil */ ::-webkit-scrollbar { display: none; } /* Inputs y selects — tamaño mínimo para accesibilidad táctil */ input, select, textarea, button { min-height: 44px; } /* Prevenir zoom al enfocar inputs en iOS/Android */ input[type="text"], input[type="email"], input[type="number"], select, textarea { font-size: 16px !important; /* 16px evita el zoom automático */ } } /* ══════════════════════════════════════════════════════════ 8. DESKTOP — Asegurar que nada se muestra en escritorio ══════════════════════════════════════════════════════════ */ @media (min-width: 769px) { /* En desktop, todos los elementos de la app móvil quedan ocultos */ .app-bottom-nav, .app-sheet, .app-sheet-overlay, .app-install-banner { display: none !important; } /* El float-contact vuelve a mostrarse en desktop si existía */ /* (no lo tocamos, ya viene del style.css original) */ } /* ══════════════════════════════════════════════════════════ 9. PWA STANDALONE — Ajustes cuando está instalada como app ══════════════════════════════════════════════════════════ */ @media (display-mode: standalone) { /* Status bar area en Android */ body { padding-top: env(safe-area-inset-top); } /* Ocultar cosas que solo tienen sentido en browser */ .share-buttons, .float-contact { /* Mantenemos visibles, son útiles en app también */ } /* Header más compacto en standalone */ @media (max-width: 768px) { header { padding-top: calc(16px + env(safe-area-inset-top)); padding-bottom: 20px; } } } /* ══════════════════════════════════════════════════════════ DOBLE FAB — Rutinas (naranja) y Nutrición (amarillo) ────────────────────────────────────────────────────── Para añadir un tercer FAB: crea una nueva clase app-nav-fab--COLOR con el color que quieras y aplícala. ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* El ítem que contiene un FAB ocupa un poco más de espacio */ .app-nav-fab-item { flex: 1.15; } /* Cuadrado con color de fondo — el FAB en sí */ .app-nav-fab { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; margin-top: -6px; /* Lo eleva ligeramente sobre la barra */ transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; } /* El icono dentro del FAB siempre blanco */ .app-nav-fab svg { width: 20px; height: 20px; stroke: #FFFFFF; } /* Color naranja — usado en Rutinas */ .app-nav-fab--orange { background: #E85D3A; box-shadow: 0 4px 12px rgba(232, 93, 58, 0.4); } /* Color amarillo — usado en Nutrición */ .app-nav-fab--amber { background: #F59E0B; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); } /* Al pulsar: se encoge un poco (feedback táctil) */ .app-nav-fab-item:active .app-nav-fab { transform: scale(0.88); } /* Cuando está en la página activa: color más oscuro */ .app-nav-fab-item.active .app-nav-fab--orange { background: #B2442E; box-shadow: 0 2px 8px rgba(232, 93, 58, 0.3); } .app-nav-fab-item.active .app-nav-fab--amber { background: #D97706; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); } /* Los FABs no tienen la línea indicadora de activo */ .app-nav-fab-item.active .app-nav-icon::after { display: none; } /* El label de los FABs tiene un poco más de peso */ .app-nav-fab-item .app-nav-label { font-weight: 600; } .app-nav-fab-item.active .app-nav-label { font-weight: 800; } }