/* ============================================================
   Tenerlo como una aplicación (js/core/instalar.js): el aviso de abajo
   en el teléfono, como un globo de Nyc con él asomado encima, y los
   pasos para iPhone y Android
   ============================================================ */
.instalar {
  position: fixed; left: var(--s-3); right: var(--s-3);
  bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); z-index: 650;
  display: grid; gap: var(--s-3);
  padding: var(--s-4); border-radius: 6px var(--r-xl) var(--r-xl) var(--r-xl);
  background: var(--bg-surface); border: 1px solid var(--border); box-shadow: var(--sh-3);
  opacity: 0; transform: translateY(16px);
  transition: opacity 220ms ease, transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.instalar.is-visible { opacity: 1; transform: none; }
/* Nyc, de pie sobre el borde de arriba, del lado de la esquina del globo */
.instalar__nyc { position: absolute; left: var(--s-4); top: -47px; width: 54px; aspect-ratio: 200 / 210; pointer-events: none; }
.instalar__nyc > img, .instalar__nyc > svg { display: block; width: 100%; height: auto; overflow: visible; }
.instalar__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.instalar__texto b { font-size: var(--fs-15); font-weight: 600; color: var(--text-primary); }
.instalar__texto span { font-size: var(--fs-13); line-height: 1.4; color: var(--text-secondary); }
.instalar__acciones { display: flex; gap: var(--s-2); }
.instalar__acciones .btn { flex: 1; height: 40px; font-size: var(--fs-14); border-radius: var(--r); }
@media (min-width: 640px) {
  .instalar { left: auto; right: var(--s-5); width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .instalar { transform: none; transition: opacity 120ms ease; }
}

.instalar-modal .segmented { margin-bottom: var(--s-4); }
.instalar-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); counter-reset: paso; }
.instalar-paso {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); align-items: center;
  padding: var(--s-3); border-radius: var(--r-lg); background: var(--bg-muted);
}
.instalar-paso__icono {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r); background: var(--brand-soft); color: var(--brand-ink);
}
.instalar-paso__icono::after {
  counter-increment: paso; content: counter(paso);
  position: absolute; top: -6px; left: -6px; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: var(--r-full);
  background: var(--brand-btn, var(--brand)); color: #fff; font-size: var(--fs-11); font-weight: 600;
}
.instalar-paso__titulo { margin: 0; font-size: var(--fs-14); color: var(--text-primary); }
.instalar-paso__titulo b { font-weight: 600; }
.instalar-paso__detalle { margin: 2px 0 0; font-size: var(--fs-13); line-height: 1.4; color: var(--text-secondary); }
.instalar-nota { margin: var(--s-3) 0 0; font-size: var(--fs-13); line-height: 1.45; color: var(--text-muted); }