/* Camada de sincronização do PWA. O fallback crítico equivalente está no para a animação aparecer mesmo antes desta folha ser baixada. */ #pwaSyncOverlay[hidden] { display: none !important; } #pwaSyncOverlay.is-visible { display: grid; } #pwaSyncOverlay.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .42s ease, visibility .42s ease; } #pwaSyncOverlay.is-error .pwa-sync-card { border-color: #d98773; } #pwaSyncOverlay.is-error .pwa-sync-orb { background: radial-gradient(circle, #fff4e4 0 5%, #ff9c76 14%, #88345d 39%, transparent 68%); box-shadow: 0 0 22px #ff997c, 0 0 72px #9b3e62aa, inset 0 0 20px #fff9; } @media (max-height: 570px) and (orientation: landscape) { .pwa-sync-card { display: grid; grid-template-columns: 92px 1fr; grid-template-areas: 'orb kicker' 'orb title' 'orb status' 'orb track' 'orb meta' 'orb error' 'orb button'; column-gap: 22px; align-items: center; padding: 18px 22px; text-align: left; } .pwa-sync-orb { grid-area: orb; margin: 0 auto; } .pwa-sync-kicker { grid-area: kicker; } .pwa-sync-title { grid-area: title; margin: 2px 0; } .pwa-sync-status { grid-area: status; min-height: 0; } .pwa-sync-track { grid-area: track; width: 100%; margin: 10px 0 5px; } .pwa-sync-meta { grid-area: meta; } .pwa-sync-error { grid-area: error; } .pwa-sync-continue { grid-area: button; margin: 8px 0 0; } }