/* ============================================================
 * SíVABiker · Banner de instalación PWA
 * Mismo lenguaje visual: dark neumorphism + degradado naranja.
 * ============================================================ */

#pwa-install-banner{
  position:fixed; top:0; left:0; right:0; z-index:9999;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  background:var(--panel);
  box-shadow:var(--shadow-out-sm);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%);
  transition:transform .3s ease;
}
#pwa-install-banner.is-visible{ transform:translateY(0); }

body.has-pwa-banner{ padding-top:60px; }
body.has-pwa-banner .login-topbar{ top:60px; }

.pwa-banner-icon{
  flex-shrink:0; width:36px; height:36px; border-radius:11px;
  background:var(--grad-orange);
  box-shadow:var(--shadow-out-sm);
  display:flex; align-items:center; justify-content:center;
}
.pwa-banner-icon svg{ width:20px; height:20px; stroke:#FFF2EA; }

.pwa-banner-text{ flex:1; min-width:0; }
.pwa-banner-text strong{
  display:block; font-size:13px; font-weight:700; color:var(--text-hi);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pwa-banner-text span{
  display:block; font-size:11.5px; font-weight:500; color:var(--text-mid);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.pwa-banner-actions{ flex-shrink:0; display:flex; align-items:center; gap:6px; }

.pwa-banner-install{
  display:flex; align-items:center; gap:6px;
  background:var(--grad-orange); color:#FFF2EA;
  border:none; border-radius:var(--radius-sm);
  padding:9px 14px; font-size:12.5px; font-weight:700;
  font-family:inherit; cursor:pointer;
  box-shadow:var(--shadow-out-sm);
  white-space:nowrap;
}
.pwa-banner-install svg{ width:15px; height:15px; stroke:#FFF2EA; flex-shrink:0; }

.pwa-banner-close{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex-shrink:0;
  background:var(--panel-2); box-shadow:var(--shadow-in-sm);
  border:none; border-radius:var(--radius-sm); cursor:pointer;
}
.pwa-banner-close svg{ width:14px; height:14px; stroke:var(--text-mid); }

/* Instrucciones iOS (no hay prompt nativo de instalación) */
#pwa-ios-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:10000;
  background:var(--panel);
  border-top:1px solid var(--line);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:var(--shadow-out);
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .3s ease;
}
#pwa-ios-sheet.is-visible{ transform:translateY(0); }
#pwa-ios-sheet h3{ font-size:15px; font-weight:700; color:var(--text-hi); margin-bottom:10px; }
#pwa-ios-sheet ol{ margin:0 0 16px 0; padding:0; list-style:none; }
#pwa-ios-sheet li{
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:500; color:var(--text-mid);
  padding:8px 0; border-bottom:1px dashed var(--line);
}
#pwa-ios-sheet li:last-child{ border-bottom:none; }
#pwa-ios-sheet li .step-num{
  flex-shrink:0; width:22px; height:22px; border-radius:7px;
  background:var(--grad-orange); color:#FFF2EA;
  font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
#pwa-ios-sheet .pwa-sheet-close{
  width:100%; padding:12px; border:none; border-radius:var(--radius-md);
  background:var(--panel-2); box-shadow:var(--shadow-in-sm);
  color:var(--text-hi); font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer;
}

#pwa-sheet-backdrop{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.5);
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
#pwa-sheet-backdrop.is-visible{ opacity:1; pointer-events:auto; }

@media (min-width:640px){
  #pwa-install-banner{ padding:11px 20px; }
  .pwa-banner-text strong{ font-size:14px; }
  .pwa-banner-text span{ font-size:12.5px; }
}