feat: Add fade transitions to route changes

This commit introduces fade transitions for route changes in the UI.
The main App.vue component has been updated to wrap the RouterView
with a Vue transition component. CSS styles for a simple fade-in/out
effect have been added.

This change aims to make the application feel more consistent and modern
by providing visual feedback during navigation.

ui/src/App.vue

@@ -65,7 +65,11 @@ watchEffect(() => {
 
     <!-- contenido principal -->
     <main class="min-h-[calc(100vh-56px)] flex flex-col overflow-hidden">
-      <RouterView class="flex-1 overflow-auto" />
+      <router-view v-slot="{ Component }">
+        <transition name="fade" mode="out-in">
+          <component :is="Component" class="flex-1 overflow-auto" />
+        </transition>
+      </router-view>
     </main>
   </div>
 </template>
@@ -73,4 +77,19 @@ watchEffect(() => {
 <style scoped>
 /* 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;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
 </style>