feat(pwa-offline): Pinia store + IndexedDB; contexto para cache/eliminación; toasts; compatibilidad PWA offline

- Agrega @pinia/nuxt, idb y store central (stores/music.ts)
- Cacheo manual desde menú contextual y borrado (TrackContextMenu)
- Ícono verde para canciones cacheadas, sin auto-cache al reproducir
- Toasts de feedback (stores/toast.ts, ToastContainer)
- Fallback offline de listado a IndexedDB; fix MUSIC_DIR absoluto en preview/prod
- Ajustes PWA: navigateFallback '/', devOptions, workbox condicional
- Estilos y animación del context menu (tema light/dark, blur fuerte)
- Correcciones de sintaxis y posicionamiento exacto al cursor

components/TrackContextMenu.client.vue

@@ -0,0 +1,153 @@
+<template>
+  <Teleport to="body">
+    <transition name="ctx">
+      <div
+        v-if="visible && track"
+        class="context-menu glass"
+        :style="menuStyle"
+        @contextmenu.prevent
+      >
+      <div class="menu-header">
+        <span class="title" :title="track.name">{{ track.name }}</span>
+      </div>
+      <button
+        v-if="!isCached"
+        class="menu-item"
+        @click.stop="onCache"
+      >
+        <Download :size="18" />
+        <span>Guardar offline</span>
+      </button>
+      <button
+        v-else
+        class="menu-item danger"
+        @click.stop="onDelete"
+      >
+        <Trash2 :size="18" />
+        <span>Eliminar de memoria</span>
+      </button>
+      <button class="menu-item" @click.stop="$emit('close')">
+        <X :size="18" />
+        <span>Cerrar</span>
+      </button>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, onMounted, onBeforeUnmount } from 'vue'
+import { Download, Trash2, X } from 'lucide-vue-next'
+
+const props = defineProps({
+  visible: { type: Boolean, default: false },
+  x: { type: Number, default: 0 },
+  y: { type: Number, default: 0 },
+  track: { type: Object, default: null },
+  isCached: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['close', 'cache', 'delete'])
+
+const menuStyle = computed(() => {
+  const offset = 0 // show menu as close as possible
+  const padding = 8
+  const width = 260
+  const height = 140
+  let left = props.x + offset
+  let top = props.y + offset
+  if (typeof window !== 'undefined') {
+    if (left + width + padding > window.innerWidth) {
+      left = Math.max(padding, window.innerWidth - width - padding)
+    }
+    if (top + height + padding > window.innerHeight) {
+      top = Math.max(padding, window.innerHeight - height - padding)
+    }
+  }
+  return { left: left + 'px', top: top + 'px' }
+})
+
+const onCache = () => emit('cache', props.track)
+const onDelete = () => emit('delete', props.track)
+
+const hide = (e) => {
+  // Close when clicking outside
+  emit('close')
+}
+
+onMounted(() => {
+  window.addEventListener('click', hide)
+  window.addEventListener('scroll', hide, true)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('click', hide)
+  window.removeEventListener('scroll', hide, true)
+})
+</script>
+
+<style scoped>
+.context-menu {
+  position: fixed;
+  z-index: 1000;
+  min-width: 240px;
+  max-width: 320px;
+  border-radius: 12px;
+  background: var(--bg-secondary);
+  backdrop-filter: blur(50px);
+  -webkit-backdrop-filter: blur(50px);
+  color: var(--text-primary);
+  border: 1px solid var(--border-glass);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+  overflow: hidden;
+}
+
+/* Appear/disappear animation */
+.ctx-enter-active, .ctx-leave-active {
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+.ctx-enter-from, .ctx-leave-to {
+  opacity: 0;
+  transform: scale(0.98);
+}
+
+.menu-header {
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--border-glass);
+}
+
+.title {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.menu-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.06s ease;
+}
+
+.menu-item:hover {
+  background: var(--bg-glass);
+}
+
+.menu-item:active {
+  transform: scale(0.995);
+}
+
+.menu-item.danger svg,
+.menu-item.danger span {
+  color: #ef4444;
+}
+</style>