html, body {
   /* height: 100%;
    margin: 0;
    overflow: hidden;*/
}

#view {
   /* position: relative;
    width: 100vw;
    height: calc(100vh - 56px);
    overflow: hidden;*/
  
}

.page {
    /*position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--bs-body-bg, #fff);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    will-change: transform, opacity;*/
}


/* === TRANSICIONES === */
/* Slide */
.page-enter-slide-forward {
    transform: translateX(100%);
    opacity: 0.9;
}

.page-enter-slide-forward-active {
    transition: transform .3s ease, opacity .3s ease;
    transform: translateX(0);
    opacity: 1;
}

.page-leave-slide-forward-active {
    transition: transform .3s ease, opacity .3s ease;
    transform: translateX(-25%);
    opacity: 0.4;
}

.page-enter-slide-back {
    transform: translateX(-25%);
    opacity: 0.4;
}

.page-enter-slide-back-active {
    transition: transform .3s ease, opacity .3s ease;
    transform: translateX(0);
    opacity: 1;
}

.page-leave-slide-back-active {
    transition: transform .3s ease, opacity .3s ease;
    transform: translateX(100%);
    opacity: 0.8;
}
/* Fade */
.page-enter-fade-forward,
.page-enter-fade-back {
    opacity: 0;
}

.page-enter-fade-forward-active,
.page-enter-fade-back-active {
    transition: opacity .3s ease;
    opacity: 1;
}

.page-leave-fade-forward-active,
.page-leave-fade-back-active {
    transition: opacity .3s ease;
    opacity: 0;
}
/* Push */
.page-enter-push-forward {
    transform: translateX(100%);
}

.page-enter-push-forward-active {
    transition: transform .3s ease;
    transform: translateX(0);
}

.page-leave-push-forward-active {
    transition: transform .3s ease;
    transform: translateX(-30%);
    opacity: 0.4;
}

.page-enter-push-back {
    transform: translateX(-30%);
}

.page-enter-push-back-active {
    transition: transform .3s ease;
    transform: translateX(0);
    opacity: 1;
}

.page-leave-push-back-active {
    transition: transform .3s ease;
    transform: translateX(100%);
    opacity: 0.8;
}
/* Circle */
.page-enter-circle-forward,
.page-enter-circle-back {
    transform: scale(0);
    opacity: 0;
    border-radius: 50%;
}

.page-enter-circle-forward-active,
.page-enter-circle-back-active {
    transition: transform .4s ease, opacity .4s ease, border-radius .4s ease;
    transform: scale(1);
    opacity: 1;
    border-radius: 0;
}

.page-leave-circle-forward-active,
.page-leave-circle-back-active {
    transition: transform .4s ease, opacity .4s ease, border-radius .4s ease;
    transform: scale(2);
    opacity: 0;
    border-radius: 50%;
}


/* preloader */
.apf-preloader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 9999;
}

    .apf-preloader-overlay.visible {
        opacity: 1;
    }

.apf-preloader-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: apf-spin 1s linear infinite;
}

@keyframes apf-spin {
    to {
        transform: rotate(360deg);
    }
}

.apf-preloader-text {
    color: #fff;
    font-size: 1rem;
    margin-top: 1rem;
}