/** * colonpwa.css — Estilos del sistema PWA: splash screen y popups de instalación * Proyecto: Colón Portal 2026 * Autores: darioFinelli_dev + IA (GitHub Copilot / Claude) * Cargado por: plugins/system/colonpwa/colonpwa.php (vía addStyleSheet) * Última modificación: 2026-04-25 * * Depende de variables CSS definidas en colonportal.css :root * Variable principal de color: --cp-blue-brand (#3165ac) */ /* ========================================================== */ /* ====================== SPLASH SCREEN ===================== */ /* ========================================================== */ /* El splash solo se muestra en modo standalone (app instalada). JS agrega la clase .cp-pwa-standalone a al detectar standalone. En navegador normal: display:none permanente. */ #app-splash { display: none; position: fixed; inset: 0; background: #ffffff; z-index: 10000; flex-direction: column; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; transition: opacity 0.3s ease; } .cp-pwa-standalone #app-splash { display: flex; } #app-splash img { max-width: 60px; margin-bottom: 8px; } #app-splash h1 { margin: 0; font-size: 18px; color: var(--cp-blue-brand, #3165ac); } #app-splash .loader { margin-top: 18px; width: 28px; height: 28px; border: 3px solid #ddd; border-top-color: var(--cp-blue-brand, #3165ac); border-radius: 50%; animation: cp-pwa-spin 0.8s linear infinite; } @keyframes cp-pwa-spin { to { transform: rotate(360deg); } } /* ========================================================== */ /* =================== POPUP INSTALACIÓN ==================== */ /* ========================================================== */ #pwa-popup, #ios-popup { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; animation: cp-pwa-fade-in 0.3s ease-out; max-width: 400px; margin: 0 auto; } @keyframes cp-pwa-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .pwa-box { display: flex; align-items: center; gap: 14px; } .pwa-logo { width: 56px; height: 56px; border-radius: 12px; } .pwa-content h3 { margin: 0 0 6px; font-size: 18px; color: var(--cp-blue-brand, #3165ac); } .pwa-content p { margin: 0; font-size: 14px; color: #555; } .pwa-actions { margin-top: 16px; display: flex; gap: 10px; } .pwa-actions button { flex: 1; padding: 10px 12px; border-radius: 8px; border: none; cursor: pointer; font-size: 14px; } #pwa-install { background: var(--cp-blue-brand, #3165ac); color: #ffffff; } #pwa-install:hover { background: var(--cp-blue-40, #21589f); } #pwa-close, #ios-close { background: #e5e5e5; color: #333; }