refactor(ui): Rediseño completo de UI con Nuxt UI 4

- Nuevo layout responsivo mobile-first con tabs inferiores
- Sidebar colapsable en desktop con cola de impresión
- Sistema de templates reutilizables con localStorage
- Soporte Dark/Light mode con UColorModeButton
- Composables usePrintQueue y useTemplates para estado global
- Componentes modulares: CommandBuilder, QuickActions, PrintQueue, QueueItem
- Navegación por tabs: Constructor | Cola | Templates

app/components/templates/TemplateCard.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { PrintTemplate } from '~/composables/useTemplates'
+
+const props = defineProps<{
+  template: PrintTemplate
+}>()
+
+const emit = defineEmits<{
+  load: [id: string]
+  duplicate: [id: string]
+  delete: [id: string]
+}>()
+
+const menuItems = computed(() => [
+  [
+    {
+      label: 'Duplicar',
+      icon: 'i-heroicons-document-duplicate',
+      click: () => emit('duplicate', props.template.id)
+    }
+  ],
+  [
+    {
+      label: 'Eliminar',
+      icon: 'i-heroicons-trash',
+      color: 'error' as const,
+      click: () => emit('delete', props.template.id)
+    }
+  ]
+])
+
+function formatDate(timestamp: number) {
+  return new Date(timestamp).toLocaleDateString('es-AR', {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric'
+  })
+}
+</script>
+
+<template>
+  <UCard variant="outline" class="hover:border-primary-500 dark:hover:border-primary-400 transition-colors">
+    <div class="flex items-start justify-between gap-2">
+      <div class="min-w-0 flex-1">
+        <h3 class="font-medium text-gray-900 dark:text-white truncate">
+          {{ template.name }}
+        </h3>
+        <p
+          v-if="template.description"
+          class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2 mt-1"
+        >
+          {{ template.description }}
+        </p>
+        <div class="flex items-center gap-2 mt-2">
+          <UBadge variant="subtle" size="xs">
+            {{ template.operations.length }} comandos
+          </UBadge>
+          <span class="text-xs text-gray-400 dark:text-gray-500">
+            {{ formatDate(template.updatedAt) }}
+          </span>
+        </div>
+      </div>
+
+      <UDropdownMenu :items="menuItems">
+        <UButton icon="i-heroicons-ellipsis-vertical" variant="ghost" size="sm" />
+      </UDropdownMenu>
+    </div>
+
+    <template #footer>
+      <UButton
+        icon="i-heroicons-play"
+        color="primary"
+        block
+        @click="$emit('load', template.id)"
+      >
+        Cargar en cola
+      </UButton>
+    </template>
+  </UCard>
+</template>

app/components/templates/TemplateList.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+const templates = useTemplates()
+const queue = usePrintQueue()
+
+function loadTemplate(id: string) {
+  const ops = templates.loadTemplate(id)
+  if (ops) {
+    queue.loadFromTemplate(ops)
+  }
+}
+
+function duplicateTemplate(id: string) {
+  templates.duplicateTemplate(id)
+}
+
+function deleteTemplate(id: string) {
+  templates.deleteTemplate(id)
+}
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center justify-between mb-4">
+      <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+        Templates guardados
+      </h2>
+      <UBadge v-if="templates.templates.value.length > 0" variant="subtle">
+        {{ templates.templates.value.length }}
+      </UBadge>
+    </div>
+
+    <div v-if="templates.templates.value.length === 0" class="text-center py-12">
+      <UIcon name="i-heroicons-document-duplicate" class="w-12 h-12 text-gray-400 dark:text-gray-600 mx-auto mb-3" />
+      <p class="text-gray-500 dark:text-gray-400 mb-2">
+        No hay templates guardados
+      </p>
+      <p class="text-sm text-gray-400 dark:text-gray-500">
+        Crea comandos en el constructor y guárdalos como template desde la cola
+      </p>
+    </div>
+
+    <div v-else class="grid gap-3 sm:grid-cols-2">
+      <TemplatesTemplateCard
+        v-for="template in templates.templates.value"
+        :key="template.id"
+        :template="template"
+        @load="loadTemplate"
+        @duplicate="duplicateTemplate"
+        @delete="deleteTemplate"
+      />
+    </div>
+  </div>
+</template>