Fix FirmaEC stamp preview borderless layout and bump to 1.2.33

frontend/package.json

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

frontend/src/components/ui/PdfSignaturePlacer.jsx

@@ -19,6 +19,14 @@ const getSignatureWidth = (style, signerName = '') => {
   return Math.max(170, Math.min(270, Math.round(calculatedWidth)));
 };
 
+const getFirmaEcPreviewLines = (signerName = '') => {
+  const words = String(signerName).trim().toUpperCase().split(/\s+/).filter(Boolean);
+  if (words.length >= 4) {
+    return [words.slice(0, 2).join(' '), words.slice(2).join(' ')];
+  }
+  return [words.join(' ')];
+};
+
 export default function PdfSignaturePlacer({
   pdfBlob,
   signerName,
@@ -163,6 +171,7 @@ export default function PdfSignaturePlacer({
     }
 
     if (signatureStyle === 'firmaec') {
+      const nameLines = getFirmaEcPreviewLines(signerName);
       return (
         <div className="sig-preview-body sig-preview-body--firmaec">
           {qrPosition === 'left' && (
@@ -176,7 +185,11 @@ export default function PdfSignaturePlacer({
           <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>
+            <strong>
+              {nameLines.map((line, index) => (
+                <span key={`${line}-${index}`}>{line}</span>
+              ))}
+            </strong>
           </div>
           {qrPosition === 'right' && (
             <>
@@ -253,8 +266,8 @@ export default function PdfSignaturePlacer({
           {sigBox && (
             <div
               className={`sig-preview-box sig-preview-box--${signatureStyle}`}
-              data-background={signatureStyle === 'qr' ? qrBackground : undefined}
-              data-border={signatureStyle === 'qr' ? qrBorder : undefined}
+              data-background={signatureStyle === 'qr' || signatureStyle === 'firmaec' ? qrBackground : undefined}
+              data-border={signatureStyle === 'qr' || signatureStyle === 'firmaec' ? qrBorder : undefined}
               style={{ left: sigBox.x, top: sigBox.y, width: signatureWidth, height: SIG_H }}
               onPointerDown={(e) => e.stopPropagation()}
             >

frontend/src/index.css

@@ -1514,6 +1514,18 @@ select {
   border-color: transparent;
   box-shadow: none;
 }
+.sig-preview-box--firmaec {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+.sig-preview-box--firmaec[data-background='soft'] {
+  background: rgba(242, 244, 255, 0.96);
+}
+.sig-preview-box--firmaec[data-border='line'] {
+  border-color: rgba(55, 65, 81, 0.7);
+  box-shadow: 0 2px 8px rgba(31, 41, 55, 0.16);
+}
 .sig-preview-box--qr[data-background='soft'] {
   background: rgba(242, 244, 255, 0.96);
 }
@@ -1948,6 +1960,12 @@ select {
 }
 .sig-preview-text--firmaec strong {
   text-transform: uppercase;
+  display: flex;
+  flex-direction: column;
+  line-height: 1.15;
+}
+.sig-preview-text--firmaec strong span {
+  display: block;
 }
 .sig-preview-divider {
   width: 1px;