feat: Variables programáticas en templates

Permite definir variables en templates con sintaxis {{nombre🏷️default}}
- Auto-detección de variables al guardar templates
- Drawer para completar valores al cargar template con variables
- Badge mostrando cantidad de variables en tarjeta de template
- Resolución de variables antes de cargar en cola

app/components/templates/TemplateList.vue

@@ -1,21 +1,48 @@
 <script setup lang="ts">
+import type { PrintTemplate } from '~/composables/useTemplates'
+import { resolveVariables } from '~/composables/useTemplates'
+
 const templates = useTemplates()
 const queue = usePrintQueue()
 const toast = useToast()
 
+// Estado para el drawer de variables
+const variablesDrawerOpen = ref(false)
+const selectedTemplate = ref<PrintTemplate | null>(null)
+
 // Cargar templates al montar
 onMounted(() => {
   templates.fetchTemplates()
 })
 
 function loadTemplate(id: string) {
-  const ops = templates.loadTemplate(id)
-  if (ops) {
-    queue.loadFromTemplate(ops)
-    toast.add({ title: 'Template cargado en la cola', color: 'success' })
+  const template = templates.templates.value.find(t => t.id === id)
+  if (!template) return
+
+  // Si tiene variables, abrir el drawer
+  if (template.variables && template.variables.length > 0) {
+    selectedTemplate.value = template
+    variablesDrawerOpen.value = true
+  } else {
+    // Sin variables, cargar directo
+    const ops = templates.loadTemplate(id)
+    if (ops) {
+      queue.loadFromTemplate(ops)
+      toast.add({ title: 'Template cargado en la cola', color: 'success' })
+    }
   }
 }
 
+function handleLoadWithVariables(values: Record<string, string>) {
+  if (!selectedTemplate.value) return
+
+  const ops = resolveVariables(selectedTemplate.value.operations, values)
+  queue.loadFromTemplate(ops)
+  toast.add({ title: 'Template cargado en la cola', color: 'success' })
+  variablesDrawerOpen.value = false
+  selectedTemplate.value = null
+}
+
 async function duplicateTemplate(id: string) {
   const result = await templates.duplicateTemplate(id)
   if (result) {
@@ -72,5 +99,13 @@ async function deleteTemplate(id: string) {
         @delete="deleteTemplate"
       />
     </div>
+
+    <!-- Drawer para completar variables -->
+    <TemplatesVariablesDrawer
+      :template="selectedTemplate"
+      :open="variablesDrawerOpen"
+      @update:open="variablesDrawerOpen = $event"
+      @load="handleLoadWithVariables"
+    />
   </div>
 </template>