feat: Version 1.10.0 - Refactorizacion, optimizacion UI y mejoras de seguridad

- Extraccion de helpers en backend: audit_helpers.py, helpers.py
- Modularizacion de schemas en archivos individuales por dominio
- Reduccion de audit.py en 953 lineas (74% del archivo)
- Reduccion de tickets.py en 655 lineas (60% del archivo)
- Expansion de auth.py con recuperacion de contrasenia y tokens
- Nuevos modulos: core/email.py, core/cache.py
- Reorganizacion de scripts a backend/scripts/
- Frontend: refactorizacion de audit page con array-driven components
- Frontend: correccion de 11 errores ortograficos en tickets page
- Frontend: proxy Docker corregido en vite.config.js
- Frontend: nuevas rutas forgot-password, reset-password, organization, profile
- Nuevas utilidades TS: colorUtils.ts, dateFormats.ts
- 5 nuevos archivos de tests unitarios en backend/tests/unit/
- Eliminacion de 3 scripts temporales de prueba
- Documentacion tecnica: CAMBIOS_v1.10.0.md, OPTIMIZACIONES_RENDIMIENTO.md

frontend-client/src/routes/profile/+page.svelte

@@ -19,6 +19,86 @@
   // Tabs management
   let activeTab = 'personal';
 
