From 0bc4caf65da0a4ec18399161edc73cd62910c7e1 Mon Sep 17 00:00:00 2001
From: icamarillo <icamarillo@aduanasoft.com.mx>
Date: Mon, 16 Feb 2026 12:53:26 -0700
Subject: [PATCH] =?UTF-8?q?style:=20Restaurar=20esquema=20de=20colores=20e?=
 =?UTF-8?q?n=20p=C3=A1ginas=20de=20auditor=C3=ADa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cambiar funciones de color de grayscale a colores semánticos:
  * getActionColor: delete (red), update (blue), login (indigo), create (green)
  * getSeverityColor: critical (red), high (orange), medium (yellow), low (blue)
  * getStatusColor: active (blue), resolved (green), investigating (yellow)
  * getRiskColor: safe (green), low (blue), medium (yellow), high (orange), critical (red)

- Actualizar botones a esquema indigo del proyecto:
  * Botones de período de análisis: bg-indigo-600
  * Paginación: bg-indigo-600 para página actual
  * Botón actualizar: bg-indigo-600
  * Botón ejecutar acción: bg-indigo-600

- Botones de acción con colores apropiados:
  * Bloquear IP: bg-red-600 (acción crítica)
  * Resetear contraseña: bg-orange-600 (acción importante)
  * Notificar admin: bg-blue-600 (acción informativa)

Mantiene consistencia con el estilo visual del proyecto.
---
 .../src/routes/audit/+page.svelte             | 46 +++++++++----------
 .../src/routes/audit/security/+page.svelte    | 38 +++++++--------
 2 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/frontend-internal/src/routes/audit/+page.svelte b/frontend-internal/src/routes/audit/+page.svelte
index c47480e..7ad0613 100644
--- a/frontend-internal/src/routes/audit/+page.svelte
+++ b/frontend-internal/src/routes/audit/+page.svelte
@@ -353,49 +353,49 @@
   }
 
   /**
-   * Obtener color de badge según tipo de acción (solo escala de grises)
+   * Obtener color de badge según tipo de acción
    */
   function getActionColor(action: string): string {
-    if (action.includes('delete')) return 'bg-gray-800 text-white';
-    if (action.includes('update')) return 'bg-gray-600 text-white';
-    if (action.includes('login') || action.includes('logout')) return 'bg-gray-400 text-white';
-    if (action.includes('create')) return 'bg-gray-300 text-gray-800';
-    return 'bg-gray-200 text-gray-700';
+    if (action.includes('delete')) return 'bg-red-600 text-white';
+    if (action.includes('update')) return 'bg-blue-600 text-white';
+    if (action.includes('login') || action.includes('logout')) return 'bg-indigo-600 text-white';
+    if (action.includes('create')) return 'bg-green-600 text-white';
+    return 'bg-gray-600 text-white';
   }
 
   /**
-   * Obtener color de severidad (escala de grises)
+   * Obtener color de severidad
    */
   function getSeverityColor(severity: string): string {
     switch(severity?.toLowerCase()) {
       case 'critical':
-        return 'bg-gray-900 text-white';
+        return 'bg-red-600 text-white';
       case 'high':
-        return 'bg-gray-700 text-white';
+        return 'bg-orange-600 text-white';
       case 'medium':
-        return 'bg-gray-500 text-white';
+        return 'bg-yellow-500 text-white';
       case 'low':
-        return 'bg-gray-300 text-gray-800';
+        return 'bg-blue-600 text-white';
       default:
-        return 'bg-gray-200 text-gray-700';
+        return 'bg-gray-600 text-white';
     }
   }
 
   /**
-   * Obtener color de estado (escala de grises)
+   * Obtener color de estado
    */
   function getStatusColor(status: string): string {
     switch(status?.toLowerCase()) {
       case 'active':
       case 'open':
-        return 'bg-gray-800 text-white';
+        return 'bg-blue-600 text-white';
       case 'resolved':
       case 'closed':
-        return 'bg-gray-400 text-white';
+        return 'bg-green-600 text-white';
       case 'investigating':
-        return 'bg-gray-600 text-white';
+        return 'bg-yellow-500 text-white';
       default:
-        return 'bg-gray-200 text-gray-700';
+        return 'bg-gray-600 text-white';
     }
   }
 
@@ -525,31 +525,31 @@
     <div class="flex flex-wrap gap-2">
       <button
         on:click={() => changePeriod('today')}
-        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'today' ? 'bg-gray-700 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
+        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'today' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
       >
         Hoy
       </button>
       <button
         on:click={() => changePeriod('yesterday')}
-        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'yesterday' ? 'bg-gray-700 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
+        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'yesterday' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
       >
         Ayer
       </button>
       <button
         on:click={() => changePeriod('last7days')}
-        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'last7days' ? 'bg-gray-700 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
+        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'last7days' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
       >
         Últimos 7 días
       </button>
       <button
         on:click={() => changePeriod('last30days')}
-        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'last30days' ? 'bg-gray-700 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
+        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'last30days' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
       >
         Últimos 30 días
       </button>
       <button
         on:click={() => changePeriod('custom')}
