From 42a5bb54ccae1bb59292ae6654f7edf66652741e Mon Sep 17 00:00:00 2001
From: icamarillo <icamarillo@aduanasoft.com.mx>
Date: Mon, 16 Feb 2026 13:09:54 -0700
Subject: [PATCH] =?UTF-8?q?style:=20Reemplazar=20escala=20de=20grises=20po?=
 =?UTF-8?q?r=20colores=20sem=C3=A1nticos=20en=20auditor=C3=ADa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Estadísticas de auditoría con colores apropiados:
  * Total: Negro (neutro)
  * Hoy: Azul (actividad actual)
  * Esta Semana: Indigo (período reciente)
  * Incidentes Críticos: Rojo (alerta máxima)

- Estadísticas de seguridad con colores semánticos:
  * Amenazas Detectadas: Rojo (peligro alto)
  * Intentos Fallidos: Naranja (advertencia)
  * IPs Sospechosas: Amarillo (precaución)
  * Acciones Críticas: Rojo (crítico)

- Recomendaciones de seguridad con esquema azul (informativo)

- Actualizado safelist de Tailwind con nuevos colores:
  * text-blue-600, text-indigo-600, text-red-600
  * text-orange-600, text-yellow-600
  * text-*-400 para iconos
  * bg-blue-50, bg-red-50 para fondos
  * hover:text-red-700, hover:bg-red-50

Mejora significativa en la visualización y jerarquía visual de la información.
---
 .../src/routes/audit/+page.svelte             | 10 +++----
 .../src/routes/audit/security/+page.svelte    | 26 +++++++++----------
 frontend-internal/tailwind.config.js          | 16 +++++++++++-
 3 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/frontend-internal/src/routes/audit/+page.svelte b/frontend-internal/src/routes/audit/+page.svelte
index 7ad0613..eaa2cee 100644
--- a/frontend-internal/src/routes/audit/+page.svelte
+++ b/frontend-internal/src/routes/audit/+page.svelte
@@ -629,26 +629,26 @@
       </div>
       <div class="bg-white rounded-lg shadow p-4">
         <div class="text-sm text-gray-500">Hoy</div>
-        <div class="text-2xl font-bold text-gray-600">{stats.actions_today}</div>
+        <div class="text-2xl font-bold text-blue-600">{stats.actions_today}</div>
       </div>
       <div class="bg-white rounded-lg shadow p-4">
         <div class="text-sm text-gray-500">Esta Semana</div>
-        <div class="text-2xl font-bold text-gray-600">{stats.actions_this_week}</div>
+        <div class="text-2xl font-bold text-indigo-600">{stats.actions_this_week}</div>
       </div>
       <div class="bg-white rounded-lg shadow p-4 hover:shadow-md transition-shadow">
         <div class="flex items-center gap-2 mb-1">
-          <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
           </svg>
           <div class="text-sm text-gray-500">Incidentes Criticos</div>
         </div>
         <div class="flex items-center justify-between">
-          <div class="text-2xl font-bold text-gray-800">
+          <div class="text-2xl font-bold text-red-600">
             {stats.critical_actions_today || 0}
           </div>
           <button 
             type="button"
-            class="text-xs text-gray-600 hover:text-gray-800 font-medium flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 transition-colors"
+            class="text-xs text-red-600 hover:text-red-700 font-medium flex items-center gap-1 px-2 py-1 rounded hover:bg-red-50 transition-colors"
             on:click={() => filterCriticalActions()}
             title="Ver incidentes críticos"
           >
diff --git a/frontend-internal/src/routes/audit/security/+page.svelte b/frontend-internal/src/routes/audit/security/+page.svelte
index 5f5b075..a7210e4 100644
--- a/frontend-internal/src/routes/audit/security/+page.svelte
+++ b/frontend-internal/src/routes/audit/security/+page.svelte
@@ -257,9 +257,9 @@
         <div class="flex items-center justify-between">
           <div>
             <p class="text-sm text-gray-500">Amenazas Detectadas</p>
-            <p class="text-2xl font-bold text-gray-800">{analysis.total_threats_detected}</p>
+            <p class="text-2xl font-bold text-red-600">{analysis.total_threats_detected}</p>
           </div>
-          <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="w-10 h-10 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
           </svg>
         </div>
