Animaciones plataforma

app/controllers/preferencias.php

@@ -10,92 +10,316 @@ function index()
 
 function notificaciones()
 {
-    $conn = getConnection();    
+    $conn      = getConnection();    
     $idUsuario = $_SESSION['usuario_id'] ?? null;
     
     if (!$idUsuario) {
-        header("Location: /login");
+        header("Location: /IMPORTADORES/login");
         exit;
     }
 
     // Obtener configuración general de notificaciones
-    $query = "SELECT notificaciones, notificaciones_extra FROM usuarios_sistema WHERE id_usuario = ?";
+    $query = "SELECT notificaciones, notificaciones_extra, tipo_usuario FROM usuarios_sistema WHERE id_usuario = ?";
-    $stmt = sqlsrv_prepare($conn, $query, [$idUsuario]);
+    $stmt  = sqlsrv_prepare($conn, $query, [$idUsuario]);
     if (!$stmt || !sqlsrv_execute($stmt)) {
         die("Error al obtener configuración: " . print_r(sqlsrv_errors(), true));
     }
-    $notificaciones = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC) ?: ['notificaciones' => 0, 'notificaciones_extra' => 0];
+    $usuario = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
+    if (!$usuario) {
+        die("Usuario no encontrado");
+    }
+
+    $notificaciones = [
+        'notificaciones'       => $usuario['notificaciones']       ?? 0,
+        'notificaciones_extra' => $usuario['notificaciones_extra'] ?? 0
+    ];
+    $tipoUsuario    = $usuario['tipo_usuario'] ?? 'importador';
     sqlsrv_free_stmt($stmt);
 
-    // Obtener preferencias específicas de notificaciones
+    switch ($tipoUsuario) {
-    $query = "SELECT * FROM preferencias_notificaciones_usuario WHERE id_usuario = ?";
+        case 'importador':
-    $stmt = sqlsrv_prepare($conn, $query, [$idUsuario]);
+            // Obtener preferencias específicas de notificaciones
-    if ($stmt && sqlsrv_execute($stmt)) {
+            $query = "SELECT * FROM preferencias_notificaciones_usuario WHERE id_usuario = ?";
-        $preferenciasRow = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
+            $stmt  = sqlsrv_prepare($conn, $query, [$idUsuario]);
-        sqlsrv_free_stmt($stmt);
+            if ($stmt && sqlsrv_execute($stmt)) {
-    } else {
+                $preferenciasRow = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
-        $preferenciasRow = false;
+                sqlsrv_free_stmt($stmt);
-    }
+            } else {
+                $preferenciasRow = false;
+            }
 
-    // Después de obtener $preferenciasRow, antes de crear el array $preferencias
+            // Después de obtener $preferenciasRow, antes de crear el array $preferencias
-    if ($preferenciasRow && isset($preferenciasRow['resumen_diario_hora'])) {
+            if ($preferenciasRow && isset($preferenciasRow['resumen_diario_hora'])) {
-        // Formatear la hora para el input HTML
+                // Formatear la hora para el input HTML
-        $hora_obj = $preferenciasRow['resumen_diario_hora'];
+                $hora_obj = $preferenciasRow['resumen_diario_hora'];
-        if ($hora_obj instanceof DateTime) {
+                if ($hora_obj instanceof DateTime) {
-            $preferenciasRow['resumen_diario_hora'] = $hora_obj->format('H:i');
+                    $preferenciasRow['resumen_diario_hora'] = $hora_obj->format('H:i');
-        } elseif (is_string($hora_obj)) {
+                } elseif (is_string($hora_obj)) {
-            // Si viene como string "08:00:00.0000000", extraer solo HH:MM
+                    // Si viene como string "08:00:00.0000000", extraer solo HH:MM
-            $preferenciasRow['resumen_diario_hora'] = substr($hora_obj, 0, 5);
+                    $preferenciasRow['resumen_diario_hora'] = substr($hora_obj, 0, 5);
-        }
+                }
-    }
+            }
             
-    // Si no existe registro, crear valores por defecto
+            // Si no existe registro, crear valores por defecto
-    if (!$preferenciasRow) {
+            if (!$preferenciasRow) {
-        $preferencias = [
+                $preferencias = [
-            'nuevas_solicitudes' => 0,
+                    'nuevas_solicitudes'    => 0,
-            'registro_solicitud' => 0,
+                    'registro_solicitud'    => 0,
-            'cambio_estado' => 0,
+                    'cambio_estado'         => 0,
-            'resumen_diario' => 0,
+                    'resumen_diario'        => 0,
-            'alertas_tiempo' => 0,
+                    'alertas_tiempo'        => 0,
-            'documentos_expediente' => 0,
+                    'documentos_expediente' => 0,
-            'nuevos_archivos' => 0,
+                    'nuevos_archivos'       => 0,
-            'intentos_fallidos' => 0,
+                    'intentos_fallidos'     => 0,
-            'bloqueo_cuenta' => 0,
+                    'bloqueo_cuenta'        => 0,
-            'resumen_diario_hora' => '08:00',
+                    'resumen_diario_hora'   => '08:00',
-            'resumen_diario_dias' => 'L-V'
+                    'resumen_diario_dias'   => 'L-V'
-        ];
+                ];
-    } else {
+            } else {
-        $preferencias = $preferenciasRow;
+                $preferencias = $preferenciasRow;
-        // Asegurar valores por defecto para campos de resumen si no existen
+                // Asegurar valores por defecto para campos de resumen si no existen
-        $preferencias['resumen_diario_hora'] = $preferencias['resumen_diario_hora'] ?? '08:00';
+                $preferencias['resumen_diario_hora'] = $preferencias['resumen_diario_hora'] ?? '08:00';
-        $preferencias['resumen_diario_dias'] = $preferencias['resumen_diario_dias'] ?? 'L-V';
+                $preferencias['resumen_diario_dias'] = $preferencias['resumen_diario_dias'] ?? 'L-V';
-    }
+            }
 
-    // Obtener tipos de notificaciones disponibles
+            // Obtener tipos de notificaciones disponibles
-    $query = "SELECT nombre, descripcion FROM tipos_notificaciones ORDER BY nombre";
+            $query = "SELECT nombre, descripcion FROM tipos_notificaciones ORDER BY nombre";
-    $stmt = sqlsrv_query($conn, $query);
+            $stmt  = sqlsrv_query($conn, $query);
-    if (!$stmt) {
+            if (!$stmt) {
-        die("Error al obtener tipos: " . print_r(sqlsrv_errors(), true));
+                die("Error al obtener tipos: " . print_r(sqlsrv_errors(), true));
-    }
+            }
             
-    // Crear array asociativo para la vista
+            // Crear array asociativo para la vista
-    $tipos = [];
+            $tipos = [];
-    while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
+            while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
-        $tipos[$row['nombre']] = $row['descripcion'];
+                $tipos[$row['nombre']] = $row['descripcion'];
-    }
+            }
-    sqlsrv_free_stmt($stmt);
+            sqlsrv_free_stmt($stmt);
 
-    // Obtener correo extra si existe
+            // Obtener correo extra si existe
-    $query = "SELECT correo FROM correo_extra WHERE id_usuario = ?";
+            $query = "SELECT correo FROM correo_extra WHERE id_usuario = ?";
-    $stmt = sqlsrv_prepare($conn, $query, [$idUsuario]);
+            $stmt = sqlsrv_prepare($conn, $query, [$idUsuario]);
-    $correoExtra = '';
+            $correoExtra = '';
-    if ($stmt && sqlsrv_execute($stmt)) {
+            if ($stmt && sqlsrv_execute($stmt)) {
-        $row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
+                $row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
-        $correoExtra = $row ? $row['correo'] : '';
+                $correoExtra = $row ? $row['correo'] : '';
-        sqlsrv_free_stmt($stmt);
+                sqlsrv_free_stmt($stmt);
+            }
+            break;
+        // case 'agente_agencia':
+            // Obtener preferencias específicas de notificaciones para agente
+            // $query = "SELECT * FROM preferencias_notificaciones_agente WHERE id_usuario = ?";
+            // $stmt  = sqlsrv_prepare($conn, $query, [$idUsuario]);
+            // if ($stmt && sqlsrv_execute($stmt)) {
+            //     $preferenciasRow = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
+            //     sqlsrv_free_stmt($stmt);
+            // } else {
+            //     $preferenciasRow = false;
+            // }
+
+            // Formatear hora si existe
+            // if ($preferenciasRow && isset($preferenciasRow['resumen_diario_hora'])) {
+            //     $hora_obj = $preferenciasRow['resumen_diario_hora'];
+            //     if ($hora_obj instanceof DateTime) {
+            //         $preferenciasRow['resumen_diario_hora'] = $hora_obj->format('H:i');
+            //     } elseif (is_string($hora_obj)) {
+            //         $preferenciasRow['resumen_diario_hora'] = substr($hora_obj, 0, 5);
+            //     }
+            // }
+            
+            // Si no existe registro, crear valores por defecto para agente
+            // if (!$preferenciasRow) {
+            //     $preferencias = [
+            //         'nuevas_solicitudes'     => 0,
+            //         'solicitudes_asignadas'  => 0,
+            //         'cambio_estado'          => 0,
+            //         'documentos_recibidos'   => 0,
+            //         'documentos_rechazados'  => 0,
+            //         'alertas_vencimiento'    => 0,
+            //         'notificaciones_sistema' => 0,
+            //         'resumen_diario'         => 0,
+            //         'alertas_tiempo'         => 0,
+            //         'resumen_diario_hora'    => '08:00',
+            //         'resumen_diario_dias'    => 'L-V'
+            //     ];
+            // } else {
+            //     $preferencias                        = $preferenciasRow;
+            //     $preferencias['resumen_diario_hora'] = $preferencias['resumen_diario_hora'] ?? '08:00';
+            //     $preferencias['resumen_diario_dias'] = $preferencias['resumen_diario_dias'] ?? 'L-V';
+            // }
+
+            // Obtener tipos de notificaciones específicas para agentes
+            // $query = "SELECT nombre, descripcion FROM tipos_notificaciones WHERE tipo_usuario = 'agente_aduanal' OR tipo_usuario IS NULL ORDER BY nombre";
+            // $stmt  = sqlsrv_query($conn, $query);
+            // if (!$stmt) {
+            //     die("Error al obtener tipos: " . print_r(sqlsrv_errors(), true));
+            // }
+            
+            // $tipos = [];
+            // while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
+            //     $tipos[$row['nombre']] = $row['descripcion'];
+            // }
+            // sqlsrv_free_stmt($stmt);
+
+            // Obtener correo extra si existe
+            // $query = "SELECT correo FROM correo_extra WHERE id_usuario = ?";
+            // $stmt  = sqlsrv_prepare($conn, $query, [$idUsuario]);
+            // $correoExtra = '';
+            // if ($stmt && sqlsrv_execute($stmt)) {
+            //     $row         = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
+            //     $correoExtra = $row ? $row['correo'] : '';
+            //     sqlsrv_free_stmt($stmt);
+            // }
+            // break;
+        // case 'admin_agencia':
+            // Obtener preferencias específicas de notificaciones para admin de agencia
+            // $query = "SELECT * FROM preferencias_notificaciones_agencia WHERE id_usuario = ?";
+            // $stmt  = sqlsrv_prepare($conn, $query, [$idUsuario]);
+            // if ($stmt && sqlsrv_execute($stmt)) {
+            //     $preferenciasRow = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
+            //     sqlsrv_free_stmt($stmt);
+            // } else {
+            //     $preferenciasRow = false;
+            // }
+
+            // Formatear hora si existe
+            // if ($preferenciasRow && isset($preferenciasRow['resumen_diario_hora'])) {
+            //     $hora_obj = $preferenciasRow['resumen_diario_hora'];
+            //     if ($hora_obj instanceof DateTime) {
+            //         $preferenciasRow['resumen_diario_hora'] = $hora_obj->format('H:i');
+            //     } elseif (is_string($hora_obj)) {
+            //         $preferenciasRow['resumen_diario_hora'] = substr($hora_obj, 0, 5);
+            //     }
+            // }
+            
+            // Si no existe registro, crear valores por defecto para admin de agencia
+            // if (!$preferenciasRow) {
+            //     $preferencias = [
+            //         'nuevas_solicitudes'      => 0,
+            //         'solicitudes_completadas' => 0,
+            //         'reportes_agentes'        => 0,
+            //         'alertas_rendimiento'     => 0,
+            //         'documentos_pendientes'   => 0,
+            //         'notificaciones_sistema'  => 0,
+            //         'alertas_vencimiento'     => 0,
+            //         'resumen_semanal'         => 0,
+            //         'resumen_mensual'         => 0,
+            //         'resumen_diario'          => 0,
+            //         'resumen_diario_hora'     => '08:00',
+            //         'resumen_diario_dias'     => 'L-V'
+            //     ];
+            // } else {
+            //     $preferencias                        = $preferenciasRow;
+            //     $preferencias['resumen_diario_hora'] = $preferencias['resumen_diario_hora'] ?? '08:00';
+            //     $preferencias['resumen_diario_dias'] = $preferencias['resumen_diario_dias'] ?? 'L-V';
+            // }
+
+            // Obtener tipos de notificaciones específicas para admin de agencia
+            // $query = "SELECT nombre, descripcion FROM tipos_notificaciones WHERE tipo_usuario = 'admin_agencia' OR tipo_usuario IS NULL ORDER BY nombre";
+            // $stmt= sqlsrv_query($conn, $query);
+            // if (!$stmt) {
+            //     die("Error al obtener tipos: " . print_r(sqlsrv_errors(), true));
+            // }
+            
+            // $tipos = [];
+            // while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
+            //     $tipos[$row['nombre']] = $row['descripcion'];
+            // }
+            // sqlsrv_free_stmt($stmt);
+
+            // Obtener correo extra si existe
+            // $query = "SELECT correo FROM correo_extra WHERE id_usuario = ?";
+            // $stmt  = sqlsrv_prepare($conn, $query, [$idUsuario]);
+            // $correoExtra = '';
+            // if ($stmt && sqlsrv_execute($stmt)) {
+            //     $row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
+            //     $correoExtra = $row ? $row['correo'] : '';
+            //     sqlsrv_free_stmt($stmt);
+            // }
+            // break;
+        // case 'super_admin':
+            // Obtener preferencias específicas de notificaciones para super admin
+            // $query = "SELECT * FROM preferencias_notificaciones_admin WHERE id_usuario = ?";
+            // $stmt  = sqlsrv_prepare($conn, $query, [$idUsuario]);
+            // if ($stmt && sqlsrv_execute($stmt)) {
+            //     $preferenciasRow = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
+            //     sqlsrv_free_stmt($stmt);
+            // } else {
+            //     $preferenciasRow = false;
+            // }
+
+            // Formatear hora si existe
+            // if ($preferenciasRow && isset($preferenciasRow['resumen_diario_hora'])) {
+            //     $hora_obj = $preferenciasRow['resumen_diario_hora'];
+            //     if ($hora_obj instanceof DateTime) {
+            //         $preferenciasRow['resumen_diario_hora'] = $hora_obj->format('H:i');
+            //     } elseif (is_string($hora_obj)) {
+            //         $preferenciasRow['resumen_diario_hora'] = substr($hora_obj, 0, 5);
+            //     }
+            // }
+            
+            // Si no existe registro, crear valores por defecto para super admin
+            // if (!$preferenciasRow) {
+            //     $preferencias = [
+            //         'alertas_sistema'         => 0,
+            //         'reportes_globales'       => 0,
+            //         'nuevos_usuarios'         => 0,
+            //         'alertas_seguridad'       => 0,
+            //         'errores_sistema'         => 0,
+            //         'notificaciones_criticas' => 0,
+            //         'estadisticas_uso'        => 0,
+            //         'mantenimiento_sistema'   => 0,
+            //         'resumen_diario'          => 0,
+            //         'resumen_semanal'         => 0,
+            //         'resumen_mensual'         => 0,
+            //         'resumen_diario_hora'     => '08:00',
+            //         'resumen_diario_dias'     => 'L-V'
+            //     ];
+            // } else {
+            //     $preferencias                        = $preferenciasRow;
+            //     $preferencias['resumen_diario_hora'] = $preferencias['resumen_diario_hora'] ?? '08:00';
+            //     $preferencias['resumen_diario_dias'] = $preferencias['resumen_diario_dias'] ?? 'L-V';
+            // }
+
+            // Obtener tipos de notificaciones específicas para super admin
+            // $query = "SELECT nombre, descripcion FROM tipos_notificaciones WHERE tipo_usuario = 'super_admin' OR tipo_usuario IS NULL ORDER BY nombre";
+            // $stmt  = sqlsrv_query($conn, $query);
+            // if (!$stmt) {
+            //     die("Error al obtener tipos: " . print_r(sqlsrv_errors(), true));
+            // }
+            
+            // $tipos = [];
+            // while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
+            //     $tipos[$row['nombre']] = $row['descripcion'];
+            // }
+            // sqlsrv_free_stmt($stmt);
+
+            // Obtener correo extra si existe
+            // $query = "SELECT correo FROM correo_extra WHERE id_usuario = ?";
+            // $stmt  = sqlsrv_prepare($conn, $query, [$idUsuario]);
+            // $correoExtra = '';
+            // if ($stmt && sqlsrv_execute($stmt)) {
+            //     $row         = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
+            //     $correoExtra = $row ? $row['correo'] : '';
+            //     sqlsrv_free_stmt($stmt);
+            // }
+            // break;
+        default:
+            // Tipo de usuario no reconocido, usar configuración básica
+            $preferencias = [
+                'notificaciones_generales' => 0,
+                'resumen_diario'           => 0,
+                'resumen_diario_hora'      => '08:00',
+                'resumen_diario_dias'      => 'L-V'
+            ];
+            
+            $tipos = [];
+            $correoExtra = '';
+            break;
     }
 
     sqlsrv_close($conn);
+
     include __DIR__ . '/../../views/preferencias/notificaciones.php';
 }
 
@@ -127,6 +351,19 @@ function guardarPreferenciasAjax()
     $id_usuario = $_SESSION['usuario_id'];
 
     try {
+        // Obtener tipo de usuario
+        $query = "SELECT tipo_usuario FROM usuarios_sistema WHERE id_usuario = ?";
+        $stmt = sqlsrv_prepare($conn, $query, [$id_usuario]);
+        if (!$stmt || !sqlsrv_execute($stmt)) {
+            throw new Exception("Error al obtener tipo de usuario");
+        }
+        $usuario = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
+        if (!$usuario) {
+            throw new Exception("Usuario no encontrado");
+        }
+        $tipo_usuario = $usuario['tipo_usuario'];
+        sqlsrv_free_stmt($stmt);
+
         // Leer datos JSON del cuerpo de la petición
         $input = json_decode(file_get_contents('php://input'), true);
         
@@ -155,13 +392,16 @@ function guardarPreferenciasAjax()
                 }
                 sqlsrv_free_stmt($stmt);
                 
-                // Si se desactivan las notificaciones, limpiar preferencias específicas
+                // Si se desactivan las notificaciones, limpiar preferencias específicas según tipo de usuario
                 if (!$notificaciones) {
-                    $query_delete = "DELETE FROM preferencias_notificaciones_usuario WHERE id_usuario = ?";
+                    $tabla_preferencias = getTablaPreferencias($tipo_usuario);
-                    $stmt_delete = sqlsrv_prepare($conn, $query_delete, [$id_usuario]);
+                    if ($tabla_preferencias) {
-                    if ($stmt_delete) {
+                        $query_delete = "DELETE FROM $tabla_preferencias WHERE id_usuario = ?";
-                        sqlsrv_execute($stmt_delete);
+                        $stmt_delete = sqlsrv_prepare($conn, $query_delete, [$id_usuario]);
-                        sqlsrv_free_stmt($stmt_delete);
+                        if ($stmt_delete) {
+                            sqlsrv_execute($stmt_delete);
+                            sqlsrv_free_stmt($stmt_delete);
+                        }
                     }
                 }
 
@@ -211,15 +451,14 @@ function guardarPreferenciasAjax()
                     throw new Exception("Tipo de notificación no especificado");
                 }
                 
-                // Validar que el tipo de notificación es válido
+                // Obtener configuración específica según tipo de usuario
-                $tipos_validos = [
+                $config = getConfiguracionTipoUsuario($tipo_usuario);
-                    'nuevas_solicitudes', 'registro_solicitud', 'cambio_estado', 
+                $tabla_preferencias = $config['tabla'];
-                    'resumen_diario', 'alertas_tiempo', 'documentos_expediente', 
+                $tipos_validos = $config['tipos_validos'];
-                    'nuevos_archivos', 'intentos_fallidos', 'bloqueo_cuenta'
-                ];
                 
+                // Validar que el tipo de notificación es válido para este tipo de usuario
                 if (!in_array($tipo_nombre, $tipos_validos)) {
-                    throw new Exception("Tipo de notificación no válido");
+                    throw new Exception("Tipo de notificación no válido para este tipo de usuario");
                 }
                 
                 // Verificar que las notificaciones generales estén activadas
@@ -237,7 +476,7 @@ function guardarPreferenciasAjax()
                 }
                 
                 // Verificar si existe el registro
-                $query_exists = "SELECT COUNT(*) as count FROM preferencias_notificaciones_usuario WHERE id_usuario = ?";
+                $query_exists = "SELECT COUNT(*) as count FROM $tabla_preferencias WHERE id_usuario = ?";
                 $stmt_exists = sqlsrv_prepare($conn, $query_exists, [$id_usuario]);
                 $exists = false;
                 if ($stmt_exists && sqlsrv_execute($stmt_exists)) {
@@ -248,30 +487,18 @@ function guardarPreferenciasAjax()
                 
                 if ($exists) {
                     // Actualizar el campo específico
-                    $query = "UPDATE preferencias_notificaciones_usuario SET [$tipo_nombre] = ? WHERE id_usuario = ?";
+                    $query = "UPDATE $tabla_preferencias SET [$tipo_nombre] = ? WHERE id_usuario = ?";
                     $stmt = sqlsrv_prepare($conn, $query, [$valor, $id_usuario]);
                 } else {
-                    // Crear registro con valores por defecto y el campo específico
+                    // Crear registro con valores por defecto específicos del tipo de usuario
-                    $tipos_default = [
+                    $tipos_default = $config['valores_default'];
-                        'nuevas_solicitudes' => 0,
-                        'registro_solicitud' => 0,
-                        'cambio_estado' => 0,
-                        'resumen_diario' => 0,
-                        'alertas_tiempo' => 0,
-                        'documentos_expediente' => 0,
-                        'nuevos_archivos' => 0,
-                        'intentos_fallidos' => 0,
-                        'bloqueo_cuenta' => 0,
-                        'resumen_diario_hora' => '08:00',
-                        'resumen_diario_dias' => 'L-V'
-                    ];
                     
                     // Establecer el valor específico
                     $tipos_default[$tipo_nombre] = $valor;
                     
                     $campos = '[' . implode('], [', array_keys($tipos_default)) . ']';
                     $placeholders = rtrim(str_repeat('?, ', count($tipos_default)), ', ');
-                    $query = "INSERT INTO preferencias_notificaciones_usuario (id_usuario, $campos) VALUES (?, $placeholders)";
+                    $query = "INSERT INTO $tabla_preferencias (id_usuario, $campos) VALUES (?, $placeholders)";
                     
                     $params = array_merge([$id_usuario], array_values($tipos_default));
                     $stmt = sqlsrv_prepare($conn, $query, $params);
@@ -297,12 +524,12 @@ function guardarPreferenciasAjax()
                 }
                 
                 // Validar días
-                $dias_validos = ['L-V', 'TODOS'];
+                $dias_validos     = ['L-V', 'TODOS'];
                 $es_personalizado = !in_array($dias, $dias_validos);
                 
                 if ($es_personalizado) {
                     // Validar formato personalizado (ej: "L,M,X" o "L,V,S,D")
-                    $dias_array = explode(',', $dias);
+                    $dias_array      = explode(',', $dias);
                     $dias_permitidos = ['L', 'M', 'X', 'J', 'V', 'S', 'D'];
                     
                     foreach ($dias_array as $dia) {
@@ -313,13 +540,19 @@ function guardarPreferenciasAjax()
                     }
                 }
                 
+                // Obtener tabla de preferencias según tipo de usuario
+                $tabla_preferencias = getTablaPreferencias($tipo_usuario);
+                if (!$tabla_preferencias) {
+                    throw new Exception("Tipo de usuario no válido para configuración de resumen");
+                }
+                
                 // Verificar que el resumen diario esté activado
-                $query_check = "SELECT resumen_diario FROM preferencias_notificaciones_usuario WHERE id_usuario = ?";
+                $query_check    = "SELECT resumen_diario FROM $tabla_preferencias WHERE id_usuario = ?";
-                $stmt_check = sqlsrv_prepare($conn, $query_check, [$id_usuario]);
+                $stmt_check     = sqlsrv_prepare($conn, $query_check, [$id_usuario]);
                 $resumen_activo = false;
                 
                 if ($stmt_check && sqlsrv_execute($stmt_check)) {
-                    $row = sqlsrv_fetch_array($stmt_check, SQLSRV_FETCH_ASSOC);
+                    $row            = sqlsrv_fetch_array($stmt_check, SQLSRV_FETCH_ASSOC);
                     $resumen_activo = $row && $row['resumen_diario'];
                     sqlsrv_free_stmt($stmt_check);
                 }
@@ -329,41 +562,35 @@ function guardarPreferenciasAjax()
                 }
                 
                 // Verificar si existe el registro
