/* Contenedor de vistas (stack) */
.pila-vistas{
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 100dvh;
  overflow: visible;
  transform: none !important;
}

/* Cada vista, por defecto, es relativa y aporta altura/scroll */
.vista{
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: 16px;
  overflow-x: hidden;
}

/* Estados de transición */
.saliendo-izq   { animation: saleIzq .28s ease both; }
.entrando-der   { animation: entraDer .28s ease both; }

/* Durante la animación la vista va absoluta, luego vuelve a flujo normal */
.saliendo-izq,
.entrando-der{
  position: absolute;
  inset: 0;
}

/* Animaciones */
@keyframes entraDer{
  from { transform: translateX(100%); opacity: .01; }
  to   { transform: translateX(0%);   opacity: 1;   }
}
@keyframes saleIzq{
  from { transform: translateX(0%);   opacity: 1;   }
  to   { transform: translateX(-20%); opacity: .01; }
}