@@ -269,9 +269,9 @@
         <div class="flex items-center justify-between">
           <div>
             <p class="text-sm text-gray-500">Intentos Fallidos</p>
-            <p class="text-2xl font-bold text-gray-700">{analysis.failed_login_attempts}</p>
+            <p class="text-2xl font-bold text-orange-600">{analysis.failed_login_attempts}</p>
           </div>
-          <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="w-10 h-10 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
           </svg>
         </div>
@@ -281,9 +281,9 @@
         <div class="flex items-center justify-between">
           <div>
             <p class="text-sm text-gray-500">IPs Sospechosas</p>
-            <p class="text-2xl font-bold text-gray-700">{analysis.suspicious_ips_count}</p>
+            <p class="text-2xl font-bold text-yellow-600">{analysis.suspicious_ips_count}</p>
           </div>
-          <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="w-10 h-10 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
           </svg>
         </div>
@@ -293,9 +293,9 @@
         <div class="flex items-center justify-between">
           <div>
             <p class="text-sm text-gray-500">Acciones Críticas</p>
-            <p class="text-2xl font-bold text-gray-700">{analysis.critical_actions_count}</p>
+            <p class="text-2xl font-bold text-red-600">{analysis.critical_actions_count}</p>
           </div>
-          <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="w-10 h-10 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
           </svg>
         </div>
@@ -304,17 +304,17 @@
 
     <!-- Recomendaciones Generales -->
     {#if analysis.recommended_actions && analysis.recommended_actions.length > 0}
-      <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-6">
+      <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
         <div class="flex items-start gap-3">
-          <svg class="w-6 h-6 text-gray-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
           </svg>
           <div class="flex-1">
-            <h4 class="text-sm font-semibold text-gray-900 mb-2">Acciones Recomendadas</h4>
+            <h4 class="text-sm font-semibold text-blue-900 mb-2">Acciones Recomendadas</h4>
             <ul class="space-y-1">
               {#each analysis.recommended_actions as action}
-                <li class="text-sm text-gray-700 flex items-start gap-2">
-                  <svg class="w-4 h-4 text-gray-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <li class="text-sm text-blue-800 flex items-start gap-2">
+                  <svg class="w-4 h-4 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                   </svg>
                   {action}
diff --git a/frontend-internal/tailwind.config.js b/frontend-internal/tailwind.config.js
index d2e21fb..8157ea6 100644
--- a/frontend-internal/tailwind.config.js
+++ b/frontend-internal/tailwind.config.js
@@ -9,8 +9,10 @@ export default {
 		'bg-indigo-600',
 		'bg-orange-600',
 		'bg-yellow-500',
+		'bg-yellow-600',
 		'bg-gray-600',
 		// Colores de severidad/riesgo
+		'bg-red-50',
 		'bg-red-100',
 		'bg-red-800',
 		'bg-orange-100',
@@ -21,6 +23,7 @@ export default {
 		'bg-yellow-100',
 		'bg-yellow-300',
 		'bg-yellow-800',
+		'bg-blue-50',
 		'bg-blue-100',
 		'bg-blue-300',
 		'bg-blue-800',
@@ -29,27 +32,38 @@ export default {
 		'bg-green-800',
 		// Bordes
 		'border-red-300',
+		'border-blue-200',
 		'border-orange-300',
 		'border-yellow-300',
 		'border-blue-300',
 		'border-green-300',
 		// Text colors
+		'text-red-400',
 		'text-red-600',
+		'text-red-700',
 		'text-red-800',
+		'text-orange-400',
 		'text-orange-600',
 		'text-orange-800',
+		'text-yellow-400',
+		'text-yellow-600',
 		'text-yellow-800',
+		'text-blue-400',
 		'text-blue-600',
 		'text-blue-800',
+		'text-blue-900',
 		'text-green-600',
 		'text-green-800',
+		'text-indigo-600',
 		'text-white',
 		// Hover states
+		'hover:bg-red-50',
 		'hover:bg-red-700',
 		'hover:bg-orange-700',
 		'hover:bg-blue-700',
-		'hover:bg-indigo-700',
 		'hover:bg-indigo-50',
+		'hover:bg-indigo-700',
+		'hover:text-red-700',
 		// Focus rings
 		'focus:ring-red-500',
 		'focus:ring-orange-500',