Hide advanced signing options by default

frontend/src/index.css

@@ -1059,6 +1059,13 @@ select {
   justify-content: center;
 }
 
+.btn-inline-toggle {
+  width: fit-content;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .sign-form-card form { display: flex; flex-direction: column; gap: 14px; }
 
 .sign-info-panel { display: flex; flex-direction: column; gap: 14px; }
@@ -2314,6 +2321,11 @@ select {
     flex: 1;
   }
 
+  .btn-inline-toggle {
+    width: 100%;
+    justify-content: center;
+  }
+
   .steps-bar {
     flex-direction: column;
     align-items: stretch;

frontend/src/pages/signatures/SignaturesPage.jsx

@@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom';
 import { listDocuments, downloadDocument, uploadDocument } from '../../api/documents';
 import { listCertificates } from '../../api/certificates';
 import { signDocument, getSignatures, downloadSigned } from '../../api/signatures';
-import { PenTool, FileText, Shield, CheckCircle, MapPin, Download, Check, Plus } from 'lucide-react';
+import { PenTool, FileText, Shield, CheckCircle, MapPin, Download, Check, Plus, Eye, EyeOff } from 'lucide-react';
 import toast from 'react-hot-toast';
 import PasswordModal from '../../components/ui/PasswordModal';
 import PdfSignaturePlacer from '../../components/ui/PdfSignaturePlacer';
@@ -40,6 +40,7 @@ export default function SignaturesPage() {
   const [pendingSign, setPendingSign] = useState(null);
   const [uploadingDocument, setUploadingDocument] = useState(false);
   const [pendingLocalDocument, setPendingLocalDocument] = useState(null);
+  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
   const documentInputRef = useRef(null);
 
   useEffect(() => {
@@ -293,22 +294,34 @@ export default function SignaturesPage() {
               </select>
               {certs.length === 0 && <small className="field-hint">No tienes certificados activos.</small>}
             </div>
-            <div className="field">
-              <label>Razón de firma</label>
-              <input type="text" name="reason" value={form.reason} onChange={handleChange} />
-            </div>
-            <div className="field">
-              <label>Ubicación</label>
-              <input type="text" name="location" value={form.location} onChange={handleChange} placeholder="Ciudad, País..." />
-            </div>
-            <div className="info-box">
-              <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>}
-            </div>
+            <button
+              type="button"
+              className="btn btn-ghost btn-inline-toggle"
+              onClick={() => setShowAdvancedOptions((current) => !current)}
+            >
+              {showAdvancedOptions ? <EyeOff size={16} /> : <Eye size={16} />}
+              {showAdvancedOptions ? 'Ocultar detalles' : 'Mostrar detalles'}
+            </button>
+            {showAdvancedOptions && (
+              <>
+                <div className="field">
+                  <label>Razón de firma</label>
+                  <input type="text" name="reason" value={form.reason} onChange={handleChange} />
+                </div>
+                <div className="field">
+                  <label>Ubicación</label>
+                  <input type="text" name="location" value={form.location} onChange={handleChange} placeholder="Ciudad, País..." />
+                </div>
+                <div className="info-box">
+                  <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>}
+                </div>
+              </>
+            )}
             <button className="btn btn-primary btn-full" onClick={handleGoToPlace}>
               <MapPin size={16} /> Elegir posición de firma →
             </button>
@@ -372,7 +385,7 @@ export default function SignaturesPage() {
           <div className="step-nav">
             <button className="btn btn-ghost" onClick={() => setStep(0)}>← Volver</button>
             <p className="step-desc">
-              Haz clic donde quieres que aparezca la firma en <strong>{selectedDoc?.title}</strong>
+              Haz clic donde quieres que aparezca la firma en <strong>{selectedDocumentTitle}</strong>
             </p>
           </div>
           <PdfSignaturePlacer
@@ -396,15 +409,27 @@ export default function SignaturesPage() {
             <h3>Posición confirmada — listo para firmar</h3>
           </div>
           <div className="sign-confirm-details">
-            <p><strong>Documento:</strong> {selectedDoc?.title}</p>
+            <p><strong>Documento:</strong> {selectedDocumentTitle}</p>
             <p><strong>Certificado:</strong> {selectedCert?.alias}</p>
-            <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>}
             <p><strong>Página:</strong> {(sigPlacement?.page ?? 0) + 1}</p>
+            <button
+              type="button"
+              className="btn btn-ghost btn-inline-toggle"
+              onClick={() => setShowAdvancedOptions((current) => !current)}
+            >
+              {showAdvancedOptions ? <EyeOff size={16} /> : <Eye size={16} />}
+              {showAdvancedOptions ? 'Ocultar detalles' : 'Mostrar detalles'}
+            </button>
+            {showAdvancedOptions && (
+              <>
+                <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>}
+              </>
+            )}
           </div>
           <div className="sign-confirm-actions">
             <button className="btn btn-ghost" onClick={() => setStep(1)}>← Cambiar posición</button>