refactor: Update route transition to slide-fade

This commit changes the route transition effect from a simple fade
to a slide-fade effect based on your feedback.

- Outgoing content now fades and slides to the right.
- Incoming content now fades and slides in from the left.

The transition duration has also been slightly increased for a
smoother visual experience.

ui/src/App.vue

@@ -66,7 +66,7 @@ watchEffect(() => {
     <!-- contenido principal -->
     <main class="min-h-[calc(100vh-56px)] flex flex-col overflow-hidden">
       <router-view v-slot="{ Component }">
-        <transition name="fade" mode="out-in">
+        <transition name="slide-fade" mode="out-in">
           <component :is="Component" class="flex-1 overflow-auto" />
         </transition>
       </router-view>
@@ -78,18 +78,25 @@ watchEffect(() => {
 /* Scoped styles remain, global styles are in style.css */
 /* We can add specific App.vue styling here if needed, that doesn't rely on theme variables directly */
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease-in-out;
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.3s ease-out; /* Increased duration for a smoother slide */
 }
 
-.fade-enter-from,
-.fade-leave-to {
+.slide-fade-enter-from {
   opacity: 0;
+  transform: translateX(-20px); /* Slide in from the left */
 }
 
-.fade-enter-to,
-.fade-leave-from {
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateX(20px); /* Slide out to the right */
+}
+
+/* Ensure content is fully opaque and in place when active/not transitioning */
+.slide-fade-enter-to,
+.slide-fade-leave-from {
   opacity: 1;
+  transform: translateX(0);
 }
 </style>