From 5a0da4d14901cb5406683d90aeeb8331ff305930 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 26 Nov 2025 20:38:00 -0600
Subject: [PATCH] =?UTF-8?q?fix:=20Corregir=20alineaci=C3=B3n=20y=20espacia?=
 =?UTF-8?q?do=20en=20visualizador=20de=20papel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 | 114 +++++++++++++---------
 1 file changed, 70 insertions(+), 44 deletions(-)

diff --git a/app/components/preview/PaperSimulator.vue b/app/components/preview/PaperSimulator.vue
index 2701668..6b3697d 100644
--- a/app/components/preview/PaperSimulator.vue
+++ b/app/components/preview/PaperSimulator.vue
@@ -11,11 +11,11 @@ const emit = defineEmits<{
   'edit-variable': [variableName: string, currentValue: string]
 }>()
 
-// Ancho del papel según la fuente (agregamos padding extra)
+// 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(() => {
-  // Usamos calc para agregar espacio para el padding interno + margen para doble ancho
-  const chars = props.font === 'font_b' ? 40 : 33
-  return `calc(${chars}ch + 80px)` // 40px padding cada lado para acomodar doble ancho
+  // 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 el contenido de una línea (sin alineación, eso va en el padre)
@@ -86,7 +86,7 @@ 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;
@@ -113,7 +113,7 @@ function handleVariableClick(segment: TextSegment) {
 /* Cada línea del ticket - usa flexbox para alineación */
 .line {
   display: flex;
-  min-height: 1.4em;
+  min-height: 1.2em;
   color: #1a1a1a;
 }
 
@@ -136,56 +136,82 @@ function handleVariableClick(segment: TextSegment) {
   display: inline-block;
 }
 
-/* Font B - caracteres más angostos (40 chars vs 33) */
-.line-content.font-b {
-  transform: scaleX(0.825);
-}
+/* ========================================
+   TRANSFORMS BASE (sin considerar alineación)
+   ======================================== */
 
-/* Font B con doble ancho */
-.line-content.font-b.text-double-width {
-  transform: scaleX(1.65); /* 0.825 * 2 */
-}
+/* Font A - Normal (sin transform) */
+/* Font A es la referencia base, no necesita scaling */
 
-/* Font B con doble alto */
-.line-content.font-b.text-double-height {
-  transform: scaleX(0.825) scaleY(2);
-}
-
-/* Font B con doble ancho Y alto */
-.line-content.font-b.text-double-width.text-double-height {
-  transform: scale(1.65, 2);
-}
-
-/* Transform origin para líneas centradas - permite que scale funcione correctamente con flexbox center */
-.align-center .line-content.font-b.text-double-width,
-.align-center .line-content.font-b.text-double-height,
-.align-center .line-content.font-b.text-double-width.text-double-height,
-.align-center .line-content.text-double-width,
-.align-center .line-content.text-double-height,
-.align-center .line-content.text-double-width.text-double-height {
-  transform-origin: center;
-}
-
-/* Línea vacía (feed) */
-.line-feed {
-  height: 1.4em;
-}
-
-/* Doble ancho - escalar horizontalmente (Font A) */
+/* Font A - Doble ancho */
 .line-content.text-double-width {
   transform: scaleX(2);
 }
 
-/* Doble alto - escalar verticalmente (Font A) */
+/* Font A - Doble alto */
 .line-content.text-double-height {
   transform: scaleY(2);
-  transform-origin: top;
 }
 
-/* Doble ancho Y alto combinados (Font A) */
+/* Font A - Doble ancho Y alto */
 .line-content.text-double-width.text-double-height {
   transform: scale(2, 2);
-  transform-origin: top left;
+}
+
+/* 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.2em;
 }
 
 /* Línea que excede el límite */