-                $query_exists = "SELECT COUNT(*) as count FROM preferencias_notificaciones_usuario WHERE id_usuario = ?";
+                $query_exists = "SELECT COUNT(*) as count FROM $tabla_preferencias WHERE id_usuario = ?";
-                $stmt_exists = sqlsrv_prepare($conn, $query_exists, [$id_usuario]);
+                $stmt_exists  = sqlsrv_prepare($conn, $query_exists, [$id_usuario]);
-                $exists = false;
+                $exists       = false;
                 if ($stmt_exists && sqlsrv_execute($stmt_exists)) {
-                    $row = sqlsrv_fetch_array($stmt_exists, SQLSRV_FETCH_ASSOC);
+                    $row    = sqlsrv_fetch_array($stmt_exists, SQLSRV_FETCH_ASSOC);
                     $exists = $row['count'] > 0;
                     sqlsrv_free_stmt($stmt_exists);
                 }
                 
                 if ($exists) {
                     // Actualizar configuración del resumen
-                    $query = "UPDATE preferencias_notificaciones_usuario SET resumen_diario_hora = ?, resumen_diario_dias = ? WHERE id_usuario = ?";
+                    $query = "UPDATE $tabla_preferencias SET resumen_diario_hora = ?, resumen_diario_dias = ? WHERE id_usuario = ?";
-                    $stmt = sqlsrv_prepare($conn, $query, [$hora, $dias, $id_usuario]);
+                    $stmt  = sqlsrv_prepare($conn, $query, [$hora, $dias, $id_usuario]);
                 } else {
-                    // Crear registro con valores por defecto
+                    // Crear registro con valores por defecto específicos del tipo de usuario
-                    $tipos_default = [
+                    $config = getConfiguracionTipoUsuario($tipo_usuario);
-                        'nuevas_solicitudes' => 0,
+                    $tipos_default = $config['valores_default'];
-                        'registro_solicitud' => 0,
-                        'cambio_estado' => 0,
-                        'resumen_diario' => 1, // Activado porque llegamos aquí desde su configuración
-                        'alertas_tiempo' => 0,
-                        'documentos_expediente' => 0,
-                        'nuevos_archivos' => 0,
-                        'intentos_fallidos' => 0,
-                        'bloqueo_cuenta' => 0,
-                        'resumen_diario_hora' => $hora,
-                        'resumen_diario_dias' => $dias
-                    ];
                     
-                    $campos = '[' . implode('], [', array_keys($tipos_default)) . ']';
+                    // Activar resumen diario y configurar hora/días
+                    $tipos_default['resumen_diario']      = 1;
+                    $tipos_default['resumen_diario_hora'] = $hora;
+                    $tipos_default['resumen_diario_dias'] = $dias;
+                    
+                    $campos       = '[' . implode('], [', array_keys($tipos_default)) . ']';
                     $placeholders = rtrim(str_repeat('?, ', count($tipos_default)), ', ');
-                    $query = "INSERT INTO preferencias_notificaciones_usuario (id_usuario, $campos) VALUES (?, $placeholders)";
+                    $query        = "INSERT INTO $tabla_preferencias (id_usuario, $campos) VALUES (?, $placeholders)";
                     
                     $params = array_merge([$id_usuario], array_values($tipos_default));
-                    $stmt = sqlsrv_prepare($conn, $query, $params);
+                    $stmt   = sqlsrv_prepare($conn, $query, $params);
                 }
                 
                 if (!$stmt || !sqlsrv_execute($stmt)) {
@@ -387,8 +614,8 @@ function guardarPreferenciasAjax()
         echo json_encode([
             'success' => true, 
             'message' => 'Preferencias guardadas automáticamente',
-            'tipo' => $tipo_cambio,
+            'tipo'    => $tipo_cambio,
-            'data' => $response_data ?? []
+            'data'    => $response_data ?? []
         ]);
 
     } catch (Exception $e) {
@@ -399,26 +626,146 @@ function guardarPreferenciasAjax()
         echo json_encode([
             'success' => false, 
             'message' => $e->getMessage(),
-            'tipo' => $tipo_cambio ?? 'unknown'
+            'tipo'    => $tipo_cambio ?? 'unknown'
         ]);
     }
     exit;
 }
 
