/* =========================================================
   PWA UI — Banner de instalación, badge offline y barra de
   actualización. Inyectados por js/core/pwa.js.
   ========================================================= */

/* ---------- Banner de instalación ---------- */
.pwa-install-banner{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 460px;
  margin: 0 auto;
  padding: 12px 14px;
  background: #ffffff;
  color: #0a2a5e;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(10, 42, 94, .28);
  border: 1px solid rgba(10, 42, 94, .08);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2, .8, .3, 1.1), opacity .3s ease;
}
.pwa-install-banner.show{ transform: translateY(0); opacity: 1; }

.pwa-banner-icon{
  width: 48px; height: 48px;
  border-radius: 12px;
  flex: 0 0 auto;
  object-fit: contain;
  background: #0a2a5e;
}
.pwa-banner-text{ display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.pwa-banner-text strong{ font-size: 14px; font-weight: 800; line-height: 1.2; }
.pwa-banner-text span{ font-size: 12px; color: #5b6a82; line-height: 1.3; }

.pwa-install-banner .btn{ flex: 0 0 auto; white-space: nowrap; }

.pwa-banner-close{
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border: none; background: transparent;
  color: #5b6a82; font-size: 22px; line-height: 1;
  cursor: pointer; border-radius: 8px;
  display: grid; place-items: center;
  transition: background .15s ease, color .15s ease;
}
.pwa-banner-close:hover{ background: rgba(10,42,94,.08); color: #0a2a5e; }

/* ---------- Badge offline ---------- */
.pwa-offline-badge{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  background: #876200;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transform: translateY(-100%);
  transition: transform .3s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.pwa-offline-badge.show{ transform: translateY(0); }
.pwa-offline-badge i{ animation: pwaPulse 1.6s ease-in-out infinite; }
@keyframes pwaPulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

/* ---------- Barra de actualización ---------- */
.pwa-update-bar{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%, 160%);
  z-index: 1250;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: #1e4ea3;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 36px rgba(30, 78, 163, .45);
  transition: transform .35s cubic-bezier(.2,.8,.3,1.1), background .15s ease;
}
.pwa-update-bar.show{ transform: translate(-50%, 0); }
.pwa-update-bar:hover{ background: #2461c4; }
.pwa-update-bar i{ animation: pwaSpin 2s linear infinite; }
@keyframes pwaSpin{ to{ transform: rotate(360deg); } }

/* En pantallas pequeñas, el badge offline no debe tapar el contenido fijo */
@media (max-width: 600px){
  .pwa-install-banner{ left: 10px; right: 10px; bottom: 76px; }
  .pwa-banner-text span{ display: none; }
}

/* Respeta usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce){
  .pwa-install-banner,
  .pwa-offline-badge,
  .pwa-update-bar{ transition: none; }
  .pwa-offline-badge i,
  .pwa-update-bar i{ animation: none; }
}