/*Animación para el sidebar*/
.transition-enter {
    transform: translateX(-100%);
}

.transition-enter-active {
    transform: translateX(0);
    transition: transform 0.3s ease;
}

.transition-leave {
    transform: translateX(0);
}

.transition-leave-active {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}


/* Transición personalizada solo en opacidad */
.transition-opacity-in {
    transition: opacity 0.8s ease;
}
.opacity-in-start {
    opacity: 0;
}
.opacity-in-end {
    opacity: 1;
}

.transition-opacity-out {
    transition: opacity 0.6s ease;
}
.opacity-out-start {
    opacity: 0.5;
}
.opacity-out-end {
    opacity: 0;
}