Fix borderless FirmaEC rendering and bump to 1.2.22

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' && <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>Posición QR:</strong> {form.qrPosition === 'left' ? 'Izquierda' : 'Derecha'}</p>}
+                  {(form.signatureStyle === 'qr' || form.signatureStyle === 'firmaec') && <p><strong>Fondo:</strong> {form.qrBackground === 'transparent' ? 'Transparente' : 'Suave'}</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' && <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>Posición QR:</strong> {form.qrPosition === 'left' ? 'Izquierda' : 'Derecha'}</p>}
+                {(form.signatureStyle === 'qr' || form.signatureStyle === 'firmaec') && <p><strong>Fondo:</strong> {form.qrBackground === 'transparent' ? 'Transparente' : 'Suave'}</p>}
+                {(form.signatureStyle === 'qr' || form.signatureStyle === 'firmaec') && <p><strong>Borde:</strong> {form.qrBorder === 'none' ? 'Sin borde' : 'Con borde'}</p>}
               </>
             )}
           </div>