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/ToastContainer.client.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="toast-container">
+    <transition-group name="toast" tag="div">
+      <div
+        v-for="t in toasts"
+        :key="t.id"
+        class="toast glass"
+        :class="t.type"
+        @click="dismiss(t.id)"
+      >
+        <div class="dot" />
+        <span class="msg">{{ t.message }}</span>
+      </div>
+    </transition-group>
+  </div>
+  
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useToastStore } from '~/stores/toast'
+
+const toast = useToastStore()
+const { toasts } = storeToRefs(toast)
+const dismiss = (id: number) => toast.remove(id)
+</script>
+
+<style scoped>
+.toast-container {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 1100;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  pointer-events: none;
+}
+
+.toast-enter-active, .toast-leave-active {
+  transition: all 250ms ease;
+}
+.toast-enter-from, .toast-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.toast {
+  pointer-events: auto;
+  min-width: 240px;
+  max-width: 360px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: rgba(17, 24, 39, 0.6);
+  color: #fff;
+  border: 1px solid rgba(255,255,255,0.12);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
+}
+
+.glass { /* keep naming consistent with app */
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+.toast .dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 9999px;
+  background: var(--accent-primary);
+}
+
+.toast.success .dot { background: #22c55e; }
+.toast.error .dot { background: #ef4444; }
+.toast.info .dot { background: #60a5fa; }
+
+.msg {
+  line-height: 1.2;
+}
+</style>