feat: replace obsolete spinners with branded UI loading component

frontend/src/components/common/LoadingBranded.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+// defineProps is a compiler macro, no import needed
+
+defineProps({
+  message: {
+    type: String,
+    default: 'Cargando...'
+  },
+  icon: {
+    type: String,
+    default: 'explore'
+  }
+})
+</script>
+
+<template>
+  <div class="loading-branded-container">
+    <div class="loading-pulse-ring">
+      <div class="loading-icon-wrap">
+        <span class="material-icons loading-icon">{{ icon }}</span>
+      </div>
+    </div>
+    <div class="loading-text-wrap">
+      <p class="loading-message">{{ message }}</p>
+      <div class="loading-dots">
+        <span>.</span><span>.</span><span>.</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.loading-branded-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1rem;
+  gap: 1.5rem;
+  width: 100%;
+}
+
+.loading-pulse-ring {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-pulse-ring::before,
+.loading-pulse-ring::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background-color: var(--active-color, #fee715);
+  opacity: 0;
+  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.loading-pulse-ring::after {
+  animation-delay: 1s;
+}
+
+.loading-icon-wrap {
+  position: relative;
+  z-index: 2;
+  width: 56px;
+  height: 56px;
+  background-color: var(--bg-secondary, #ffffff);
+  border: 2px solid var(--border-color, #e2e8f0);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  animation: icon-float 3s ease-in-out infinite;
+}
+
+.loading-icon {
+  font-size: 28px;
+  color: var(--text-primary, #1e293b);
+}
+
+.loading-text-wrap {
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+}
+
+.loading-message {
+  font-size: 1rem;
+  font-weight: 800;
+  color: var(--text-primary, #1e293b);
+  letter-spacing: -0.01em;
+  margin: 0;
+}
+
+.loading-dots {
+  display: flex;
+  color: var(--text-primary, #1e293b);
+  font-weight: 800;
+  font-size: 1.2rem;
+  line-height: 1;
+}
+
+.loading-dots span {
+  animation: loading-dot 1.4s infinite;
+  opacity: 0;
+}
+
+.loading-dots span:nth-child(1) { animation-delay: 0s; }
+.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
+.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.6);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+}
+
+@keyframes icon-float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+}
+
+@keyframes loading-dot {
+  0% { opacity: 0; }
+  50% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+/* Dark mode overrides automatically adapt using CSS variables, but just in case */
+@media (prefers-color-scheme: dark) {
+  .loading-icon-wrap {
+    background-color: var(--bg-secondary, #1e293b);
+    border-color: rgba(255,255,255, 0.1);
+  }
+  .loading-icon, .loading-message, .loading-dots {
+    color: var(--text-default, #f1f5f9);
+  }
+}
+</style>