+// Función auxiliar para obtener la tabla de preferencias según tipo de usuario
+function getTablaPreferencias($tipo_usuario) {
+    switch ($tipo_usuario) {
+        case 'importador':
+            return 'preferencias_notificaciones_usuario';
+        case 'agente_aduanal':
+            return 'preferencias_notificaciones_agente';
+        case 'admin_agencia':
+            return 'preferencias_notificaciones_agencia';
+        case 'super_admin':
+            return 'preferencias_notificaciones_admin';
+        default:
+            return null;
+    }
+}
+
+// Función auxiliar para obtener configuración específica por tipo de usuario
+function getConfiguracionTipoUsuario($tipo_usuario) {
+    switch ($tipo_usuario) {
+        case 'importador':
+            return [
+                'tabla' => 'preferencias_notificaciones_usuario',
+                'tipos_validos' => [
+                    'nuevas_solicitudes', 'registro_solicitud', 'cambio_estado', 
+                    'resumen_diario', 'alertas_tiempo', 'documentos_expediente', 
+                    'nuevos_archivos', 'intentos_fallidos', 'bloqueo_cuenta'
+                ],
+                'valores_default' => [
+                    'nuevas_solicitudes'    => 0,
+                    'registro_solicitud'    => 0,
+                    'cambio_estado'         => 0,
+                    'resumen_diario'        => 0,
+                    'alertas_tiempo'        => 0,
+                    'documentos_expediente' => 0,
+                    'nuevos_archivos'       => 0,
+                    'intentos_fallidos'     => 0,
+                    'bloqueo_cuenta'        => 0,
+                    'resumen_diario_hora'   => '08:00',
+                    'resumen_diario_dias'   => 'L-V'
+                ]
+            ];
+        
+        case 'agente_aduanal':
+            return [
+                'tabla' => 'preferencias_notificaciones_agente',
+                'tipos_validos' => [
+                    'nuevas_solicitudes', 'solicitudes_asignadas', 'cambio_estado', 
+                    'documentos_recibidos', 'documentos_rechazados', 'alertas_vencimiento',
+                    'notificaciones_sistema', 'resumen_diario', 'alertas_tiempo'
+                ],
+                'valores_default' => [
+                    'nuevas_solicitudes'     => 0,
+                    'solicitudes_asignadas'  => 0,
+                    'cambio_estado'          => 0,
+                    'documentos_recibidos'   => 0,
+                    'documentos_rechazados'  => 0,
+                    'alertas_vencimiento'    => 0,
+                    'notificaciones_sistema' => 0,
+                    'resumen_diario'         => 0,
+                    'alertas_tiempo'         => 0,
+                    'resumen_diario_hora'    => '08:00',
+                    'resumen_diario_dias'    => 'L-V'
+                ]
+            ];
+        
+        case 'admin_agencia':
+            return [
+                'tabla' => 'preferencias_notificaciones_agencia',
+                'tipos_validos' => [
+                    'nuevas_solicitudes', 'solicitudes_completadas', 'reportes_agentes',
+                    'alertas_rendimiento', 'documentos_pendientes', 'notificaciones_sistema',
+                    'alertas_vencimiento', 'resumen_semanal', 'resumen_mensual', 'resumen_diario'
+                ],
+                'valores_default' => [
+                    'nuevas_solicitudes'      => 0,
+                    'solicitudes_completadas' => 0,
+                    'reportes_agentes'        => 0,
+                    'alertas_rendimiento'     => 0,
+                    'documentos_pendientes'   => 0,
+                    'notificaciones_sistema'  => 0,
+                    'alertas_vencimiento'     => 0,
+                    'resumen_semanal'         => 0,
+                    'resumen_mensual'         => 0,
+                    'resumen_diario'          => 0,
+                    'resumen_diario_hora'     => '08:00',
+                    'resumen_diario_dias'     => 'L-V'
+                ]
+            ];
+        
+        case 'super_admin':
+            return [
+                'tabla' => 'preferencias_notificaciones_admin',
+                'tipos_validos' => [
+                    'alertas_sistema', 'reportes_globales', 'nuevos_usuarios',
+                    'alertas_seguridad', 'errores_sistema', 'notificaciones_criticas',
+                    'estadisticas_uso', 'mantenimiento_sistema', 'resumen_diario',
+                    'resumen_semanal', 'resumen_mensual'
+                ],
+                'valores_default' => [
+                    'alertas_sistema'         => 0,
+                    'reportes_globales'       => 0,
+                    'nuevos_usuarios'         => 0,
+                    'alertas_seguridad'       => 0,
+                    'errores_sistema'         => 0,
+                    'notificaciones_criticas' => 0,
+                    'estadisticas_uso'        => 0,
+                    'mantenimiento_sistema'   => 0,
+                    'resumen_diario'          => 0,
+                    'resumen_semanal'         => 0,
+                    'resumen_mensual'         => 0,
+                    'resumen_diario_hora'     => '08:00',
+                    'resumen_diario_dias'     => 'L-V'
+                ]
+            ];
+        
+        default:
+            return null;
+    }
+}
+
 // Función auxiliar para obtener el correo extra de un usuario (útil para el sistema de notificaciones)
 function obtenerCorreoExtra($id_usuario) 
 {
-    $conn = getConnection();
+    $conn  = getConnection();
     $query = "
         SELECT ce.correo 
         FROM correo_extra ce 
         INNER JOIN usuarios_sistema us ON ce.id_usuario = us.id_usuario 
         WHERE ce.id_usuario = ? AND us.notificaciones_extra = 1
     ";
-    $stmt = sqlsrv_prepare($conn, $query, [$id_usuario]);
+    $stmt   = sqlsrv_prepare($conn, $query, [$id_usuario]);
     $correo = null;
     if ($stmt && sqlsrv_execute($stmt)) {
-        $row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
+        $row    = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
         $correo = $row ? $row['correo'] : null;
         sqlsrv_free_stmt($stmt);
     }
@@ -433,7 +780,7 @@ function obtenerPreferenciasNotificacion($id_usuario)
     
     // Obtener configuración general
     $query = "SELECT notificaciones, notificaciones_extra FROM usuarios_sistema WHERE id_usuario = ?";
-    $stmt = sqlsrv_prepare($conn, $query, [$id_usuario]);
+    $stmt  = sqlsrv_prepare($conn, $query, [$id_usuario]);
     if (!$stmt || !sqlsrv_execute($stmt)) {
         sqlsrv_close($conn);
         return null;
@@ -448,7 +795,7 @@ function obtenerPreferenciasNotificacion($id_usuario)
     
     // Obtener preferencias específicas
     $query = "SELECT * FROM preferencias_notificaciones_usuario WHERE id_usuario = ?";
-    $stmt = sqlsrv_prepare($conn, $query, [$id_usuario]);
+    $stmt  = sqlsrv_prepare($conn, $query, [$id_usuario]);
     $preferencias = null;
     if ($stmt && sqlsrv_execute($stmt)) {
         $preferencias = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
@@ -459,7 +806,7 @@ function obtenerPreferenciasNotificacion($id_usuario)
     $correo_extra = null;
     if ($config['notificaciones_extra']) {
         $query = "SELECT correo FROM correo_extra WHERE id_usuario = ?";
-        $stmt = sqlsrv_prepare($conn, $query, [$id_usuario]);
+        $stmt  = sqlsrv_prepare($conn, $query, [$id_usuario]);
         if ($stmt && sqlsrv_execute($stmt)) {
             $row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
             $correo_extra = $row ? $row['correo'] : null;
@@ -470,8 +817,8 @@ function obtenerPreferenciasNotificacion($id_usuario)
     sqlsrv_close($conn);
     return [
         'config_general' => $config,
-        'preferencias' => $preferencias,
+        'preferencias'   => $preferencias,
-        'correo_extra' => $correo_extra
+        'correo_extra'   => $correo_extra
     ];
 }
 
@@ -496,7 +843,7 @@ function debeRecibirNotificacion($id_usuario, $tipo_notificacion)
 // Función auxiliar para obtener la configuración del resumen diario de un usuario
 function obtenerConfigResumenDiario($id_usuario) 
 {
-    $conn = getConnection();
+    $conn  = getConnection();
     
     $query = "
         SELECT pnu.resumen_diario, pnu.resumen_diario_hora, pnu.resumen_diario_dias
@@ -505,7 +852,7 @@ function obtenerConfigResumenDiario($id_usuario)
         WHERE pnu.id_usuario = ? AND us.notificaciones = 1 AND pnu.resumen_diario = 1
     ";
     
-    $stmt = sqlsrv_prepare($conn, $query, [$id_usuario]);
+    $stmt   = sqlsrv_prepare($conn, $query, [$id_usuario]);
     $config = null;
     
     if ($stmt && sqlsrv_execute($stmt)) {
@@ -526,7 +873,7 @@ function obtenerConfigResumenDiario($id_usuario)
 // Función auxiliar para verificar si hoy es día de envío de resumen según la configuración del usuario
 function esDiaResumen($config_dias) 
 {
-    $hoy = date('N'); // 1=Lunes, 7=Domingo
+    $hoy       = date('N'); // 1=Lunes, 7=Domingo
     $dia_letra = ['', 'L', 'M', 'X', 'J', 'V', 'S', 'D'][$hoy];
     
     switch ($config_dias) {
@@ -543,7 +890,7 @@ function esDiaResumen($config_dias)
 
 function catalogos()
 {
-    $conn = getConnection();    
+    $conn      = getConnection();    
     $idUsuario = $_SESSION['usuario_id'] ?? null;
     
     if (!$idUsuario) {
@@ -613,8 +960,8 @@ function catalogos()
                 // $preferencias = [
                     // Aquí se definirán los campos específicos para agente aduanal
                     // cuando se creen las tablas correspondientes
-                    // 'configuracion'           => 0,
+                    // 'configuracion' => 0,
-                    // 'cerrar_sesion'           => 0
+                    // 'cerrar_sesion' => 0
                 // ];
             // } else {
                 // $preferencias = $preferenciasRow;
@@ -636,8 +983,8 @@ function catalogos()
                 // $preferencias = [
                     // Aquí se definirán los campos específicos para admin agencia
                     // cuando se creen las tablas correspondientes
-                    // 'configuracion'           => 0,
+                    // 'configuracion' => 0,
-                    // 'cerrar_sesion'           => 0
+                    // 'cerrar_sesion' => 0
                 // ];
             // } else {
                 // $preferencias = $preferenciasRow;
@@ -659,8 +1006,8 @@ function catalogos()
                 // $preferencias = [
                     // Aquí se definirán los campos específicos para super admin
                     // cuando se creen las tablas correspondientes
-                    // 'configuracion'           => 0,
+                    // 'configuracion' => 0,
-                    // 'cerrar_sesion'           => 0
+                    // 'cerrar_sesion' => 0
                 // ];
             // } else {
                 // $preferencias = $preferenciasRow;
@@ -670,8 +1017,8 @@ function catalogos()
         default:
             // Tipo de usuario no reconocido, usar valores por defecto mínimos
             $preferencias = [
-                'configuracion'           => 0,
+                'configuracion' => 0,
-                'cerrar_sesion'           => 0
+                'cerrar_sesion' => 0
             ];
             break;
     }
@@ -688,7 +1035,7 @@ function catalogos()
     while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
         $tipos[$row['nombre']] = [
             'descripcion' => $row['descripcion'],
-            'color' => $row['color']
+            'color'       => $row['color']
         ];
     }
     sqlsrv_free_stmt($stmt);
@@ -716,7 +1063,7 @@ function guardarCatalogosAjax()
         exit;
     }
 
-    $conn = getConnection();
+    $conn      = getConnection();
     $idUsuario = $_SESSION['usuario_id'] ?? null;
     
     if (!$idUsuario) {
@@ -727,13 +1074,13 @@ function guardarCatalogosAjax()
 
     // Obtener tipo de usuario
     $query = "SELECT tipo_usuario FROM usuarios_sistema WHERE id_usuario = ?";
-    $stmt = sqlsrv_prepare($conn, $query, [$idUsuario]);
+    $stmt  = sqlsrv_prepare($conn, $query, [$idUsuario]);
     if (!$stmt || !sqlsrv_execute($stmt)) {
         http_response_code(500);
         echo json_encode(['success' => false, 'message' => 'Error al obtener información del usuario']);
         exit;
     }
-    $usuario = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
+    $usuario     = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
     $tipoUsuario = $usuario['tipo_usuario'] ?? 'importador';
     sqlsrv_free_stmt($stmt);
 
@@ -746,7 +1093,7 @@ function guardarCatalogosAjax()
                 $valor = isset($input['valor']) && $input['valor'] ? 1 : 0;
                 
                 $query = "UPDATE usuarios_sistema SET preferencias_catalogos = ? WHERE id_usuario = ?";
-                $stmt = sqlsrv_prepare($conn, $query, [$valor, $idUsuario]);
+                $stmt  = sqlsrv_prepare($conn, $query, [$valor, $idUsuario]);
                 
                 if (!$stmt || !sqlsrv_execute($stmt)) {
                     throw new Exception('Error al actualizar preferencias generales');
@@ -761,7 +1108,7 @@ function guardarCatalogosAjax()
                 }
                 
                 $nombre = $input['nombre'];
-                $valor = $input['valor'] ? 1 : 0;
+                $valor  = $input['valor'] ? 1 : 0;
                 
                 // Determinar la tabla según el tipo de usuario
                 $tabla = '';
@@ -784,7 +1131,7 @@ function guardarCatalogosAjax()
                 
                 // Verificar si existe un registro para este usuario
                 $query = "SELECT id_preferencia FROM $tabla WHERE id_usuario = ?";
-                $stmt = sqlsrv_prepare($conn, $query, [$idUsuario]);
+                $stmt  = sqlsrv_prepare($conn, $query, [$idUsuario]);
                 if (!$stmt || !sqlsrv_execute($stmt)) {
                     throw new Exception('Error al verificar preferencias existentes');
                 }
@@ -795,11 +1142,11 @@ function guardarCatalogosAjax()
                 if ($existe) {
                     // Actualizar registro existente
                     $query = "UPDATE $tabla SET [$nombre] = ? WHERE id_usuario = ?";
-                    $stmt = sqlsrv_prepare($conn, $query, [$valor, $idUsuario]);
+                    $stmt  = sqlsrv_prepare($conn, $query, [$valor, $idUsuario]);
                 } else {
                     // Crear nuevo registro
                     $query = "INSERT INTO $tabla (id_usuario, [$nombre]) VALUES (?, ?)";
-                    $stmt = sqlsrv_prepare($conn, $query, [$idUsuario, $valor]);
+                    $stmt  = sqlsrv_prepare($conn, $query, [$idUsuario, $valor]);
                 }
                 
                 if (!$stmt || !sqlsrv_execute($stmt)) {

views/admin/agencias_activas.php

@@ -13,6 +13,10 @@
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -31,14 +35,40 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .table thead th { background: #343a40; color: #fff; }
   </style>
 <body>
   
   <div class="content">
-    <h4 class="mb-4">✅ Agencias Activas</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✅ Agencias Activas</h4>
     <!-- TABLA DE AGENCIAS -->
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-striped table-hover align-middle" id="tabla-agencias-activas">
           <thead>
@@ -68,7 +98,7 @@
                   <td><?= htmlspecialchars($ag['id_administrador']) ?></td>
                   <td>
                     <?php if (isset($ag['activo']) && $ag['activo'] == 1): ?>
-                      <a href="/IMPORTADORES/administrador/suspenderAgencia?id=<?= $ag['id_agencia'] ?>&success=1" class="btn btn-sm btn-danger">Suspender</a>
+                      <a href="/IMPORTADORES/administrador/suspenderAgencia?id=<?= $ag['id_agencia'] ?>&success=1" class="btn btn-sm btn-danger mt-auto w-auto btn-animated">Suspender</a>
                     <?php endif; ?>
                   </td>
                 </tr>

views/admin/alta_agencias.php

@@ -9,6 +9,10 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -27,6 +31,32 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .table thead th { background: #343a40; color: #fff; }
   </style>
 </head>
@@ -34,10 +64,10 @@
 
   <!-- 📄 CONTENIDO -->
   <div class="content">
-    <h4 class="mb-4">🏪 Alta de Agencias Aduanales</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🏪 Alta de Agencias Aduanales</h4>
 
     <!-- FORMULARIO -->
-    <div class="card p-4 mb-5 shadow-sm">
+    <div class="card p-4 mb-5 shadow-sm card-hover position-relative h-auto">
       <form action="/IMPORTADORES/administrador/guardar_agencia" method="POST" id="formAltaAgencias">
         <h5 class="mb-3">➕ Nueva Agencia Aduanal</h5>
         <div class="row g-3">
@@ -76,7 +106,7 @@
         </div>
 
         <div class="text-end mt-4">
-          <button class="btn btn-success px-4">Registrar</button>
+          <button class="btn btn-success px-4 mt-auto w-auto btn-animated">Registrar</button>
         </div>
       </form>
     </div>

views/admin/alta_usuarios.php

@@ -13,6 +13,10 @@
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -31,6 +35,32 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     table.dataTable thead th { background:#343a40; color:#fff; }
   </style>
 </head>
@@ -38,9 +68,9 @@
 
   <!-- 📄 CONTENIDO -->
   <div class="content">
-    <h3 class="mb-4">👥 Alta de Usuarios</h3>
+    <h3 class="mb-4 animate__animated animate__fadeInDown title_glow">👥 Alta de Usuarios</h3>
     <!-- FORMULARIO -->
-    <div class="card p-4 mb-4 shadow-sm bg-white">
+    <div class="card p-4 mb-4 shadow-sm bg-white card-hover position-relative h-auto">
       <form action="/IMPORTADORES/administrador/guardar_usuario" method="POST">
         <h5 class="mb-3">➕ Nuevo Usuario</h5>
         <div class="row g-3">
@@ -62,7 +92,7 @@
           </div>
         </div>
         <div class="text-end mt-4">
-          <button class="btn btn-success px-4">Registrar</button>
+          <button class="btn btn-success px-4 mt-auto w-auto btn-animated">Registrar</button>
         </div>
       </form>
     </div>
@@ -93,7 +123,7 @@
                 <td><?= isset($u['creado_en']) && $u['creado_en'] instanceof DateTime ? $u['creado_en']->format('Y-m-d H:i') : '' ?></td>
                 <td>
                   <?php if (isset($u['activo']) && $u['activo'] == 1): ?>
-                    <a href="/IMPORTADORES/administrador/suspender?id=<?= $u['id_usuario'] ?>&success=1" class="btn btn-sm btn-danger">Suspender</a>
+                    <a href="/IMPORTADORES/administrador/suspender?id=<?= $u['id_usuario'] ?>&success=1" class="btn btn-sm btn-danger mt-auto w-auto btn-animated">Suspender</a>
                   <?php endif; ?>
                 </td>
               </tr>

views/admin/aprobar_agencias.php

@@ -8,6 +8,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -26,6 +30,32 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .table thead th { background: #343a40; color: #fff; }
   </style>
 </head>
@@ -33,10 +63,10 @@
 
   <!-- 📄 CONTENIDO -->
   <div class="content">
-    <h4 class="mb-4">✅ Aprobación de Agencias Aduanales</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✅ Aprobación de Agencias Aduanales</h4>
 
     <!-- TABLA DE AGENCIAS -->
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <h5 class="mb-3">🏪 Agencias Solicitantes</h5>
       <div class="table-responsive">
         <table class="table table-striped table-hover align-middle" id="tabla-agencias-pendientes">
@@ -66,13 +96,13 @@
                   <td><?= $s['request_date'] ? $s['request_date']->format('Y-m-d H:i') : '' ?></td>
                   <td>
                     <?php if (!empty($s['opinion_file'])): ?>
-                      <a href="/IMPORTADORES/ver_opinion.php?file=<?= urlencode($s['opinion_file']) ?>" target="_blank" class="btn btn-sm btn-outline-secondary">Ver PDF</a>
+                      <a href="/IMPORTADORES/ver_opinion.php?file=<?= urlencode($s['opinion_file']) ?>" target="_blank" class="btn btn-sm btn-outline-secondary mt-auto w-auto btn-animated">Ver PDF</a>
                     <?php else: ?>
                       <span class="text-muted">No adjunto</span>
                     <?php endif; ?>
                   </td>
                   <td>
-                    <a href="/IMPORTADORES/administrador/aprobar_agencia?id=<?= $s['request_id'] ?>" class="btn btn-sm btn-success">Aprobar</a>
+                    <a href="/IMPORTADORES/administrador/aprobar_agencia?id=<?= $s['request_id'] ?>" class="btn btn-sm btn-success mt-auto w-auto btn-animated">Aprobar</a>
                   </td>
                 </tr>
               <?php endforeach; ?>

views/admin/aprobar_usuarios.php

@@ -12,6 +12,10 @@
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -30,6 +34,32 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .table thead th { background: #343a40; color: #fff; }
   </style>
 </head>
@@ -37,9 +67,9 @@
 
   <!-- 📄 CONTENIDO -->
   <div class="content">
-    <h4 class="mb-4">✅ Aprobación de Usuarios</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✅ Aprobación de Usuarios</h4>
     <!-- TABLA DE USUARIOS -->
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <h5 class="mb-3">👥 Usuarios Solicitantes</h5>
       <div class="table-responsive">
         <table class="table table-striped table-hover align-middle" id="tabla-usuarios-pendientes">
@@ -67,13 +97,13 @@
                   <td><?= $s['request_date'] ? $s['request_date']->format('Y-m-d H:i') : '' ?></td>
                   <td>
                     <?php if (!empty($s['opinion_file'])): ?>
-                      <a href="/IMPORTADORES/ver_opinion.php?file=<?= urlencode($s['opinion_file']) ?>" target="_blank" class="btn btn-sm btn-outline-secondary">Ver PDF</a>
+                      <a href="/IMPORTADORES/ver_opinion.php?file=<?= urlencode($s['opinion_file']) ?>" target="_blank" class="btn btn-sm btn-outline-secondary mt-auto w-auto btn-animated">Ver PDF</a>
                     <?php else: ?>
                       <span class="text-muted">No adjunto</span>
                     <?php endif; ?>
                   </td>
                   <td>
-                    <a href="/IMPORTADORES/administrador/aprobar_usuario?id=<?= $s['request_id'] ?>" class="btn btn-sm btn-success">Aprobar</a>
+                    <a href="/IMPORTADORES/administrador/aprobar_usuario?id=<?= $s['request_id'] ?>" class="btn btn-sm btn-success mt-auto w-auto btn-animated">Aprobar</a>
                   </td>
                 </tr>
               <?php endforeach; ?>

views/admin/dashboard_admin.php

@@ -8,6 +8,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -22,9 +26,18 @@
     .btn-orange { background-color: orangeRed; color: white; }
     .btn-orange:hover { background-color: #ff3600; color: white; }
     .text-orange { color: orangeRed; }
-    .btn-teal { background-color: 	#20c997; color: white; }
+    .btn-teal { background-color: #4dd4ac ; color: white; }
-    .btn-teal:hover { background-color: #4dd4ac; color: black; }
+    .btn-teal:hover { background-color: #20c997; color: black; }
-    .text-teal {  color: 	#20c997; }
+    .text-teal { color: 	#4dd4ac; }
+    .btn-lime { background-color: 	#84cc16; color: white; }
+    .text-lime { color: 	#84cc16; }
+    .btn-lime:hover { background-color: #65a30d; color: black; }
+    .btn-cyan { background-color: #06b6d4; color: white; }
+    .text-cyan { color: #06b6d4; }
+    .btn-cyan:hover { background-color: #0891b2; color: white; }
+    .btn-violet { background-color: #8b5cf6; color: white; }
+    .text-violet { color: #8b5cf6; }
+    .btn-violet:hover { background-color: #7c3aed; color: white; }
     /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
     @media (min-width: 768px) { .content { margin-left: 250px; /* Ancho del sidebar */ } }
     /* En móviles, sin margen lateral */
@@ -35,79 +48,231 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; }
+    .card-hover:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.6s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .loading-spinner { display: none; }
+    .btn-loading .loading-spinner { display: inline-block; }
+    .btn-loading .btn-text { display: none; }
+    /* Animación para alertas */
+    .alert-animated { animation: slideInDown 0.5s ease-out; }
+    @keyframes slideInDown {
+      from { transform: translateY(-100%); opacity: 0; }
+      to { transform: translateY(0); opacity: 1; }
+    }
+    /* Efecto de parpadeo para elementos obligatorios */
+    .border-warning-animated { animation: borderGlow 2s ease-in-out infinite alternate; }
+    @keyframes borderGlow {
+      from { border-color: #ffc107; box-shadow: 0 0 5px rgba(255, 193, 7, 0.5); }
+      to { border-color: #ffcd39; box-shadow: 0 0 20px rgba(255, 193, 7, 0.8); }
+    } 
   </style>
 </head>
 <body>
 
   <!-- 📄 CONTENIDO -->
   <div class="content">
-    <h4 class="mb-4">📦 Panel de Administrador</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📦 Panel de Administrador</h4>
 
-    <div class="row g-4">
+    <!-- <?php // if ($catalogosData['catalogos_activos']): ?> -->
-      <div class="col-md-4">
+      <div class="row g-4">
-        <div class="card shadow-sm p-3">
+        <!-- <?php 
-          <h5 class="text-primary">Aprobar agencias</h5>
+        //   $delay = 0;
-          <p>Aprueba las agencias que solicitaron un registro.</p>
+        //   foreach ($catalogosData['catalogos'] as $catalogo): 
-          <a href="/IMPORTADORES/administrador/aprobarAgencias" 
+        //   $delay += 0.1; // Incrementar el retraso para cada catálogo
-           class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/aprobarAgencias' ? 'active' : '' ?>">
+        ?> -->
-            Ver agencias solicitantes</a>
+          <div class="col-md-4">
-        </div>
+            <div class="card shadow-sm p-3">
+              <h5 class="text-primary">Aprobar agencias</h5>
+              <p>Aprueba las agencias que solicitaron un registro.</p>
+              <a href="/IMPORTADORES/administrador/aprobarAgencias" 
+              class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/aprobarAgencias' ? 'active' : '' ?>">
+                Ver agencias solicitantes</a>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card shadow-sm p-3">
+              <h5 class="text-success">Alta de agencias</h5>
+              <p>Da de alta manualmente una agencia.</p>
+              <a href="/IMPORTADORES/administrador/altaAgencias" 
+              class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/altaAgencias' ? 'active' : '' ?>">
+                Nueva agencia
+              </a>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card shadow-sm p-3">
+              <h5 class="text-info">Aprobar de usuarios</h5>
+              <p>Aprueba los usuarios que solicitaron un registro.</p>
+              <a href="/IMPORTADORES/administrador/aprobarUsuarios"
+              class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/aprobarUsuarios' ? 'active' : '' ?>">
+                Ver usuarios solicitantes
+              </a>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card shadow-sm p-3">
+              <h5 class="text-indigo">Alta de usuarios</h5>
+              <p>Da de alta manualmente a un usuario.</p>
+              <a href="/IMPORTADORES/administrador/altaUsuarios"
+              class="btn btn-indigo btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/altaUsuarios' ? 'active' : '' ?>">
+                Nuevo usuario
+              </a>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card shadow-sm p-3">
+              <h5 class="text-warning">Configuración</h5>
+              <p>Administra los datos de tu agencia.</p>
+              <a href="/IMPORTADORES/administrador/configuracion"
+              class="btn btn-warning btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/configuracion' ? 'active' : '' ?>">
+                Configurar
+              </a>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card shadow-sm p-3">
+              <h5 class="text-danger">Cerrar sesión</h5>
+              <p>Salir del sistema de forma segura.</p>
+              <a href="/IMPORTADORES/sistemas/logout" class="btn btn-danger btn-sm mt-2">Logout</a>
+            </div>
+          </div>
+        <!-- <?php // endforeach; ?> -->
       </div>
 
-      <div class="col-md-4">
+      <!-- <?php // if (count($catalogosData['catalogos']) === 2): // Solo obligatorios ?>
-        <div class="card shadow-sm p-3">
+        <div class="row mt-4">
-          <h5 class="text-success">Alta de agencias</h5>
+          <div class="col-12">
-          <p>Da de alta manualmente una agencia.</p>
+            <div class="alert alert-info alert-animated">
-          <a href="/IMPORTADORES/administrador/altaAgencias" 
+              <div class="d-flex align-items-center">
-           class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/altaAgencias' ? 'active' : '' ?>">
+                <div class="me-3">
-            Nueva agencia
+                  <i class="fas fa-lightbulb fa-2x text-info animate__animated animate__pulse animate__infinite"></i>
-          </a>
+                </div>
+                <div class="flex-grow-1">
+                  <h6 class="alert-heading">💡 Consejo</h6>
+                  <p class="mb-2">Parece que no tienes catálogos activados. Puedes activar los que necesites desde tus preferencias.</p>
+                  <button class="btn btn-primary btn-sm btn-pulse" onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/catalogos')">
+                    <span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                    <span class="btn-text">Configurar Catálogos</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
+      <?php // endif; ?>
         
-      <div class="col-md-4">
+    <?php // else: ?>
-        <div class="card shadow-sm p-3">
+      <! -- Si los catálogos están completamente desactivados -- >
-          <h5 class="text-info">Aprobar de usuarios</h5>
+      <div class="row g-4">
-          <p>Aprueba los usuarios que solicitaron un registro.</p>
+        <div class="col-12">
-          <a href="/IMPORTADORES/administrador/aprobarUsuarios"
+          <div class="alert alert-warning alert-animated">
-           class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/aprobarUsuarios' ? 'active' : '' ?>">
+            <div class="d-flex align-items-center">
-            Ver usuarios solicitantes
+              <div class="me-3">
-          </a>
+                <i class="fas fa-lock fa-2x text-warning animate__animated animate__swing animate__infinite"></i>
+              </div>
+              <div class="flex-grow-1">
+                <h5 class="alert-heading">🔒 Catálogos Desactivados</h5>
+                <p class="mb-3">Los catálogos están desactivados en tus preferencias. Solo tienes acceso a las funciones básicas del sistema.</p>
+                <button class="btn btn-primary btn-sm btn-pulse" onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/catalogos')">
+                  <span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                  <span class="btn-text">Activar Catálogos</span>
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
                 
-      <div class="col-md-4">
+        <! -- Mostrar solo catálogos obligatorios -- >
-        <div class="card shadow-sm p-3">
+        <?php /*
-          <h5 class="text-indigo">Alta de usuarios</h5>
+          $delay = 0;
-          <p>Da de alta manualmente a un usuario.</p>
+          foreach ($catalogosData['catalogos'] as $catalogo): 
-          <a href="/IMPORTADORES/administrador/altaUsuarios"
+          $delay += 0.1;
-           class="btn btn-indigo btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/altaUsuarios' ? 'active' : '' ?>">
+        ?>
-            Nuevo usuario
+          <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
-          </a>
+            <div class="card shadow-sm p-3 card-hover border-warning border-warning-animated h-100">
-        </div>
+              <h5 class="text-<?= $catalogo['color'] ?> mb-3">
+                <i class="<?= obtenerIconoCatalogo($catalogo['nombre']) ?> me-2"></i>
+                <?= $catalogo['nombre'] ?>
+              </h5>
+              <p class="text-muted small flex-grow-1"><?= $catalogo['descripcion'] ?></p>
+              <div class="mt-auto">
+                <button 
+                    class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-2 w-100 btn-animated <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>"
+                    onclick="navigateWithAnimation(this, '<?= $catalogo['ruta'] ?>')"
+                    data-url="<?= $catalogo['ruta'] ?>">
+                  <span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                  <span class="btn-text"><?= $catalogo['accion'] ?></span>
+                </button>
+              </div>
+              <small class="text-warning mt-2 d-flex align-items-center">
+                <i class="fas fa-lock me-1 animate__animated animate__pulse animate__infinite"></i>
+                Función básica
+              </small>
+            </div>
+          </div>
+        <?php endforeach; */ ?>
       </div>
-
+    <?php // endif; ?> -->
-      <div class="col-md-4">
-        <div class="card shadow-sm p-3">
-          <h5 class="text-warning">Configuración</h5>
-          <p>Administra los datos de tu agencia.</p>
-          <a href="/IMPORTADORES/administrador/configuracion"
-           class="btn btn-warning btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/configuracion' ? 'active' : '' ?>">
-            Configurar
-          </a>
-        </div>
-      </div>
-
-      <div class="col-md-4">
-        <div class="card shadow-sm p-3">
-          <h5 class="text-danger">Cerrar sesión</h5>
-          <p>Salir del sistema de forma segura.</p>
-          <a href="/IMPORTADORES/sistemas/logout" class="btn btn-danger btn-sm mt-2">Logout</a>
-        </div>
-      </div>
-    </div>
-
   </div>
 
+  <script>
+    // Función para navegación con animación
+    function navigateWithAnimation(button, url) {
+      // Añadir estado de carga
+      button.classList.add('btn-loading');
+      button.disabled = true;
+            
+      // Simular carga y navegar
+      setTimeout(function() {
+        window.location.href = url;
+      }, 1000);
+    }
+        
+    // Animación de entrada escalonada para las tarjetas
+    document.addEventListener('DOMContentLoaded', function() {
+      const cards = document.querySelectorAll('.card-hover');
+            
+      // Efecto de revelado progresivo
+      cards.forEach((card, index) => {
+        card.style.animationDelay = (index * 0.1) + 's';
+      });
+    });
+        
+    // Efecto de hover mejorado
+    document.querySelectorAll('.card-hover').forEach(card => {
+      card.addEventListener('mouseenter', function() {
+        this.style.transform = 'translateY(-5px) scale(1.02)';
+      });
+            
+      card.addEventListener('mouseleave', function() {
+        this.style.transform = 'translateY(0) scale(1)';
+      });
+    });
+        
+    // Animación para alertas que se pueden cerrar
+    document.querySelectorAll('.alert').forEach(alert => {
+      alert.addEventListener('closed.bs.alert', function() {
+        this.style.animation = 'slideOutUp 0.5s ease-in';
+      });
+    });
+  </script>
+
 </body>
 </html>

views/admin/usuarios_inactivos.php

@@ -14,6 +14,10 @@
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -32,6 +36,32 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     table.dataTable thead th { background:#343a40; color:#fff; }
   </style>
 </head>
@@ -39,8 +69,8 @@
 
   <!-- 📄 CONTENIDO -->
   <div class="content">
-    <h4 class="mb-4">🚷 Usuarios Inactivos</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🚷 Usuarios Inactivos</h4>
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-striped" id="tabla-inactivos">
           <thead class="table-dark">
@@ -65,8 +95,8 @@
                 <td><?= isset($u['creado_en']) && $u['creado_en'] instanceof DateTime ? $u['creado_en']->format('Y-m-d H:i') : '' ?></td>
                 <td>
                   <?php if (isset($u['activo']) && $u['activo'] == 0): ?>
-                    <a href="/IMPORTADORES/administrador/activar?id=<?= $u['id_usuario'] ?>&success=1" class="btn btn-sm btn-success">Activar</a>
+                    <a href="/IMPORTADORES/administrador/activar?id=<?= $u['id_usuario'] ?>&success=1" class="btn btn-sm btn-success mt-auto w-auto btn-animated">Activar</a>
-                    <a href="/IMPORTADORES/administrador/reset_password?id=<?= $u['id_usuario'] ?>" class="btn btn-sm btn-secondary">Nueva Contraseña</a>
+                    <a href="/IMPORTADORES/administrador/reset_password?id=<?= $u['id_usuario'] ?>" class="btn btn-sm btn-secondary mt-auto w-auto btn-animated">Nueva Contraseña</a>
                   <?php endif; ?>
                 </td>
               </tr>

views/agencias/alta_agentes.php

@@ -12,6 +12,10 @@
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -30,6 +34,32 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     table.dataTable thead th { background: #343a40; color: #fff; }
   </style>
 </head>
@@ -37,9 +67,9 @@
 
   <!-- 📄 CONTENIDO -->
   <div class="content px-4">
-    <h3 class="mb-4">👨‍✈️ Administración de Agentes</h3>
+    <h3 class="mb-4 animate__animated animate__fadeInDown title_glow">👨‍✈️ Administración de Agentes</h3>
     <!-- FORMULARIO -->
-    <div class="card p-4 mb-4 shadow-sm bg-white">
+    <div class="card p-4 mb-4 shadow-sm bg-white card-hover position-relative h-auto">
       <form action="/IMPORTADORES/agencias/guardarAgente" method="POST">
         <h5 class="mb-3">➕ Nuevo Agente</h5>
         <div class="row g-3">
@@ -60,7 +90,7 @@
           </div>
         </div>
         <div class="text-end mt-4">
-          <button class="btn btn-success px-4">Registrar</button>
+          <button class="btn btn-success px-4 mt-auto w-auto btn-animated">Registrar</button>
         </div>
       </form>
     </div>

views/agencias/dashboard_agencias.php

@@ -8,6 +8,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -22,9 +26,18 @@
     .btn-orange { background-color: orangeRed; color: white; }
     .btn-orange:hover { background-color: #ff3600; color: white; }
     .text-orange { color: orangeRed; }
-    .btn-teal { background-color: 	#20c997; color: white; }
+    .btn-teal { background-color: #4dd4ac ; color: white; }
-    .btn-teal:hover { background-color: #4dd4ac; color: black; }
+    .btn-teal:hover { background-color: #20c997; color: black; }
-    .text-teal {  color: #20c997; }
+    .text-teal { color: 	#4dd4ac; }
+    .btn-lime { background-color: 	#84cc16; color: white; }
+    .text-lime { color: 	#84cc16; }
+    .btn-lime:hover { background-color: #65a30d; color: black; }
+    .btn-cyan { background-color: #06b6d4; color: white; }
+    .text-cyan { color: #06b6d4; }
+    .btn-cyan:hover { background-color: #0891b2; color: white; }
+    .btn-violet { background-color: #8b5cf6; color: white; }
+    .text-violet { color: #8b5cf6; }
+    .btn-violet:hover { background-color: #7c3aed; color: white; }
     /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
     @media (min-width: 768px) { .content { margin-left: 250px; /* Ancho del sidebar */ } }
     /* En móviles, sin margen lateral */
@@ -35,6 +48,35 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; }
+    .card-hover:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.6s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .loading-spinner { display: none; }
+    .btn-loading .loading-spinner { display: inline-block; }
+    .btn-loading .btn-text { display: none; }
+    /* Animación para alertas */
+    .alert-animated { animation: slideInDown 0.5s ease-out; }
+    @keyframes slideInDown {
+      from { transform: translateY(-100%); opacity: 0; }
+      to { transform: translateY(0); opacity: 1; }
+    }
+    /* Efecto de parpadeo para elementos obligatorios */
+    .border-warning-animated { animation: borderGlow 2s ease-in-out infinite alternate; }
+    @keyframes borderGlow {
+      from { border-color: #ffc107; box-shadow: 0 0 5px rgba(255, 193, 7, 0.5); }
+      to { border-color: #ffcd39; box-shadow: 0 0 20px rgba(255, 193, 7, 0.8); }
+    }  
   </style>
 </head>
 <body>
@@ -43,83 +85,206 @@
   <div class="content">
     <h4 class="mb-4">📦 Panel de Agencia Aduanal</h4>
 
-    <div class="row g-4">
+    <!-- <?php // if ($catalogosData['catalogos_activos']): ?> -->
-      <div class="col-md-4">
+      <div class="row g-4">
-        <div class="card shadow-sm p-3">
+        <!-- <?php 
-          <h5 class="text-primary">Solicitudes de vinculación</h5>
+        //   $delay = 0;
-          <p>Aprueba las solicitudes de vinculación de los importadores.</p>
+        //   foreach ($catalogosData['catalogos'] as $catalogo): 
-          <a href="/IMPORTADORES/vinculaciones/solicitudesVinculacion"
+        //   $delay += 0.1; // Incrementar el retraso para cada catálogo
-            class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/vinculaciones/solicitudesVinculacion' ? 'active' : '' ?>">
+        ?> -->
-              Ver solicitudes
+          <div class="col-md-4">
-          </a>
+            <div class="card shadow-sm p-3">
-        </div>
+              <h5 class="text-primary">Solicitudes de vinculación</h5>
+              <p>Aprueba las solicitudes de vinculación de los importadores.</p>
+              <a href="/IMPORTADORES/vinculaciones/solicitudesVinculacion"
+                class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/vinculaciones/solicitudesVinculacion' ? 'active' : '' ?>">
+                  Ver solicitudes
+              </a>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card shadow-sm p-3">
+              <h5 class="text-success">Usuarios vinculados</h5>
+              <p>Consulta los que ya fueron autorizados.</p>
+              <a href="/IMPORTADORES/vinculaciones/vinculacionesAgencia"
+                class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/vinculaciones/vinculacionesAgencia' ? 'active' : '' ?>">
+                  Ver usuarios
+              </a>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card shadow-sm p-3">
+              <h5 class="text-info">Alta de agentes</h5>
+              <p>Da de alta a tus agentes aduanales.</p>
+              <a href="/IMPORTADORES/agencias/alta"
+                class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/agencias/alta' ? 'active' : '' ?>">
+                  Nuevo agente
+              </a>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card shadow-sm p-3">
+              <h5 class="text-indigo">Patentes</h5>
+              <p>Gestiona las patentes de la agencia.</p>
+              <a href="/IMPORTADORES/patente/dashboard"
+                class="btn btn-indigo btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/patente/dashboard' ? 'active' : '' ?>">
+                  Ver agentes
+              </a>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card shadow-sm p-3">
+              <h5 class="text-warning">Configuración</h5>
+              <p>Administra tus datos y preferencias.</p>
+              <a href="/IMPORTADORES/configuracion"
+                class="btn btn-warning btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/agencias/configuracion' ? 'active' : '' ?>">
+                  Configurar
+              </a>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card shadow-sm p-3">
+              <h5 class="text-orange">Locaciones</h5>
+              <p>Gestiona la locaciones validas para nuevos registros.</p>
+              <a href="/IMPORTADORES/locaciones/lista"
+                class="btn btn-orange btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/locaciones/lista' ? 'active' : '' ?>">
+                  Gestionar locaciones
+              </a>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card shadow-sm p-3">
+              <h5 class="text-danger">Cerrar sesión</h5>
+              <p>Salir del sistema de forma segura.</p>
+              <a href="/IMPORTADORES/sistemas/logout" class="btn btn-danger btn-sm mt-2">Logout</a>
+            </div>
+          </div>
+        <!-- <?php // endforeach; ?> -->
       </div>
 
-      <div class="col-md-4">
+      <!-- <?php // if (count($catalogosData['catalogos']) === 2): // Solo obligatorios ?>
-        <div class="card shadow-sm p-3">
+        <div class="row mt-4">
-          <h5 class="text-success">Usuarios vinculados</h5>
+          <div class="col-12">
-          <p>Consulta los que ya fueron autorizados.</p>
+            <div class="alert alert-info alert-animated">
-          <a href="/IMPORTADORES/vinculaciones/vinculacionesAgencia"
+              <div class="d-flex align-items-center">
-            class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/vinculaciones/vinculacionesAgencia' ? 'active' : '' ?>">
+                <div class="me-3">
-              Ver usuarios
+                  <i class="fas fa-lightbulb fa-2x text-info animate__animated animate__pulse animate__infinite"></i>
-          </a>
+                </div>
+                <div class="flex-grow-1">
+                  <h6 class="alert-heading">💡 Consejo</h6>
+                  <p class="mb-2">Parece que no tienes catálogos activados. Puedes activar los que necesites desde tus preferencias.</p>
+                  <button class="btn btn-primary btn-sm btn-pulse" onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/catalogos')">
+                    <span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                    <span class="btn-text">Configurar Catálogos</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
+      <?php // endif; ?>
         
-      <div class="col-md-4">
+    <?php // else: ?>
-        <div class="card shadow-sm p-3">
+      <! -- Si los catálogos están completamente desactivados -- >
-          <h5 class="text-info">Alta de agentes</h5>
+      <div class="row g-4">
-          <p>Da de alta a tus agentes aduanales.</p>
+        <div class="col-12">
-          <a href="/IMPORTADORES/agencias/alta"
+          <div class="alert alert-warning alert-animated">
-            class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/agencias/alta' ? 'active' : '' ?>">
+            <div class="d-flex align-items-center">
-              Nuevo agente
+              <div class="me-3">
-          </a>
+                <i class="fas fa-lock fa-2x text-warning animate__animated animate__swing animate__infinite"></i>
+              </div>
+              <div class="flex-grow-1">
+                <h5 class="alert-heading">🔒 Catálogos Desactivados</h5>
+                <p class="mb-3">Los catálogos están desactivados en tus preferencias. Solo tienes acceso a las funciones básicas del sistema.</p>
+                <button class="btn btn-primary btn-sm btn-pulse" onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/catalogos')">
+                  <span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                  <span class="btn-text">Activar Catálogos</span>
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
                 
-      <div class="col-md-4">
+        <! -- Mostrar solo catálogos obligatorios -- >
-        <div class="card shadow-sm p-3">
+        <?php /*
-          <h5 class="text-indigo">Patentes</h5>
+          $delay = 0;
-          <p>Gestiona las patentes de la agencia.</p>
+          foreach ($catalogosData['catalogos'] as $catalogo): 
-          <a href="/IMPORTADORES/patente/dashboard"
+          $delay += 0.1;
-            class="btn btn-indigo btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/patente/dashboard' ? 'active' : '' ?>">
+        ?>
-              Ver agentes
+          <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
-          </a>
+            <div class="card shadow-sm p-3 card-hover border-warning border-warning-animated h-100">
-        </div>
+              <h5 class="text-<?= $catalogo['color'] ?> mb-3">
+                <i class="<?= obtenerIconoCatalogo($catalogo['nombre']) ?> me-2"></i>
+                <?= $catalogo['nombre'] ?>
+              </h5>
+              <p class="text-muted small flex-grow-1"><?= $catalogo['descripcion'] ?></p>
+              <div class="mt-auto">
+                <button 
+                    class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-2 w-100 btn-animated <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>"
+                    onclick="navigateWithAnimation(this, '<?= $catalogo['ruta'] ?>')"
+                    data-url="<?= $catalogo['ruta'] ?>">
+                  <span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                  <span class="btn-text"><?= $catalogo['accion'] ?></span>
+                </button>
+              </div>
+              <small class="text-warning mt-2 d-flex align-items-center">
+                <i class="fas fa-lock me-1 animate__animated animate__pulse animate__infinite"></i>
+                Función básica
+              </small>
+            </div>
+          </div>
+        <?php endforeach; */ ?>
       </div>
-
+    <?php // endif; ?> -->
-      <div class="col-md-4">
-        <div class="card shadow-sm p-3">
-          <h5 class="text-warning">Configuración</h5>
-          <p>Administra tus datos y preferencias.</p>
-          <a href="/IMPORTADORES/configuracion"
-            class="btn btn-warning btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/agencias/configuracion' ? 'active' : '' ?>">
-              Configurar
-          </a>
-        </div>
-      </div>
-
-      <div class="col-md-4">
-        <div class="card shadow-sm p-3">
-          <h5 class="text-orange">Locaciones</h5>
-          <p>Gestiona la locaciones validas para nuevos registros.</p>
-          <a href="/IMPORTADORES/locaciones/lista"
-            class="btn btn-orange btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/locaciones/lista' ? 'active' : '' ?>">
-              Gestionar locaciones
-          </a>
-        </div>
-      </div>
-
-      <div class="col-md-4">
-        <div class="card shadow-sm p-3">
-          <h5 class="text-danger">Cerrar sesión</h5>
-          <p>Salir del sistema de forma segura.</p>
-          <a href="/IMPORTADORES/sistemas/logout" class="btn btn-danger btn-sm mt-2">Logout</a>
-        </div>
-      </div>
-    </div>
-
   </div>
 
+  <script>
+    // Función para navegación con animación
+    function navigateWithAnimation(button, url) {
+      // Añadir estado de carga
+      button.classList.add('btn-loading');
+      button.disabled = true;
+            
+      // Simular carga y navegar
+      setTimeout(function() {
+        window.location.href = url;
+      }, 1000);
+    }
+        
+    // Animación de entrada escalonada para las tarjetas
+    document.addEventListener('DOMContentLoaded', function() {
+      const cards = document.querySelectorAll('.card-hover');
+            
+      // Efecto de revelado progresivo
+      cards.forEach((card, index) => {
+        card.style.animationDelay = (index * 0.1) + 's';
+      });
+    });
+        
+    // Efecto de hover mejorado
+    document.querySelectorAll('.card-hover').forEach(card => {
+      card.addEventListener('mouseenter', function() {
+        this.style.transform = 'translateY(-5px) scale(1.02)';
+      });
+            
+      card.addEventListener('mouseleave', function() {
+        this.style.transform = 'translateY(0) scale(1)';
+      });
+    });
+        
+    // Animación para alertas que se pueden cerrar
+    document.querySelectorAll('.alert').forEach(alert => {
+      alert.addEventListener('closed.bs.alert', function() {
+        this.style.animation = 'slideOutUp 0.5s ease-in';
+      });
+    });
+  </script>
+
 </body>
 </html>

views/agentes/dashboard_agentes.php

@@ -11,6 +11,10 @@ include __DIR__ . '/../partials/sidebar_agente.php';
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -19,9 +23,24 @@ include __DIR__ . '/../partials/sidebar_agente.php';
     .sidebar .nav-link.active { background-color: #495057; color: #fff; }
     .content { margin-top: 56px; padding: 40px 20px; position: relative; z-index: 1; background-color: #f4f6f9; transition: margin-left 0.3s ease; }
     .navbar { position: fixed; top: 0; width: 100%; z-index: 1050; }
-    .btn-orange { background-color: orangeRed; color: white;}
+    .btn-indigo { background-color: #6610f2; color: white; }
-    .btn-orange:hover { background-color: #ff3600; color: white;}
+    .btn-indigo:hover { background-color: #520dc2; color: white; }
-    .text-orange { color: orangeRed;}
+    .text-indigo { color:  #520dc2; }
+    .btn-orange { background-color: orangeRed; color: white; }
+    .btn-orange:hover { background-color: #ff3600; color: white; }
+    .text-orange { color: orangeRed; }
+    .btn-teal { background-color: #4dd4ac ; color: white; }
+    .btn-teal:hover { background-color: #20c997; color: black; }
+    .text-teal { color: 	#4dd4ac; }
+    .btn-lime { background-color: 	#84cc16; color: white; }
+    .text-lime { color: 	#84cc16; }
+    .btn-lime:hover { background-color: #65a30d; color: black; }
+    .btn-cyan { background-color: #06b6d4; color: white; }
+    .text-cyan { color: #06b6d4; }
+    .btn-cyan:hover { background-color: #0891b2; color: white; }
+    .btn-violet { background-color: #8b5cf6; color: white; }
+    .text-violet { color: #8b5cf6; }
+    .btn-violet:hover { background-color: #7c3aed; color: white; }
     /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
     @media (min-width: 768px) { .content { margin-left: 250px; /* Ancho del sidebar */ } }
     /* En móviles, sin margen lateral */
@@ -32,6 +51,35 @@ include __DIR__ . '/../partials/sidebar_agente.php';
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; }
+    .card-hover:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.6s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .loading-spinner { display: none; }
+    .btn-loading .loading-spinner { display: inline-block; }
+    .btn-loading .btn-text { display: none; }
+    /* Animación para alertas */
+    .alert-animated { animation: slideInDown 0.5s ease-out; }
+    @keyframes slideInDown {
+      from { transform: translateY(-100%); opacity: 0; }
+      to { transform: translateY(0); opacity: 1; }
+    }
+    /* Efecto de parpadeo para elementos obligatorios */
+    .border-warning-animated { animation: borderGlow 2s ease-in-out infinite alternate; }
+    @keyframes borderGlow {
+      from { border-color: #ffc107; box-shadow: 0 0 5px rgba(255, 193, 7, 0.5); }
+      to { border-color: #ffcd39; box-shadow: 0 0 20px rgba(255, 193, 7, 0.8); }
+    }
   </style>
 </head>
 <body>
@@ -40,61 +88,184 @@ include __DIR__ . '/../partials/sidebar_agente.php';
   <div class="content">
     <h4 class="mb-4">📦 Panel del Agente Aduanal</h4>
 
-    <div class="row g-4">
+    <!-- <?php // if ($catalogosData ['catalogos_activos']): ?> -->
-      <div class="col-md-4">
+      <div class="row g-4">
-        <div class="card shadow-sm p-3">
+        <!-- <?php 
-          <h5 class="text-primary">Importadores vinculados</h5>
+        //   $delay = 0;
-          <p>Consulta los que ya fueron autorizados.</p>
+        //   foreach ($catalogosData['catalogos'] as $catalogo): 
-          <a href="/IMPORTADORES/agentes/vinculados"
+        //   $delay += 0.1; // Incrementar el retraso para cada catálogo
-            class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/agentes/vinculados' ? 'active' : '' ?>">
+        ?> -->
-              Ver importadores
+          <div class="col-md-4">
-          </a>
+            <div class="card shadow-sm p-3">
-        </div>
+              <h5 class="text-primary">Importadores vinculados</h5>
+              <p>Consulta los que ya fueron autorizados.</p>
+              <a href="/IMPORTADORES/agentes/vinculados"
+                class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/agentes/vinculados' ? 'active' : '' ?>">
+                  Ver importadores
+              </a>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card shadow-sm p-3">
+              <h5 class="text-success">Patentes</h5>
+              <p>Gestiona las patentes de la agencia.</p>
+              <a href="/IMPORTADORES/patente/dashboard"
+                class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES//patente/dashboard' ? 'active' : '' ?>">
+                  Ver solicitudes
+              </a>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card shadow-sm p-3">
+              <h5 class="text-info">Locaciones</h5>
+              <p>Gestiona la locaciones validas para nuevos registros.</p>
+              <a href="/IMPORTADORES/locaciones/lista"
+                class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/locaciones/lista' ? 'active' : '' ?>">
+                  Gestionar locaciones
+              </a>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card shadow-sm p-3">
+              <h5 class="text-warning">Configuración</h5>
+              <p>Administra tus datos y preferencias.</p>
+              <a href="/IMPORTADORES/configuracion"
+                class="btn btn-warning btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/agentes/configuracion' ? 'active' : '' ?>">
+                  Configurar
+              </a>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card shadow-sm p-3">
+              <h5 class="text-danger">Cerrar sesión</h5>
+              <p>Salir del sistema de forma segura.</p>
+              <a href="/IMPORTADORES/sistemas/logout" class="btn btn-danger btn-sm mt-2">Logout</a>
+            </div>
+          </div>
+        <!-- <?php // endforeach; ?> -->
       </div>
 
-      <div class="col-md-4">
+      <!-- <?php // if (count($catalogosData['catalogos']) === 2): // Solo obligatorios ?>
-        <div class="card shadow-sm p-3">
+        <div class="row mt-4">
-          <h5 class="text-success">Patentes</h5>
+          <div class="col-12">
-          <p>Gestiona las patentes de la agencia.</p>
+            <div class="alert alert-info alert-animated">
-          <a href="/IMPORTADORES/patente/dashboard"
+              <div class="d-flex align-items-center">
-            class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES//patente/dashboard' ? 'active' : '' ?>">
+                <div class="me-3">
-              Ver solicitudes
+                  <i class="fas fa-lightbulb fa-2x text-info animate__animated animate__pulse animate__infinite"></i>
-          </a>
+                </div>
+                <div class="flex-grow-1">
+                  <h6 class="alert-heading">💡 Consejo</h6>
+                  <p class="mb-2">Parece que no tienes catálogos activados. Puedes activar los que necesites desde tus preferencias.</p>
+                  <button class="btn btn-primary btn-sm btn-pulse" onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/catalogos')">
+                    <span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                    <span class="btn-text">Configurar Catálogos</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
+      <?php // endif; ?>
         
-      <div class="col-md-4">
+    <?php // else: ?>
-        <div class="card shadow-sm p-3">
+      <! -- Si los catálogos están completamente desactivados -- >
-          <h5 class="text-info">Locaciones</h5>
+      <div class="row g-4">
-          <p>Gestiona la locaciones validas para nuevos registros.</p>
+        <div class="col-12">
-          <a href="/IMPORTADORES/locaciones/lista"
+          <div class="alert alert-warning alert-animated">
-            class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/locaciones/lista' ? 'active' : '' ?>">
+            <div class="d-flex align-items-center">
-              Gestionar locaciones
+              <div class="me-3">
-          </a>
+                <i class="fas fa-lock fa-2x text-warning animate__animated animate__swing animate__infinite"></i>
+              </div>
+              <div class="flex-grow-1">
+                <h5 class="alert-heading">🔒 Catálogos Desactivados</h5>
+                <p class="mb-3">Los catálogos están desactivados en tus preferencias. Solo tienes acceso a las funciones básicas del sistema.</p>
+                <button class="btn btn-primary btn-sm btn-pulse" onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/catalogos')">
+                  <span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                  <span class="btn-text">Activar Catálogos</span>
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
                 
-      <div class="col-md-4">
+        <! -- Mostrar solo catálogos obligatorios -- >
-        <div class="card shadow-sm p-3">
+        <?php /*
-          <h5 class="text-warning">Configuración</h5>
+          $delay = 0;
-          <p>Administra tus datos y preferencias.</p>
+          foreach ($catalogosData['catalogos'] as $catalogo): 
-          <a href="/IMPORTADORES/configuracion"
+          $delay += 0.1;
-            class="btn btn-warning btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/agentes/configuracion' ? 'active' : '' ?>">
+        ?>
-              Configurar
+          <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
-          </a>
+            <div class="card shadow-sm p-3 card-hover border-warning border-warning-animated h-100">
-        </div>
+              <h5 class="text-<?= $catalogo['color'] ?> mb-3">
+                <i class="<?= obtenerIconoCatalogo($catalogo['nombre']) ?> me-2"></i>
+                <?= $catalogo['nombre'] ?>
+              </h5>
+              <p class="text-muted small flex-grow-1"><?= $catalogo['descripcion'] ?></p>
+              <div class="mt-auto">
+                <button 
+                    class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-2 w-100 btn-animated <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>"
+                    onclick="navigateWithAnimation(this, '<?= $catalogo['ruta'] ?>')"
+                    data-url="<?= $catalogo['ruta'] ?>">
+                  <span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                  <span class="btn-text"> <?= $catalogo['accion'] ?></span>
+                </button>
+              </div>
+              <small class="text-warning mt-2 d-flex align-items-center">
+                <i class="fas fa-lock me-1 animate__animated animate__pulse animate__infinite"></i>
+                Función básica
+              </small>
+            </div>
+          </div>
+        <?php endforeach; */ ?>
       </div>
-
+    <?php // endif; ?> -->
-      <div class="col-md-4">
-        <div class="card shadow-sm p-3">
-          <h5 class="text-danger">Cerrar sesión</h5>
-          <p>Salir del sistema de forma segura.</p>
-          <a href="/IMPORTADORES/sistemas/logout" class="btn btn-danger btn-sm mt-2">Logout</a>
-        </div>
-      </div>
-    </div>
-
   </div>
 
+  <script>
+    // Función para navegación con animación
+    function navigateWithAnimation(button, url) {
+      // Añadir estado de carga
+      button.classList.add('btn-loading');
+      button.disabled = true;
+            
+      // Simular carga y navegar
+      setTimeout(function() {
+        window.location.href = url;
+      }, 1000);
+    }
+        
+    // Animación de entrada escalonada para las tarjetas
+    document.addEventListener('DOMContentLoaded', function() {
+      const cards = document.querySelectorAll('.card-hover');
+            
+      // Efecto de revelado progresivo
+      cards.forEach((card, index) => {
+        card.style.animationDelay = (index * 0.1) + 's';
+      });
+    });
+        
+    // Efecto de hover mejorado
+    document.querySelectorAll('.card-hover').forEach(card => {
+      card.addEventListener('mouseenter', function() {
+        this.style.transform = 'translateY(-5px) scale(1.02)';
+      });
+            
+      card.addEventListener('mouseleave', function() {
+        this.style.transform = 'translateY(0) scale(1)';
+      });
+    });
+        
+    // Animación para alertas que se pueden cerrar
+    document.querySelectorAll('.alert').forEach(alert => {
+      alert.addEventListener('closed.bs.alert', function() {
+        this.style.animation = 'slideOutUp 0.5s ease-in';
+      });
+    });
+  </script>
+
 </body>
 </html>

views/automatizaciones/automatizaciones.php

@@ -8,6 +8,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -26,12 +30,38 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
     <div class="content">
-      <h4 class="mb-4">⚙️ Automatizaciones</h4>
+      <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">⚙️ Automatizaciones</h4>
     </div>
 
 </body>

views/bitacoras/bitacora_agencias.php

@@ -11,6 +11,10 @@
   <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -29,15 +33,41 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     table.dataTable thead th { background: #343a40; color: #fff; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">🏪 Registro de Agencias</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🏪 Registro de Agencias</h4>
 
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-striped" id="tabla-registros-agencias">
           <thead class="table-dark">

views/bitacoras/bitacora_cambios.php

@@ -11,6 +11,10 @@
   <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -29,15 +33,41 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .table thead th { background: #343a40; color: #fff; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">🔄 Cambios de Usuario</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🔄 Cambios de Usuario</h4>
 
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-striped align-middle" id="tabla-bitacora-usuarios">
           <thead class="table-dark">

views/bitacoras/bitacora_sistema.php

@@ -11,6 +11,10 @@
   <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -29,15 +33,41 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     table.dataTable thead th { background: #343a40; color: #fff; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">👥 Acceso de Usuarios</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">👥 Acceso de Usuarios</h4>
 
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-striped" id="tabla-logins">
           <thead class="table-dark">

views/bitacoras/bitacora_usuario.php

@@ -11,6 +11,10 @@
   <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -29,15 +33,41 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     table.dataTable thead th { background: #343a40; color: #fff; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">👥 Mi Actividad</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">👥 Mi Actividad</h4>
 
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-striped" id="tabla-logins-usuario">
           <thead class="table-dark">

views/bitacoras/bitacora_usuarios.php

@@ -11,6 +11,10 @@
   <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -29,15 +33,41 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     table.dataTable thead th { background: #343a40; color: #fff; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">👥 Registro de Usuarios</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">👥 Registro de Usuarios</h4>
 
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-striped" id="tabla-registros-usuarios">
           <thead class="table-dark">

views/bitacoras/bitacora_vinculaciones.php

@@ -11,6 +11,10 @@
   <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -29,15 +33,41 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     table.dataTable thead th { background: #343a40; color: #fff; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">🔗 Vinculaciones</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🔗 Vinculaciones</h4>
 
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-striped align-middle" id="tabla-bitacora-vinculaciones">
           <thead class="table-dark">

views/bitacoras/dashboard_bitacoras.php

@@ -8,6 +8,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -29,158 +33,304 @@
     .btn-indigo { background-color: #6610f2; color: white; }
     .btn-indigo:hover { background-color: #520dc2; color: white; }
     .text-indigo { color:  #520dc2; }
+    .btn-orange { background-color: orangeRed; color: white; }
+    .btn-orange:hover { background-color: #ff3600; color: white; }
+    .text-orange { color: orangeRed; }
+    .btn-teal { background-color: #4dd4ac ; color: white; }
+    .btn-teal:hover { background-color: #20c997; color: black; }
+    .text-teal { color: 	#4dd4ac; }
+    .btn-lime { background-color: 	#84cc16; color: white; }
+    .text-lime { color: 	#84cc16; }
+    .btn-lime:hover { background-color: #65a30d; color: black; }
+    .btn-cyan { background-color: #06b6d4; color: white; }
+    .text-cyan { color: #06b6d4; }
+    .btn-cyan:hover { background-color: #0891b2; color: white; }
+    .btn-violet { background-color: #8b5cf6; color: white; }
+    .text-violet { color: #8b5cf6; }
+    .btn-violet:hover { background-color: #7c3aed; color: white; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Botón con efecto de loading */
+    .btn-loading { position: relative; color: transparent !important; pointer-events: none; }
+    .btn-loading::after { content: ''; position: absolute; width: 20px; height: 20px; top: 50%; left: 50%;
+      margin-left: -10px; margin-top: -10px; border: 2px solid #fff; border-radius: 50%; border-top-color: transparent; animation: spin 1s linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">📖 Bitácoras</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title-glow">📖 Bitácoras</h4>
 
     <div class="row g-4">
       <?php if ($_SESSION['tipo_usuario'] === 'super_admin'): ?>
-        <div class="col-md-4">
+        <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-          <div class="card shadow-sm p-3">
+          <div class="card shadow-sm p-3 card-hover position-relative h-100">
-            <h5 class="text-primary">Registro de accesos</h5>
+            <div class="card-body p-0 d-flex flex-column">
-            <p>Ver actividad de los usuarios.</p>
+              <h5 class="text-teal mb-3">Registro de accesos</h5>
-            <a href="/IMPORTADORES/bitacoras/sistema"
+              <p class="text-muted small flex-grow-1 mb-4">Ver actividad de los usuarios.</p>
-              class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/sistema' ? 'active' : '' ?>">
+              <button class="btn btn-teal btn-sm mt-auto w-100 btn-animated"
-              Ver actividad
+                      onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/sistema')">
-            </a>
+                Ver actividad  
+              </button>
+            </div>
           </div>
         </div>
-        <div class="col-md-4">
+        <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-          <div class="card shadow-sm p-3">
+          <div class="card shadow-sm p-3 card-hover position-relative h-100">
-            <h5 class="text-success">Cambios de usuarios</h5>
+            <div class="card-body p-0 d-flex flex-column">
-            <p>Ver cambios realizados por los usuarios.</p>
+              <h5 class="text-lime mb-3">Cambios de usuarios</h5>
-            <a href="/IMPORTADORES/bitacoras/cambios"
+              <p class="text-muted small flex-grow-1 mb-4">Ver cambios realizados por los usuarios.</p>
-              class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/cambios' ? 'active' : '' ?>">
+              <button class="btn btn-lime btn-sm mt-auto w-100 btn-animated"
-              Ver cambios
+                      onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/cambios')">
-            </a>
+                Ver cambios  
+              </button>
+            </div>
           </div>
         </div>
-        <div class="col-md-4">
+        <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-          <div class="card shadow-sm p-3">
+          <div class="card shadow-sm p-3 card-hover position-relative h-100">
-            <h5 class="text-info">Registro de usuarios</h5>
+            <div class="card-body p-0 d-flex flex-column">
-            <p>Ver registros de los usuarios.</p>
+              <h5 class="text-success mb-3">Registro de usuarios</h5>
-            <a href="/IMPORTADORES/bitacoras/usuarios"
+              <p class="text-muted small flex-grow-1 mb-4">Ver registros de los usuarios.</p>
-              class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/usuarios' ? 'active' : '' ?>">
+              <button class="btn btn-success btn-sm mt-auto w-100 btn-animated"
-              Ver registro de usuarios
+                      onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/usuarios')">
-            </a>
+                Ver registro de usuarios  
+              </button>
+            </div>
           </div>
         </div>
-        <div class="col-md-4">
+        <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-          <div class="card shadow-sm p-3">
+          <div class="card shadow-sm p-3 card-hover position-relative h-100">
-            <h5 class="text-indigo">Registro de agencias</h5>
+            <div class="card-body p-0 d-flex flex-column">
-            <p>Ver registros de las agencias.</p>
+              <h5 class="text-info mb-3">Registro de agencias</h5>
-            <a href="/IMPORTADORES/bitacoras/agencias"
+              <p class="text-muted small flex-grow-1 mb-4">Ver registros de las agencias.</p>
-              class="btn btn-indigo btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/agencias' ? 'active' : '' ?>">
+              <button class="btn btn-info btn-sm mt-auto w-100 btn-animated"
-              Ver registro de agencias
+                      onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/agencias')">
-            </a>
+                Ver registro de agencias 
+              </button>
+            </div>
           </div>
         </div>
-        <div class="col-md-4">
+        <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-          <div class="card shadow-sm p-3">
+          <div class="card shadow-sm p-3 card-hover position-relative h-100">
-            <h5 class="text-warning">Mi actividad</h5>
+            <div class="card-body p-0 d-flex flex-column">
-            <p>Ver mi actividad en la plataforma.</p>
+              <h5 class="text-cyan mb-3">Mi actividad</h5>
-            <a href="/IMPORTADORES/bitacoras/miAcceso"
+              <p class="text-muted small flex-grow-1 mb-4">Ver mi actividad en la plataforma.</p>
-              class="btn btn-warning btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/miAcceso' ? 'active' : '' ?>">
+              <button class="btn btn-cyan btn-sm mt-auto w-100 btn-animated"
-              Ver mis accesos
+                      onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/miAcceso')">
-            </a>
+                Ver mis accesos  
+              </button>
+            </div>
           </div>
         </div>
       <?php endif; ?>
 
       <?php if ($_SESSION['tipo_usuario'] === 'admin_agencia'): ?>
-        <div class="col-md-4">
+        <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-          <div class="card shadow-sm p-3">
+          <div class="card shadow-sm p-3 card-hover position-relative h-100">
-            <h5 class="text-primary">Registro de accesos</h5>
+            <div class="card-body p-0 d-flex flex-column">
-            <p>Ver actividad de los usuarios.</p>
+              <h5 class="text-teal mb-3">Registro de accesos</h5>
-            <a href="/IMPORTADORES/bitacoras/sistemaAgencia"
+              <p class="text-muted small flex-grow-1 mb-4">Ver actividad de los usuarios.</p>
-              class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/sistemaAgencia' ? 'active' : '' ?>">
+              <button class="btn btn-teal btn-sm mt-auto w-100 btn-animated"
-              Ver actividad
+                      onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/sistemaAgencia')">
-            </a>
+                Ver actividad  
+              </button>
+            </div>
           </div>
         </div>
-        <div class="col-md-4">
+        <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-          <div class="card shadow-sm p-3">
+          <div class="card shadow-sm p-3 card-hover position-relative h-100">
-            <h5 class="text-success">Registro de vinculaciones</h5>
+            <div class="card-body p-0 d-flex flex-column">
-            <p>Ver las vinculaciones de mi agencia.</p>
+              <h5 class="text-lime mb-3">Registro de vinculaciones</h5>
-            <a href="/IMPORTADORES/bitacoras/vinculaciones"
+              <p class="text-muted small flex-grow-1 mb-4">Ver las vinculaciones de mi agencia.</p>
-              class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/vinculaciones' ? 'active' : '' ?>">
+              <button class="btn btn-lime btn-sm mt-auto w-100 btn-animated"
-              Ver actividad
+                      onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/vinculaciones')">
-            </a>
+                Ver vinculaciones  
+              </button>
+            </div>
           </div>
         </div>
-        <div class="col-md-4">
+        <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-          <div class="card shadow-sm p-3">
+          <div class="card shadow-sm p-3 card-hover position-relative h-100">
-            <h5 class="text-info">Mi actividad</h5>
+            <div class="card-body p-0 d-flex flex-column">
-            <p>Ver mi actividad en la plataforma.</p>
+              <h5 class="text-success mb-3">Mi actividad</h5>
-            <a href="/IMPORTADORES/bitacoras/miAcceso"
+              <p class="text-muted small flex-grow-1 mb-4">Ver mi actividad en la plataforma.</p>
-              class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/miAcceso' ? 'active' : '' ?>">
+              <button class="btn btn-success btn-sm mt-auto w-100 btn-animated"
-              Ver mis accesos
+                      onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/miAcceso')">
-            </a>
+                Ver mis accesos 
+              </button>
+            </div>
           </div>
         </div>
       <?php endif; ?>
 
       <?php if ($_SESSION['tipo_usuario'] === 'agente_aduanal'): ?>
-        <div class="col-md-4">
+        <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-          <div class="card shadow-sm p-3">
+          <div class="card shadow-sm p-3 card-hover position-relative h-100">
-            <h5 class="text-primary">Registro de accesos</h5>
+            <div class="card-body p-0 d-flex flex-column">
-            <p>Ver actividad de los usuarios.</p>
+              <h5 class="text-teal mb-3">Registro de accesos</h5>
-            <a href="/IMPORTADORES/bitacoras/sistemaAgencia"
+              <p class="text-muted small flex-grow-1 mb-4">Ver actividad de los usuarios.</p>
-              class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/sistemaAgencia' ? 'active' : '' ?>">
+              <button class="btn btn-teal btn-sm mt-auto w-100 btn-animated"
-              Ver actividad
+                      onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/sistemaAgencia')">
-            </a>
+                Ver actividad  
+              </button>
+            </div>
           </div>
         </div>
-        <div class="col-md-4">
+        <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-          <div class="card shadow-sm p-3">
+          <div class="card shadow-sm p-3 card-hover position-relative h-100">
-            <h5 class="text-success">Registro de vinculaciones</h5>
+            <div class="card-body p-0 d-flex flex-column">
-            <p>Ver las vinculaciones de mi agencia.</p>
+              <h5 class="text-lime mb-3">Registro de vinculaciones</h5>
-            <a href="/IMPORTADORES/bitacoras/vinculaciones"
+              <p class="text-muted small flex-grow-1 mb-4">Ver las vinculaciones de mi agencia.</p>
-              class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/vinculaciones' ? 'active' : '' ?>">
+              <button class="btn btn-lime btn-sm mt-auto w-100 btn-animated"
-              Ver actividad
+                      onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/vinculaciones')">
-            </a>
+                Ver actividad  
+              </button>
+            </div>
           </div>
         </div>
-        <div class="col-md-4">
+        <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-          <div class="card shadow-sm p-3">
+          <div class="card shadow-sm p-3 card-hover position-relative h-100">
-            <h5 class="text-info">Mi actividad</h5>
+            <div class="card-body p-0 d-flex flex-column">
-            <p>Ver mi actividad en la plataforma.</p>
+              <h5 class="text-success mb-3">Mi actividad</h5>
-            <a href="/IMPORTADORES/bitacoras/miAcceso"
+              <p class="text-muted small flex-grow-1 mb-4">Ver mi actividad en la plataforma.</p>
-              class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/miAcceso' ? 'active' : '' ?>">
+              <button class="btn btn-success btn-sm mt-auto w-100 btn-animated"
-              Ver mis accesos
+                      onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/miAcceso')">
-            </a>
+                Ver mis accesos 
+              </button>
+            </div>
           </div>
         </div>
       <?php endif; ?>
 
       <?php if ($_SESSION['tipo_usuario'] === 'importador'): ?>
-        <div class="col-md-4">
+        <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-          <div class="card shadow-sm p-3">
+          <div class="card shadow-sm p-3 card-hover position-relative h-100">
-            <h5 class="text-primary">Mis vinculaciones</h5>
+            <div class="card-body p-0 d-flex flex-column">
-            <p>Ver mi registro de vinculaciones.</p>
+              <h5 class="text-teal mb-3">Mis vinculaciones</h5>
-            <a href="/IMPORTADORES/bitacoras/vinculacionesUsuario"
+              <p class="text-muted small flex-grow-1 mb-4">Ver mi registro de vinculaciones.</p>
-              class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/vinculacionesUsuario' ? 'active' : '' ?>">
+              <button class="btn btn-teal btn-sm mt-auto w-100 btn-animated"
-              Ver mis vinculaciones
+                      onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/vinculacionesUsuario')">
-            </a>
+                Ver mis vinculaciones 
+              </button>
+            </div>
           </div>
         </div>
-        <div class="col-md-4">
+        <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-          <div class="card shadow-sm p-3">
+          <div class="card shadow-sm p-3 card-hover position-relative h-100">
-            <h5 class="text-success">Mi actividad</h5>
+            <div class="card-body p-0 d-flex flex-column">
-            <p>Ver mi actividad en la plataforma.</p>
+              <h5 class="text-lime mb-3">Mi actividad</h5>
-            <a href="/IMPORTADORES/bitacoras/miAcceso"
+              <p class="text-muted small flex-grow-1 mb-4">Ver mi actividad en la plataforma.</p>
-              class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/miAcceso' ? 'active' : '' ?>">
+              <button class="btn btn-lime btn-sm mt-auto w-100 btn-animated"
-              Ver mis accesos
+                      onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/miAcceso')">
-            </a>
+                Ver mis accesos 
+              </button>
+            </div>
           </div>
         </div>
       <?php endif; ?>
     </div>
-
   </div>
 
+  <script>
+    // Función para navegación con animación
+    function navigateWithAnimation(element, url) {
+      // Prevenir múltiples clics
+      if (element.classList.contains('btn-loading')) {
+        return;
+      }
+      
+      // Añadir estado de carga
+      element.classList.add('btn-loading');
+      element.disabled = true;
+
+      // Añadir efecto de salida a la tarjeta padre
+      const card = element.closest('.card');
+      if (card) {
+        card.style.transform  = 'scale(0.95)';
+        card.style.opacity    = '0.7';
+        card.style.transition = 'all 0.3s ease';
+      }
+      
+      // Simular carga y navegar
+      setTimeout(function() {
+        // En un entorno real, descomenta la siguiente línea:
+        window.location.href = url;
+      }, 1500);
+    }
+    
+    // Animación de entrada escalonada para las tarjetas
+    document.addEventListener('DOMContentLoaded', function() {
+      const cards = document.querySelectorAll('.card-hover');
+      
+      // Efecto de revelado progresivo
+      cards.forEach((card, index) => {
+        card.style.animationDelay = (index * 0.1) + 's';
+      });
+      
+      // Añadir efecto de hover mejorado
+      cards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+          this.style.transform = 'translateY(-5px) scale(1.02)';
+        });
+        
+        card.addEventListener('mouseleave', function() {
+          this.style.transform = 'translateY(0) scale(1)';
+        });
+      });
+    });
+    
+    // Efecto de ondas en los botones
+    document.querySelectorAll('.btn-animated').forEach(button => {
+      button.addEventListener('click', function(e) {
+        let ripple = document.createElement('span');
+        ripple.classList.add('ripple');
+        this.appendChild(ripple);
+        
+        let x = e.clientX - e.target.offsetLeft;
+        let y = e.clientY - e.target.offsetTop;
+        
+        ripple.style.left = x + 'px';
+        ripple.style.top  = y + 'px';
+        
+        setTimeout(() => {
+          ripple.remove();
+        }, 1000);
+      });
+    });
+    
+    // Animación para alertas que se pueden cerrar
+    document.querySelectorAll('.alert').forEach(alert => {
+      alert.addEventListener('closed.bs.alert', function() {
+        this.style.animation = 'slideOutUp 0.5s ease-in';
+      });
+    });
+  </script>
+
 </body>
 </html>

views/bitacoras/sistema_agencia.php

@@ -11,6 +11,10 @@
   <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -29,16 +33,42 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     table.dataTable thead th { background: #343a40; color: #fff; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">👥 Acceso de Usuarios</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">👥 Acceso de Usuarios</h4>
 
     <div class="card p-3 shadow-sm">
-      <div class="table-responsive">
+      <div class="table-responsive card-hover position-relative h-auto">
         <table class="table table-striped" id="tabla-logins">
           <thead class="table-dark">
             <tr>

views/bitacoras/vinculaciones_usuario.php

@@ -11,6 +11,10 @@
   <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -29,15 +33,41 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     table.dataTable thead th { background: #343a40; color: #fff; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">🔗 Vinculaciones</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🔗 Vinculaciones</h4>
 
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-striped align-middle" id="tabla-vinculaciones-usuario">
           <thead class="table-dark">

views/choferes/crear.php

@@ -10,6 +10,10 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     table.dataTable thead th { background: #343a40; color: #fff; }
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
@@ -29,13 +33,39 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4>➕ Nuevo Chofer</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">➕ Nuevo Chofer</h4>
-    <div class="card p-4 shadow-sm bg-white">
+    <div class="card p-4 shadow-sm bg-white card-hover position-relative h-auto">
       <!-- Se agrega enctype para subir archivos -->
       <form action="/IMPORTADORES/choferes/guardar" method="POST" enctype="multipart/form-data" id="formAltaChoferes">
         <div class="mb-3">
@@ -91,8 +121,8 @@
           <input name="foto" id="foto" type="file" class="form-control" accept="image/*">
         </div>
 
-        <button type="submit" class="btn btn-success">Guardar</button>
+        <button type="submit" class="btn btn-success mt-auto w-auto btn-animated">Guardar</button>
-        <a href="/IMPORTADORES/choferes/lista" class="btn btn-secondary ms-2">Cancelar</a>
+        <a href="/IMPORTADORES/choferes/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
       </form>
     </div>
   </div>

views/choferes/editar.php

@@ -10,6 +10,10 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -28,13 +32,39 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4>✏️ Editar Chofer #<?= (int)$chofer['id_chofer'] ?></h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✏️ Editar Chofer #<?= (int)$chofer['id_chofer'] ?></h4>
-    <div class="card p-4 shadow-sm bg-white">
+    <div class="card p-4 shadow-sm bg-white card-hover position-relative h-auto">
       <form action="/IMPORTADORES/choferes/actualizar" method="POST" enctype="multipart/form-data" id="formEditChoferes">
         <input type="hidden" name="id_chofer" value="<?= (int)$chofer['id_chofer'] ?>">
 
@@ -130,8 +160,8 @@
           <label for="status" class="form-check-label">Activo</label>
         </div>
 
-        <button type="submit" class="btn btn-primary">Actualizar</button>
+        <button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">Actualizar</button>
-        <a href="/IMPORTADORES/choferes/lista" class="btn btn-secondary ms-2">Cancelar</a>
+        <a href="/IMPORTADORES/choferes/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
       </form>
     </div>
   </div>

views/choferes/lista.php

@@ -13,6 +13,10 @@
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     table.dataTable thead th { background: #343a40; color: #fff; }
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
@@ -32,14 +36,40 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
   
   <div class="content">
-    <h4>👨‍✈️ Mis Choferes</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">👨‍✈️ Mis Choferes</h4>
-    <a href="/IMPORTADORES/choferes/crear" class="btn btn-success mb-3">➕ Nuevo Chofer</a>
+    <a href="/IMPORTADORES/choferes/crear" class="btn btn-success mb-3 mt-auto w-auto btn-animated">➕ Nuevo Chofer</a>
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-striped" id="tabla-choferes">
           <thead>
@@ -75,8 +105,8 @@
                 </td>
                 <td><?= htmlspecialchars($c['transportista']) ?></td>
                 <td>
-                  <a href="/IMPORTADORES/choferes/editar?id=<?= $c['id_chofer'] ?>" class="btn btn-sm btn-primary">✏️</a>
+                  <a href="/IMPORTADORES/choferes/editar?id=<?= $c['id_chofer'] ?>" class="btn btn-sm btn-primary mt-auto w-auto btn-animated">✏️</a>
-                  <button class="btn btn-sm btn-danger" onclick="confirmDeleteChofer(<?= $c['id_chofer'] ?>)">🗑️</button>
+                  <button class="btn btn-sm btn-danger mt-auto w-auto btn-animated" onclick="confirmDeleteChofer(<?= $c['id_chofer'] ?>)">🗑️</button>
                 </td>
               </tr>
             <?php endforeach; ?>

views/configuracion/dashboard_configuracion.php

@@ -8,6 +8,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -26,6 +30,32 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     label {font-weight: bold;}
     .section-header { background-color: #e9ecef; padding: 10px 15px; margin: 0 0 20px 0; border-radius: 8px 8px 0 0; font-weight: bold; color: #495057; }
   </style>
@@ -33,10 +63,10 @@
 <body>
 
   <div class="content">
-    <h4 class="mb-4">ℹ️ Información General</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">ℹ️ Información General</h4>
 
     <?php if (isset($datos['tipo_usuario']) && $datos['tipo_usuario'] === 'importador'): ?>
-      <div class="card shadow-sm p-4 mb-4 bg-white">
+      <div class="card shadow-sm p-4 mb-4 bg-white card-hover position-relative h-auto">
         <div class="section-header">👤 Información Personal</div>
         <form>
           <div class="row mb-3">
@@ -156,7 +186,7 @@
               </div>
             </div>
             <div style="display: flex; justify-content: right;">
-              <a href="/IMPORTADORES/configuracion/editar" class="btn btn-success mb-3">✏️ Editar Información</a>
+              <a href="/IMPORTADORES/configuracion/editar" class="btn btn-success mb-3 mt-auto w-auto btn-animated">✏️ Editar Información</a>
             </div>
           </div>
         </form>

views/configuracion/editar.php

@@ -8,6 +8,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -26,6 +30,32 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     label {font-weight: bold;}
     .error-msg { color: red; font-size: 0.9em; }
   </style>
@@ -33,8 +63,8 @@
 <body>
 
   <div class="content">
-    <h4 class="mb-4">✏️ Editar Información</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✏️ Editar Información</h4>
-    <div class="card shadow-sm p-4 mb-4 bg-white">
+    <div class="card shadow-sm p-4 mb-4 bg-white card-hover position-relative h-auto">
       <form id="form-edicion" method="POST" action="/IMPORTADORES/configuracion/guardar">
         <div class="row mb-3">
           <label class="col-md-2 col-form-label">Clave:</label>
@@ -154,8 +184,8 @@
           </div>
         </div>
         <div style="display: flex; justify-content: right;">
-          <a href="/IMPORTADORES/configuracion/index" class="btn btn-secondary ms-2" style="margin-right: 10px;">Cancelar</a>
+          <a href="/IMPORTADORES/configuracion/index" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated" style="margin-right: 10px;">Cancelar</a>
-          <button type="submit" class="btn btn-primary">💾 Guardar Cambios</button>
+          <button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">💾 Guardar Cambios</button>
         </div>
       </form>
     </div>

views/expediente/index.php

@@ -9,6 +9,10 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -22,6 +26,32 @@
       .sidebar .nav-link:hover, .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .table th, .table td { vertical-align: middle; }
     .folder-icon { color: #f0ad4e; font-size: 1.2rem; }
   </style>
@@ -29,8 +59,8 @@
 <body>
 
   <div class="content">
-    <h4 class="mb-4">📁 Expedientes Electrónicos</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📁 Expedientes Electrónicos</h4>
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-hover table-bordered">
           <thead class="table-dark">
@@ -55,8 +85,8 @@
               <td><?= $exp['total_archivos'] ?> archivos</td>
               <td><?= number_format($exp['total_tamano'], 2) ?> KB</td>
               <td>
-                <a href="/IMPORTADORES/expediente/ver/<?= $exp['id_solicitud'] ?>" class="btn btn-outline-primary btn-sm">📂 Ver</a>
+                <a href="/IMPORTADORES/expediente/ver/<?= $exp['id_solicitud'] ?>" class="btn btn-outline-primary btn-sm mt-auto w-auto btn-animated">📂 Ver</a>
-                <a href="/IMPORTADORES/expediente/subir/<?= $exp['id_solicitud'] ?>" class="btn btn-outline-success btn-sm">⬆ Subir</a>
+                <a href="/IMPORTADORES/expediente/subir/<?= $exp['id_solicitud'] ?>" class="btn btn-outline-success btn-sm mt-auto w-auto btn-animated">⬆ Subir</a>
               </td>
             </tr>
             <?php endforeach; ?>

views/expediente/subir.php

@@ -8,17 +8,50 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .content { margin-top: 56px; padding: 40px 20px; background-color: #f4f6f9; }
     @media (min-width: 768px) { .content { margin-left: 250px; } }
+    .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
+    .table th, .table td { vertical-align: middle; }
+    .folder-icon { color: #f0ad4e; font-size: 1.2rem; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4>📤 Subir Archivos al Expediente</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📤 Subir Archivos al Expediente</h4>
-    <div class="card p-4 bg-white shadow-sm">
+    <div class="card p-4 bg-white shadow-sm card-hover position-relative h-auto">
     <form action="/IMPORTADORES/expediente/subir_handler" method="POST" enctype="multipart/form-data">
 
         <input type="hidden" name="id_solicitud" value="<?= $id_solicitud ?>">
@@ -26,8 +59,8 @@
           <label for="archivo" class="form-label">Selecciona archivo(s)</label>
           <input class="form-control" type="file" name="archivos[]" id="archivo" multiple required>
         </div>
-        <button type="submit" class="btn btn-success">Subir</button>
+        <button type="submit" class="btn btn-success mt-auto w-auto btn-animated">Subir</button>
-        <a href="/IMPORTADORES/expediente/index" class="btn btn-secondary ms-2">Cancelar</a>
+        <a href="/IMPORTADORES/expediente/index" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
       </form>
     </div>
   </div>

views/expediente/ver.php

@@ -7,27 +7,60 @@
   <title>📂 Ver Expediente</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .content { margin-top: 56px; padding: 40px 20px; background-color: #f4f6f9; }
     @media (min-width: 768px) { .content { margin-left: 250px; } }
     .file-icon { margin-right: 8px; }
+    .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
+    .table th, .table td { vertical-align: middle; }
+    .folder-icon { color: #f0ad4e; font-size: 1.2rem; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4>📂 Archivos del Expediente</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📂 Archivos del Expediente</h4>
-    <div class="card p-4 bg-white shadow-sm">
+    <div class="card p-4 bg-white shadow-sm card-hover position-relative h-auto">
       <?php if (empty($archivos)): ?>
         
         <p>No hay archivos subidos para esta solicitud.</p>
-        <a href="/IMPORTADORES/expediente/subir/<?= $id_solicitud ?>" class="btn btn-success">➕ Subir archivos</a>
+        <a href="/IMPORTADORES/expediente/subir/<?= $id_solicitud ?>" class="btn btn-success mt-auto w-auto btn-animated">➕ Subir archivos</a>
 
       <?php else: ?>
         <div class="mb-3">
-          <a href="/IMPORTADORES/expediente/descargar_zip/<?= $id_solicitud ?>" class="btn btn-outline-dark">📦 Descargar todo en ZIP</a>
+          <a href="/IMPORTADORES/expediente/descargar_zip/<?= $id_solicitud ?>" class="btn btn-outline-dark mt-auto w-auto btn-animated">📦 Descargar todo en ZIP</a>
         </div>
         <table class="table table-hover table-bordered">
           <thead class="table-light">

views/importadores/dashboard_importador.php

@@ -31,7 +31,7 @@
     .text-teal { color: 	#4dd4ac; }
     .btn-lime { background-color: 	#84cc16; color: white; }
     .text-lime { color: 	#84cc16; }
-    .btn-lime:hover { background-color: #65a30d; color: white; }
+    .btn-lime:hover { background-color: #65a30d; color: black; }
     .btn-cyan { background-color: #06b6d4; color: white; }
     .text-cyan { color: #06b6d4; }
     .btn-cyan:hover { background-color: #0891b2; color: white; }
@@ -49,22 +49,39 @@
     }
     .card { border-radius: 12px; }
     /* Animaciones personalizadas */
-    .card-hover { transition: all 0.3s ease; }
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
-    .card-hover:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
+    .card-hover:hover { transform: translateY(-8px) saqcle(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
     .btn-pulse { animation: pulse 2s infinite; }
     @keyframes pulse {
       0% { transform: scale(1); }
       50% { transform: scale(1.05); }
       100% { transform: scale(1); }
     }
-    .fade-in-up { animation: fadeInUp 0.6s ease-out; } 
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
     @keyframes fadeInUp {
       from { opacity: 0; transform: translateY(30px); }
       to { opacity: 1; transform: translateY(0); }
     }
     .loading-spinner { display: none; }
+    /* Botón con efecto de loading */
+    .btn-loading { position: relative; color: transparent !important; pointer-events: none; }
+    .btn-loading::after { content: ''; position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; margin-left: -10px; 
+      margin-top: -10px; border: 2px solid #fff; border-radius: 50%; border-top-color: transparent; animation: spin 1s linear infinite; }
     .btn-loading .loading-spinner { display: inline-block; }
     .btn-loading .btn-text { display: none; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     /* Animación para alertas */
     .alert-animated { animation: slideInDown 0.5s ease-out; }
     @keyframes slideInDown {
@@ -82,7 +99,7 @@
 <body>
 
   <div class="content">
-    <h4 class="mb-4 animate__animated animate__fadeInDown">📦 Panel del Importador</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📦 Panel del Importador</h4>
 
     <?php if ($catalogosData['catalogos_activos']): ?>
       <div class="row g-4">
@@ -91,27 +108,29 @@
           foreach ($catalogosData['catalogos'] as $catalogo): 
           $delay += 0.1; // Incrementar el retraso para cada catálogo
         ?>
-          <div class="col-md-4 animate__animated animate__fadeInUp"  style="animation-delay: <?= $delay ?>s;">
+          <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
             <div class="card shadow-sm p-3 card-hover <?= $catalogo['obligatorio'] ? 'border-warning border-warning-animated' : '' ?>">
-              <h5 class="text-<?= $catalogo['color'] ?> mb-3">
+              <div class="card-body p-0 d-flex flex-column">  
-                <i class="<?= obtenerIconoCatalogo($catalogo['nombre']) ?> me-2"></i><?= $catalogo['nombre'] ?>
+                <h5 class="text-<?= $catalogo['color'] ?> mb-3">
-              </h5>
+                  <i class="<?= obtenerIconoCatalogo($catalogo['nombre']) ?> me-2"></i><?= $catalogo['nombre'] ?>
-              <p class="text-muted small flex-grow-1"><?= $catalogo['descripcion'] ?></p>
+                </h5>
-              <div class="mt-auto">
+                <p class="text-muted small flex-grow-1 mb-4"><?= $catalogo['descripcion'] ?></p>
-                <button 
+                <div class="mt-auto">
-                    class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-2 w-100 btn-animated <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>"
+                  <button 
-                    onclick="navigateWithAnimation(this, '<?= $catalogo['ruta'] ?>')"
+                      class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-auto w-100 btn-animated <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>"
-                    data-url="<?= $catalogo['ruta'] ?>">
+                      onclick="navigateWithAnimation(this, '<?= $catalogo['ruta'] ?>')"
-                  <span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                      data-url="<?= $catalogo['ruta'] ?>">
-                  <span class="btn-text"><?= $catalogo['accion'] ?></span>
+                    <span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
-                </button>
+                    <span class="btn-text"><?= $catalogo['accion'] ?></span>
+                  </button>
+                </div>
+                <?php if ($catalogo['obligatorio']): ?>
+                  <small class="text-warning mt-2 animate__animated animate__pulse animate__infinite">
+                    <i class="fas fa-exclamation-triangle me-1"></i>
+                    Obligatorio
+                  </small>
+                <?php endif; ?>
               </div>
-              <?php if ($catalogo['obligatorio']): ?>
-                <small class="text-warning mt-2 animate__animated animate__pulse animate__infinite">
-                  <i class="fas fa-exclamation-triangle me-1"></i>
-                  Obligatorio
-                </small>
-              <?php endif; ?>
             </div>
           </div>
         <?php endforeach; ?>
@@ -168,24 +187,26 @@
         ?>
           <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
             <div class="card shadow-sm p-3 card-hover border-warning border-warning-animated h-100">
-              <h5 class="text-<?= $catalogo['color'] ?> mb-3">
+              <div class="card-body p-0 d-flex flex-column">
-                <i class="<?= obtenerIconoCatalogo($catalogo['nombre']) ?> me-2"></i>
+                <h5 class="text-<?= $catalogo['color'] ?> mb-3">
-                <?= $catalogo['nombre'] ?>
+                  <i class="<?= obtenerIconoCatalogo($catalogo['nombre']) ?> me-2"></i>
-              </h5>
+                  <?= $catalogo['nombre'] ?>
-              <p class="text-muted small flex-grow-1"><?= $catalogo['descripcion'] ?></p>
+                </h5>
-              <div class="mt-auto">
+                <p class="text-muted small flex-grow-1 mb-4"><?= $catalogo['descripcion'] ?></p>
-                <button 
+                <div class="mt-auto">
-                    class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-2 w-100 btn-animated <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>"
+                  <button 
-                    onclick="navigateWithAnimation(this, '<?= $catalogo['ruta'] ?>')"
+                      class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-auto w-100 btn-animated <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>"
-                    data-url="<?= $catalogo['ruta'] ?>">
+                      onclick="navigateWithAnimation(this, '<?= $catalogo['ruta'] ?>')"
-                  <span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                      data-url="<?= $catalogo['ruta'] ?>">
-                  <span class="btn-text"><?= $catalogo['accion'] ?></span>
+                    <span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
-                </button>
+                    <span class="btn-text"><?= $catalogo['accion'] ?></span>
+                  </button>
+                </div>
+                <small class="text-warning mt-2 d-flex align-items-center">
+                  <i class="fas fa-lock me-1 animate__animated animate__pulse animate__infinite"></i>
+                  Función básica
+                </small>
               </div>
-              <small class="text-warning mt-2 d-flex align-items-center">
-                <i class="fas fa-lock me-1 animate__animated animate__pulse animate__infinite"></i>
-                Función básica
-              </small>
             </div>
           </div>
         <?php endforeach; ?>
@@ -196,10 +217,23 @@
   <script>
     // Función para navegación con animación
     function navigateWithAnimation(button, url) {
+      // Prevenir múltiples clics
+      if (button.classList.contains('btn-loading')) {
+        return;
+      }
+
       // Añadir estado de carga
       button.classList.add('btn-loading');
       button.disabled = true;
 
+      // Añadir efecto de salida a la tarjeta padre
+      const card = button.closest('.card');
+      if (card) {
+        card.style.transform  = 'scale(0.95)';
+        card.style.opacity    = '0.7';
+        card.style.transition = 'all 0.3s ease';
+      }
+            
       // Simular carga y navegar
       setTimeout(function() {
         window.location.href = url;
@@ -214,16 +248,35 @@
       cards.forEach((card, index) => {
         card.style.animationDelay = (index * 0.1) + 's';
       });
+      
+      // Añadir efecto de hover mejorado
+      cards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+          this.style.transform = 'translateY(-5px) scale(1.02)';
+        });
+        
+        card.addEventListener('mouseleave', function() {
+          this.style.transform = 'translateY(0) scale(1)';
+        });
+      });
     });
     
-    // Efecto de hover mejorado
+    // Efecto de ondas en los botones
-    document.querySelectorAll('.card-hover').forEach(card => {
+    document.querySelectorAll('.btn-animated').forEach(button => {
-      card.addEventListener('mouseenter', function() {
+      button.addEventListener('click', function(e) {
-        this.style.transform = 'translateY(-5px) scale(1.02)';
+        let ripple = document.createElement('span');
-      });
+        ripple.classList.add('ripple');
+        this.appendChild(ripple);
         
-      card.addEventListener('mouseleave', function() {
+        let x = e.clientX - e.target.offsetLeft;
-        this.style.transform = 'translateY(0) scale(1)';
+        let y = e.clientY - e.target.offsetTop;
+        
+        ripple.style.left = x + 'px';
+        ripple.style.top  = y + 'px';
+        
+        setTimeout(() => {
+          ripple.remove();
+        }, 1000);
       });
     });
         

views/locaciones/alta_locaciones.php

@@ -20,6 +20,10 @@ if ($tipoUsuario === 'agente_aduanal') {
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -33,18 +37,44 @@ if ($tipoUsuario === 'agente_aduanal') {
       .sidebar .nav-link:hover, .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .hide { display: none !important; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">🗺️ Nuevas Locaciones</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🗺️ Nuevas Locaciones</h4>
     <div class="row g-3">
 
       <!-- Nuevo Estado -->
       <div class="col-md">
-        <div class="card p-4 bg-white shadow-sm">
+        <div class="card p-4 bg-white shadow-sm card-hover position-relative h-auto">
           <form id="estadoForm">
             <h4 class="mb-4 text-dark">➕ Nuevo Estado</h4><br>
             <!-- País -->
@@ -67,10 +97,10 @@ if ($tipoUsuario === 'agente_aduanal') {
             </div><br><br>
 
             <div class="col-md-4 d-flex align-items-end">
-              <button type="submit" class="btn btn-success w-100">
+              <button type="submit" class="btn btn-success mt-auto w-auto btn-animated">
                 <i class="fas fa-plus"></i> Registrar Estado
               </button>
-              <a href="/IMPORTADORES/locaciones/lista" class="btn btn-secondary ms-2">Cancelar</a>
+              <a href="/IMPORTADORES/locaciones/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
             </div>
           </form>
           
@@ -79,7 +109,7 @@ if ($tipoUsuario === 'agente_aduanal') {
 
       <!-- Nueva Ciudad -->
       <div class="col-md">
-        <div class="card p-4 bg-white shadow-sm">
+        <div class="card p-4 bg-white shadow-sm card-hover position-relative h-auto">
           <form id="ciudadForm" action="/IMPORTADORES/locaciones/guadarCiudad" method="POST" enctype="multipart/form-data">
             <h4 class="mb-4 text-dark">➕ Nueva Ciudad</h4>
             <!-- País -->
@@ -110,10 +140,10 @@ if ($tipoUsuario === 'agente_aduanal') {
             </div><br>
 
             <div class="col-md-4 d-flex align-items-end">
-              <button type="submit" class="btn btn-success w-100">
+              <button type="submit" class="btn btn-success w-auto">
                 <i class="fas fa-plus"></i> Registrar Ciudad
               </button>
-              <a href="/IMPORTADORES/locaciones/lista" class="btn btn-secondary ms-2">Cancelar</a>
+              <a href="/IMPORTADORES/locaciones/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
             </div>
           </form>
         </div>

views/locaciones/gestion_locaciones.php

@@ -24,6 +24,10 @@ if ($tipoUsuario === 'agente_aduanal') {
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     table.dataTable thead th { background:#343a40; color:#fff; }
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
@@ -43,14 +47,40 @@ if ($tipoUsuario === 'agente_aduanal') {
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">🌍 Locaciones</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🌍 Locaciones</h4>
-    <a href="/IMPORTADORES/locaciones/alta" class="btn btn-success mb-3">➕ Agregar Locación</a>
+    <a href="/IMPORTADORES/locaciones/alta" class="btn btn-success mb-3 mt-auto w-auto btn-animated">➕ Agregar Locación</a>
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-striped" id="tabla-locaciones">
           <thead class="table-dark">
@@ -79,31 +109,31 @@ if ($tipoUsuario === 'agente_aduanal') {
                   <!-- Botones de acción (editar/eliminar) -->
                   <?php if (!empty($loc['id_ciudad'])): ?>
                     <!-- Es una ciudad -->
-                    <button class="btn btn-sm btn-primary" 
+                    <button class="btn btn-sm btn-primary mt-auto w-auto btn-animated" 
                             onclick="editarItem('ciudad', <?= $loc['id_ciudad'] ?>, '<?= htmlspecialchars($loc['nombre_ciudad'], ENT_QUOTES) ?>', '', '', '', <?= $loc['id_estado'] ?>)">
                         ✏️
                     </button>
-                    <button class="btn btn-sm btn-danger" 
+                    <button class="btn btn-sm btn-danger mt-auto w-auto btn-animated" 
                             onclick="eliminarItem('ciudad', <?= $loc['id_ciudad'] ?>, '<?= htmlspecialchars($loc['nombre_ciudad'], ENT_QUOTES) ?>')">
                         🗑️
                     </button>
                   <?php elseif (!empty($loc['id_estado'])): ?>
                     <!-- Es un estado - CORREGIDO: Obtener abreviatura correctamente -->
-                    <button class="btn btn-sm btn-primary" 
+                    <button class="btn btn-sm btn-primary mt-auto w-auto btn-animated" 
                             onclick="editarItem('estado', <?= $loc['id_estado'] ?>, '<?= htmlspecialchars($loc['nombre_estado'], ENT_QUOTES) ?>', '', '', '<?= htmlspecialchars($loc['abreviatura'] ?? '', ENT_QUOTES) ?>', <?= $loc['id_pais'] ?>)">
                         ✏️
                     </button>
-                    <button class="btn btn-sm btn-danger" 
+                    <button class="btn btn-sm btn-danger mt-auto w-auto btn-animated" 
                             onclick="eliminarItem('estado', <?= $loc['id_estado'] ?>, '<?= htmlspecialchars($loc['nombre_estado'], ENT_QUOTES) ?>')">
                         🗑️
                     </button>
                   <?php else: ?>
                     <!-- Es un país -->
-                    <button class="btn btn-sm btn-primary" 
+                    <button class="btn btn-sm btn-primary mt-auto w-auto btn-animated" 
                             onclick="editarItem('pais', <?= $loc['id_pais'] ?>, '<?= htmlspecialchars($loc['nombre_pais'], ENT_QUOTES) ?>', '<?= htmlspecialchars($loc['iso2'] ?? '', ENT_QUOTES) ?>', '<?= htmlspecialchars($loc['iso3'] ?? '', ENT_QUOTES) ?>')">
                         ✏️
                     </button>
-                    <button class="btn btn-sm btn-danger" 
+                    <button class="btn btn-sm btn-danger mt-auto w-auto btn-animated" 
                             onclick="eliminarItem('pais', <?= $loc['id_pais'] ?>, '<?= htmlspecialchars($loc['nombre_pais'], ENT_QUOTES) ?>')">
                         🗑️
                     </button>
@@ -193,8 +223,8 @@ if ($tipoUsuario === 'agente_aduanal') {
             </div>
           </div>
           <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
+            <button type="button" class="btn btn-secondary mt-auto w-auto btn-animated" data-bs-dismiss="modal">Cancelar</button>
-            <button type="submit" class="btn btn-primary">Guardar Cambios</button>
+            <button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">Guardar Cambios</button>
           </div>
         </form>
       </div>

views/locaciones/lista.php

@@ -13,6 +13,10 @@
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     table.dataTable thead th { background:#343a40; color:#fff; }
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
@@ -32,13 +36,39 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">🗺️ Locaciones</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🗺️ Locaciones</h4>
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-striped" id="tabla-locaciones">
           <thead class="table-dark">

views/patente/alta_patente.php

@@ -21,6 +21,10 @@ if ($tipoUsuario === 'agente_aduanal') {
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <!-- SweetAlert2 -->
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -59,13 +63,39 @@ if ($tipoUsuario === 'agente_aduanal') {
     .nav-tabs .nav-item:first-child .nav-link { margin-left: 0; }
     .nav-tabs .nav-item:last-child .nav-link { margin-right: 0; }
     .tab-content { padding: 10px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4>CONFIGURACIÓN ADUANA / PATENTE</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">CONFIGURACIÓN ADUANA / PATENTE</h4>
-    <div class="card p-4 shadow-sm bg-white">
+    <div class="card p-4 shadow-sm bg-white card-hover position-relative h-auto">
       <!-- Se agrega enctype para subir archivos -->
       <form action="/IMPORTADORES/patente/guardar" method="POST" id="formAltaPatente">
         <!-- Pestañas de navegación -->
@@ -262,8 +292,8 @@ if ($tipoUsuario === 'agente_aduanal') {
         </div>
 
         <div style="display: flex; justify-content: right;">
-          <button type="submit" class="btn btn-primary">Registrar</button>
+          <button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">Registrar</button>
-          <a href="/IMPORTADORES/patente/lista" class="btn btn-secondary ms-2">Cancelar</a>
+          <a href="/IMPORTADORES/patente/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
         </div>
       </form>
     </div>

views/patente/dashboard_patente.php

@@ -19,6 +19,10 @@ if ($tipoUsuario === 'agente_aduanal') {
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -27,12 +31,24 @@ if ($tipoUsuario === 'agente_aduanal') {
     .sidebar .nav-link.active { background-color: #495057; color: #fff; }
     .content { margin-top: 56px; padding: 40px 20px; position: relative; z-index: 1; background-color: #f4f6f9; transition: margin-left 0.3s ease; }
     .navbar { position: fixed; top: 0; width: 100%; z-index: 1050; }
-    .btn-indigo { background-color: #6610f2; color: white;}
+    .btn-indigo { background-color: #6610f2; color: white; }
-    .btn-indigo:hover { background-color: #520dc2; color: white;}
+    .btn-indigo:hover { background-color: #520dc2; color: white; }
-    .text-indigo { color: orangeRed;}
+    .text-indigo { color:  #520dc2; }
-    .btn-orange { background-color: orangeRed; color: white;}
+    .btn-orange { background-color: orangeRed; color: white; }
-    .btn-orange:hover { background-color: #ff3600; color: white;}
+    .btn-orange:hover { background-color: #ff3600; color: white; }
-    .text-orange { color: orangeRed;}
+    .text-orange { color: orangeRed; }
+    .btn-teal { background-color: #4dd4ac ; color: white; }
+    .btn-teal:hover { background-color: #20c997; color: black; }
+    .text-teal { color: 	#4dd4ac; }
+    .btn-lime { background-color: 	#84cc16; color: white; }
+    .text-lime { color: 	#84cc16; }
+    .btn-lime:hover { background-color: #65a30d; color: black; }
+    .btn-cyan { background-color: #06b6d4; color: white; }
+    .text-cyan { color: #06b6d4; }
+    .btn-cyan:hover { background-color: #0891b2; color: white; }
+    .btn-violet { background-color: #8b5cf6; color: white; }
+    .text-violet { color: #8b5cf6; }
+    .btn-violet:hover { background-color: #7c3aed; color: white; }
     /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
     @media (min-width: 768px) { .content { margin-left: 250px; /* Ancho del sidebar */ } }
     /* En móviles, sin margen lateral */
@@ -43,38 +59,148 @@ if ($tipoUsuario === 'agente_aduanal') {
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Botón con efecto de loading */
+    .btn-loading { position: relative; color: transparent !important; pointer-events: none; }
+    .btn-loading::after { content: ''; position: absolute; width: 20px; height: 20px; top: 50%; left: 50%;
+      margin-left: -10px; margin-top: -10px; border: 2px solid #fff; border-radius: 50%; border-top-color: transparent; animation: spin 1s linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">📦 Panel de Patentes</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title-glow">📦 Panel de Patentes</h4>
 
     <div class="row g-4">
-      <div class="col-md-4">
+      <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-        <div class="card shadow-sm p-3">
+        <div class="card shadow-sm p-3 card-hover position-relative h-100">
-          <h5 class="text-primary">Ver patentes</h5>
+          <div class="card-body p-0 d-flex flex-column">
-          <p>Revisa y gestiona las patentes.</p>
+            <h5 class="text-teal mb-3">Ver patentes</h5>
-          <a href="/IMPORTADORES/patente/lista"
+            <p class="text-muted small flex-grow-1 mb-4">Revisa y gestiona las patentes.</p>
-            class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/transportes/lista' ? 'active' : '' ?>">
+            <button class="btn btn-teal btn-sm mt-auto w-100 btn-animated"
-            Ver patentes
+                    onclick="navigateWithAnimation(this, '/IMPORTADORES/patente/lista')">
-          </a>
+              Ver patentes 
+            </button>
+          </div>
         </div>
       </div>
 
-      <div class="col-md-4">
+      <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-        <div class="card shadow-sm p-3">
+        <div class="card shadow-sm p-3 card-hover position-relative h-100">
-          <h5 class="text-success">Nueva patente</h5>
+          <div class="card-body p-0 d-flex flex-column">
-          <p>Agrega nuevas patentes:</p>
+            <h5 class="text-lime mb-3">Nueva patente</h5>
-          <a href="/IMPORTADORES/patente/alta"
+            <p class="text-muted small flex-grow-1 mb-4">Agrega nuevas patentes:</p>
-            class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/transportistas/lista' ? 'active' : '' ?>">
+            <button class="btn btn-lime btn-sm mt-auto w-100 btn-animated"
-            Registrar nueva patente
+                    onclick="navigateWithAnimation(this, '/IMPORTADORES/patente/alta')">
-          </a>
+              Registrar nueva patente 
+            </button>
+          </div>
         </div>
       </div>
 
     </div>
   </div>
 
+  <script>
+    // Función para navegación con animación
+    function navigateWithAnimation(element, url) {
+      // Prevenir múltiples clics
+      if (element.classList.contains('btn-loading')) {
+        return;
+      }
+      
+      // Añadir estado de carga
+      element.classList.add('btn-loading');
+      element.disabled = true;
+
+      // Añadir efecto de salida a la tarjeta padre
+      const card = element.closest('.card');
+      if (card) {
+        card.style.transform  = 'scale(0.95)';
+        card.style.opacity    = '0.7';
+        card.style.transition = 'all 0.3s ease';
+      }
+      
+      // Simular carga y navegar
+      setTimeout(function() {
+        // En un entorno real, descomenta la siguiente línea:
+        window.location.href = url;
+      }, 1500);
+    }
+    
+    // Animación de entrada escalonada para las tarjetas
+    document.addEventListener('DOMContentLoaded', function() {
+      const cards = document.querySelectorAll('.card-hover');
+      
+      // Efecto de revelado progresivo
+      cards.forEach((card, index) => {
+        card.style.animationDelay = (index * 0.1) + 's';
+      });
+      
+      // Añadir efecto de hover mejorado
+      cards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+          this.style.transform = 'translateY(-5px) scale(1.02)';
+        });
+        
+        card.addEventListener('mouseleave', function() {
+          this.style.transform = 'translateY(0) scale(1)';
+        });
+      });
+    });
+    
+    // Efecto de ondas en los botones
+    document.querySelectorAll('.btn-animated').forEach(button => {
+      button.addEventListener('click', function(e) {
+        let ripple = document.createElement('span');
+        ripple.classList.add('ripple');
+        this.appendChild(ripple);
+        
+        let x = e.clientX - e.target.offsetLeft;
+        let y = e.clientY - e.target.offsetTop;
+        
+        ripple.style.left = x + 'px';
+        ripple.style.top  = y + 'px';
+        
+        setTimeout(() => {
+          ripple.remove();
+        }, 1000);
+      });
+    });
+    
+    // Animación para alertas que se pueden cerrar
+    document.querySelectorAll('.alert').forEach(alert => {
+      alert.addEventListener('closed.bs.alert', function() {
+        this.style.animation = 'slideOutUp 0.5s ease-in';
+      });
+    });
+  </script>
+
 </body>
 </html>

views/patente/editar.php

@@ -21,6 +21,10 @@ if ($tipoUsuario === 'agente_aduanal') {
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <!-- SweetAlert2 -->
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -56,13 +60,39 @@ if ($tipoUsuario === 'agente_aduanal') {
     .nav-tabs .nav-item:first-child .nav-link { margin-left: 0; }
     .nav-tabs .nav-item:last-child .nav-link { margin-right: 0; }
     .tab-content { padding: 10px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4>CONFIGURACIÓN ADUANA / PATENTE</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">CONFIGURACIÓN ADUANA / PATENTE</h4>
-    <div class="card p-4 shadow-sm bg-white">
+    <div class="card p-4 shadow-sm bg-white card-hover position-relative h-auto">
       <!-- Se agrega enctype para subir archivos -->
       <form action="/IMPORTADORES/patente/actualizar" method="POST" id="formEdicionPatente">
         <!-- Campo oculto para el ID -->
@@ -286,7 +316,7 @@ if ($tipoUsuario === 'agente_aduanal') {
 
         <div style="display: flex; justify-content: right;">
           <button type="submit" class="btn btn-success">💾 Guardar</button>
-          <a href="/IMPORTADORES/patente/lista" class="btn btn-secondary ms-2">Cancelar</a>
+          <a href="/IMPORTADORES/patente/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
         </div>
       </form>
     </div>

views/patente/lista.php

@@ -23,6 +23,10 @@ if ($tipoUsuario === 'agente_aduanal') {
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -47,14 +51,40 @@ if ($tipoUsuario === 'agente_aduanal') {
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4>📑 Registro de Patentes Aduanales</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📑 Registro de Patentes Aduanales</h4>
-    <a href="/IMPORTADORES/patente/alta" class="btn btn-success mb-3">➕ Nueva Patente</a>
+    <a href="/IMPORTADORES/patente/alta" class="btn btn-success mb-3 mt-auto w-auto btn-animated">➕ Nueva Patente</a>
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-striped" id="tabla-patentes">
           <thead class="table-dark">

views/preferencias/catalogos.php

@@ -9,6 +9,10 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -71,7 +75,9 @@
 <body>
 
   <div class="content">
-    <h4 class="mb-4">📊 Visualización de Catálogos</h4>
+    <div class="d-flex justify-content-between align-items-center mb-4">
+      <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📊 Visualización de Catálogos</h4>
+    </div>
 
     <!-- Mensajes de éxito o error iniciales -->
     <?php if (isset($_GET['success'])): ?>
@@ -85,7 +91,7 @@
       </div>
     <?php endif; ?>
 
-    <div class="card shadow-sm p-4 mb-4 bg-white">
+    <div class="card shadow-sm p-4 mb-4 bg-white card-hover position-relative h-auto">
       <!-- Switch general de notificaciones -->
       <div class="section-divider">
         <div class="form-check form-switch">
@@ -120,7 +126,7 @@
                     <input class="form-check-input tipo-catalogo" type="checkbox" 
                            name="<?= $nombreCampo ?>" id="<?= $idCampo ?>" 
                            data-tipo="tipo-catalogo" data-nombre="<?= $nombreCampo ?>"
-                        <?= $checked ? 'checked' : '' ?>>
+                      <?= $checked ? 'checked' : '' ?>>
                     <label class="form-check-label" for="<?= $idCampo ?>">
                       <strong><?= htmlspecialchars($nombre) ?></strong>
                       <div class="form-text text-<?= htmlspecialchars($info['color']) ?>">
@@ -197,7 +203,7 @@
         const response = await fetch('/IMPORTADORES/preferencias/guardarCatalogosAjax', {
           method: 'POST',
           headers: {
-            'Content-Type': 'application/json',
+            'Content-Type':     'application/json',
             'X-Requested-With': 'XMLHttpRequest'
           },
           body: JSON.stringify({
@@ -231,12 +237,12 @@
       const isChecked = checkbox.checked;
             
       if (isChecked) {
-        target.style.display = 'block';
+        target.style.display   = 'block';
         setTimeout(() => {
           target.style.opacity = '1';
         }, 10);
       } else {
-        target.style.opacity = '0';
+        target.style.opacity   = '0';
         setTimeout(() => {
           target.style.display = 'none';
         }, 300);
@@ -305,7 +311,7 @@
         // Guardar cambio
         autoSave('tipo_catalogo', {
           nombre: tipoNombre,
-          valor: isChecked
+          valor:  isChecked
         }).finally(() => {
           this.disabled = false;
         });

views/preferencias/dashboard_preferencias.php

@@ -8,6 +8,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -26,38 +30,178 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Botón con efecto de loading */
+    .btn-loading { position: relative; color: transparent !important; pointer-events: none; }
+    .btn-loading::after { content: ''; position: absolute; width: 20px; height: 20px; top: 50%; left: 50%;
+      margin-left: -10px; margin-top: -10px; border: 2px solid #fff; border-radius: 50%; border-top-color: transparent; animation: spin 1s linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
+    .alert { border: none; border-radius: 12px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">✅ Preferencias</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title-glow">✅ Preferencias</h4>
 
     <div class="row g-4">
-      <div class="col-md-4">
+      <!-- Tarjeta 1: Notificaciones -->
-        <div class="card shadow-sm p-3">
+      <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-          <h5 class="text-primary">Notificaciones</h5>
+        <div class="card shadow-sm p-3 card-hover position-relative h-100">
-          <p>Gestiona y configura las notificaciones.</p>
+          <div class="card-body p-0 d-flex flex-column">
-          <a href="/IMPORTADORES/preferencias/notificaciones"
+            <h5 class="text-primary mb-3">
-           class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/preferencias/notificaciones' ? 'active' : '' ?>">
+              <i class="fas fa-bell me-2"></i>
-            Configurar Notificaciones
+              Notificaciones
-          </a>
+            </h5>
+            <p class="text-muted small flex-grow-1 mb-4">
+              Gestiona y configura las notificaciones del sistema para mantenerte informado.
+            </p>
+            <button class="btn btn-primary btn-sm mt-auto w-100 btn-animated" 
+                    onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/notificaciones')">
+              <i class="fas fa-cog me-2"></i>
+              Configurar Notificaciones
+            </button>
+          </div>
         </div>
       </div>
 
-      <div class="col-md-4">
+      <!-- Tarjeta 2: Catálogos -->
-        <div class="card shadow-sm p-3">
+      <div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.2s;">
-          <h5 class="text-success">Catalogos</h5>
+        <div class="card shadow-sm p-3 card-hover position-relative h-100">
-          <p>Personaliza la visualización de tus catalogos.</p>
+          <div class="card-body p-0 d-flex flex-column">
-          <a href="/IMPORTADORES/preferencias/catalogos"
+            <h5 class="text-success mb-3">
-           class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/preferencias/catalogos' ? 'active' : '' ?>">
+              <i class="fas fa-list me-2"></i>
-            Personalizar Catálogos
+              Catálogos
-          </a>
+            </h5>
+            <p class="text-muted small flex-grow-1 mb-4">
+              Personaliza la visualización de tus catálogos y organiza tu contenido.
+            </p>
+            <button class="btn btn-success btn-sm mt-auto w-100 btn-animated" 
+                    onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/catalogos')">
+              <i class="fas fa-palette me-2"></i>
+              Personalizar Catálogos
+            </button>
+          </div>
+        </div>
+      </div>
+      <!-- Sección adicional con más opciones -->
+      <div class="row g-4 mt-4">
+        <div class="col-12">
+          <div class="alert alert-info animate__animated animate__fadeInUp" style="animation-delay: 0.4s;">
+            <div class="d-flex align-items-center">
+              <i class="fas fa-info-circle fa-2x text-info me-3 animate__animated animate__pulse animate__infinite"></i>
+              <div>
+                <h6 class="alert-heading mb-2">💡 Tip de Configuración</h6>
+                <p class="mb-0">
+                  Personaliza estas configuraciones según tus necesidades para optimizar tu experiencia.
+                </p>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-
     </div> 
   </div>
 
+  <script>
+    // Función para navegación con animación
+    function navigateWithAnimation(element, url) {
+      // Prevenir múltiples clics
+      if (element.classList.contains('btn-loading')) {
+        return;
+      }
+      
+      // Añadir estado de carga
+      element.classList.add('btn-loading');
+      element.disabled = true;
+
+      // Añadir efecto de salida a la tarjeta padre
+      const card = element.closest('.card');
+      if (card) {
+        card.style.transform  = 'scale(0.95)';
+        card.style.opacity    = '0.7';
+        card.style.transition = 'all 0.3s ease';
+      }
+      
+      // Simular carga y navegar
+      setTimeout(function() {
+        // En un entorno real, descomenta la siguiente línea:
+        window.location.href = url;
+      }, 1500);
+    }
+    
+    // Animación de entrada escalonada para las tarjetas
+    document.addEventListener('DOMContentLoaded', function() {
+      const cards = document.querySelectorAll('.card-hover');
+      
+      // Efecto de revelado progresivo
+      cards.forEach((card, index) => {
+        card.style.animationDelay = (index * 0.1) + 's';
+      });
+      
+      // Añadir efecto de hover mejorado
+      cards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+          this.style.transform = 'translateY(-5px) scale(1.02)';
+        });
+        
+        card.addEventListener('mouseleave', function() {
+          this.style.transform = 'translateY(0) scale(1)';
+        });
+      });
+    });
+    
+    // Efecto de ondas en los botones
+    document.querySelectorAll('.btn-animated').forEach(button => {
+      button.addEventListener('click', function(e) {
+        let ripple = document.createElement('span');
+        ripple.classList.add('ripple');
+        this.appendChild(ripple);
+        
+        let x = e.clientX - e.target.offsetLeft;
+        let y = e.clientY - e.target.offsetTop;
+        
+        ripple.style.left = x + 'px';
+        ripple.style.top = y + 'px';
+        
+        setTimeout(() => {
+          ripple.remove();
+        }, 1000);
+      });
+    });
+    
+    // Animación para alertas que se pueden cerrar
+    document.querySelectorAll('.alert').forEach(alert => {
+      alert.addEventListener('closed.bs.alert', function() {
+        this.style.animation = 'slideOutUp 0.5s ease-in';
+      });
+    });
+  </script>
+
 </body>
 </html>

views/preferencias/notificaciones.php

@@ -9,6 +9,10 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -47,7 +51,7 @@
 
   <div class="content">
     <div class="d-flex justify-content-between align-items-center mb-4">
-      <h4 class="mb-0">🔔 Gestión de Notificaciones</h4>
+      <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🔔 Gestión de Notificaciones</h4>
     </div>
 
     <!-- Mensajes de éxito o error iniciales -->
@@ -63,7 +67,7 @@
       </div>
     <?php endif; ?>
 
-    <div class="card shadow-sm p-4 mb-4 bg-white">
+    <div class="card shadow-sm p-4 mb-4 bg-white card-hover position-relative h-auto">
       <!-- Switch general de notificaciones -->
       <div class="section-divider">
         <div class="form-check form-switch">
@@ -82,122 +86,23 @@
         <div class="section-divider">
           <h6 class="mb-3">📋 Tipos de Notificaciones</h6>
           <div class="row">
-            <div class="col-md-6 mb-3">
+            <?php foreach ($preferencias as $campo => $valor): ?>
-              <div class="form-check form-switch">
+              <?php if (in_array($campo, ['resumen_diario_hora', 'resumen_diario_dias'])): continue; endif; ?>
-                <input class="form-check-input tipo-notificacion" type="checkbox" 
+              <div class="col-md-6 mb-3">
-                       name="nuevas_solicitudes" id="nuevas_solicitudes" 
+                <div class="form-check form-switch">
-                       data-tipo="tipo_notificacion" data-nombre="nuevas_solicitudes"
+                  <input class="form-check-input tipo-notificacion" type="checkbox" 
-                       <?= !empty($preferencias['nuevas_solicitudes']) ? 'checked' : '' ?>>
+                        name="<?= $campo ?>" id="<?= $campo ?>" 
-                <label class="form-check-label" for="nuevas_solicitudes">
+                        data-tipo="tipo_notificacion" data-nombre="<?= $campo ?>"
-                  <strong>Nuevas Solicitudes</strong>
+                        <?= !empty($valor) ? 'checked' : '' ?>>
-                  <div class="form-text">Creación de nuevas solicitudes de importación</div>
+                  <label class="form-check-label" for="<?= $campo ?>">
-                </label>
+                    <strong><?= ucwords(str_replace('_', ' ', $campo)) ?></strong>
+                    <div class="form-text">
+                      <?= $tipos[$campo] ?? 'Configuración de ' . str_replace('_', ' ', $campo) ?>
+                    </div>
+                  </label>
+                </div>
               </div>
-            </div>
+            <?php endforeach; ?>
-                            
-            <div class="col-md-6 mb-3">
-              <div class="form-check form-switch">
-                <input class="form-check-input tipo-notificacion" type="checkbox" 
-                       name="registro_solicitud" id="registro_solicitud" 
-                       data-tipo="tipo_notificacion" data-nombre="registro_solicitud"
-                       <?= !empty($preferencias['registro_solicitud']) ? 'checked' : '' ?>>
-                <label class="form-check-label" for="registro_solicitud">
-                  <strong>Registro Solicitud</strong>
-                  <div class="form-text">Notificación inmediata al registrar una solicitud</div>
-                </label>
-              </div>
-            </div>
-                            
-            <div class="col-md-6 mb-3">
-              <div class="form-check form-switch">
-                <input class="form-check-input tipo-notificacion" type="checkbox" 
-                       name="cambio_estado" id="cambio_estado" 
-                       data-tipo="tipo_notificacion" data-nombre="cambio_estado"
-                       <?= !empty($preferencias['cambio_estado']) ? 'checked' : '' ?>>
-                <label class="form-check-label" for="cambio_estado">
-                  <strong>Cambio Estado</strong>
-                  <div class="form-text">Cambio de estado de solicitudes de importación</div>
-                </label>
-              </div>
-            </div>
-                            
-            <div class="col-md-6 mb-3">
-              <div class="form-check form-switch">
-                <input class="form-check-input tipo-notificacion" type="checkbox" 
-                       name="resumen_diario" id="resumen_diario" 
-                       data-tipo="tipo_notificacion" data-nombre="resumen_diario"
-                       <?= !empty($preferencias['resumen_diario']) ? 'checked' : '' ?>>
-                <label class="form-check-label" for="resumen_diario">
-                  <strong>Resumen Diario</strong>
-                  <div class="form-text">Resumen diario de solicitudes de importación</div>
-                </label>
-              </div>
-            </div>
-                            
-            <div class="col-md-6 mb-3">
-              <div class="form-check form-switch">
-                <input class="form-check-input tipo-notificacion" type="checkbox" 
-                       name="alertas_tiempo" id="alertas_tiempo" 
-                       data-tipo="tipo_notificacion" data-nombre="alertas_tiempo"
-                       <?= !empty($preferencias['alertas_tiempo']) ? 'checked' : '' ?>>
-                <label class="form-check-label" for="alertas_tiempo">
-                  <strong>Alertas Tiempo</strong>
-                  <div class="form-text">Alertas por tiempo excedido en estados críticos</div>
-                </label>
-              </div>
-            </div>
-                            
-            <div class="col-md-6 mb-3">
-              <div class="form-check form-switch">
-                <input class="form-check-input tipo-notificacion" type="checkbox" 
-                       name="documentos_expediente" id="documentos_expediente" 
-                       data-tipo="tipo_notificacion" data-nombre="documentos_expediente"
-                       <?= !empty($preferencias['documentos_expediente']) ? 'checked' : '' ?>>
-                <label class="form-check-label" for="documentos_expediente">
-                  <strong>Documentos Expediente</strong>
-                  <div class="form-text">Incorporación de documentos al expediente electrónico</div>
-                </label>
-              </div>
-            </div>
-                            
-            <div class="col-md-6 mb-3">
-              <div class="form-check form-switch">
-                <input class="form-check-input tipo-notificacion" type="checkbox" 
-                       name="nuevos_archivos" id="nuevos_archivos" 
-                       data-tipo="tipo_notificacion" data-nombre="nuevos_archivos"
-                       <?= !empty($preferencias['nuevos_archivos']) ? 'checked' : '' ?>>
-                <label class="form-check-label" for="nuevos_archivos">
-                  <strong>Nuevos Archivos</strong>
-                  <div class="form-text">Aviso al agregarse nuevos archivos o documentos</div>
-                </label>
-              </div>
-            </div>
-                            
-            <div class="col-md-6 mb-3">
-              <div class="form-check form-switch">
-                <input class="form-check-input tipo-notificacion" type="checkbox" 
-                       name="intentos_fallidos" id="intentos_fallidos" 
-                       data-tipo="tipo_notificacion" data-nombre="intentos_fallidos"
-                       <?= !empty($preferencias['intentos_fallidos']) ? 'checked' : '' ?>>
-                <label class="form-check-label" for="intentos_fallidos">
-                  <strong>Intentos Fallidos</strong>
-                  <div class="form-text">Intentos fallidos de acceso</div>
-                </label>
-              </div>
-            </div>
-                            
-            <div class="col-md-6 mb-3">
-              <div class="form-check form-switch">
-                <input class="form-check-input tipo-notificacion" type="checkbox" 
-                       name="bloqueo_cuenta" id="bloqueo_cuenta" 
-                       data-tipo="tipo_notificacion" data-nombre="bloqueo_cuenta"
-                       <?= !empty($preferencias['bloqueo_cuenta']) ? 'checked' : '' ?>>
-                <label class="form-check-label" for="bloqueo_cuenta">
-                  <strong>Bloqueo Cuenta</strong>
-                  <div class="form-text">Bloqueo de cuenta</div>
-                </label>
-              </div>
-            </div>
           </div>
         </div>
 

views/productos_frecuentes/alta.php

@@ -30,12 +30,42 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>
   <!-- SweetAlert2 -->
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .content { margin-top: 56px; padding: 40px 20px; background-color: #f4f6f9; transition: margin-left .3s ease; }
     @media (min-width: 768px) { .content { margin-left: 250px; } }
     @media (max-width: 767.98px) { .content { margin-left: 0; padding: 20px 10px; } }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .form-label { font-weight: 500; }
   </style>
 </head>
@@ -54,8 +84,8 @@
   <?php unset($_SESSION['flash_success']); endif; ?>
 
   <div class="content">
-    <h4 class="mb-4">➕ Alta de Producto Frecuente</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">➕ Alta de Producto Frecuente</h4>
-    <div class="card p-4 shadow-sm bg-white">
+    <div class="card p-4 shadow-sm bg-white card-hover position-relative h-auto">
       <form id="altaProductoFrecuenteForm" action="/IMPORTADORES/productos_frecuentes/guardar" method="POST">
         <div class="row g-3">
           <!-- Sinónimo, Fracción, NICO -->
@@ -180,8 +210,8 @@
 
           <!-- Botones -->
           <div class="col-12 text-end mt-4">
-            <button type="submit" class="btn btn-primary">Guardar Producto</button>
+            <button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">Guardar Producto</button>
-            <a href="/IMPORTADORES/productos_frecuentes" class="btn btn-secondary ms-2">Cancelar</a>
+            <a href="/IMPORTADORES/productos_frecuentes" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
           </div>
         </div>
       </form>

views/productos_frecuentes/editar.php

@@ -26,12 +26,42 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .content { margin-top: 56px; padding: 40px 20px; background-color: #f4f6f9; transition: margin-left .3s ease; }
     @media (min-width: 768px) { .content { margin-left: 250px; } }
     @media (max-width: 767.98px) { .content { margin-left: 0; padding: 20px 10px; } }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .form-label { font-weight: 500; }
   </style>
 </head>
@@ -48,8 +78,8 @@
   <?php unset($_SESSION['flash_success']); endif; ?>
 
   <div class="content">
-    <h4 class="mb-4">✏️ Editar Producto Frecuente</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✏️ Editar Producto Frecuente</h4>
-    <div class="card p-4 shadow-sm bg-white">
+    <div class="card p-4 shadow-sm bg-white card-hover position-relative h-auto">
       <form id="editarProductoFrecuenteForm" action="/IMPORTADORES/productos_frecuentes/actualizar" method="POST">
         <input type="hidden" name="id_producto_frecuente" value="<?= htmlspecialchars($producto['id_producto_frecuente']) ?>">
         <div class="row g-3">
@@ -165,8 +195,8 @@
         </div>
 
         <div class="mt-4 text-end">
-          <button type="submit" class="btn btn-primary">Actualizar</button>
+          <button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">Actualizar</button>
-          <a href="/IMPORTADORES/productos_frecuentes" class="btn btn-secondary ms-2">Cancelar</a>
+          <a href="/IMPORTADORES/productos_frecuentes" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
         </div>
       </form>
     </div>

views/productos_frecuentes/lista.php

@@ -13,12 +13,42 @@
   <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
   <!-- SweetAlert2 -->
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .content { margin-top: 56px; padding: 40px 20px; background-color: #f4f6f9; transition: margin-left .3s ease; }
     @media (min-width: 768px) { .content { margin-left: 250px; } }
     @media (max-width: 767.98px) { .content { margin-left: 0; padding: 20px 10px; } }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     /* Asegura que la tabla pueda desplazarse en móvil */
     .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
   </style>
@@ -46,8 +76,8 @@
   <?php unset($_SESSION['flash_success']); endif; ?>
 
   <div class="content">
-    <h4 class="mb-4">📋 Productos Frecuentes</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📋 Productos Frecuentes</h4>
-    <div class="card p-4 shadow-sm">
+    <div class="card p-4 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table id="tablaProductosFrecuentes" class="table table-striped table-bordered">
           <thead class="table-dark">
@@ -122,8 +152,8 @@
               <td><?= htmlspecialchars($row['frecuencia_uso']) ?></td>
               <td class="text-center">
                 <a href="/IMPORTADORES/productos_frecuentes/editar?id=<?= $row['id_producto_frecuente'] ?>"
-                   class="btn btn-sm btn-primary">✏️</a>
+                   class="btn btn-sm btn-primary mt-auto w-auto btn-animated">✏️</a>
-                <button class="btn btn-sm btn-danger"
+                <button class="btn btn-sm btn-danger mt-auto w-auto btn-animated"
                         onclick="confirmDelete(<?= $row['id_producto_frecuente'] ?>)">
                   🗑️
                 </button>

views/proveedores/crear.php

@@ -11,6 +11,10 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <!-- SweetAlert2 -->
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -21,6 +25,32 @@
     @media (min-width: 768px) { .content { margin-left: 250px; } }
     @media (max-width: 767.98px) { .content { margin-left: 0; } }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
@@ -42,8 +72,8 @@
   ?>
 
   <div class="content">
-    <h4 class="mb-4">➕ Registro de Proveedor</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">➕ Registro de Proveedor</h4>
-    <div class="card p-4 shadow-sm">
+    <div class="card p-4 shadow-sm card-hover position-relative h-auto">
       <form action="/IMPORTADORES/proveedores/guardar" method="POST" enctype="multipart/form-data" id="formAltaProveedores">
         <div class="row g-3">
           <div class="col-md-4">
@@ -88,8 +118,8 @@
           </div>
         </div>
         <div class="mt-4 text-end">
-          <a href="/IMPORTADORES/proveedores" class="btn btn-secondary me-2">Cancelar</a>
+          <a href="/IMPORTADORES/proveedores" class="btn btn-secondary me-2 mt-auto w-auto btn-animated">Cancelar</a>
-          <button type="submit" class="btn btn-primary">Guardar Proveedor</button>
+          <button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">Guardar Proveedor</button>
         </div>
       </form>
     </div>

views/proveedores/lista.php

@@ -12,6 +12,10 @@
   <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
   <!-- SweetAlert2 -->
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     table.dataTable thead th { background: #343a40; color: #fff; }
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
@@ -31,15 +35,41 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">📄 Listado de Proveedores</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📄 Listado de Proveedores</h4>
-    <a href="/IMPORTADORES/proveedores/crear" class="btn btn-success mb-3">➕ Nuevo Proveedor</a>
+    <a href="/IMPORTADORES/proveedores/crear" class="btn btn-success mb-3 mt-auto w-auto btn-animated">➕ Nuevo Proveedor</a>
 
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <br>
       <table id="proveedores-table" class="table table-striped nowrap" style="width:100%">
         <thead>

views/seguridad/agregar.php

@@ -11,8 +11,11 @@ $dos_factores_estado = obtenerEstadoDosFactores();
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -46,106 +49,140 @@ $dos_factores_estado = obtenerEstadoDosFactores();
     /* Animación suave para el modal */
     .modal.fade .modal-dialog { transform: translate(0, -50px); transition: transform 0.3s ease-out; }
     .modal.show .modal-dialog { transform: translate(0, 0); }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">👮 Opciones de Seguridad</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title-glow">👮 Opciones de Seguridad</h4>
     <div class="row g-3">
 
       <!-- Autenticacin de dos factores -->
-      <div class="col-md-6">
+      <div class="col-md-6 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-        <div class="card shadow-sm p-3">
+        <div class="card shadow-sm p-3 card-hover position-relative h-100">
-          <h4 class="mb-4 text-dark">Autenticación de dos factores</h4>
+          <div class="card-body p-0 d-flex flex-column">
-          <p>Al activar esta funcionalidad, blindas el acceso a tu cuenta, recibiras un código de acceso a tu correo electrónico para confirmar identidad.</p>
+            <h4 class="mb-4 text-dark">Autenticación de dos factores</h4>
-          <form method="post" action="/IMPORTADORES/seguridad/autenticacionDosFactores">
+            <p class="text-muted small flex-grow-1 mb-4">Al activar esta funcionalidad, blindas el acceso a tu cuenta, recibiras un código de acceso a tu correo electrónico para confirmar identidad.</p>
-            <div class="form-check form-switch mb-3">
+            <form method="post" action="/IMPORTADORES/seguridad/autenticacionDosFactores">
-              <input type="checkbox" name="dos_factores" id="dos_factores" class="form-check-input"
+              <div class="form-check form-switch mb-3">
-                <?php echo ($dos_factores_estado == 1) ? "checked" : ""; ?>>
+                <input type="checkbox" name="dos_factores" id="dos_factores" class="form-check-input"
-              <label class="form-check-label" for="dos_factores">
+                  <?php echo ($dos_factores_estado == 1) ? "checked" : ""; ?>>
-                <?php echo ($dos_factores_estado == 1) ? "Activo" : "Inactivo"; ?>
+                <label class="form-check-label" for="dos_factores">
-              </label>
+                  <?php echo ($dos_factores_estado == 1) ? "Activo" : "Inactivo"; ?>
-            </div>
+                </label>
-            <button type="submit" class="btn btn-primary"><i class="fas fa-floppy-disk"></i>Guardar configuración</button>
+              </div>
-          </form>
+              <button type="submit" class="btn btn-primary btn-sm mt-2 w-40 btn-animated"><i class="fas fa-floppy-disk"></i>Guardar configuración</button>
+            </form>
+          </div>
         </div>
       </div>
 
       <!-- Cambiar contraseña -->
-      <div class="col-md-6">
+      <div class="col-md-6 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-        <div class="card shadow-sm p-3">
+        <div class="card shadow-sm p-3 card-hover position-relative h-100">
-          <h4 class="mb-4 text-dark">Cambiar contraseña</h4>
+          <div class="card-body p-0 d-flex flex-column">
-          <p>Al actualizar tu contraseña, refuerzas la seguridad de tu cuenta. Te recomendamos usar una combinación de letras, números y símbolos para mayor seguridad.</p><br>
+            <h4 class="mb-4 text-dark">Cambiar contraseña</h4>
-          <form>
+            <p class="text-muted small flex-grow-1 mb-4">Al actualizar tu contraseña, refuerzas la seguridad de tu cuenta. Te recomendamos usar una combinación de letras, números y símbolos para mayor seguridad.</p><br>
-            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalConfirmarCambio">
+            <form>
-              <i class="fas fa-key"></i>Cambiar contraseña
+              <button type="button" class="btn btn-primary btn-sm mt-2 w-40 btn-animated" data-bs-toggle="modal" data-bs-target="#modalConfirmarCambio">
-            </button>
+                <i class="fas fa-key"></i>Cambiar contraseña
-          </form>
+              </button>
+            </form>
+          </div>
         </div>
       </div>
 
       <!-- Correo adicional (extra) -->
-      <div class="col-md-6">
+      <div class="col-md-6 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-        <div class="card shadow-sm p-3">
+        <div class="card shadow-sm p-3 card-hover position-relative h-100">
-          <h4 class="mb-4 text-dark">Recibe notificaciones</h4>
+          <div class="card-body p-0 d-flex flex-column">
-          <p>Agrega un correo adicional para recibir notificaciones.</p>
+            <h4 class="mb-4 text-dark">Recibe notificaciones</h4>
-          <?php if (!empty($correos['correo_extra'])): ?>
+            <p class="text-muted small flex-grow-1 mb-4">Agrega un correo adicional para recibir notificaciones.</p>
-            <p><code><?= htmlspecialchars($correos['correo_extra']) ?></code></p>
+            <?php if (!empty($correos['correo_extra'])): ?>
-            <!-- Formulario para eliminar -->
+              <p><code><?= htmlspecialchars($correos['correo_extra']) ?></code></p>
-            <form method="POST" action="/IMPORTADORES/seguridad/eliminarCorreoExtra" id="form-eliminar-extra" class="mt-2 hide"></form>
+              <!-- Formulario para eliminar -->
-            <form method="POST" action="/IMPORTADORES/seguridad/modificarCorreoExtra">
+              <form method="POST" action="/IMPORTADORES/seguridad/eliminarCorreoExtra" id="form-eliminar-extra" class="mt-2 hide"></form>
-              <div class="mb-3">
+              <form method="POST" action="/IMPORTADORES/seguridad/modificarCorreoExtra">
-                <input type="email" name="email-extra" class="form-control" value="" placeholder="Actualizar correo adicional" required>
+                <div class="mb-3">
-              </div>
+                  <input type="email" name="email-extra" class="form-control" value="" placeholder="Actualizar correo adicional" required>
-              <div class="d-flex gap-2">
+                </div>
-                <button type="submit" class="btn btn-success">
+                <div class="d-flex gap-2">
-                  <i class="fas fa-edit"></i>Actualizar
+                  <button type="submit" class="btn btn-success btn-sm mt-2 w-40 btn-animated">
-                </button>
+                    <i class="fas fa-edit"></i>Actualizar
-                <button type="button" class="btn btn-danger" onclick="confirmarEliminacion('extra')">
+                  </button>
-                  <i class="fas fa-trash"></i> Eliminar correo
+                  <button type="button" class="btn btn-danger btn-sm mt-2 w-40 btn-animated" onclick="confirmarEliminacion('extra')">
-                </button>
+                    <i class="fas fa-trash"></i> Eliminar correo
-              </div>
+                  </button>
-            </form>
+                </div>
-          <?php else: ?>
+              </form>
-            <form method="POST" action="/IMPORTADORES/seguridad/correoExtra">
+            <?php else: ?>
-              <div class="mb-3">
+              <form method="POST" action="/IMPORTADORES/seguridad/correoExtra">
-                <input type="email" name="email-extra" class="form-control" placeholder="Correo adicional" required>
+                <div class="mb-3">
-              </div>
+                  <input type="email" name="email-extra" class="form-control" placeholder="Correo adicional" required>
-              <button type="submit" class="btn btn-primary"><i class="fas fa-envelope"></i>Registrar</button>
+                </div>
-            </form>
+                <button type="submit" class="btn btn-primary btn-sm mt-2 w-40 btn-animated"><i class="fas fa-envelope"></i>Registrar</button>
-          <?php endif; ?>
+              </form>
+            <?php endif; ?>
+          </div>
         </div>
       </div>
 
       <!-- Correo de Respaldo -->
-      <div class="col-md-6">
+      <div class="col-md-6 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-        <div class="card shadow-sm p-3">
+        <div class="card shadow-sm p-3 card-hover position-relative h-100">
-          <h4 class="mb-4 text-dark">Correo de respaldo</h4>
+          <div class="card-body p-0 d-flex flex-column">
-          <p>Agrega un correo de respaldo para reuperación de tu cuenta.</p>
+            <h4 class="mb-4 text-dark">Correo de respaldo</h4>
-          <?php if (!empty($correos['correo_respaldo'])): ?>
+            <p class="text-muted small flex-grow-1 mb-4">Agrega un correo de respaldo para reuperación de tu cuenta.</p>
-            <p><code><?= htmlspecialchars($correos['correo_respaldo']) ?></code></p>
+            <?php if (!empty($correos['correo_respaldo'])): ?>
-            <!-- Formulario para eliminar -->
+              <p><code><?= htmlspecialchars($correos['correo_respaldo']) ?></code></p>
-            <form method="POST" action="/IMPORTADORES/seguridad/eliminarCorreoRespaldo" id="form-eliminar-respaldo" class="mt-2 hide"></form>
+              <!-- Formulario para eliminar -->
-            <form method="POST" action="/IMPORTADORES/seguridad/modificarCorreoRspaldo">
+              <form method="POST" action="/IMPORTADORES/seguridad/eliminarCorreoRespaldo" id="form-eliminar-respaldo" class="mt-2 hide"></form>
-              <div class="mb-3">
+              <form method="POST" action="/IMPORTADORES/seguridad/modificarCorreoRspaldo">
-                <input type="email" name="email-respaldo" class="form-control" value="" placeholder="Actualizar correo de respaldo" required>
+                <div class="mb-3">
-              </div>
+                  <input type="email" name="email-respaldo" class="form-control" value="" placeholder="Actualizar correo de respaldo" required>
-              <button type="submit" class="btn btn-success">
+                </div>
-                <i class="fas fa-edit"></i>Actualizar
+                <button type="submit" class="btn btn-success btn-sm mt-2 w-40 btn-animated">
-              </button>
+                  <i class="fas fa-edit"></i>Actualizar
-              <button type="button" class="btn btn-danger" onclick="confirmarEliminacion('respaldo')">
+                </button>
-                <i class="fas fa-trash"></i> Eliminar correo
+                <button type="button" class="btn btn-danger btn-sm mt-2 w-40 btn-animated" onclick="confirmarEliminacion('respaldo')">
-              </button>
+                  <i class="fas fa-trash"></i> Eliminar correo
-            </form>
+                </button>
-          <?php else: ?>
+              </form>
-            <form method="POST" action="/IMPORTADORES/seguridad/correoRespaldo">
+            <?php else: ?>
-              <div class="mb-3">
+              <form method="POST" action="/IMPORTADORES/seguridad/correoRespaldo">
-                <input type="email" name="email-respaldo" class="form-control" placeholder="Correo de respaldo" required>
+                <div class="mb-3">
-              </div>
+                  <input type="email" name="email-respaldo" class="form-control" placeholder="Correo de respaldo" required>
-              <button type="submit" class="btn btn-primary"><i class="fas fa-envelope"></i>Registrar</button>
+                </div>
-            </form>
+                <button type="submit" class="btn btn-primary btn-sm mt-2 w-40 btn-animated"><i class="fas fa-envelope"></i>Registrar</button>
-          <?php endif; ?>
+              </form>
+            <?php endif; ?>
+          </div>
         </div>
       </div>
 
@@ -195,19 +232,19 @@ $dos_factores_estado = obtenerEstadoDosFactores();
   </div>
 
   <script>
-    const chk = document.getElementById('dos_factores');
+    const chk   = document.getElementById('dos_factores');
     const label = document.querySelector('label[for="dos_factores"]');
 
     chk.addEventListener('change', () => { label.textContent = chk.checked ? 'Activo' : 'Inactivo'; });
     // Función para confirmar eliminación con SweetAlert
     function confirmarEliminacion(tipo) {
       const mensajes = {
-        'extra': { titulo: '¿Eliminar correo adicional?', texto: 'No podrás recibir notificaciones en este correo.', confirmado: 'Correo adicional eliminado', form: 'form-eliminar-extra' },
+        'extra':    { titulo: '¿Eliminar correo adicional?', texto: 'No podrás recibir notificaciones en este correo.', confirmado: 'Correo adicional eliminado', form: 'form-eliminar-extra' },
         'respaldo': { titulo: '¿Eliminar correo de respaldo?', texto: 'No podrás recuperar tu cuenta con este correo.', confirmado: 'Correo de respaldo eliminado', form: 'form-eliminar-respaldo' }
       };
       const config = mensajes[tipo];
       swal({ title: config.titulo, text: config.texto, icon: "warning", buttons: {
-          cancel: { text: "Cancelar", visible: true, className: "btn-secondary" },
+          cancel:  { text: "Cancelar", visible: true, className: "btn-secondary" },
           confirm: { text: "Sí, eliminar", className: "btn-danger" }
         }, dangerMode: true,
       })

views/seguridad/dashboard_seguridad.php

@@ -8,6 +8,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -26,62 +30,95 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">👮 Seguridad</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title-glow">👮 Seguridad</h4>
     <div class="row g-3">
 
-      <div class="col-md-6">
+      <div class="col-md-6 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-        <div class="card shadow-sm p-3">
+        <div class="card shadow-sm p-3 card-hover position-relative h-100">
-          <h4 class="mb-4 text-dark">Autenticación de dos factores</h4>
+          <div class="card-body p-0 d-flex flex-column">
-          <p>Al activar esta funcionalidad, blindas el acceso a tu cuenta, recibiras un código de acceso a tu correo electrónico para confirmar identidad.</p>
+            <h4 class="mb-4 text-dark">Autenticación de dos factores</h4>
-          <form>
+            <p class="text-muted small flex-grow-1 mb-4">Al activar esta funcionalidad, blindas el acceso a tu cuenta, recibiras un código de acceso a tu correo electrónico para confirmar identidad.</p>
-            <div class="form-check form-switch">
+            <form>
-              <input type="checkbox" class="form-check-input" role="switch" 
+              <div class="form-check form-switch">
-                    id="dos_factores" name="dos_factores" disabled
+                <input type="checkbox" class="form-check-input" role="switch" 
-                    <?php if(!empty($correos['dos_factores'])) echo "checked"; ?>>
+                      id="dos_factores" name="dos_factores" disabled
-              <label class="form-check-label" for="dos_factores">
+                      <?php if(!empty($correos['dos_factores'])) echo "checked"; ?>>
-              <?php echo !empty($correos['dos_factores']) ? "Activo" : "Inactivo"; ?>
+                <label class="form-check-label" for="dos_factores">
-              </label>
+                <?php echo !empty($correos['dos_factores']) ? "Activo" : "Inactivo"; ?>
-            </div>
+                </label>
-          </form>
+              </div>
+            </form>
+          </div>
         </div>
       </div>
 
        <!-- Cambiar contraseña -->
-      <div class="col-md-6">
+      <div class="col-md-6 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-        <div class="card shadow-sm p-3">
+        <div class="card shadow-sm p-3 card-hover position-relative h-100">
-          <h4 class="mb-4 text-dark">Cambiar contraseña</h4>
+          <div class="card-body p-0 d-flex flex-column">
-          <p>Al actualizar tu contraseña, refuerzas la seguridad de tu cuenta. Te recomendamos usar una combinación de letras, números y símbolos para mayor seguridad.</p><br>
+            <h4 class="mb-4 text-dark">Cambiar contraseña</h4>
+            <p class="text-muted small flex-grow-1 mb-4">Al actualizar tu contraseña, refuerzas la seguridad de tu cuenta. Te recomendamos usar una combinación de letras, números y símbolos para mayor seguridad.</p><br>
+          </div>
         </div>
       </div>
 
-      <div class="col-md-6">
+      <div class="col-md-6 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-        <div class="card shadow-sm p-3">
+        <div class="card shadow-sm p-3 card-hover position-relative h-100">
-          <h4 class="mb-4 text-dark">Recibe notificaciones</h4>
+          <div class="card-body p-0 d-flex flex-column">
-          <p>Agrega un correo adicional para recibir notificaciones.</p>
+            <h4 class="mb-4 text-dark">Recibe notificaciones</h4>
-          <form>
+            <p class="text-muted small flex-grow-1 mb-4">Agrega un correo adicional para recibir notificaciones.</p>
-            <div class="mb-3">
+            <form>
-              <label class="form-label">Correo electrónico adicional</label>
+              <div class="mb-3">
-              <input type="email" name="email-extra" class="form-control" disabled value="<?php echo htmlspecialchars($correos['correo_extra']); ?>">
+                <label class="form-label">Correo electrónico adicional</label>
-            </div>
+                <input type="email" name="email-extra" class="form-control" disabled value="<?php echo htmlspecialchars($correos['correo_extra']); ?>">              </div>
-          </form>
+            </form>
+          </div>
         </div>
       </div>
 
-      <div class="col-md-6">
+      <div class="col-md-6 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
-        <div class="card shadow-sm p-3">
+        <div class="card shadow-sm p-3 card-hover position-relative h-100">
-          <h4 class="mb-4 text-dark">Correo de respaldo</h4>
+          <div class="card-body p-0 d-flex flex-column">
-          <p>Agrega un correo de respaldo para reuperación de tu cuenta.</p>
+            <h4 class="mb-4 text-dark">Correo de respaldo</h4>
-          <form>
+            <p class="text-muted small flex-grow-1 mb-4">Agrega un correo de respaldo para reuperación de tu cuenta.</p>
-            <div class="mb-3">
+            <form>
-              <label class="form-label">Correo electrónico de respaldo</label>
+              <div class="mb-3">
-              <input type="email" name="email-respaldo" class="form-control" disabled value="<?php echo htmlspecialchars($correos['correo_respaldo']); ?>">
+                <label class="form-label">Correo electrónico de respaldo</label>
-            </div>
+                <input type="email" name="email-respaldo" class="form-control" disabled value="<?php echo htmlspecialchars($correos['correo_respaldo']); ?>">
-          </form>
+              </div>
+            </form>
+          </div>
         </div>
       </div>
     </div>

views/solicitud_importacion/crear.php

@@ -12,7 +12,11 @@
   <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
-  <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>v
+  <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -26,6 +30,32 @@
       .sidebar .nav-link:hover, .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .hide { display: none !important; }
     .alert { top: 75px; left: 275px; right: 50px; position: fixed; z-index: 1050; width: calc(100% - 285px); }
   </style>
@@ -36,14 +66,14 @@
     <div class="alert alert-warning mt-4">
       <h5>⚠️ No tienes una agencia activa vinculada.</h5>
       <p>Para poder gestionar tus solicitudes de importación, primero debes <strong>vincularte a una agencia</strong>.</p>
-      <a href="/IMPORTADORES/vinculaciones/nuevaVinculacion" class="btn btn-primary">Ir a Vinculaciones</a>
+      <a href="/IMPORTADORES/vinculaciones/nuevaVinculacion" class="btn btn-primary mt-auto w-auto btn-animated">Ir a Vinculaciones</a>
     </div>
     <?php return; ?>
   <?php endif; ?>
 
   <div class="content">
-    <h4>➕ Nueva Solicitud de Importación</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">➕ Nueva Solicitud de Importación</h4>
-    <div class="card p-4 bg-white shadow-sm">
+    <div class="card p-4 bg-white shadow-sm card-hover position-relative h-auto">
       <form id="solicitudForm" action="/IMPORTADORES/solicitud_importacion/guardar" method="POST" enctype="multipart/form-data">
 
         <!-- Sección principal -->
@@ -185,9 +215,9 @@
             </thead>
             <tbody>
               <tr>
-                <td><input name="partidas[0][descripcion]" class="form-control w-100" required></td>
+                <td><input name="partidas[0][descripcion]" class="form-control w-auto" required></td>
-                <td><input name="partidas[0][cantidad_comercial]" type="number" step="0.0001" class="form-control w-100" min="0" required></td>
+                <td><input name="partidas[0][cantidad_comercial]" type="number" step="0.0001" class="form-control w-auto" min="0" required></td>
-                <td><input name="partidas[0][cantidad_tarifa]" type="number" step="0.0001" class="form-control w-100" min="0" required></td>
+                <td><input name="partidas[0][cantidad_tarifa]" type="number" step="0.0001" class="form-control w-auto" min="0" required></td>
                 <td>
                   <div class="mb-3">
                     <select name="partidas[0][unidad_comercial_id]" class="form-select searchable" required>
@@ -198,8 +228,8 @@
                     </select>
                   </div>
                 </td>
-                <td><input name="partidas[0][valor_factura]" type="number" step="0.01" class="form-control valor-partida w-100" min="0" required></td>
+                <td><input name="partidas[0][valor_factura]" type="number" step="0.01" class="form-control valor-partida w-auto" min="0" required></td>
-                <td><input name="partidas[0][peso_bruto]" type="number" step="0.0001" class="form-control w-100" min="0" required></td>
+                <td><input name="partidas[0][peso_bruto]" type="number" step="0.0001" class="form-control w-auto" min="0" required></td>
                 <td>
                   <div class="mb-3">
                     <select name="partidas[0][tasa_preferencial]" class="form-select searchable" required>
@@ -212,14 +242,14 @@
                     </select>
                   </div>
                 </td>
-                <td class="hide"><input name="partidas[0][precio_unitario]" type="number" class="form-control w-100"></td>
+                <td class="hide"><input name="partidas[0][precio_unitario]" type="number" class="form-control w-auto"></td>
-                <td class="hide"><input name="partidas[0][oma_factura]" class="form-control w-100"></td>
+                <td class="hide"><input name="partidas[0][oma_factura]" class="form-control w-auto"></td>
                 <td><button type="button" class="btn btn-danger btn-sm remove-row">✖️</button></td>
               </tr>
             </tbody>
           </table>
         </div>
-        <button type="button" class="btn btn-secondary btn-sm" id="add-partida">➕ Agregar partida</button>
+        <button type="button" class="btn btn-secondary btn-sm mt-auto w-auto btn-animated" id="add-partida">➕ Agregar partida</button>
 
         <!-- Activo -->
         <div class="form-check mt-4">
@@ -228,8 +258,8 @@
         </div>
 
         <!-- Botones finales -->
-        <button type="submit" class="btn btn-success mt-3">Guardar</button>
+        <button type="submit" class="btn btn-success mt-3 mt-auto w-auto btn-animated">Guardar</button>
-        <a href="/IMPORTADORES/solicitud_importacion/lista" class="btn btn-secondary mt-3 ms-2">Cancelar</a>
+        <a href="/IMPORTADORES/solicitud_importacion/lista" class="btn btn-secondary mt-3 ms-2 mt-auto w-auto btn-animated">Cancelar</a>
       </form>
     </div>
   </div>

views/solicitud_importacion/editar.php

@@ -15,6 +15,10 @@
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -28,14 +32,40 @@
       .sidebar .nav-link:hover, .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .hide { display: none !important; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4>✏️ Editar Solicitud #<?= (int)$factura['id_solicitud'] ?></h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✏️ Editar Solicitud #<?= (int)$factura['id_solicitud'] ?></h4>
-    <div class="card p-4 bg-white shadow-sm">
+    <div class="card p-4 bg-white shadow-sm card-hover position-relative h-auto">
       <form id="solicitudForm" action="/IMPORTADORES/solicitud_importacion/actualizar" method="POST" enctype="multipart/form-data">
         <input type="hidden" name="id_solicitud" value="<?= (int)$factura['id_solicitud'] ?>">
 
@@ -244,7 +274,7 @@
             </tbody>
           </table>
         </div>
-        <button type="button" class="btn btn-secondary btn-sm mb-3" id="add-partida">➕ Agregar partida</button>
+        <button type="button" class="btn btn-secondary btn-sm mb-3 mt-auto w-auto btn-animated" id="add-partida">➕ Agregar partida</button>
 
         <!-- Activo -->
         <div class="form-check mb-4">
@@ -252,8 +282,8 @@
           <label for="status" class="hide form-check-label">Activo</label>
         </div>
 
-        <button type="submit" class="btn btn-success">Actualizar</button>
+        <button type="submit" class="btn btn-success mt-auto w-auto btn-animated">Actualizar</button>
-        <a href="/IMPORTADORES/solicitud_importacion/lista" class="btn btn-secondary ms-2">Cancelar</a>
+        <a href="/IMPORTADORES/solicitud_importacion/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
       </form>
     </div>
   </div>

views/solicitud_importacion/lista.php

@@ -12,6 +12,10 @@
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     table.dataTable thead th { background: #343a40; color: #fff; }
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
@@ -33,6 +37,32 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .status-select:disabled { background-color: #e9ecef; color: #6c757d;}
     .alert { top: 75px; left: 275px; right: 50px; position: fixed; z-index: 1050; width: calc(100% - 285px); }
   </style>
@@ -49,11 +79,11 @@
   <?php endif; ?>
 
   <div class="content">
-    <h4>📄 Solicitudes de Importación</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📄 Solicitudes de Importación</h4>
-    <a href="/IMPORTADORES/solicitud_importacion/crear" class="btn btn-success mb-3">➕ Nueva Solicitud</a>
+    <a href="/IMPORTADORES/solicitud_importacion/crear" class="btn btn-success mb-3 mt-auto w-auto btn-animated">➕ Nueva Solicitud</a>
-    <button class="btn btn-warning mb-3" id="btn-solicitar-masivo">🚚 Solicitar Importación Masiva</button>
+    <button class="btn btn-warning mb-3 mt-auto w-auto btn-animated" id="btn-solicitar-masivo">🚚 Solicitar Importación Masiva</button>
 
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-striped" id="tabla-solicitudes">
           <thead>

views/transportes/crear.php

@@ -10,6 +10,10 @@
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     table.dataTable thead th { background:#343a40; color:#fff; }
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
@@ -29,6 +33,32 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     /* Forzar z-index más alto para modales anidados */
     .modal { z-index: 9999 !important; }
     .modal-backdrop { z-index: 9998 !important; }
@@ -41,8 +71,8 @@
 <body>
 
   <div class="content">
-    <h4>➕ Nuevo Transporte</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">➕ Nuevo Transporte</h4>
-    <form id="formTransCrear" action="/IMPORTADORES/transportes/guardar" method="POST" enctype="multipart/form-data" class="card p-4 shadow-sm">
+    <form id="formTransCrear" action="/IMPORTADORES/transportes/guardar" method="POST" enctype="multipart/form-data" class="card p-4 shadow-sm card-hover position-relative h-auto">
       <div class="row g-3">
         <div class="col-md-6">
           <label class="form-label">Contenedor *</label>
@@ -78,7 +108,7 @@
       </div>
       <div class="text-end mt-4">
         <button type="submit" class="btn btn-success">Guardar</button>
-        <a href="/IMPORTADORES/transportes/lista" class="btn btn-secondary ms-2">Cancelar</a>
+        <a href="/IMPORTADORES/transportes/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
       </div>
     </form>
   </div>

views/transportes/editar.php

@@ -10,6 +10,10 @@
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     table.dataTable thead th { background:#343a40; color:#fff; }
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
@@ -29,14 +33,40 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .preview{ width: 40%; }
   </style>
 </head>
 <body>
   
   <div class="content">
-    <h4>✏️ Editar Transporte #<?= $t['id_transporte'] ?></h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✏️ Editar Transporte #<?= $t['id_transporte'] ?></h4>
-    <form id="formTransEdit" action="/IMPORTADORES/transportes/actualizar" method="POST" enctype="multipart/form-data" class="card p-4 shadow-sm">
+    <form id="formTransEdit" action="/IMPORTADORES/transportes/actualizar" method="POST" enctype="multipart/form-data" class="card p-4 shadow-sm card-hover position-relative h-auto">
       <input type="hidden" name="id_transporte" value="<?= $t['id_transporte'] ?>">
       <div class="row g-3">
         <div class="col-md-6">
@@ -80,8 +110,8 @@
         </div>
       </div>
       <div class="text-end mt-4">
-        <button type="submit" class="btn btn-primary">Actualizar</button>
+        <button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">Actualizar</button>
-        <a href="/IMPORTADORES/transportes/lista" class="btn btn-secondary ms-2">Cancelar</a>
+        <a href="/IMPORTADORES/transportes/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
       </div>
     </form>
   </div>

views/transportes/importar_masivo.php

@@ -9,6 +9,10 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -27,12 +31,38 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4>📂 Importación Masiva de Transportes</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📂 Importación Masiva de Transportes</h4>
     <?php if (isset($_SESSION['import_result'])):
       $res = $_SESSION['import_result'];
       unset($_SESSION['import_result']);
@@ -51,7 +81,7 @@
       </script>
     <?php endif; ?>
 
-    <div class="card p-4 shadow-sm">
+    <div class="card p-4 shadow-sm card-hover position-relative h-auto">
       <form action="/IMPORTADORES/transportes/importarGuardar" method="POST" enctype="multipart/form-data">
         <div class="mb-3">
           <label class="form-label">Archivo CSV *</label>
@@ -61,8 +91,8 @@
         <a href="/IMPORTADORES/public/downloads/transportes_masivo_template.csv" class="btn btn-outline-secondary mb-3">
           📥 Descargar plantilla
         </a><br>
-        <button type="submit" class="btn btn-primary">Importar</button>
+        <button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">Importar</button>
-        <a href="/IMPORTADORES/transportes/lista" class="btn btn-secondary ms-2">Cancelar</a>
+        <a href="/IMPORTADORES/transportes/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
       </form>
     </div>
   </div>

views/transportes/lista.php

@@ -12,6 +12,10 @@
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     table.dataTable thead th { background:#343a40; color:#fff; }
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
@@ -31,14 +35,40 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4>🚛 Mis Transportes</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🚛 Mis Transportes</h4>
     <a href="/IMPORTADORES/transportes/crear" class="btn btn-success mb-3">➕ Nuevo Transporte</a>
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-striped" id="tabla-transportes">
           <thead>

views/transportistas/alta.php

@@ -10,6 +10,10 @@
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <!-- SweetAlert2 -->
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -21,13 +25,39 @@
     @media (min-width: 768px) { .content { margin-left: 250px; } }
     @media (max-width: 767.98px) { .content { margin-left: 0; } }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">➕ Alta de Transportista</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">➕ Alta de Transportista</h4>
-    <form action="/IMPORTADORES/transportistas/guardar" method="POST" class="card p-4 shadow-sm" id="formAltaTransportista">
+    <form action="/IMPORTADORES/transportistas/guardar" method="POST" class="card p-4 shadow-sm card-hover position-relative h-auto" id="formAltaTransportista">
       <!-- Hidden para persona moral -->
       <input type="hidden" name="es_persona_moral" id="es_persona_moral" value="0">
 
@@ -103,8 +133,8 @@
       </div>
 
       <div class="text-end mt-4">
-        <button class="btn btn-success px-4">Guardar Transportista</button>
+        <button class="btn btn-success px-4 mt-auto w-auto btn-animated">Guardar Transportista</button>
-        <a href="/IMPORTADORES/transportistas/lista" class="btn btn-secondary ms-2">Cancelar</a>
+        <a href="/IMPORTADORES/transportistas/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
       </div>
     </form>
   </div>

views/transportistas/bulk_upload.php

@@ -18,6 +18,10 @@ unset($_SESSION['import_errors'], $_SESSION['import_success']);
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -43,13 +47,39 @@ unset($_SESSION['import_errors'], $_SESSION['import_success']);
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">📂 Carga Masiva de Transportistas</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📂 Carga Masiva de Transportistas</h4>
-    <div class="card p-4 shadow-sm">
+    <div class="card p-4 shadow-sm card-hover position-relative h-auto">
       <p>1. Descarga la plantilla, complétala con tus datos y luego súbela aquí.</p>
       <a href="/IMPORTADORES/transportistas/template" class="btn btn-outline-secondary mb-4">
         📥 Descargar Plantilla CSV
@@ -60,8 +90,8 @@ unset($_SESSION['import_errors'], $_SESSION['import_success']);
           <label for="archivo_csv" class="form-label">Selecciona archivo CSV</label>
           <input type="file" id="archivo_csv" name="archivo_csv" class="form-control" accept=".csv" required>
         </div>
-        <button type="submit" class="btn btn-primary">🚀 Cargar Transportistas</button>
+        <button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">🚀 Cargar Transportistas</button>
-        <a href="/IMPORTADORES/transportistas/lista" class="btn btn-secondary ms-2">Cancelar</a>
+        <a href="/IMPORTADORES/transportistas/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
       </form>
     </div>
   </div>

views/transportistas/editar.php

@@ -10,6 +10,10 @@
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <!-- SweetAlert2 -->
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -28,13 +32,39 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">✏️ Editar Transportista #<?= $t['id_transportista'] ?></h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✏️ Editar Transportista #<?= $t['id_transportista'] ?></h4>
-    <form action="/IMPORTADORES/transportistas/actualizar" method="POST" class="card p-4 shadow-sm" id="formEditTransportista">
+    <form action="/IMPORTADORES/transportistas/actualizar" method="POST" class="card p-4 shadow-sm card-hover position-relative h-auto" id="formEditTransportista">
       <input type="hidden" name="id_transportista" value="<?= $t['id_transportista'] ?>">
       <div class="row g-3">
         <div class="col-md-4">
@@ -111,8 +141,8 @@
         </div>
       </div>
       <div class="text-end mt-4">
-        <button class="btn btn-success px-4">💾 Guardar Cambios</button>
+        <button class="btn btn-success px-4 mt-auto w-auto btn-animated">💾 Guardar Cambios</button>
-        <a href="/IMPORTADORES/transportistas/lista" class="btn btn-secondary ms-2">Cancelar</a>
+        <a href="/IMPORTADORES/transportistas/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
       </div>
     </form>
   </div>

views/transportistas/lista.php

@@ -9,6 +9,10 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     table.dataTable thead th { background:#343a40; color:#fff; }
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
@@ -28,13 +32,39 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
   </style>
 </head>
 <body>
 
   <div class="content">
-    <h4 class="mb-4">🚚 Mis Transportistas</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🚚 Mis Transportistas</h4>
-    <a href="/IMPORTADORES/transportistas/alta" class="btn btn-success mb-3">➕ Nuevo Transportista</a>
+    <a href="/IMPORTADORES/transportistas/alta" class="btn btn-success mb-3 card-hover position-relative h-auto mt-auto w-auto btn-animated">➕ Nuevo Transportista</a>
     <div class="card p-3 shadow-sm">
       <div class="table-responsive">
         <table id="transportistas-table" class="display nowrap" style="width:100%">
@@ -87,8 +117,8 @@
             render: function(data, type, row) {
               const id = row[0];
               return `
-                <a href="/IMPORTADORES/transportistas/editar?id=${id}" class="btn btn-sm btn-primary">✏️</a>
+                <a href="/IMPORTADORES/transportistas/editar?id=${id}" class="btn btn-sm btn-primary mt-auto w-auto btn-animated">✏️</a>
-                <button class="btn btn-sm btn-danger" onclick="confirmDelete(${id})">🗑️</button>
+                <button class="btn btn-sm btn-danger mt-auto w-auto btn-animated" onclick="confirmDelete(${id})">🗑️</button>
               `;
             }
           }

views/vinculaciones/importadores_vinculados.php

@@ -11,6 +11,10 @@
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -29,15 +33,41 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .table thead th { background: #343a40; color: #fff; }
   </style>
 </head>
 <body>
   
   <div class="content">
-    <h4>✅ Importadores Vinculados</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✅ Importadores Vinculados</h4>
 
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-striped" id="tabla-importadores-vinculados">
           <thead>
@@ -59,7 +89,7 @@
                 <td><?= htmlspecialchars($v['telefono']) ?></td>
                 <td><?= isset($v['fecha_vinculacion']) && $v['fecha_vinculacion'] instanceof DateTime ? $v['fecha_vinculacion']->format('Y-m-d H:i') : '' ?></td>
                 <td>
-                  <a href="/IMPORTADORES/agentes/desvincularAgente?id=<?= $v['id_relacion'] ?>" class="btn btn-sm btn-danger">Desvincular</a>
+                  <a href="/IMPORTADORES/agentes/desvincularAgente?id=<?= $v['id_relacion'] ?>" class="btn btn-sm btn-danger mt-auto w-auto btn-animated">Desvincular</a>
                 </td>
               </tr>
             <?php endforeach; ?>

views/vinculaciones/nueva.php

@@ -12,6 +12,10 @@
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -30,6 +34,32 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .table thead th { background: #343a40; color: #fff; }
   </style>
 </head>
@@ -37,9 +67,9 @@
 
   <!-- 📄 CONTENIDO -->
   <div class="content">
-    <h4 class="mb-4">➕ Nueva Vinculación</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">➕ Nueva Vinculación</h4>
     <!-- TABLA DE AGENCIAS -->
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <h5 class="mb-3">🔗 Solicitar Vinculación con Agencias Aduanales</h5>
       <div class="table-responsive">
         <table class="table table-striped table-hover align-middle" id="tabla-solicitar-vinculaciones">
@@ -68,9 +98,9 @@
                   <td><?= $ag['creado_en'] ? $ag['creado_en']->format('Y-m-d H:i') : '' ?></td>
                   <td>
                     <?php if (!empty($ag['estado_solicitud']) && $ag['estado_solicitud'] === 'PENDIENTE'): ?>
-                      <a href="/IMPORTADORES/importadores/cancelarVinculacion?id=<?= $ag['id_agencia'] ?>" class="btn btn-sm btn-danger">Cancelar solicitud</a>
+                      <a href="/IMPORTADORES/importadores/cancelarVinculacion?id=<?= $ag['id_agencia'] ?>" class="btn btn-sm btn-danger mt-auto w-auto btn-animated">Cancelar solicitud</a>
                     <?php else: ?>
-                      <a href="/IMPORTADORES/importadores/vincular?id=<?= $ag['id_agencia'] ?>" class="btn btn-sm btn-success">Vincular</a>
+                      <a href="/IMPORTADORES/importadores/vincular?id=<?= $ag['id_agencia'] ?>" class="btn btn-sm btn-success mt-auto w-auto btn-animated">Vincular</a>
                     <?php endif; ?>
                   </td>
                 </tr>

views/vinculaciones/solicitudes_vinculacion.php

@@ -10,6 +10,10 @@
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -28,15 +32,41 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .table thead th { background: #343a40; color: #fff; }
   </style>
 </head>
 <body>
   
   <div class="content">
-    <h4 class="mb-4">🔗 Solicitudes de Vinculación</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🔗 Solicitudes de Vinculación</h4>
     <!-- TABLA DE SOLICITUDES DE VINCULACIÓN -->
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <h5 class="mb-3">👥 Usuarios Solicitantes</h5>
       <div class="table-responsive">
         <table class="table table-striped table-hover align-middle" id="tabla-vinculaciones-pendientes">
@@ -68,8 +98,8 @@
                     <?php endif; ?>
                   </td>
                   <td>
-                    <a href="/IMPORTADORES/vinculaciones/aprobarVinculacion?id=<?= $s['id_solicitud'] ?>" class="btn btn-sm btn-success">Aprobar</a>
+                    <a href="/IMPORTADORES/vinculaciones/aprobarVinculacion?id=<?= $s['id_solicitud'] ?>" class="btn btn-sm btn-success mt-auto w-auto btn-animated">Aprobar</a>
-                    <a href="/IMPORTADORES/vinculaciones/denegarVinculacion?id=<?= $s['id_solicitud'] ?>" class="btn btn-sm btn-danger">Denegar</a>
+                    <a href="/IMPORTADORES/vinculaciones/denegarVinculacion?id=<?= $s['id_solicitud'] ?>" class="btn btn-sm btn-danger mt-auto w-auto btn-animated">Denegar</a>
                   </td>
                 </tr>
               <?php endforeach; ?>

views/vinculaciones/usuarios_vinculados.php

@@ -11,6 +11,10 @@
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -29,15 +33,41 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .table thead th { background: #343a40; color: #fff; }
   </style>
 </head>
 <body>
   
   <div class="content">
-    <h4 class="mb-4">👥 Usuarios Vinculados</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">👥 Usuarios Vinculados</h4>
     <!-- TABLA DE VINCULACIÓN AGENCIA -->
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <div class="table-responsive">
         <table class="table table-striped table-hover align-middle" id="tabla-vinculaciones-agencia">
           <thead>
@@ -65,7 +95,7 @@
                   <td><?= !empty($v['fecha_vinculacion']) ? $v['fecha_vinculacion']->format('Y-m-d H:i') : '' ?></td>
                   <td>
                     <?php if (in_array($v['tipo_usuario_sistema'], ['importador', 'agente_aduanal'])): ?>
-                      <a href="/IMPORTADORES/vinculaciones/desvincularAgencia?id=<?= $v['id_relacion'] ?>&tipo=<?= $v['tipo_vinculacion'] ?>" class="btn btn-sm btn-danger">
+                      <a href="/IMPORTADORES/vinculaciones/desvincularAgencia?id=<?= $v['id_relacion'] ?>&tipo=<?= $v['tipo_vinculacion'] ?>" class="btn btn-sm btn-danger mt-auto w-auto btn-animated">
                         Desvincular
                       </a>
                     <?php else: ?>

views/vinculaciones/vinculaciones_importador.php

@@ -12,6 +12,10 @@
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <!-- Animate.css para animaciones adicionales -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   <style>
     body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
     .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -30,6 +34,32 @@
       .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
     }
     .card { border-radius: 12px; }
+    /* Animaciones personalizadas */
+    .card-hover { transition: all 0.3s ease; cursor: pointer; }
+    .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
+    .btn-pulse { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.8s ease-out; } 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive animations */
+    @media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
+    /* Efecto de glow para elementos activos */
+    .btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
+    /* Animación para el título */
+    .title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
+    /* Efecto para botones */
+    .btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
+    .btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
+    .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
+    .btn-animated:hover::before { left: 100%; }
     .table thead th { background: #343a40; color: #fff; }
   </style>
 </head>
@@ -37,10 +67,10 @@
 
   <!-- 📄 CONTENIDO -->
   <div class="content">
-    <h4 class="mb-4">🔗 Mis vinculaciones</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🔗 Mis vinculaciones</h4>
-    <a href="/IMPORTADORES/vinculaciones/nuevaVinculacion" class="btn btn-success mb-3">➕ Nueva Vinculación</a>
+    <a href="/IMPORTADORES/vinculaciones/nuevaVinculacion" class="btn btn-success mb-3 mt-auto w-auto btn-animated">➕ Nueva Vinculación</a>
     <!-- TABLA DE VINCULACIÓN USUARIO -->
-    <div class="card p-3 shadow-sm">
+    <div class="card p-3 shadow-sm card-hover position-relative h-auto">
       <h5 class="mb-3">🏪 Agencia Vinculadas</h5>
       <div class="table-responsive">
         <table class="table table-striped table-hover align-middle" id="tabla-vinculaciones-usuario">
@@ -71,9 +101,9 @@
                     <?php if ($v['id_agencia'] == ($_SESSION['id_agencia_en_uso'] ?? null)): ?>
                       <span class="badge bg-secondary">En uso</span>
                     <?php else: ?>
-                      <a href="/IMPORTADORES/importadores/cambiarAgenciaActiva?id=<?= $v['id_agencia'] ?>" class="btn btn-sm btn-success">Usar Agencia</a>
+                      <a href="/IMPORTADORES/importadores/cambiarAgenciaActiva?id=<?= $v['id_agencia'] ?>" class="btn btn-sm btn-success mt-auto w-auto btn-animated">Usar Agencia</a>
                     <?php endif; ?>
-                    <a href="/IMPORTADORES/importadores/desvincularUsuario?id=<?= $v['id_relacion'] ?>" class="btn btn-sm btn-danger">Desvincular</a>
+                    <a href="/IMPORTADORES/importadores/desvincularUsuario?id=<?= $v['id_relacion'] ?>" class="btn btn-sm btn-danger mt-auto w-auto btn-animated">Desvincular</a>
                   </td>
                 </tr>
               <?php endforeach; ?>