-        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'custom' ? 'bg-gray-700 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
+        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'custom' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
       >
         <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
@@ -1115,7 +1115,7 @@
                 {#each Array.from({length: Math.min(5, totalPages)}, (_, i) => i + Math.max(1, Math.min(currentPage - 2, totalPages - 4))) as page}
                   <button
                     on:click={() => goToPage(page)}
-                    class="relative inline-flex items-center px-3 py-1.5 border text-xs font-medium transition-colors {page === currentPage ? 'z-10 bg-gray-700 border-gray-700 text-white' : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'}"
+                    class="relative inline-flex items-center px-3 py-1.5 border text-xs font-medium transition-colors {page === currentPage ? 'z-10 bg-indigo-600 border-indigo-600 text-white' : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'}"
                   >
                     {page}
                   </button>
diff --git a/frontend-internal/src/routes/audit/security/+page.svelte b/frontend-internal/src/routes/audit/security/+page.svelte
index 0397fe3..5f5b075 100644
--- a/frontend-internal/src/routes/audit/security/+page.svelte
+++ b/frontend-internal/src/routes/audit/security/+page.svelte
@@ -44,28 +44,28 @@
   }
 
   /**
-   * Obtener color según nivel de riesgo (escala de grises)
+   * Obtener color según nivel de riesgo
    */
   function getRiskColor(level: string) {
     const colors: any = {
-      safe: 'bg-gray-100 text-gray-800 border-gray-300',
-      low: 'bg-gray-200 text-gray-800 border-gray-400',
-      medium: 'bg-gray-400 text-white border-gray-500',
-      high: 'bg-gray-600 text-white border-gray-700',
-      critical: 'bg-gray-900 text-white border-gray-900'
+      safe: 'bg-green-100 text-green-800 border-green-300',
+      low: 'bg-blue-100 text-blue-800 border-blue-300',
+      medium: 'bg-yellow-100 text-yellow-800 border-yellow-300',
+      high: 'bg-orange-100 text-orange-800 border-orange-300',
+      critical: 'bg-red-100 text-red-800 border-red-300'
     };
     return colors[level] || colors.low;
   }
 
   /**
-   * Obtener color de severidad de amenaza (escala de grises)
+   * Obtener color de severidad de amenaza
    */
   function getSeverityColor(severity: string) {
     const colors: any = {
-      low: 'bg-gray-200 text-gray-800',
-      medium: 'bg-gray-400 text-white',
-      high: 'bg-gray-600 text-white',
-      critical: 'bg-gray-900 text-white'
+      low: 'bg-blue-600 text-white',
+      medium: 'bg-yellow-500 text-white',
+      high: 'bg-orange-600 text-white',
+      critical: 'bg-red-600 text-white'
     };
     return colors[severity] || colors.low;
   }
@@ -190,7 +190,7 @@
       </div>
       <button
         on:click={() => loadSecurityAnalysis()}
-        class="px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500 flex items-center gap-2"
+        class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 flex items-center gap-2"
       >
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
@@ -211,19 +211,19 @@
     <div class="flex flex-wrap gap-2">
       <button
         on:click={() => changeAnalysisPeriod(24)}
-        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 24 ? 'bg-gray-700 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
+        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 24 ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
       >
         Últimas 24 horas
       </button>
       <button
         on:click={() => changeAnalysisPeriod(48)}
-        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 48 ? 'bg-gray-700 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
+        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 48 ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
       >
         Últimas 48 horas
       </button>
       <button
         on:click={() => changeAnalysisPeriod(168)}
-        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 168 ? 'bg-gray-700 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
+        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 168 ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
       >
         Última semana
       </button>
@@ -418,7 +418,7 @@
                 {#if threat.affected_ips.length > 0}
                   <button
                     on:click={() => openActionModal(threat, 'block_ip')}
-                    class="px-3 py-1.5 bg-gray-800 text-white text-sm rounded hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-500 flex items-center gap-1"
+                    class="px-3 py-1.5 bg-red-600 text-white text-sm rounded hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 flex items-center gap-1"
                   >
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
@@ -429,7 +429,7 @@
                 {#if threat.affected_users.length > 0}
                   <button
                     on:click={() => openActionModal(threat, 'force_password_reset')}
-                    class="px-3 py-1.5 bg-gray-600 text-white text-sm rounded hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 flex items-center gap-1"
+                    class="px-3 py-1.5 bg-orange-600 text-white text-sm rounded hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 flex items-center gap-1"
                   >
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
@@ -439,7 +439,7 @@
                 {/if}
                 <button
                   on:click={() => openActionModal(threat, 'notify_admin')}
-                  class="px-3 py-1.5 bg-gray-500 text-white text-sm rounded hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 flex items-center gap-1"
+                  class="px-3 py-1.5 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-1"
                 >
                   <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
@@ -522,7 +522,7 @@
         </button>
         <button
           on:click={executeSecurityAction}
-          class="px-4 py-2 text-sm font-medium text-white bg-gray-700 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500"
+          class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
         >
           Ejecutar Acción
         </button>