/* ════════════════════════════════════════════════════════════════ APEX PWA — FASE 3: experiencia "tipo app" (standalone + safe-area) Se encola en todas las páginas. Solo actúa de verdad cuando la app corre instalada (body.apex-standalone, lo añade apex-pwa.js). ════════════════════════════════════════════════════════════════ */ /* --- Safe areas del iPhone (notch + barra inferior) en modo app --- IMPORTANTE: en páginas internas (dashboard, cursos...) el topbar y el apex-mob-nav son position:fixed — el padding del notch debe vivir EN ELLOS, nunca en , porque no es position:fixed y duplicaría el espacio (doble salto) empujando dos veces el contenido. Por eso el padding genérico de body solo aplica a páginas SIN ese shell fijo (login, legal, páginas públicas). */ @media (display-mode: standalone) { /* Páginas sin shell fijo (login, públicas, legal): empujar body directo. */ body.apex-standalone:not(.apex-internal) { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } /* Páginas internas: el safe-area vive en los elementos fixed. */ body.apex-standalone.apex-internal .topbar { padding-top: env(safe-area-inset-top, 0px); height: calc(54px + env(safe-area-inset-top, 0px)); } body.apex-standalone.apex-internal .apex-mob-nav { padding-bottom: env(safe-area-inset-bottom, 0px); height: calc(60px + env(safe-area-inset-bottom, 0px)); } /* El contenido necesita más espacio inferior para no quedar tapado por el nav */ body.apex-standalone.apex-internal .content { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; } } /* Pinta la barra de estado (background bajo el notch) con el color de marca. */ body.apex-standalone { background-color: var(--bg, #0a1e26); } /* En modo app, oculta cualquier elemento marcado "solo web" (ej. footer público). */ body.apex-standalone .apex-only-web { display: none !important; } /* ════════════════════════════════════════════════════════════════ "APEX Flow" — modal de instalación en 2 pasos (Fase PWA, rediseño 2026-06-25) A PROPÓSITO no es una franja angosta anclada abajo: ese era el diseño anterior y se confundía con el aviso de cookies (misma posición, mismo "×", mismo tamaño chico) — dos usuarios lo cerraron sin leer pensando que era eso. Este modal cubre y oscurece el fondo, va centrado, es más grande, tiene nombre propio y un solo botón claro: silueta deliberadamente distinta. ════════════════════════════════════════════════════════════════ */ #apex-flow-overlay { position: fixed; inset: 0; z-index: 99998; background: rgba(6, 15, 20, .78); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .3s ease; } #apex-flow-overlay.show { opacity: 1; } #apex-flow-modal { width: min(380px, 100%); background: linear-gradient(165deg, #163545 0%, #0d2530 100%); border: 1px solid rgba(200, 255, 0, .2); border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); padding: 28px 24px 24px; color: #e8f0f0; font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif; text-align: center; transform: scale(.92) translateY(10px); transition: transform .35s cubic-bezier(.22,1,.36,1); } #apex-flow-overlay.show #apex-flow-modal { transform: scale(1) translateY(0); } .afm-badge { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: #C8FF00; display: flex; align-items: center; justify-content: center; } .afm-kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #C8FF00; margin-bottom: 8px; } .afm-title { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 900; text-transform: uppercase; font-size: 26px; line-height: 1.1; letter-spacing: -.2px; color: #e8f0f0; margin: 0 0 10px; } .afm-title span { color: #C8FF00; } .afm-title-sm { font-size: 21px; } .afm-sub { font-size: 13px; line-height: 1.55; color: #9fbcc4; margin: 0 0 20px; } .afm-btn-primary { display: block; width: 100%; height: 48px; margin: 0; background: #C8FF00; color: #0a1e26; border: none; border-radius: 8px; font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; } .afm-btn-primary:active { filter: brightness(.95); } .afm-btn-text { display: block; width: 100%; margin-top: 12px; background: none; border: none; color: #6a8f9f; font-family: 'Barlow', sans-serif; font-size: 13px; cursor: pointer; padding: 6px; } .afm-btn-text:hover { color: #9fbcc4; } /* Paso 2 — instrucciones */ .afm-steps { text-align: left; font-size: 13px; line-height: 1.7; color: #cfe0e0; background: rgba(0,0,0,.18); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; } .afm-steps b { color: #C8FF00; } .afm-share-ico { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin: 0 2px; }