Fix borderless FirmaEC rendering and bump to 1.2.22

CHANGELOG.md

@@ -2,10 +2,14 @@
 
 ## Versión actual
 
-- Versión base: `1.2.21`
+- Versión base: `1.2.22`
 
 ## Historial
 
+### 1.2.22 - 2026-05-22
+
+- `FirmaEC` deja de mostrar líneas de borde y separadores cuando la preferencia está en `Sin borde`, tanto al colocar la firma como en el PDF final.
+
 ### 1.2.21 - 2026-05-22
 
 - `FirmaEC` respeta la opción `Sin borde` tanto en la vista previa web como en la firma visible del PDF.

DEPLOY_ANDROID.md

@@ -2,7 +2,7 @@
 
 ## Versión actual
 
-- Base actual: `1.2.21`
+- Base actual: `1.2.22`
 - Fuente de verdad: [VERSION](/home/mgonzalez/desarrollo/react/linkedsign/VERSION)
 - Historial de cambios: [CHANGELOG.md](/home/mgonzalez/desarrollo/react/linkedsign/CHANGELOG.md)
 

DEPLOY_WEB.md

@@ -2,7 +2,7 @@
 
 ## Versión actual
 
-- Base actual: `1.2.21`
+- Base actual: `1.2.22`
 - Fuente de verdad: [VERSION](/home/mgonzalez/desarrollo/react/linkedsign/VERSION)
 - Historial de cambios: [CHANGELOG.md](/home/mgonzalez/desarrollo/react/linkedsign/CHANGELOG.md)
 

PRODUCCION.md

@@ -2,7 +2,7 @@
 
 ## Versión actual
 
-- Base actual: `1.2.21`
+- Base actual: `1.2.22`
 - Fuente de verdad: [VERSION](/home/mgonzalez/desarrollo/react/linkedsign/VERSION)
 - Historial de cambios: [CHANGELOG.md](/home/mgonzalez/desarrollo/react/linkedsign/CHANGELOG.md)
 

VERSION

@@ -1 +1 @@
-1.2.21
+1.2.22

android/app/build.gradle

@@ -18,8 +18,8 @@ android {
         applicationId "net.linkedcorp.linkedsign"
         minSdk 26
         targetSdk 35
-        versionCode 10221
+        versionCode 10222
-        versionName "1.2.21"
+        versionName "1.2.22"
 
         buildConfigField "String", "API_BASE_URL", "\"${apiBaseUrl}\""
     }

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedsign-backend",
-  "version": "1.2.21",
+  "version": "1.2.22",
   "private": true,
   "description": "Initial backend for LinkedSign",
   "main": "src/server.js",

backend/src/modules/signing/signing.service.js

