/* ═══════════════════════════════════════════════════════════════ APP MODE STYLES - Pet Shop Chiquitines Se activa solo cuando tiene la clase .app-mode ═══════════════════════════════════════════════════════════════ */ /* ── Safe area variables ────────────────────────────────────────── */ html { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --bn-height: 4rem; --app-orange: #FF6B35; --app-black: #000; --app-dark: #111; } /* ── Body: flex column full screen ─────────────────────────────── */ body.app-mode { display: flex; flex-direction: column; height: 100dvh; height: 100vh; overflow: hidden; -webkit-font-smoothing: antialiased; } /* ══════════════════════════════════════════════════════════════════ HEADER — estilo app nativa Solo muestra: hamburguesa (oculta) + logo centrado + íconos de acción ══════════════════════════════════════════════════════════════════ */ body.app-mode .header { flex-shrink: 0; position: relative; padding-top: var(--safe-top); z-index: 100; background: #000; } /* Ocultar navegación de escritorio, hamburguesa y menú móvil */ body.app-mode .nav-desktop, body.app-mode .mobile-menu-btn, body.app-mode .mobile-menu { display: none !important; } /* Ocultar botones de favoritos y pedidos del header (están en bottom nav) */ body.app-mode .header-icon-btn { display: none !important; } /* Header-content: los íconos de acción a la derecha */ body.app-mode .header-content { justify-content: flex-end; padding: 0.5rem 0.75rem; min-height: 3rem; } /* Íconos del header */ body.app-mode .header-actions { display: flex; align-items: center; gap: 0.25rem; } body.app-mode .header-icon-btn, body.app-mode .cart-icon { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; position: relative; color: #fff; transition: background 0.15s; } body.app-mode .header-icon-btn:active, body.app-mode .cart-icon:active { background: rgba(255, 107, 53, 0.2); } /* Ocultar el ícono de carrito del header: ya está en el bottom nav */ body.app-mode .cart-icon { display: none !important; } /* ── Scroll content ─────────────────────────────────────────────── */ #app-scroll-content { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--bn-height) + var(--safe-bottom) + 0.5rem); } /* ── Footer: oculto en app ──────────────────────────────────────── */ body.app-mode .footer { display: none !important; } /* ── Hero: más compacto ─────────────────────────────────────────── */ body.app-mode .hero { padding: 1rem 0; } body.app-mode .hero h1 { font-size: 1.1rem; } body.app-mode .hero-logo { max-width: 160px; } body.app-mode .hero p { font-size: 0.82rem; } body.app-mode .btn-primary { padding: 0.6rem 1.2rem; font-size: 0.88rem; } /* ── Grilla de productos: 3 columnas en app ─────────────────────── */ body.app-mode .products-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0.5rem; padding: 0.5rem; } /* ── Secciones secundarias ──────────────────────────────────────── */ body.app-mode .why-us-section, body.app-mode .about-contact-section, body.app-mode .cta-section { padding-top: 1.5rem; padding-bottom: 1.5rem; } /* ── Touch feedback ─────────────────────────────────────────────── */ body.app-mode .product-card:active, body.app-mode .cat-pill:active { transform: scale(0.97); transition: transform 0.12s ease; } body.app-mode button:active, body.app-mode .btn-primary:active { transform: scale(0.96); transition: transform 0.12s ease; } /* ── WhatsApp FAB: sobre el bottom nav ─────────────────────────── */ body.app-mode .whatsapp-fab { bottom: calc(var(--bn-height) + var(--safe-bottom) + 0.75rem) !important; z-index: 200; } /* ══════════════════════════════════════════════════════════════════ BOTTOM NAVIGATION BAR ══════════════════════════════════════════════════════════════════ */ body.app-mode .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--bn-height) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: #fff; border-top: 1px solid #e5e7eb; display: flex; justify-content: space-around; align-items: flex-start; padding-top: 0.5rem; z-index: 999; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08); } body.app-mode .bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.2rem; color: #9ca3af; text-decoration: none; padding: 0.25rem 0.5rem; flex: 1; position: relative; -webkit-touch-callout: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: color 0.15s; } body.app-mode .bottom-nav-item svg { width: 24px; height: 24px; flex-shrink: 0; stroke-width: 1.75; } body.app-mode .bottom-nav-item > span:not(.bn-badge) { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } body.app-mode .bottom-nav-item.active { color: var(--app-orange); } body.app-mode .bottom-nav-item.active svg { stroke: var(--app-orange); } body.app-mode .bottom-nav-item:active { opacity: 0.6; } /* Indicador activo: punto naranja debajo del ícono */ body.app-mode .bottom-nav-item.active::after { content: ''; position: absolute; bottom: 0.1rem; left: 50%; transform: translateX(-50%); width: 0.35rem; height: 0.35rem; background: var(--app-orange); border-radius: 50%; } /* ── Badge ──────────────────────────────────────────────────────── */ body.app-mode .bn-badge { position: absolute; top: 0; left: calc(50% + 6px); background: var(--app-orange); color: #fff; font-size: 0.5rem; font-weight: 700; min-width: 1rem; height: 1rem; border-radius: 9999px; display: none; align-items: center; justify-content: center; padding: 0 0.2rem; border: 1.5px solid #fff; line-height: 1; pointer-events: none; } /* ══════════════════════════════════════════════════════════════════ PANEL DE FILTROS MÓVIL — slide desde abajo en app ══════════════════════════════════════════════════════════════════ */ /* Overlay oscuro */ body.app-mode .filters-overlay { display: none; position: fixed; inset: 0; bottom: calc(var(--bn-height) + var(--safe-bottom)); background: rgba(0, 0, 0, 0.5); z-index: 997; -webkit-tap-highlight-color: transparent; } body.app-mode .filters-overlay.filters-overlay--open { display: block; } /* Panel: siempre en el DOM pero fuera de pantalla cuando cerrado */ body.app-mode #filtersSidebarMobile { position: fixed !important; bottom: calc(var(--bn-height) + var(--safe-bottom)) !important; left: 0 !important; right: 0 !important; top: auto !important; width: 100% !important; max-height: 80dvh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; border-radius: 1.25rem 1.25rem 0 0 !important; background: #fff !important; z-index: 998 !important; padding: 1.25rem 1rem !important; padding-bottom: 1.5rem !important; transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.3s; /* Cerrado por defecto */ transform: translateY(100%); visibility: hidden; pointer-events: none; /* Sobreescribir display:none de .mobile-hidden */ display: block !important; } /* Drag pill */ body.app-mode #filtersSidebarMobile::before { content: ''; display: block; width: 2.5rem; height: 0.25rem; background: #d1d5db; border-radius: 0.25rem; margin: 0 auto 1rem; } /* Abierto — la clase mobile-hidden se QUITA al abrir */ body.app-mode #filtersSidebarMobile.filters-panel--open { transform: translateY(0) !important; visibility: visible !important; pointer-events: auto !important; } /* ══════════════════════════════════════════════════════════════════ PANELES LATERALES — slide desde abajo en app ══════════════════════════════════════════════════════════════════ */ body.app-mode .side-panel { /* En móvil/PWA: panel desde abajo con bordes redondeados arriba */ top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 85dvh !important; height: 85vh !important; max-height: 85dvh !important; max-height: 85vh !important; border-radius: 1.25rem 1.25rem 0 0 !important; /* Cuando está cerrado, se esconde debajo */ transform: translateY(100%) !important; } body.app-mode .side-panel.panel--open { /* Cuando está abierto, sube a su posición */ transform: translateY(0) !important; } body.app-mode .panel-header { border-radius: 1.25rem 1.25rem 0 0; background: #000 !important; color: #fff !important; } /* Indicador de arrastre ("pill") sobre el header */ body.app-mode .panel-header::before { content: ''; display: block; width: 2.5rem; height: 0.25rem; background: rgba(255, 255, 255, 0.3); border-radius: 0.25rem; margin: 0 auto 0.75rem; } /* ══════════════════════════════════════════════════════════════════ CARRITO — botón WhatsApp para finalizar pedido ══════════════════════════════════════════════════════════════════ */ /* Botón principal de WhatsApp en carrito */ .checkout-wa-btn { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding: 0.9rem 1.5rem; background: #25D366; color: #fff; border: none; border-radius: 0.75rem; font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: background 0.2s, transform 0.15s; margin-top: 0.75rem; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3); } .checkout-wa-btn:active { background: #1ebe5d; transform: scale(0.98); } .checkout-wa-btn svg { width: 22px; height: 22px; flex-shrink: 0; } /* ── Inputs: evitar zoom en iOS ─────────────────────────────────── */ body.app-mode input, body.app-mode textarea, body.app-mode select { font-size: 16px !important; } /* ── Print ──────────────────────────────────────────────────────── */ @media print { body.app-mode .bottom-nav, body.app-mode .whatsapp-fab { display: none !important; } }