feat: Agregar widget de chat del asistente printerCentral

- Fijar ancho del papel a 33ch (referencia Font A)
- Agregar transform-origin basado en alineación (left/center/right)
- Reducir interlineado (line-height 1.2, margins ajustados)
- Compensar altura visual de elementos con doble alto

app/components/preview/PaperSimulator.vue

@@ -11,12 +11,14 @@ const emit = defineEmits<{
   'edit-variable': [variableName: string, currentValue: string]
 }>()
 
-// Ancho del papel según la fuente
+// Ancho del papel FIJO basado en Font A (33ch) como referencia
+// Font B se escala para caber en el mismo ancho físico
 const paperWidth = computed(() => {
-  return props.font === 'font_b' ? '40ch' : '33ch'
+  // Siempre usamos 33ch (Font A) como referencia para mantener alineaciones consistentes
+  return `calc(33ch + 80px)` // 40px padding cada lado para acomodar doble ancho
 })
 
-// Obtener clases CSS para una línea
+// Obtener clases CSS para el contenido de una línea (sin alineación, eso va en el padre)
 function getLineClasses(line: PreviewLine): string[] {
   const classes: string[] = []
 
@@ -26,10 +28,8 @@ function getLineClasses(line: PreviewLine): string[] {
   if (line.doubleWidth) classes.push('text-double-width')
   if (line.doubleHeight) classes.push('text-double-height')
 
-  // Alineación
+  // Fuente (Font B es más angosta)
-  if (line.align === 'center') classes.push('text-center')
+  if (line.font === 'font_b') classes.push('font-b')
-  else if (line.align === 'right') classes.push('text-right')
-  else classes.push('text-left')
 
   return classes
 }
@@ -55,20 +55,22 @@ function handleVariableClick(segment: TextSegment) {
       <div
         v-else
         class="line"
-        :class="getLineClasses(line)"
+        :class="'align-' + line.align"
       >
-        <template v-for="(segment, segIndex) in line.segments" :key="segIndex">
+        <span class="line-content" :class="getLineClasses(line)">
-          <!-- Segmento de variable (clickeable) -->
+          <template v-for="(segment, segIndex) in line.segments" :key="segIndex">
-          <span
+            <!-- Segmento de variable (clickeable) -->
-            v-if="segment.type === 'variable'"
+            <span
-            class="variable"
+              v-if="segment.type === 'variable'"
-            @click="handleVariableClick(segment)"
+              class="variable"
-            :title="`Variable: ${segment.variableName} (click para editar)`"
+              @click="handleVariableClick(segment)"
-          >{{ segment.content }}</span>
+              :title="`Variable: ${segment.variableName} (click para editar)`"
+            >{{ segment.content }}</span>
 
-          <!-- Segmento de texto normal -->
+            <!-- Segmento de texto normal -->
-          <span v-else>{{ segment.content }}</span>
+            <span v-else>{{ segment.content }}</span>
-        </template>
+          </template>
+        </span>
       </div>
     </template>
 
@@ -84,11 +86,11 @@ function handleVariableClick(segment: TextSegment) {
 .paper-simulator {
   font-family: 'Courier New', Courier, monospace;
   font-size: 14px;
-  line-height: 1.4;
+  line-height: 1.2;
   background: linear-gradient(to bottom, #fefefe 0%, #f8f8f8 100%);
   border: 1px solid #ddd;
   border-radius: 4px;
-  padding: 16px;
+  padding: 20px 40px;
   min-height: 200px;
   max-height: 400px;
   overflow-y: auto;
@@ -108,39 +110,117 @@ function handleVariableClick(segment: TextSegment) {
     );
 }
 
-/* Cada línea del ticket */
+/* Cada línea del ticket - usa flexbox para alineación */
 .line {
-  white-space: pre; /* Preservar espacios */
+  display: flex;
-  min-height: 1.4em;
+  min-height: 1.2em;
   color: #1a1a1a;
 }
 
+/* Alineación usando flexbox (permite que transforms funcionen correctamente) */
+.align-left {
+  justify-content: flex-start;
+}
+
+.align-center {
+  justify-content: center;
+}
+
+.align-right {
+  justify-content: flex-end;
+}
+
+/* Contenido de la línea */
+.line-content {
+  white-space: pre;
+  display: inline-block;
+}
+
+/* ========================================
+   TRANSFORMS BASE (sin considerar alineación)
+   ======================================== */
+
+/* Font A - Normal (sin transform) */
+/* Font A es la referencia base, no necesita scaling */
+
+/* Font A - Doble ancho */
+.line-content.text-double-width {
+  transform: scaleX(2);
+}
+
+/* Font A - Doble alto */
+.line-content.text-double-height {
+  transform: scaleY(2);
+}
+
+/* Font A - Doble ancho Y alto */
+.line-content.text-double-width.text-double-height {
+  transform: scale(2, 2);
+}
+
+/* Font B - Normal (33/40 = 0.825 para caber en mismo ancho de papel) */
+.line-content.font-b {
+  transform: scaleX(0.825);
+}
+
+/* Font B - Doble ancho (0.825 * 2 = 1.65) */
+.line-content.font-b.text-double-width {
+  transform: scaleX(1.65);
+}
+
+/* Font B - Doble alto */
+.line-content.font-b.text-double-height {
+  transform: scaleX(0.825) scaleY(2);
+}
+
+/* Font B - Doble ancho Y alto */
+.line-content.font-b.text-double-width.text-double-height {
+  transform: scale(1.65, 2);
+}
+
+/* ========================================
+   TRANSFORM-ORIGIN SEGÚN ALINEACIÓN
+   Para que el punto de anclaje sea consistente
+   ======================================== */
+
+/* IZQUIERDA: el texto se ancla a la izquierda */
+.align-left .line-content {
+  transform-origin: left top;
+}
+
+/* CENTRO: el texto se ancla al centro */
+.align-center .line-content {
+  transform-origin: center top;
+}
+
+/* DERECHA: el texto se ancla a la derecha */
+.align-right .line-content {
+  transform-origin: right top;
+}
+
+/* ========================================
+   COMPENSACIÓN DE ALTURA PARA DOBLE ALTO
+   El scaleY(2) expande visualmente pero no afecta layout,
+   agregamos margen para compensar el espacio extra
+   ======================================== */
+
+/* Doble alto ocupa 2x el espacio vertical */
+.line-content.text-double-height {
+  margin-bottom: 0.6em; /* Espacio reducido para doble alto */
+}
+
 /* Línea vacía (feed) */
 .line-feed {
-  height: 1.4em;
+  height: 1.2em;
-}
-
-/* Doble ancho - escalar horizontalmente */
-.text-double-width {
-  transform: scaleX(2);
-  transform-origin: left;
-  display: inline-block;
-}
-
-/* Doble alto - escalar verticalmente */
-.text-double-height {
-  transform: scaleY(1.5);
-  transform-origin: top;
-  line-height: 2;
 }
 
 /* Línea que excede el límite */
-.line-exceeds {
+.line-content.line-exceeds {
   background: rgba(239, 68, 68, 0.15);
   position: relative;
 }
 
-.line-exceeds::after {
+.line-content.line-exceeds::after {
   content: '⚠';
   position: absolute;
   right: -20px;

app/plugins/agents-widget.client.ts

@@ -0,0 +1,44 @@
+export default defineNuxtPlugin(() => {
+  const createWidget = () => {
+    // Verificar que el custom element esté registrado
+    if (!customElements.get('chat-widget')) {
+      setTimeout(createWidget, 100)
+      return
+    }
+
+    // Verificar que no exista ya
+    if (document.querySelector('.floating-widget')) {
+      return
+    }
+
+    // Crear contenedor flotante
+    const container = document.createElement('div')
+    container.className = 'floating-widget'
+    container.style.cssText = `
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      z-index: 9999;
+    `
+
+    // Crear el widget
+    const widget = document.createElement('chat-widget')
+    widget.setAttribute('api-url', 'https://gamdias.nucleoriofrio.com')
+    widget.setAttribute('agent-id', '808d524b-fc61-4f16-b7aa-a34ef4e7fe1b')
+    widget.setAttribute('app-id', 'printerCentral-app')
+    widget.setAttribute('user-id', 'printerCentral-user')
+    widget.setAttribute('title', 'Asistente printerCentral')
+
+    // Aplicar color primario de printerCentral via CSS variable
+    widget.style.setProperty('--chat-primary', '#3f75d2')
+
+    container.appendChild(widget)
+    document.body.appendChild(container)
+  }
+
+  if (document.readyState === 'complete') {
+    setTimeout(createWidget, 100)
+  } else {
+    window.addEventListener('load', () => setTimeout(createWidget, 100))
+  }
+})

nuxt.config.ts

@@ -28,6 +28,9 @@ export default defineNuxtConfig({
         { name: 'apple-mobile-web-app-capable', content: 'yes' },
         { name: 'mobile-web-app-capable', content: 'yes' },
         { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' }
+      ],
+      script: [
+        { src: 'https://gamdias.nucleoriofrio.com/widget.js', defer: true }
       ]
     }
   },