@@ -301,9 +301,11 @@ async function drawStyleFirmaEC(pdfDoc, page, sx, sy, sw, sh, { signerName, veri
   const qrY = sy + (sh - qrSize) / 2;
   page.drawImage(qrImage, { x: qrX, y: qrY, width: qrSize, height: qrSize });
 
-  // Vertical divider
+  // Vertical divider belongs to the bordered variant only.
   const divX = qrOnRight ? qrX - 4 : sx + qrSize + 8;
-  page.drawLine({ start: { x: divX, y: sy + 6 }, end: { x: divX, y: sy + sh - 6 }, thickness: 0.5, color: rgb(0.55, 0.55, 0.58) });
+  if (useBorder) {
+    page.drawLine({ start: { x: divX, y: sy + 6 }, end: { x: divX, y: sy + sh - 6 }, thickness: 0.5, color: rgb(0.55, 0.55, 0.58) });
+  }
 
   // Text column
   const textX = qrOnRight ? sx + 6 : divX + 5;

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "1.2.21",
+  "version": "1.2.22",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/ui/PdfSignaturePlacer.jsx

@@ -13,7 +13,7 @@ const SIG_W = 200;
 const SIG_H = 60;
 
 const getSignatureWidth = (style, signerName = '') => {
-  if (style !== 'qr') return SIG_W;
+  if (style !== 'qr' && style !== 'firmaec') return SIG_W;
   const normalizedName = signerName.trim();
   const calculatedWidth = 78 + (normalizedName.length * 4.9);
   return Math.max(170, Math.min(270, Math.round(calculatedWidth)));
@@ -162,6 +162,34 @@ export default function PdfSignaturePlacer({
       );
     }
 
+    if (signatureStyle === 'firmaec') {
+      return (
+        <div className="sig-preview-body sig-preview-body--firmaec">
+          {qrPosition === 'left' && (
+            <>
+              <div className="sig-preview-qr-box sig-preview-qr-box--firmaec" data-background={qrBackground}>
+                <div className="sig-preview-qr-pattern sig-preview-qr-pattern--firmaec" />
+              </div>
+              {qrBorder === 'line' && <div className="sig-preview-divider" />}
+            </>
+          )}
+          <div className="sig-preview-text sig-preview-text--firmaec">
+            <small>Validar unicamente en FirmaEC.</small>
+            <small>Firmado electronicamente por:</small>
+            <strong>{String(signerName).toUpperCase()}</strong>
+          </div>
+          {qrPosition === 'right' && (
+            <>
+              {qrBorder === 'line' && <div className="sig-preview-divider" />}
+              <div className="sig-preview-qr-box sig-preview-qr-box--firmaec" data-background={qrBackground}>
+                <div className="sig-preview-qr-pattern sig-preview-qr-pattern--firmaec" />
+              </div>
+            </>
+          )}
+        </div>
+      );
+    }
+
     if (signatureStyle === 'image') {
       return (
         <div className="sig-preview-body sig-preview-body--image">

frontend/src/components/ui/SignatureStylePicker.jsx

@@ -54,7 +54,7 @@ const STYLES = [
               </svg>
               <span className="sp-qr-hint">Escanear</span>
             </div>
-            <div className="sp-divider-v" />
+            {qrBorder === 'line' && <div className="sp-divider-v" />}
           </>
         )}
         <div className="sp-info sp-info--qr">
@@ -64,7 +64,7 @@ const STYLES = [
         </div>
         {qrPosition === 'right' && (
           <>
-            <div className="sp-divider-v" />
+            {qrBorder === 'line' && <div className="sp-divider-v" />}
             <div className="sp-qr-box" data-background={qrBackground} data-border={qrBorder}>
               <svg viewBox="0 0 10 10" className="sp-qr-svg" xmlns="http://www.w3.org/2000/svg">
                 {[0,1,2,3,4,5,6,7,8,9].map(r =>
@@ -110,7 +110,7 @@ const STYLES = [
                 <rect x={0} y={7} width={3} height={3} fill="none" stroke="#000" strokeWidth={0.3} />
               </svg>
             </div>
-            <div className="sp-divider-v" />
+            {qrBorder === 'line' && <div className="sp-divider-v" />}
           </>
         )}
         <div className="sp-firmaec-text">
@@ -120,7 +120,7 @@ const STYLES = [
         </div>
         {qrPosition === 'right' && (
           <>
-            <div className="sp-divider-v" />
+            {qrBorder === 'line' && <div className="sp-divider-v" />}
             <div className="sp-qr-box sp-qr-box--firmaec" data-background={qrBackground}>
               <svg viewBox="0 0 10 10" className="sp-qr-svg" xmlns="http://www.w3.org/2000/svg">
                 {[0,1,2,3,4,5,6,7,8,9].map(r =>

frontend/src/index.css

@@ -1917,6 +1917,33 @@ select {
   overflow: hidden;
   font-family: 'Courier New', Courier, monospace;
 }
+.sig-preview-body--firmaec {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 100%;
+}
+.sig-preview-qr-box--firmaec {
+  background: #fff;
+}
+.sig-preview-qr-pattern--firmaec {
+  background:
+    linear-gradient(90deg, #111 20%, transparent 20% 40%, #111 40% 60%, transparent 60% 80%, #111 80%),
+    linear-gradient(#111 20%, transparent 20% 40%, #111 40% 60%, transparent 60% 80%, #111 80%);
+  opacity: 0.9;
+}
+.sig-preview-text--firmaec {
+  font-family: 'Courier New', Courier, monospace;
+  gap: 3px;
+}
+.sig-preview-text--firmaec strong {
+  text-transform: uppercase;
+}
+.sig-preview-divider {
+  width: 1px;
+  height: 70%;
+  background: rgba(85, 85, 88, 0.58);
+}
 .sig-preview--image {
   display: flex;
   align-items: stretch;

frontend/src/pages/signatures/SignaturesPage.jsx

@@ -316,9 +316,9 @@ export default function SignaturesPage() {
                   <h4>Estilo aplicado</h4>
                   <p>La firma usará tu configuración guardada en el menú <strong>Estilo Firma</strong>.</p>
                   <p><strong>Tipo:</strong> {form.signatureStyle}</p>
-                  {form.signatureStyle === 'qr' && <p><strong>Posición QR:</strong> {form.qrPosition === 'left' ? 'Izquierda' : 'Derecha'}</p>}
+                  {(form.signatureStyle === 'qr' || form.signatureStyle === 'firmaec') && <p><strong>Posición QR:</strong> {form.qrPosition === 'left' ? 'Izquierda' : 'Derecha'}</p>}
-                  {form.signatureStyle === 'qr' && <p><strong>Fondo:</strong> {form.qrBackground === 'transparent' ? 'Transparente' : 'Suave'}</p>}
+                  {(form.signatureStyle === 'qr' || form.signatureStyle === 'firmaec') && <p><strong>Fondo:</strong> {form.qrBackground === 'transparent' ? 'Transparente' : 'Suave'}</p>}
-                  {form.signatureStyle === 'qr' && <p><strong>Borde:</strong> {form.qrBorder === 'none' ? 'Sin borde' : 'Con borde'}</p>}
+                  {(form.signatureStyle === 'qr' || form.signatureStyle === 'firmaec') && <p><strong>Borde:</strong> {form.qrBorder === 'none' ? 'Sin borde' : 'Con borde'}</p>}
                 </div>
               </>
             )}
@@ -425,9 +425,9 @@ export default function SignaturesPage() {
                 <p><strong>Razón:</strong> {form.reason}</p>
                 {form.location && <p><strong>Ubicación:</strong> {form.location}</p>}
                 <p><strong>Estilo visual:</strong> {form.signatureStyle}</p>
-                {form.signatureStyle === 'qr' && <p><strong>Posición QR:</strong> {form.qrPosition === 'left' ? 'Izquierda' : 'Derecha'}</p>}
+                {(form.signatureStyle === 'qr' || form.signatureStyle === 'firmaec') && <p><strong>Posición QR:</strong> {form.qrPosition === 'left' ? 'Izquierda' : 'Derecha'}</p>}
-                {form.signatureStyle === 'qr' && <p><strong>Fondo:</strong> {form.qrBackground === 'transparent' ? 'Transparente' : 'Suave'}</p>}
+                {(form.signatureStyle === 'qr' || form.signatureStyle === 'firmaec') && <p><strong>Fondo:</strong> {form.qrBackground === 'transparent' ? 'Transparente' : 'Suave'}</p>}
-                {form.signatureStyle === 'qr' && <p><strong>Borde:</strong> {form.qrBorder === 'none' ? 'Sin borde' : 'Con borde'}</p>}
+                {(form.signatureStyle === 'qr' || form.signatureStyle === 'firmaec') && <p><strong>Borde:</strong> {form.qrBorder === 'none' ? 'Sin borde' : 'Con borde'}</p>}
               </>
             )}
           </div>