/* Tarjeta «Instalar app / Activar avisos» de Latydos. Mismo estilo que el banner de cookies. Sigue el tema (data-theme). */
.lt-pwa{
  --pw-surface:#120a12; --pw-text:#f8eaec; --pw-muted:#b3949a; --pw-line:#2a1a20;
  --pw-accent:#ff4d7d; --pw-accent2:#ff9ec0; --pw-on-accent:#1a0610; --pw-glow:rgba(255,77,125,.22);
  --pw-soft:rgba(255,77,125,.12); --pw-edge:rgba(255,255,255,.65);
  --pw-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 14px rgba(255,255,255,.2),0 16px 40px rgba(0,0,0,.5);
  position:fixed; left:50%; bottom:max(16px,env(safe-area-inset-bottom)); z-index:2147482000;
  width:min(440px,calc(100% - 24px)); transform:translate(-50%,0); box-sizing:border-box; padding:18px 18px 18px;
  background:var(--pw-surface); color:var(--pw-text); border:1.5px solid var(--pw-edge); border-radius:22px; box-shadow:var(--pw-shadow);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.5;
  animation:lt-pw-in .4s cubic-bezier(.2,.8,.2,1) both;
}
:root[data-theme=light] .lt-pwa{
  --pw-surface:#ffffff; --pw-text:#2b1519; --pw-muted:#7a5d64; --pw-line:#eadde1;
  --pw-accent:#e11d5c; --pw-accent2:#be185d; --pw-on-accent:#ffffff; --pw-glow:rgba(225,29,92,.18);
  --pw-soft:rgba(225,29,92,.07); --pw-edge:rgba(225,29,92,.28);
  --pw-shadow:0 0 12px rgba(225,29,92,.12),0 16px 40px rgba(60,20,30,.16);
}
.lt-pwa *,.lt-pwa *::before,.lt-pwa *::after{box-sizing:border-box}
.lt-pwa.is-out{animation:lt-pw-out .25s ease both}
.lt-pwa__head{display:flex;gap:14px;align-items:flex-start;padding-right:26px}
.lt-pwa__icon{flex:none;width:46px;height:46px;border-radius:12px;display:block}
.lt-pwa__title{margin:0 0 3px;font-size:16px;line-height:1.25;font-weight:700;letter-spacing:-.01em;color:var(--pw-accent)}
.lt-pwa__text{margin:0;font-size:13.5px;color:var(--pw-text)}
.lt-pwa__x{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--pw-muted);font-size:22px;line-height:1;cursor:pointer}
.lt-pwa__x:hover{background:var(--pw-soft);color:var(--pw-text)}
.lt-pwa__steps{margin:14px 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:9px;font-size:13.5px}
.lt-pwa__steps li{counter-increment:s;display:flex;gap:10px;align-items:center}
.lt-pwa__steps li::before{content:counter(s);flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--pw-soft);color:var(--pw-accent2);border:1px solid var(--pw-edge)}
.lt-pwa__steps svg{width:18px;height:18px;vertical-align:-4px;margin:0 2px;color:var(--pw-accent2)}
.lt-pwa__actions{display:flex;gap:10px;margin-top:16px}
.lt-pwa__btn{
  flex:1 1 0;min-width:0;height:42px;padding:0 12px;border-radius:999px;cursor:pointer;font:600 13.5px/1 Inter,system-ui,sans-serif;
  border:1px solid transparent;transition:transform .2s,box-shadow .2s,filter .2s;
}
.lt-pwa__btn:hover{transform:translateY(-2px)}
.lt-pwa__btn:focus-visible,.lt-pwa__x:focus-visible{outline:2px solid var(--pw-accent2);outline-offset:2px}
.lt-pwa__btn--primary{background:linear-gradient(90deg,var(--pw-accent),var(--pw-accent2));color:var(--pw-on-accent);box-shadow:0 6px 16px var(--pw-glow)}
.lt-pwa__btn--primary:hover{filter:brightness(1.06)}
.lt-pwa__btn--neutral{background:transparent;color:var(--pw-text);border-color:var(--pw-line)}
.lt-pwa__btn[disabled]{opacity:.6;cursor:progress;transform:none}
.lt-pwa--toast{padding:14px 44px 14px 16px}
.lt-pwa--toast .lt-pwa__text{font-size:14px}
/* Banner de instalación discreto: más compacto que el resto de tarjetas */
.lt-pwa--compact{padding:12px 12px 12px 14px;border-radius:18px;border-width:1px}
.lt-pwa--compact .lt-pwa__head{gap:12px;padding-right:22px}
.lt-pwa--compact .lt-pwa__icon{width:38px;height:38px;border-radius:10px}
.lt-pwa--compact .lt-pwa__title{font-size:14.5px}
.lt-pwa--compact .lt-pwa__text{font-size:12.5px;color:var(--pw-muted)}
.lt-pwa--compact .lt-pwa__actions{margin-top:11px}
.lt-pwa--compact .lt-pwa__btn{height:36px;font-size:13px}
.lt-pwa--compact .lt-pwa__x{top:6px;right:6px;width:28px;height:28px}
/* Controles incrustados en la página (p. ej. Cuenta): el atributo hidden debe ganar a .btn */
[data-pwa-install][hidden],[data-pwa-notify][hidden],[data-pwa-notify-off][hidden]{display:none!important}
@keyframes lt-pw-in{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes lt-pw-out{to{opacity:0;transform:translate(-50%,24px)}}
@media (prefers-reduced-motion:reduce){.lt-pwa,.lt-pwa.is-out{animation:none}.lt-pwa__btn{transition:none}}
