/* ── Añadidos del prototipo (fuera del sistema de diseño) ─────────────
   Solo cosas propias del cascarón navegable: el toast de feedback y un
   par de ajustes de scroll. Nada de esto redefine el sistema.
   ──────────────────────────────────────────────────────────────────── */

#toast{
  position:fixed;
  left:50%;
  bottom:calc(var(--tab-h) + var(--safe-b) + 18px);
  transform:translate(-50%, 12px);
  z-index:60;
  max-width:min(360px, calc(100vw - 40px));
  padding:13px 20px;
  border-radius:var(--r-pill);
  background:var(--black);
  color:#fff;
  font-size:15px;
  font-weight:700;
  text-align:center;
  box-shadow:var(--sh-3);
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms var(--ease), transform 180ms var(--ease);
}
#toast.is-on{opacity:1;transform:translate(-50%, 0)}

/* El scroll vive en cada .view; el .app solo recorta.
   .scroll necesita ALTURA FIJA, no auto: si crece con su contenido, su
   scrollHeight iguala su clientHeight y no scrollea nada — el padre se
   limita a recortarlo. */
.view--active{height:100dvh;overflow:hidden}
.view--active > .scroll,
.modal > .scroll{height:100%}

/* Favorito activo: el corazón se rellena. */
.det-fav.is-on{color:var(--red)}
.det-fav.is-on svg{fill:currentColor}

/* CTA agotado cuando no queda nada por ver. */
.btn:disabled{opacity:.45;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  #toast{transition:none}
}