fix: Corregir alineación de texto con transforms usando flexbox

- Separar alineación (flexbox en .line) del transform (.line-content)
- Ahora text-align center/right funciona correctamente con font-b y doble tamaño
- Agregar clases align-left, align-center, align-right para el contenedor

app/components/preview/PaperSimulator.vue

@@ -18,7 +18,7 @@ const paperWidth = computed(() => {
   return `calc(${chars}ch + 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[] = []
 
@@ -31,11 +31,6 @@ function getLineClasses(line: PreviewLine): string[] {
   // Fuente (Font B es más angosta)
   if (line.font === 'font_b') classes.push('font-b')
 
-  // Alineación
-  if (line.align === 'center') classes.push('text-center')
-  else if (line.align === 'right') classes.push('text-right')
-  else classes.push('text-left')
-
   return classes
 }
 
@@ -60,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>
 
@@ -113,32 +110,49 @@ function handleVariableClick(segment: TextSegment) {
     );
 }
 
-/* Cada línea del ticket */
+/* Cada línea del ticket - usa flexbox para alineación */
 .line {
-  display: block;
+  display: flex;
-  white-space: pre; /* Preservar espacios */
   min-height: 1.4em;
   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;
+}
+
 /* Font B - caracteres más angostos (40 chars vs 33) */
-.line.font-b {
+.line-content.font-b {
   transform: scaleX(0.825);
-  transform-origin: left;
 }
 
 /* Font B con doble ancho */
-.line.font-b.text-double-width {
+.line-content.font-b.text-double-width {
   transform: scaleX(1.65); /* 0.825 * 2 */
 }
 
 /* Font B con doble alto */
-.line.font-b.text-double-height {
+.line-content.font-b.text-double-height {
   transform: scaleX(0.825) scaleY(2);
 }
 
 /* Font B con doble ancho Y alto */
-.line.font-b.text-double-width.text-double-height {
+.line-content.font-b.text-double-width.text-double-height {
   transform: scale(1.65, 2);
 }
 
@@ -147,38 +161,32 @@ function handleVariableClick(segment: TextSegment) {
   height: 1.4em;
 }
 
-/* Doble ancho - escalar horizontalmente */
+/* Doble ancho - escalar horizontalmente (Font A) */
-.text-double-width {
+.line-content.text-double-width {
   transform: scaleX(2);
-  transform-origin: left;
-  display: inline-block;
 }
 
-/* Doble alto - escalar verticalmente */
+/* Doble alto - escalar verticalmente (Font A) */
-.text-double-height {
+.line-content.text-double-height {
-  display: block;
   transform: scaleY(2);
-  transform-origin: top;
   line-height: 1.4;
   padding-bottom: 1.4em;
 }
 
-/* Doble ancho Y alto combinados */
+/* Doble ancho Y alto combinados (Font A) */
-.text-double-width.text-double-height {
+.line-content.text-double-width.text-double-height {
   transform: scale(2, 2);
-  transform-origin: top left;
-  display: inline-block;
   padding-bottom: 1.4em;
   margin-bottom: 0.5em;
 }
 
 /* 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;