Mejora UI de página de auditoría

- Por defecto muestra solo logs del día actual
- Agregado selector de período rápido (Hoy, Ayer, 7 días, 30 días, Personalizado)
- Filtros avanzados colapsables para mejor UX
- Interfaz más limpia y organizada
- Formato de fechas mejorado (hora corta para hoy)
- Estadísticas visuales mejoradas
- Tabla simplificada con información esencial
- Modal de detalles mantiene toda la información completa

frontend-internal/src/routes/audit/+page.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts">
   import { onMount } from 'svelte';
   import { api } from '$lib/utils/api';
   import { toast } from '$lib/stores/toast';
@@ -12,40 +12,98 @@
   let selectedLog = null;
   let showDetailModal = false;
 
-  // Paginaci├│n
+  // Paginación
   let currentPage = 1;
   let totalPages = 1;
   let totalLogs = 0;
   const perPage = 20;
 
-  // Filtros
+  // Filtros básicos
   let filterUserId = '';
   let filterAction = '';
   let filterResourceType = '';
-  let filterDateFrom = '';
-  let filterDateTo = '';
   let searchText = '';
   
-  // Contador de filtros activos
-  $: activeFiltersCount = [filterUserId, filterAction, filterResourceType, filterDateFrom, filterDateTo, searchText].filter(f => f && f.trim()).length;
+  // Filtro de período
+  let periodFilter: 'today' | 'yesterday' | 'last7days' | 'last30days' | 'custom' = 'today';
+  let customDateFrom = '';
+  let customDateTo = '';
   
-  // Tipos de acciones y recursos (extraídos de los logs)
+  // Control de visibilidad de filtros avanzados
+  let showAdvancedFilters = false;
+
+  // Contador de filtros activos (excluyendo el período que es por defecto)
+  $: activeFiltersCount = [filterUserId, filterAction, filterResourceType, searchText].filter(f => f && f.trim()).length;
+
+  // Tipos de acciones y recursos (extraídos de los logs)
   let availableActions = new Set<string>();
   let availableResourceTypes = new Set<string>();
 
   /**
-   * Cargar estadísticas de auditoría
+   * Obtener fechas según el período seleccionado
+   */
+  function getDateRangeForPeriod(): { from: string; to: string } {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    
+    let from: Date;
+    let to: Date = new Date();
+    
+    switch (periodFilter) {
+      case 'today':
+        from = new Date(today);
+        break;
+      case 'yesterday':
+        from = new Date(today);
+        from.setDate(from.getDate() - 1);
+        to = new Date(today);
+        to.setSeconds(to.getSeconds() - 1);
+        break;
+      case 'last7days':
+        from = new Date(today);
+        from.setDate(from.getDate() - 7);
+        break;
+      case 'last30days':
+        from = new Date(today);
+        from.setDate(from.getDate() - 30);
+        break;
+      case 'custom':
+        return {
+          from: customDateFrom,
+          to: customDateTo
+        };
+      default:
+        from = new Date(today);
+    }
+    
+    return {
+      from: from.toISOString().split('T')[0],
+      to: to.toISOString().split('T')[0]
+    };
+  }
+
+  /**
+   * Cambiar período y actualizar datos
+   */
+  function changePeriod(period: typeof periodFilter) {
+    periodFilter = period;
+    currentPage = 1;
+    loadLogs();
+  }
+
+  /**
+   * Cargar estadísticas de auditoría
    */
   async function loadStats() {
     try {
       stats = await api.get('/audit/stats');
     } catch (e) {
-      console.error('Error cargando estadísticas:', e);
+      console.error('Error cargando estadísticas:', e);
     }
   }
 
   /**
-   * Cargar logs de auditoría con filtros
+   * Cargar logs de auditoría con filtros
    */
   async function loadLogs() {
     isLoading = true;
@@ -55,11 +113,15 @@
         per_page: perPage
       };
 
