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>