From 8e89ffb1410bf52798ce239e4d4b12cbbb60a4cd Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 26 Nov 2025 17:54:28 -0600
Subject: [PATCH] fix: Aumentar ancho del visualizador de papel para mejor
 legibilidad

---
 app/components/preview/PaperSimulator.vue | 48 ++++++++++++++++++++---
 1 file changed, 43 insertions(+), 5 deletions(-)

diff --git a/app/components/preview/PaperSimulator.vue b/app/components/preview/PaperSimulator.vue
index 5da3829..d114548 100644
--- a/app/components/preview/PaperSimulator.vue
+++ b/app/components/preview/PaperSimulator.vue
@@ -11,9 +11,11 @@ const emit = defineEmits<{
   'edit-variable': [variableName: string, currentValue: string]
 }>()
 
-// Ancho del papel según la fuente
+// Ancho del papel según la fuente (agregamos padding extra)
 const paperWidth = computed(() => {
-  return props.font === 'font_b' ? '40ch' : '33ch'
+  // 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
 })
 
 // Obtener clases CSS para una línea
@@ -26,6 +28,9 @@ function getLineClasses(line: PreviewLine): string[] {
   if (line.doubleWidth) classes.push('text-double-width')
   if (line.doubleHeight) classes.push('text-double-height')
 
+  // 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')
@@ -88,7 +93,7 @@ function handleVariableClick(segment: TextSegment) {
   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;
@@ -110,11 +115,33 @@ function handleVariableClick(segment: TextSegment) {
 
 /* Cada línea del ticket */
 .line {
+  display: block;
   white-space: pre; /* Preservar espacios */
   min-height: 1.4em;
   color: #1a1a1a;
 }
 
+/* Font B - caracteres más angostos (40 chars vs 33) */
+.line.font-b {
+  transform: scaleX(0.825);
+  transform-origin: left;
+}
+
+/* Font B con doble ancho */
+.line.font-b.text-double-width {
+  transform: scaleX(1.65); /* 0.825 * 2 */
+}
+
+/* Font B con doble alto */
+.line.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 {
+  transform: scale(1.65, 2);
+}
+
 /* Línea vacía (feed) */
 .line-feed {
   height: 1.4em;
@@ -129,9 +156,20 @@ function handleVariableClick(segment: TextSegment) {
 
 /* Doble alto - escalar verticalmente */
 .text-double-height {
-  transform: scaleY(1.5);
+  display: block;
+  transform: scaleY(2);
   transform-origin: top;
-  line-height: 2;
+  line-height: 1.4;
+  padding-bottom: 1.4em;
+}
+
+/* Doble ancho Y alto combinados */
+.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 */