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>

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>

components/TrackList.client.vue

@@ -30,17 +30,33 @@
           :is-playing="currentTrack?.name === track.name && isPlaying"
           :is-loading="loadingTrack === track.name"
           :has-error="failedTracks.has(track.name)"
+          :is-cached="isTrackCached(track)"
           @click="handleTrackClick(track, index)"
+          @context="handleContextFromItem"
           class="track-item-wrapper animate-fade-in-up"
         />
       </div>
+      <TrackContextMenu 
+        :visible="showMenu"
+        :x="menuX"
+        :y="menuY"
+        :track="menuTrack"
+        :is-cached="menuTrack ? isTrackCached(menuTrack) : false"
+        @close="closeMenu"
+        @cache="cacheSelected"
+        @delete="deleteSelected"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { Music } from 'lucide-vue-next'
 import TrackListItem from './TrackListItem.client.vue'
+import { useMusicStore } from '~/stores/music'
+import TrackContextMenu from './TrackContextMenu.client.vue'
+import { useToastStore } from '~/stores/toast'
 
 const props = defineProps({
   tracks: {
@@ -78,6 +94,43 @@ const emit = defineEmits(['track-selected'])
 const handleTrackClick = (track, index) => {
   emit('track-selected', { track, index })
 }
+
+const musicStore = useMusicStore()
+const toast = useToastStore()
+const isTrackCached = (track) => musicStore.isCached(track.name)
+
+// Context menu state and handlers
+const showMenu = ref(false)
+const menuX = ref(0)
+const menuY = ref(0)
+const menuTrack = ref(null)
+
+const handleContextFromItem = ({ track, x, y }) => {
+  menuTrack.value = track
+  menuX.value = x
+  menuY.value = y
+  showMenu.value = true
+}
+
+const closeMenu = () => { showMenu.value = false }
+
+const cacheSelected = async () => {
+  if (!menuTrack.value) return
+  const ok = await musicStore.cacheByName(menuTrack.value.name, menuTrack.value.duration)
+  if (ok) {
+    toast.success(`Guardado offline: ${menuTrack.value.name}`)
+  } else {
+    toast.error(`No se pudo guardar: ${menuTrack.value.name}`)
+  }
+  closeMenu()
+}
+
+const deleteSelected = async () => {
+  if (!menuTrack.value) return
+  await musicStore.deleteCachedTrack(menuTrack.value.name)
+  toast.info(`Eliminado de memoria: ${menuTrack.value.name}`)
+  closeMenu()
+}
 </script>
 
 <style scoped>

components/TrackListItem.client.vue

@@ -13,6 +13,7 @@
     @click="handleClick"
     @mouseenter="isHovered = true"
     @mouseleave="isHovered = false"
+    @contextmenu.prevent="handleContext"
   >
     <div class="track-info">
       <p class="track-name">{{ track.name }}</p>
@@ -25,7 +26,7 @@
         <AlertCircle v-if="hasError" class="icon error" :size="18" />
         <Pause v-else-if="isActive && !isPlaying" class="icon paused" :size="18" />
         <Play v-else-if="isActive && isPlaying" class="icon playing" :size="18" />
-        <Music v-else class="icon idle" :size="18" />
+        <Music v-else :class="['icon', 'idle', { cached: isCached }]" :size="18" />
       </div>
     </div>
 
@@ -60,10 +61,14 @@ const props = defineProps({
   hasError: {
     type: Boolean,
     default: false
+  },
+  isCached: {
+    type: Boolean,
+    default: false
   }
 })
 
-const emit = defineEmits(['click'])
+const emit = defineEmits(['click', 'context'])
 
 const isHovered = ref(false)
 
@@ -71,6 +76,10 @@ const handleClick = () => {
   emit('click', props.track)
 }
 
+const handleContext = (event) => {
+  emit('context', { track: props.track, x: event.clientX, y: event.clientY })
+}
+
 const formatTime = (seconds) => {
   if (!seconds || isNaN(seconds)) return '0:00'
   const mins = Math.floor(seconds / 60)
@@ -215,6 +224,10 @@ const formatTime = (seconds) => {
   opacity: 0.9;
 }
 
+.icon.idle.cached {
+  color: #22c55e; /* green-500 */
+}
+
 .loading-spinner {
   width: 20px;
   height: 20px;
@@ -284,4 +297,4 @@ const formatTime = (seconds) => {
     font-size: 1rem;
   }
 }
-</style>
+</style>