+  // 2FA management
+  let is2faLoading = false;
+  let show2faSetup = false;
+  let qrUri = '';
+  let totpSetupCode = '';
+  let backupCodes: string[] = [];
+  let showBackupCodes = false;
+  let show2faDisable = false;
+  let disableTotpCode = '';
+
+  async function setup2fa() {
+    is2faLoading = true;
+    try {
+      const response = await fetch('/api/v1/auth/2fa/setup', {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${$auth.token}` }
+      });
+      if (!response.ok) throw new Error((await response.json()).detail);
+      const data = await response.json();
+      qrUri = data.qr_uri;
+      show2faSetup = true;
+      totpSetupCode = '';
+    } catch (e: any) {
+      toast.error(e.message || 'Error al iniciar configuración de 2FA');
+    } finally {
+      is2faLoading = false;
+    }
+  }
+
+  async function enable2fa() {
+    if (!totpSetupCode || totpSetupCode.length !== 6) {
+      toast.error('Ingresa el código de 6 dígitos de tu app autenticadora');
+      return;
+    }
+    is2faLoading = true;
+    try {
+      const response = await fetch('/api/v1/auth/2fa/enable', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${$auth.token}` },
+        body: JSON.stringify({ totp_code: totpSetupCode })
+      });
+      if (!response.ok) throw new Error((await response.json()).detail);
+      const data = await response.json();
+      backupCodes = data.backup_codes;
+      showBackupCodes = true;
+      show2faSetup = false;
+      // Actualizar estado en el store
+      if ($auth.user) auth.updateUser({ ...$auth.user, is_two_factor_enabled: true });
+      toast.success('¡2FA activado correctamente!');
+    } catch (e: any) {
+      toast.error(e.message || 'Código inválido. Verifica tu app autenticadora.');
+    } finally {
+      is2faLoading = false;
+    }
+  }
+
+  async function disable2fa() {
+    if (!disableTotpCode || disableTotpCode.length < 6) {
+      toast.error('Ingresa el código de 6 dígitos para confirmar');
+      return;
+    }
+    is2faLoading = true;
+    try {
+      const response = await fetch('/api/v1/auth/2fa/disable', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${$auth.token}` },
+        body: JSON.stringify({ totp_code: disableTotpCode })
+      });
+      if (!response.ok) throw new Error((await response.json()).detail);
+      show2faDisable = false;
+      disableTotpCode = '';
+      if ($auth.user) auth.updateUser({ ...$auth.user, is_two_factor_enabled: false });
+      toast.success('2FA deshabilitado correctamente');
+    } catch (e: any) {
+      toast.error(e.message || 'Código inválido');
+    } finally {
+      is2faLoading = false;
+    }
+  }
+
   // Business profile data
   let businessProfile = {
     business_name: '',
@@ -306,13 +386,11 @@
 </svelte:head>
 
 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-  <!-- Header -->
   <div class="mb-8">
     <h1 class="text-3xl font-bold text-gray-900">Mi Perfil</h1>
     <p class="text-gray-600 mt-2">Gestiona tu información personal y configuración empresarial</p>
   </div>
 
-  <!-- Tabs Navigation -->
   <div class="border-b border-gray-200 mb-8">
     <nav class="-mb-px flex space-x-8">
       <button
@@ -367,9 +445,7 @@
     </nav>
   </div>
 
-  <!-- Tab Content -->
   <div class="space-y-8">
-    <!-- Personal Information Tab -->
     {#if activeTab === 'personal'}
       <div class="card">
         <div class="card-header">
@@ -450,7 +526,6 @@
       </div>
     {/if}
 
-    <!-- General Business Information Tab -->
     {#if activeTab === 'general'}
       <div class="card">
         <div class="card-header">
@@ -460,7 +535,6 @@
 
         <div class="card-content">
           <form on:submit|preventDefault={handleBusinessProfileSave} class="space-y-6">
-            <!-- Información General -->
             <div class="bg-gray-50 p-4 rounded-lg">
               <h3 class="font-medium text-gray-900 mb-4">Información General</h3>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -538,7 +612,6 @@
               </div>
             </div>
 
-            <!-- Ubicación -->
             <div class="bg-white p-4 rounded-lg border border-gray-200">
               <h3 class="font-medium text-gray-900 mb-4">Ubicación</h3>
               <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -623,7 +696,6 @@
               </div>
             </div>
 
-            <!-- Representantes -->
             <div class="bg-white p-4 rounded-lg border border-gray-200">
               <h3 class="font-medium text-gray-900 mb-4">Representantes</h3>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -653,7 +725,6 @@
               </div>
             </div>
 
-            <!-- Configuración -->
             <div class="bg-white p-4 rounded-lg border border-gray-200">
               <h3 class="font-medium text-gray-900 mb-4">Configuración</h3>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -724,7 +795,6 @@
       </div>
     {/if}
 
-    <!-- Contact Information Tab -->
     {#if activeTab === 'contact'}
       <div class="card">
         <div class="card-header">
@@ -734,7 +804,6 @@
 
         <div class="card-content">
           <form on:submit|preventDefault={handleBusinessProfileSave} class="space-y-6">
-            <!-- Teléfonos -->
             <div class="bg-white p-4 rounded-lg border border-gray-200">
               <h3 class="font-medium text-gray-900 mb-4">Teléfonos</h3>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -791,7 +860,6 @@
               </div>
             </div>
 
-            <!-- Emails -->
             <div class="bg-white p-4 rounded-lg border border-gray-200">
               <h3 class="font-medium text-gray-900 mb-4">Correos Electrónicos</h3>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -823,7 +891,6 @@
               </div>
             </div>
 
-            <!-- Web y Horarios -->
             <div class="bg-white p-4 rounded-lg border border-gray-200">
               <h3 class="font-medium text-gray-900 mb-4">Web y Horarios</h3>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -880,7 +947,6 @@
       </div>
     {/if}
 
-    <!-- Security Tab -->
     {#if activeTab === 'security'}
       <div class="card">
         <div class="card-header">
@@ -889,50 +955,123 @@
         </div>
 
         <div class="card-content space-y-6">
-          <!-- Two-Factor Authentication Status -->
-          <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
-            <div>
-              <h3 class="font-medium text-gray-900">Autenticación de dos factores (2FA)</h3>
-              <p class="text-sm text-gray-600">
-                {$auth.user?.is_two_factor_enabled
-                  ? 'La autenticación de dos factores está habilitada'
-                  : 'Mejora la seguridad habilitando 2FA'}
-              </p>
-            </div>
-            <div>
-              {#if $auth.user?.is_two_factor_enabled}
-                <span
-                  class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800"
-                >
-                  <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M5 13l4 4L19 7"
-                    />
-                  </svg>
-                  Habilitado
-                </span>
-              {:else}
-                <span
-                  class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800"
-                >
-                  <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M6 18L18 6M6 6l12 12"
-                    />
-                  </svg>
-                  Deshabilitado
-                </span>
-              {/if}
+          <div class="border border-gray-200 rounded-lg overflow-hidden">
+            <div class="flex items-center justify-between p-4 bg-gray-50">
+              <div>
+                <h3 class="font-medium text-gray-900">Autenticación de dos factores (2FA)</h3>
+                <p class="text-sm text-gray-600 mt-0.5">
+                  {$auth.user?.is_two_factor_enabled
+                    ? 'Tu cuenta está protegida con autenticación de dos factores'
+                    : 'Añade una capa extra de seguridad a tu cuenta'}
+                </p>
+              </div>
+              <div class="flex items-center gap-3">
+                {#if $auth.user?.is_two_factor_enabled}
+                  <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                    <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+                    Habilitado
+                  </span>
+                  <button
+                    type="button"
+                    class="text-sm text-red-600 hover:text-red-800 font-medium"
+                    on:click={() => { show2faDisable = !show2faDisable; disableTotpCode = ''; }}
+                    disabled={is2faLoading}
+                  >Deshabilitar</button>
+                {:else}
+                  <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
+                    <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                    Deshabilitado
+                  </span>
+                  <button
+                    type="button"
+                    class="text-sm bg-blue-600 text-white px-3 py-1.5 rounded font-medium hover:bg-blue-700 disabled:opacity-50"
+                    on:click={setup2fa}
+                    disabled={is2faLoading}
+                  >
+                    {is2faLoading ? 'Cargando...' : 'Habilitar 2FA'}
+                  </button>
+                {/if}
+              </div>
             </div>
+
+            {#if show2faSetup && qrUri}
+              <div class="p-5 border-t border-gray-200 space-y-4">
+                <p class="text-sm font-medium text-gray-700">1. Escanea este código QR en Google Authenticator, Authy o cualquier app TOTP:</p>
+                <div class="flex justify-center bg-white p-4 border border-gray-200 rounded">
+                  <img src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data={encodeURIComponent(qrUri)}" alt="Código QR 2FA" class="w-44 h-44" />
+                </div>
+                <p class="text-sm font-medium text-gray-700 mt-3">2. Ingresa el código de 6 dígitos para confirmar:</p>
+                <div class="flex gap-3">
+                  <input
+                    type="text"
+                    class="form-input w-40 text-center tracking-widest font-mono text-lg"
+                    placeholder="000000"
+                    maxlength="6"
+                    bind:value={totpSetupCode}
+                  />
+                  <button
+                    type="button"
+                    class="bg-green-600 text-white px-4 py-2 rounded font-medium hover:bg-green-700 disabled:opacity-50"
+                    on:click={enable2fa}
+                    disabled={is2faLoading}
+                  >
+                    {is2faLoading ? 'Verificando...' : 'Confirmar y activar'}
+                  </button>
+                  <button
+                    type="button"
+                    class="text-gray-500 hover:text-gray-700 text-sm font-medium"
+                    on:click={() => { show2faSetup = false; }}
+                  >Cancelar</button>
+                </div>
+              </div>
+            {/if}
+
+            {#if showBackupCodes && backupCodes.length > 0}
+              <div class="p-5 border-t border-green-200 bg-green-50">
+                <h4 class="font-medium text-green-900 mb-2">✅ 2FA activado — Guarda tus códigos de respaldo</h4>
+                <p class="text-sm text-green-700 mb-3">Estos códigos son de un solo uso. Guárdalos en un lugar seguro.</p>
+                <div class="grid grid-cols-2 gap-2 font-mono text-sm">
+                  {#each backupCodes as code}
+                    <span class="bg-white border border-green-200 px-3 py-1.5 rounded text-center">{code}</span>
+                  {/each}
+                </div>
+                <button
+                  type="button"
+                  class="mt-4 text-sm text-green-700 underline"
+                  on:click={() => { showBackupCodes = false; backupCodes = []; }}
+                >He guardado mis códigos</button>
+              </div>
+            {/if}
+
+            {#if show2faDisable}
+              <div class="p-5 border-t border-red-200 bg-red-50">
+                <p class="text-sm font-medium text-red-800 mb-3">Ingresa el código de tu app autenticadora para deshabilitar 2FA:</p>
+                <div class="flex gap-3">
+                  <input
+                    type="text"
+                    class="form-input w-40 text-center tracking-widest font-mono text-lg border-red-300"
+                    placeholder="000000"
+                    maxlength="6"
+                    bind:value={disableTotpCode}
+                  />
+                  <button
+                    type="button"
+                    class="bg-red-600 text-white px-4 py-2 rounded font-medium hover:bg-red-700 disabled:opacity-50"
+                    on:click={disable2fa}
+                    disabled={is2faLoading}
+                  >
+                    {is2faLoading ? 'Verificando...' : 'Confirmar y deshabilitar'}
+                  </button>
+                  <button
+                    type="button"
+                    class="text-gray-500 hover:text-gray-700 text-sm"
+                    on:click={() => { show2faDisable = false; }}
+                  >Cancelar</button>
+                </div>
+              </div>
+            {/if}
           </div>
 
-          <!-- Change Password Form -->
           <form on:submit|preventDefault={handlePasswordChange} class="space-y-6">
             <h3 class="text-lg font-medium text-gray-900">Cambiar Contraseña</h3>
 
@@ -1005,7 +1144,6 @@
       </div>
     {/if}
 
-    <!-- Account Information Tab -->
     {#if activeTab === 'account'}
       <div class="card">
         <div class="card-header">