+      // Aplicar rango de fechas según período
+      const dateRange = getDateRangeForPeriod();
+      if (dateRange.from) params.date_from = dateRange.from;
+      if (dateRange.to) params.date_to = dateRange.to;
+
+      // Aplicar filtros adicionales
       if (filterUserId) params.user_id = filterUserId;
       if (filterAction) params.action = filterAction;
       if (filterResourceType) params.resource_type = filterResourceType;
-      if (filterDateFrom) params.date_from = filterDateFrom;
-      if (filterDateTo) params.date_to = filterDateTo;
       if (searchText) params.search = searchText;
 
       const response = await api.get('/audit/', params);
@@ -69,7 +131,7 @@
       totalPages = response.total_pages;
       currentPage = response.page;
 
-      // Extraer acciones y tipos de recursos ├║nicos para los selectores
+      // Extraer acciones y tipos de recursos únicos para los selectores
       logs.forEach((log: any) => {
         availableActions.add(log.action);
         availableResourceTypes.add(log.resource_type);
@@ -98,7 +160,7 @@
   }
 
   /**
-   * Aplicar filtros y recargar desde página 1
+   * Aplicar filtros y recargar desde página 1
    */
   function applyFilters() {
     currentPage = 1;
@@ -106,21 +168,19 @@
   }
 
   /**
-   * Limpiar todos los filtros
+   * Limpiar todos los filtros (excepto el período)
    */
   function clearFilters() {
     filterUserId = '';
     filterAction = '';
     filterResourceType = '';
-    filterDateFrom = '';
-    filterDateTo = '';
     searchText = '';
     currentPage = 1;
     loadLogs();
   }
 
   /**
-   * Cambiar página
+   * Cambiar página
    */
   function goToPage(page: number) {
     if (page >= 1 && page <= totalPages) {
@@ -152,7 +212,30 @@
   }
 
   /**
-   * Obtener color de badge seg├║n tipo de acci├│n
+   * Formatear fecha corta (solo hora para hoy)
+   */
+  function formatDateShort(dateString: string): string {
+    const date = new Date(dateString);
+    const today = new Date();
+    const isToday = date.toDateString() === today.toDateString();
+    
+    if (isToday) {
+      return date.toLocaleTimeString('es-MX', {
+        hour: '2-digit',
+        minute: '2-digit'
+      });
+    }
+    
+    return date.toLocaleDateString('es-MX', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  }
+
+  /**
+   * Obtener color de badge según tipo de acción
    */
   function getActionColor(action: string): string {
     if (action.includes('login')) return 'bg-green-100 text-green-800';
@@ -165,44 +248,42 @@
   }
 
   /**
-   * Formatear acci├│n con informaci├│n del rol del usuario
+   * Formatear acción de forma legible
    */
-  function formatActionWithRole(log: any): string {
-    const actionParts = log.action.split('.');
-    if (actionParts.length !== 2) return log.action;
+  function formatActionText(action: string): string {
+    const parts = action.split('.');
+    if (parts.length !== 2) return action;
 
-    const [resource, verb] = actionParts;
+    const [resource, verb] = parts;
     
     const verbMap: Record<string, string> = {
-      'login': 'inici├│ sesi├│n',
-      'logout': 'cerr├│ sesi├│n',
-      'create': 'cre├│',
-      'update': 'actualiz├│',
-      'delete': 'elimin├│',
-      'assign': 'asign├│',
-      'close': 'cerr├│',
-      'reopen': 'reabri├│'
-    };
-
-    const roleMap: Record<string, string> = {
-      'ADMIN': 'Administrador',
-      'SUPPORT_MANAGER': 'Gerente de Soporte',
-      'AGENT': 'Agente',
-      'AUDITOR': 'Auditor',
-      'CLIENT_ADMIN': 'Admin de Cliente',
-      'CLIENT_USER': 'Usuario de Cliente'
+      'login': 'Inicio de sesión',
+      'logout': 'Cierre de sesión',
+      'create': 'Creó',
+      'update': 'Actualizó',
+      'delete': 'Eliminó',
+      'assign': 'Asignó',
+      'close': 'Cerró',
+      'reopen': 'Reabrió'
     };
 
     const verbText = verbMap[verb] || verb;
-    const resourceText = resource;
+    return `${verbText} ${resource}`;
+  }
 
-    // Si hay rol de usuario, incluirlo
-    if (log.user_role) {
-      const roleText = roleMap[log.user_role] || log.user_role;
-      return `${verbText} ${resourceText} (${roleText})`;
-    }
-    
-    return `${verbText} ${resourceText}`;
+  /**
+   * Obtener texto del rol
+   */
+  function getRoleText(role: string): string {
+    const roleMap: Record<string, string> = {
+      'ADMIN': 'Administrador',
+      'SUPPORT_MANAGER': 'Gerente',
+      'AGENT': 'Agente',
+      'AUDITOR': 'Auditor',
+      'CLIENT_ADMIN': 'Admin Cliente',
+      'CLIENT_USER': 'Usuario'
+    };
+    return roleMap[role] || role;
   }
 
   /**
@@ -217,207 +298,225 @@
 
 <div class="px-4 sm:px-6 lg:px-8 py-8">
   <!-- Header -->
-  <div class="sm:flex sm:items-center sm:justify-between">
+  <div class="sm:flex sm:items-center sm:justify-between mb-6">
     <div>
-      <h1 class="text-2xl font-semibold text-gray-900">Auditoría</h1>
-      <p class="mt-2 text-sm text-gray-700">
-        Registro completo de todas las acciones realizadas en el sistema
+      <h1 class="text-2xl font-semibold text-gray-900">Auditoría del Sistema</h1>
+      <p class="mt-1 text-sm text-gray-600">
+        Registro de actividades • 
+        <span class="font-medium text-primary-600">
+          {periodFilter === 'today' ? 'Hoy' :
+           periodFilter === 'yesterday' ? 'Ayer' :
+           periodFilter === 'last7days' ? 'Últimos 7 días' :
+           periodFilter === 'last30days' ? 'Últimos 30 días' :
+           'Período personalizado'}
+        </span>
       </p>
     </div>
   </div>
 
-  <!-- Estadísticas -->
+  <!-- Selector de Período -->
+  <div class="bg-white shadow rounded-lg p-4 mb-6">
+    <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-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
+      >
+        Hoy
+      </button>
+      <button
+        on:click={() => changePeriod('yesterday')}
+        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'yesterday' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
+      >
+        Ayer
+      </button>
+      <button
+        on:click={() => changePeriod('last7days')}
+        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'last7days' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
+      >
+        Ú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-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
+      >
+        Ú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-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
+      >
+        <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" />
+        </svg>
+        Personalizado
+      </button>
+    </div>
+
+    <!-- Rango de fechas personalizado -->
+    {#if periodFilter === 'custom'}
+      <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t">
+        <div>
+          <label for="custom-date-from" class="block text-sm font-medium text-gray-700 mb-1">Desde</label>
+          <input
+            type="date"
+            id="custom-date-from"
+            bind:value={customDateFrom}
+            on:change={applyFilters}
+            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+          />
+        </div>
+        <div>
+          <label for="custom-date-to" class="block text-sm font-medium text-gray-700 mb-1">Hasta</label>
+          <input
+            type="date"
+            id="custom-date-to"
+            bind:value={customDateTo}
+            on:change={applyFilters}
+            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+          />
+        </div>
+      </div>
+    {/if}
+  </div>
+
+  <!-- Estadísticas Rápidas -->
   {#if stats}
-    <div class="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
-      <div class="bg-white overflow-hidden shadow rounded-lg">
-        <div class="p-5">
-          <div class="flex items-center">
-            <div class="flex-shrink-0">
-              <svg class="h-6 w-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
-              </svg>
-            </div>
-            <div class="ml-5 w-0 flex-1">
-              <dl>
-                <dt class="text-sm font-medium text-gray-500 truncate">Total de Acciones</dt>
-                <dd class="text-lg font-semibold text-gray-900">{stats.total_actions.toLocaleString()}</dd>
-              </dl>
-            </div>
-          </div>
-        </div>
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+      <div class="bg-white rounded-lg shadow p-4">
+        <div class="text-sm text-gray-500">Total</div>
+        <div class="text-2xl font-bold text-gray-900">{stats.total_actions.toLocaleString()}</div>
       </div>
-
-      <div class="bg-white overflow-hidden shadow rounded-lg">
-        <div class="p-5">
-          <div class="flex items-center">
-            <div class="flex-shrink-0">
-              <svg class="h-6 w-6 text-blue-400" 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" />
-              </svg>
-            </div>
-            <div class="ml-5 w-0 flex-1">
-              <dl>
-                <dt class="text-sm font-medium text-gray-500 truncate">Hoy</dt>
-                <dd class="text-lg font-semibold text-gray-900">{stats.actions_today}</dd>
-              </dl>
-            </div>
-          </div>
-        </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-primary-600">{stats.actions_today}</div>
       </div>
-
-      <div class="bg-white overflow-hidden shadow rounded-lg">
-        <div class="p-5">
-          <div class="flex items-center">
-            <div class="flex-shrink-0">
-              <svg class="h-6 w-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-              </svg>
-            </div>
-            <div class="ml-5 w-0 flex-1">
-              <dl>
-                <dt class="text-sm font-medium text-gray-500 truncate">Esta Semana</dt>
-                <dd class="text-lg font-semibold text-gray-900">{stats.actions_this_week}</dd>
-              </dl>
-            </div>
-          </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-green-600">{stats.actions_this_week}</div>
       </div>
-
-      <div class="bg-white overflow-hidden shadow rounded-lg">
-        <div class="p-5">
-          <div class="flex items-center">
-            <div class="flex-shrink-0">
-              <svg class="h-6 w-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-              </svg>
-            </div>
-            <div class="ml-5 w-0 flex-1">
-              <dl>
-                <dt class="text-sm font-medium text-gray-500 truncate">Acción más Común</dt>
-                <dd class="text-sm font-semibold text-gray-900 truncate">
-                  {#if stats.top_actions && Object.keys(stats.top_actions).length > 0}
-                    {Object.keys(stats.top_actions)[0]}
-                  {:else}
-                    N/A
-                  {/if}
-                </dd>
-              </dl>
-            </div>
-          </div>
+      <div class="bg-white rounded-lg shadow p-4">
+        <div class="text-sm text-gray-500 truncate">Más Común</div>
+        <div class="text-sm font-semibold text-gray-900 truncate">
+          {#if stats.top_actions && Object.keys(stats.top_actions).length > 0}
+            {formatActionText(Object.keys(stats.top_actions)[0])}
+          {:else}
+            N/A
+          {/if}
         </div>
       </div>
     </div>
   {/if}
 
-  <!-- Filtros -->
-  <div class="mt-6 bg-white shadow rounded-lg p-6">
-    <div class="flex items-center justify-between mb-4">
-      <h3 class="text-lg font-medium text-gray-900">Filtros</h3>
-      {#if activeFiltersCount > 0}
-        <button
-          on:click={clearFilters}
-          class="text-sm text-primary-600 hover:text-primary-700 font-medium"
-        >
-          Limpiar ({activeFiltersCount})
-        </button>
-      {/if}
-    </div>
-
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      <!-- B├║squeda de texto -->
-      <div>
-        <label for="search" class="block text-sm font-medium text-gray-700">Buscar</label>
-        <input
-          type="text"
-          id="search"
-          bind:value={searchText}
-          on:input={applyFilters}
-          placeholder="Buscar en acciones..."
-          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
-        />
+  <!-- Filtros Avanzados (Colapsables) -->
+  <div class="bg-white shadow rounded-lg mb-6">
+    <button
+      on:click={() => showAdvancedFilters = !showAdvancedFilters}
+      class="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-gray-50 rounded-lg transition-colors"
+    >
+      <div class="flex items-center gap-2">
+        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+        </svg>
+        <span class="text-sm font-medium text-gray-900">Filtros Avanzados</span>
+        {#if activeFiltersCount > 0}
+          <span class="px-2 py-0.5 rounded-full bg-primary-100 text-primary-700 text-xs font-medium">
+            {activeFiltersCount}
+          </span>
+        {/if}
       </div>
+      <svg class="w-5 h-5 text-gray-400 transition-transform {showAdvancedFilters ? 'rotate-180' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+      </svg>
+    </button>
 
-      <!-- Filtro por usuario -->
-      <div>
-        <label for="user" class="block text-sm font-medium text-gray-700">Usuario</label>
-        <select
-          id="user"
-          bind:value={filterUserId}
-          on:change={applyFilters}
-          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
-        >
-          <option value="">Todos los usuarios</option>
-          {#each users as user}
-            <option value={user.id}>{user.first_name} {user.last_name} ({user.email})</option>
-          {/each}
-        </select>
-      </div>
+    {#if showAdvancedFilters}
+      <div class="px-4 pb-4 border-t">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
+          <!-- Búsqueda de texto -->
+          <div>
+            <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Buscar</label>
+            <input
+              type="text"
+              id="search"
+              bind:value={searchText}
+              on:input={applyFilters}
+              placeholder="Buscar en acciones..."
+              class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+            />
+          </div>
 
-      <!-- Filtro por acci├│n -->
-      <div>
-        <label for="action" class="block text-sm font-medium text-gray-700">Acci├│n</label>
-        <select
-          id="action"
-          bind:value={filterAction}
-          on:change={applyFilters}
-          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
-        >
-          <option value="">Todas las acciones</option>
-          {#each Array.from(availableActions).sort() as action}
-            <option value={action}>{action}</option>
-          {/each}
-        </select>
-      </div>
+          <!-- Filtro por usuario -->
+          <div>
+            <label for="user" class="block text-sm font-medium text-gray-700 mb-1">Usuario</label>
+            <select
+              id="user"
+              bind:value={filterUserId}
+              on:change={applyFilters}
+              class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+            >
+              <option value="">Todos</option>
+              {#each users as user}
+                <option value={user.id}>{user.first_name} {user.last_name}</option>
+              {/each}
+            </select>
+          </div>
 
-      <!-- Filtro por tipo de recurso -->
-      <div>
-        <label for="resource-type" class="block text-sm font-medium text-gray-700">Tipo de Recurso</label>
-        <select
-          id="resource-type"
-          bind:value={filterResourceType}
-          on:change={applyFilters}
-          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
-        >
-          <option value="">Todos los tipos</option>
-          {#each Array.from(availableResourceTypes).sort() as resourceType}
-            <option value={resourceType}>{resourceType}</option>
-          {/each}
-        </select>
-      </div>
+          <!-- Filtro por acción -->
+          <div>
+            <label for="action" class="block text-sm font-medium text-gray-700 mb-1">Acción</label>
+            <select
+              id="action"
+              bind:value={filterAction}
+              on:change={applyFilters}
+              class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+            >
+              <option value="">Todas</option>
+              {#each Array.from(availableActions).sort() as action}
+                <option value={action}>{formatActionText(action)}</option>
+              {/each}
+            </select>
+          </div>
 
-      <!-- Fecha desde -->
-      <div>
-        <label for="date-from" class="block text-sm font-medium text-gray-700">Desde</label>
-        <input
-          type="date"
-          id="date-from"
-          bind:value={filterDateFrom}
-          on:change={applyFilters}
-          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
-        />
-      </div>
+          <!-- Filtro por tipo de recurso -->
+          <div>
+            <label for="resource-type" class="block text-sm font-medium text-gray-700 mb-1">Tipo de Recurso</label>
+            <select
+              id="resource-type"
+              bind:value={filterResourceType}
+              on:change={applyFilters}
+              class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+            >
+              <option value="">Todos</option>
+              {#each Array.from(availableResourceTypes).sort() as resourceType}
+                <option value={resourceType}>{resourceType}</option>
+              {/each}
+            </select>
+          </div>
+        </div>
 
-      <!-- Fecha hasta -->
-      <div>
-        <label for="date-to" class="block text-sm font-medium text-gray-700">Hasta</label>
-        <input
-          type="date"
-          id="date-to"
-          bind:value={filterDateTo}
-          on:change={applyFilters}
-          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
-        />
+        {#if activeFiltersCount > 0}
+          <div class="mt-4 flex justify-end">
+            <button
+              on:click={clearFilters}
+              class="text-sm text-primary-600 hover:text-primary-700 font-medium"
+            >
+              Limpiar filtros
+            </button>
+          </div>
+        {/if}
       </div>
-    </div>
+    {/if}
   </div>
 
   <!-- Tabla de Logs -->
-  <div class="mt-6 bg-white shadow rounded-lg overflow-hidden">
-    <div class="px-6 py-4 border-b border-gray-200">
-      <h3 class="text-lg font-medium text-gray-900">
-        Logs de Auditoría
-        <span class="text-sm text-gray-500 font-normal">({totalLogs} registros)</span>
-      </h3>
+  <div class="bg-white shadow rounded-lg overflow-hidden">
+    <div class="px-4 py-3 border-b border-gray-200 bg-gray-50">
+      <div class="flex items-center justify-between">
+        <h3 class="text-sm font-medium text-gray-900">
+          Registros de Auditoría
+        </h3>
+        <span class="text-sm text-gray-500">{totalLogs} registros</span>
+      </div>
     </div>
 
     {#if isLoading}
@@ -427,85 +526,68 @@
     {:else if logs.length === 0}
       <div class="text-center py-12">
         <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
         </svg>
-        <h3 class="mt-2 text-sm font-medium text-gray-900">No hay logs</h3>
-        <p class="mt-1 text-sm text-gray-500">No se encontraron registros con los filtros aplicados.</p>
+        <h3 class="mt-2 text-sm font-medium text-gray-900">No hay registros</h3>
+        <p class="mt-1 text-sm text-gray-500">
+          {periodFilter === 'today' ? 'No hay actividad registrada hoy.' : 'No se encontraron registros para el período seleccionado.'}
+        </p>
       </div>
     {:else}
       <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Fecha/Hora
+              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Hora
               </th>
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                 Usuario
               </th>
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Acci├│n
+              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Acción
               </th>
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                 Recurso
               </th>
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                IP
-              </th>
-              <th scope="col" class="relative px-6 py-3">
+              <th scope="col" class="relative px-4 py-3">
                 <span class="sr-only">Acciones</span>
               </th>
             </tr>
           </thead>
           <tbody class="bg-white divide-y divide-gray-200">
             {#each logs as log (log.id)}
-              <tr class="hover:bg-gray-50">
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                  {formatDate(log.created_at)}
+              <tr class="hover:bg-gray-50 transition-colors">
+                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
+                  {formatDateShort(log.created_at)}
                 </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm">
+                <td class="px-4 py-3 whitespace-nowrap text-sm">
                   {#if log.user_email}
                     <div>
                       <div class="font-medium text-gray-900">{log.user_name || 'N/A'}</div>
-                      <div class="text-gray-500">{log.user_email}</div>
-                      {#if log.user_role}
-                        <div class="text-xs text-gray-400 mt-1">
-                          {log.user_role === 'ADMIN' ? 'Administrador' :
-                           log.user_role === 'SUPPORT_MANAGER' ? 'Gerente de Soporte' :
-                           log.user_role === 'AGENT' ? 'Agente' :
-                           log.user_role === 'AUDITOR' ? 'Auditor' :
-                           log.user_role === 'CLIENT_ADMIN' ? 'Admin de Cliente' :
-                           log.user_role === 'CLIENT_USER' ? 'Usuario de Cliente' :
-                           log.user_role}
-                        </div>
-                      {/if}
+                      <div class="text-xs text-gray-500">{getRoleText(log.user_role)}</div>
                     </div>
                   {:else}
                     <span class="text-gray-500 italic">Sistema</span>
                   {/if}
                 </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {getActionColor(log.action)}">
-                    {formatActionWithRole(log)}
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <span class="px-2 py-1 text-xs font-medium rounded-full {getActionColor(log.action)}">
+                    {formatActionText(log.action)}
                   </span>
                 </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                  <div>
-                    <div class="font-medium">{log.resource_type}</div>
-                    {#if log.resource_id}
-                      <div class="text-gray-500 text-xs truncate max-w-xs">{log.resource_id}</div>
-                    {/if}
-                  </div>
+                <td class="px-4 py-3 whitespace-nowrap text-sm">
+                  <div class="text-gray-900 font-medium">{log.resource_type}</div>
+                  {#if log.ip_address}
+                    <div class="text-xs text-gray-500">{log.ip_address}</div>
+                  {/if}
                 </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                  {log.ip_address || 'N/A'}
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                <td class="px-4 py-3 whitespace-nowrap text-right text-sm">
                   <button
                     on:click={() => viewDetail(log)}
-                    class="text-primary-600 hover:text-primary-900"
+                    class="text-primary-600 hover:text-primary-900 font-medium"
                   >
-                    Ver detalle
+                    Detalle
                   </button>
                 </td>
               </tr>
@@ -514,9 +596,9 @@
         </table>
       </div>
 
-      <!-- Paginaci├│n -->
+      <!-- Paginación -->
       {#if totalPages > 1}
-        <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+        <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200">
           <div class="flex-1 flex justify-between sm:hidden">
             <button
               on:click={() => goToPage(currentPage - 1)}
@@ -588,18 +670,14 @@
 
 <!-- Modal de Detalle -->
 {#if showDetailModal && selectedLog}
-  <Modal title="Detalle del Log de Auditoría" on:close={() => showDetailModal = false}>
+  <Modal title="Detalle del Registro de Auditoría" on:close={() => showDetailModal = false}>
     <div class="space-y-4">
-      <!-- Informaci├│n General -->
+      <!-- Información General -->
       <div>
-        <h4 class="text-sm font-medium text-gray-900 mb-2">Informaci├│n General</h4>
+        <h4 class="text-sm font-medium text-gray-900 mb-2">Información General</h4>
         <dl class="grid grid-cols-2 gap-3 text-sm">
           <div>
-            <dt class="font-medium text-gray-500">ID:</dt>
-            <dd class="text-gray-900 font-mono text-xs">{selectedLog.id}</dd>
-          </div>
-          <div>
-            <dt class="font-medium text-gray-500">Fecha:</dt>
+            <dt class="font-medium text-gray-500">Fecha y Hora:</dt>
             <dd class="text-gray-900">{formatDate(selectedLog.created_at)}</dd>
           </div>
           <div>
@@ -613,36 +691,28 @@
           {#if selectedLog.user_role}
             <div>
               <dt class="font-medium text-gray-500">Rol:</dt>
-              <dd class="text-gray-900">
-                {selectedLog.user_role === 'ADMIN' ? 'Administrador' :
-                 selectedLog.user_role === 'SUPPORT_MANAGER' ? 'Gerente de Soporte' :
-                 selectedLog.user_role === 'AGENT' ? 'Agente' :
-                 selectedLog.user_role === 'AUDITOR' ? 'Auditor' :
-                 selectedLog.user_role === 'CLIENT_ADMIN' ? 'Admin de Cliente' :
-                 selectedLog.user_role === 'CLIENT_USER' ? 'Usuario de Cliente' :
-                 selectedLog.user_role}
-              </dd>
+              <dd class="text-gray-900">{getRoleText(selectedLog.user_role)}</dd>
             </div>
           {/if}
           <div>
             <dt class="font-medium text-gray-500">IP:</dt>
-            <dd class="text-gray-900">{selectedLog.ip_address || 'N/A'}</dd>
+            <dd class="text-gray-900 font-mono text-xs">{selectedLog.ip_address || 'N/A'}</dd>
           </div>
           <div>
             <dt class="font-medium text-gray-500">Correlation ID:</dt>
-            <dd class="text-gray-900 font-mono text-xs">{selectedLog.correlation_id || 'N/A'}</dd>
+            <dd class="text-gray-900 font-mono text-xs truncate">{selectedLog.correlation_id || 'N/A'}</dd>
           </div>
         </dl>
       </div>
 
-      <!-- Acci├│n -->
+      <!-- Acción -->
       <div>
-        <h4 class="text-sm font-medium text-gray-900 mb-2">Acci├│n</h4>
+        <h4 class="text-sm font-medium text-gray-900 mb-2">Acción</h4>
         <div class="bg-gray-50 rounded-lg p-3">
           <span class="px-2 py-1 text-xs font-semibold rounded-full {getActionColor(selectedLog.action)}">
             {selectedLog.action}
           </span>
-          <p class="mt-2 text-sm text-gray-700">{formatActionWithRole(selectedLog)}</p>
+          <p class="mt-2 text-sm text-gray-700">{formatActionText(selectedLog.action)}</p>
         </div>
       </div>
 
@@ -660,7 +730,7 @@
       <!-- User Agent -->
       {#if selectedLog.user_agent}
         <div>
-          <h4 class="text-sm font-medium text-gray-900 mb-2">User Agent</h4>
+          <h4 class="text-sm font-medium text-gray-900 mb-2">Navegador / Dispositivo</h4>
           <div class="bg-gray-50 rounded-lg p-3 text-xs font-mono text-gray-600 break-all">
             {selectedLog.user_agent}
           </div>
@@ -668,7 +738,7 @@
       {/if}
 
       <!-- Valores Anteriores -->
-      {#if selectedLog.old_values}
+      {#if selectedLog.old_values && Object.keys(selectedLog.old_values).length > 0}
         <div>
           <h4 class="text-sm font-medium text-gray-900 mb-2">Valores Anteriores</h4>
           <pre class="bg-gray-50 rounded-lg p-3 text-xs font-mono text-gray-600 overflow-auto max-h-40">{JSON.stringify(selectedLog.old_values, null, 2)}</pre>
@@ -676,7 +746,7 @@
       {/if}
 
       <!-- Valores Nuevos -->
-      {#if selectedLog.new_values}
+      {#if selectedLog.new_values && Object.keys(selectedLog.new_values).length > 0}
         <div>
           <h4 class="text-sm font-medium text-gray-900 mb-2">Valores Nuevos</h4>
           <pre class="bg-gray-50 rounded-lg p-3 text-xs font-mono text-gray-600 overflow-auto max-h-40">{JSON.stringify(selectedLog.new_values, null, 2)}</pre>
@@ -684,9 +754,9 @@
       {/if}
 
       <!-- Metadata -->
-      {#if selectedLog.metadata}
+      {#if selectedLog.metadata && Object.keys(selectedLog.metadata).length > 0}
         <div>
-          <h4 class="text-sm font-medium text-gray-900 mb-2">Metadata Adicional</h4>
+          <h4 class="text-sm font-medium text-gray-900 mb-2">Información Adicional</h4>
           <pre class="bg-gray-50 rounded-lg p-3 text-xs font-mono text-gray-600 overflow-auto max-h-40">{JSON.stringify(selectedLog.metadata, null, 2)}</pre>
         </div>
       {/if}