style: Reemplazar escala de grises por colores semánticos en auditoría

- 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.

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"
           >

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}