/* TodoIT PWA runtime UI */
body.is-offline::before{
  content:"Sin conexión";
  position:fixed;
  left:50%;
  bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:260;
  padding:9px 14px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 36px rgba(0,0,0,.28);
  font-size:12px;
  font-weight:900;
  pointer-events:none;
}
.pwa-install-card{
  position:fixed;
  right:18px;
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:255;
  width:min(390px,calc(100vw - 28px));
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:22px;
  background:color-mix(in srgb,var(--card) 94%,#111827 6%);
  border:1px solid color-mix(in srgb,var(--bdr) 80%,#fff 20%);
  box-shadow:0 24px 70px rgba(0,0,0,.32);
  animation:pwa-slide-in .22s ease both;
}
.pwa-install-icon{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:linear-gradient(135deg,#111216,#302145);
  color:#ff8c42;
  font-size:24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.pwa-install-copy{min-width:0;display:flex;flex-direction:column;gap:3px;flex:1}
.pwa-install-copy strong{font-size:13px;font-weight:950;color:var(--txt);letter-spacing:-.01em}
.pwa-install-copy span{font-size:11.5px;line-height:1.35;color:var(--txt2)}
.pwa-install-btn{
  border:0;
  border-radius:14px;
  min-height:40px;
  padding:0 14px;
  background:linear-gradient(135deg,#111216,#262a33);
  color:#fff;
  font-weight:950;
  cursor:pointer;
  white-space:nowrap;
}
.pwa-install-btn.ghost{background:var(--inp);color:var(--txt)}
.pwa-install-x{
  width:30px;
  height:30px;
  border:0;
  border-radius:12px;
  background:var(--inp);
  color:var(--txt2);
  font-size:20px;
  font-weight:900;
  cursor:pointer;
  flex:0 0 auto;
}
.pwa-settings-card{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:14px;
  padding:14px;
  border:1px solid var(--bdr);
  border-radius:20px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 8%,var(--card)),var(--card));
}
.pwa-settings-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:linear-gradient(135deg,#111216,#302145);
  color:#ff8c42;
  font-size:24px;
}
.pwa-settings-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.pwa-settings-copy strong{font-size:14px;font-weight:950;color:var(--txt)}
.pwa-settings-copy span{font-size:12px;line-height:1.45;color:var(--txt2)}
.pwa-settings-btn{
  min-height:46px;
  min-width:116px;
  padding:0 18px;
  border:0;
  border-radius:16px;
  background:linear-gradient(135deg,#111216,#262a33);
  color:#fff!important;
  font-weight:950;
  font-size:13px;
  letter-spacing:-.01em;
  cursor:pointer;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.pwa-settings-btn:disabled{
  background:var(--inp);
  color:var(--txt2)!important;
  box-shadow:none;
  opacity:1;
  cursor:default;
}
@keyframes pwa-slide-in{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media (max-width: 768px){
  .pwa-install-card{
    left:14px;
    right:14px;
    bottom:calc(92px + env(safe-area-inset-bottom));
    width:auto;
    padding:11px;
  }
  body.is-offline::before{bottom:calc(92px + env(safe-area-inset-bottom))}
  .pwa-install-copy strong{font-size:12.5px}
  .pwa-install-copy span{font-size:11px}
  .pwa-settings-card{align-items:stretch;flex-direction:column}
  .pwa-settings-btn{width:100%}
}