diff --git a/.env b/.env
index 6160c3f..bae8a6f 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,4 @@
-DEBUG_MODE=true
+VITE_DEBUG_MODE=false
 
-VITE_EFC_API_URL=https://api.efc-aduanasoft.com/api/v1
-VITE_EFC_MICROSERVICE_URL=https://api.efc-aduanasoft.com/microservice/api/v1
+VITE_EFC_API_URL=http://192.168.1.195:8000/api/v1
+VITE_EFC_MICROSERVICE_URL=http://192.168.1.195:8001/api/v1
diff --git a/src/components/NotificationBell.jsx b/src/components/NotificationBell.jsx
index 4d4976c..24d07f3 100644
--- a/src/components/NotificationBell.jsx
+++ b/src/components/NotificationBell.jsx
@@ -57,25 +57,33 @@ export default function NotificationBell() {
     switch (tipo) {
       case 'success':
         return (
-          <div className="flex-shrink-0 w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
-            <svg className="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          <div className="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-green-400 to-emerald-500 rounded-xl flex items-center justify-center shadow-lg">
+            <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
           </div>
         );
       case 'warning':
         return (
-          <div className="flex-shrink-0 w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center">
-            <svg className="w-4 h-4 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
+          <div className="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-xl flex items-center justify-center shadow-lg">
+            <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+        );
+      case 'error':
+        return (
+          <div className="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-red-400 to-red-600 rounded-xl flex items-center justify-center shadow-lg">
+            <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M6 18L18 6M6 6l12 12" />
             </svg>
           </div>
         );
       default:
         return (
-          <div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
-            <svg className="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          <div className="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
+            <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
           </div>
         );
@@ -97,123 +105,196 @@ export default function NotificationBell() {
 
   return (
     <>
-      {/* Campanita flotante */}
+      {/* Campanita flotante con diseño mejorado */}
       <div className="fixed bottom-6 right-6 z-50">
-        <button
-          onClick={() => setShowPanel(!showPanel)}
-          className="relative bg-indigo-600 hover:bg-indigo-700 text-white p-3 rounded-full shadow-lg transition-all duration-200 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-        >
-          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-5-5v5zM4 4h5l-5 5v-5z" />
-          </svg>
-          
-          {/* Contador de notificaciones no leídas */}
+        <div className="relative">
+          {/* Efecto de pulso para notificaciones nuevas */}
           {unreadCount > 0 && (
-            <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">
-              {unreadCount > 9 ? '9+' : unreadCount}
-            </span>
+            <div className="absolute inset-0 bg-blue-400 rounded-full animate-ping opacity-75"></div>
           )}
-        </button>
-      </div>
-
-      {/* Panel de notificaciones */}
-      {showPanel && (
-        <div className="fixed bottom-20 right-6 z-50 w-80 bg-white rounded-lg shadow-xl border border-gray-200">
-          {/* Header del panel */}
-          <div className="p-4 border-b border-gray-200 flex items-center justify-between">
-            <h3 className="text-lg font-semibold text-gray-900">Notificaciones</h3>
-            <div className="flex items-center space-x-2">
-              {unreadCount > 0 && (
-                <button
-                  onClick={markAllAsRead}
-                  className="text-sm text-indigo-600 hover:text-indigo-800 font-medium"
-                >
-                  Marcar todas como leídas
-                </button>
-              )}
-              <button
-                onClick={() => setShowPanel(false)}
-                className="text-gray-400 hover:text-gray-600"
-              >
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            </div>
-          </div>
-
-          {/* Lista de notificaciones */}
-          <div className="max-h-96 overflow-y-auto">
-            {loading ? (
-              <div className="p-6 text-center text-blue-500">Cargando notificaciones...</div>
-            ) : error ? (
-              <div className="p-6 text-center text-red-500">{error}</div>
-            ) : notifications.length === 0 ? (
-              <div className="p-6 text-center">
-                <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-5 5v-5zM13 3l-4 9h6l-4 9" />
-                </svg>
-                <h3 className="mt-2 text-sm font-medium text-gray-900">No hay notificaciones</h3>
-                <p className="mt-1 text-sm text-gray-500">Cuando tengas nuevas notificaciones aparecerán aquí.</p>
-              </div>
-            ) : (
-              <div className="divide-y divide-gray-200">
-                {notifications.map((notification) => (
-                  <div
-                    key={notification.id}
-                    className={`p-4 hover:bg-gray-50 cursor-pointer transition-colors ${
-                      !notification.visto ? 'bg-blue-50' : ''
-                    }`}
-                    onClick={() => markAsRead(notification.id)}
-                  >
-                    <div className="flex space-x-3">
-                      {getNotificationIcon(notification.tipo?.tipo)}
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center justify-between">
-                          <p className={`text-sm font-medium ${
-                            !notification.visto ? 'text-gray-900' : 'text-gray-700'
-                          }`}>
-                            {notification.tipo?.descripcion || notification.tipo?.tipo || 'Notificación'}
-                          </p>
-                          <span className="text-xs text-gray-500">
-                            {formatTimestamp(notification.fecha_envio || notification.created_at)}
-                          </span>
-                        </div>
-                        <p className="text-sm text-gray-600 mt-1">{notification.mensaje}</p>
-                        {!notification.visto && (
-                          <div className="mt-2">
-                            <span className="inline-block w-2 h-2 bg-blue-600 rounded-full"></span>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                ))}
+          
+          <button
+            onClick={() => setShowPanel(!showPanel)}
+            className="relative bg-gradient-to-br from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 text-white p-4 rounded-full shadow-2xl transition-all duration-300 hover:scale-110 hover:shadow-blue-500/25 focus:outline-none focus:ring-4 focus:ring-blue-500/50 group"
+          >
+            {/* Icono de campanita mejorado */}
+            <svg 
+              className={`w-6 h-6 transition-transform duration-300 ${unreadCount > 0 ? 'animate-bounce' : ''} group-hover:scale-110`} 
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-5 5v-5zM4 4h5l-5 5v-5z" />
+            </svg>
+            
+            {/* Contador de notificaciones mejorado */}
+            {unreadCount > 0 && (
+              <div className="absolute -top-2 -right-2">
+                <span className="relative flex h-6 w-6">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+                  <span className="relative inline-flex rounded-full h-6 w-6 bg-gradient-to-br from-red-500 to-red-600 text-white text-xs font-bold items-center justify-center shadow-lg">
+                    {unreadCount > 9 ? '9+' : unreadCount}
+                  </span>
+                </span>
               </div>
             )}
-          </div>
+            
+            {/* Indicador de estado activo */}
+            {showPanel && (
+              <div className="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full border-2 border-white animate-pulse"></div>
+            )}
+          </button>
+        </div>
+      </div>
 
-          {/* Footer del panel */}
-          {notifications.length > 0 && (
-            <div className="p-3 border-t border-gray-200 bg-gray-50 rounded-b-lg">
-              <button
-                className="w-full text-center text-sm text-indigo-600 hover:text-indigo-800 font-medium"
-                onClick={() => {
-                  setShowPanel(false);
-                  navigate('/notificaciones');
-                }}
-              >
-                Ver todas las notificaciones
-              </button>
+      {/* Panel de notificaciones con diseño mejorado */}
+      {showPanel && (
+        <div className="fixed bottom-24 right-6 z-50 w-96 max-w-sm">
+          {/* Animación de entrada */}
+          <div className="transform transition-all duration-300 ease-out scale-100 opacity-100 translate-y-0">
+            <div className="bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-gray-200/50 overflow-hidden">
+              {/* Header del panel mejorado */}
+              <div className="bg-gradient-to-r from-blue-500 to-blue-700 p-5 text-white">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center space-x-3">
+                    <div className="p-2 bg-white/20 rounded-xl">
+                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-5 5v-5zM4 4h5l-5 5v-5z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <h3 className="text-lg font-bold">Notificaciones</h3>
+                      <p className="text-sm text-blue-100">
+                        {unreadCount > 0 ? `${unreadCount} nuevas` : 'Todas leídas'}
+                      </p>
+                    </div>
+                  </div>
+                  
+                  <div className="flex items-center space-x-2">
+                    {unreadCount > 0 && (
+                      <button
+                        onClick={markAllAsRead}
+                        className="px-3 py-1.5 bg-white/20 hover:bg-white/30 rounded-lg text-sm font-medium transition-colors duration-200 flex items-center space-x-1"
+                      >
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                        </svg>
+                        <span>Marcar todas</span>
+                      </button>
+                    )}
+                    <button
+                      onClick={() => setShowPanel(false)}
+                      className="p-2 hover:bg-white/20 rounded-lg transition-colors duration-200"
+                    >
+                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              {/* Lista de notificaciones con diseño mejorado */}
+              <div className="max-h-96 overflow-y-auto bg-gray-50/30">
+                {loading ? (
+                  <div className="p-8 text-center">
+                    <div className="inline-flex items-center space-x-2 text-blue-600">
+                      <svg className="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                      </svg>
+                      <span className="font-medium">Cargando notificaciones...</span>
+                    </div>
+                  </div>
+                ) : error ? (
+                  <div className="p-8 text-center">
+                    <div className="inline-flex items-center space-x-2 text-red-500">
+                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
+                      </svg>
+                      <span className="font-medium">{error}</span>
+                    </div>
+                  </div>
+                ) : notifications.length === 0 ? (
+                  <div className="p-8 text-center">
+                    <div className="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
+                      <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-5 5v-5zM13 3l-4 9h6l-4 9" />
+                      </svg>
+                    </div>
+                    <h3 className="text-sm font-semibold text-gray-900 mb-1">No hay notificaciones</h3>
+                    <p className="text-sm text-gray-500">Cuando tengas nuevas notificaciones aparecerán aquí.</p>
+                  </div>
+                ) : (
+                  <div className="divide-y divide-gray-100">
+                    {notifications.map((notification, index) => (
+                      <div
+                        key={notification.id}
+                        className={`p-4 hover:bg-white/60 cursor-pointer transition-all duration-200 group ${
+                          !notification.visto ? 'bg-blue-50/50 border-l-4 border-blue-500' : 'hover:bg-gray-50'
+                        }`}
+                        onClick={() => markAsRead(notification.id)}
+                        style={{ animationDelay: `${index * 50}ms` }}
+                      >
+                        <div className="flex space-x-3">
+                          {getNotificationIcon(notification.tipo?.tipo)}
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-start justify-between">
+                              <p className={`text-sm font-semibold leading-5 ${
+                                !notification.visto ? 'text-gray-900' : 'text-gray-700'
+                              }`}>
+                                {notification.tipo?.descripcion || notification.tipo?.tipo || 'Notificación'}
+                              </p>
+                              <div className="flex items-center space-x-2">
+                                <span className="text-xs text-gray-500 font-medium">
+                                  {formatTimestamp(notification.fecha_envio || notification.created_at)}
+                                </span>
+                                {!notification.visto && (
+                                  <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
+                                )}
+                              </div>
+                            </div>
+                            <p className="text-sm text-gray-600 mt-1 leading-5">{notification.mensaje}</p>
+                            {!notification.visto && (
+                              <div className="mt-2 flex items-center space-x-1 text-blue-600">
+                                <div className="w-1.5 h-1.5 bg-blue-500 rounded-full"></div>
+                                <span className="text-xs font-medium">Nueva</span>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* Footer del panel mejorado */}
+              {notifications.length > 0 && (
+                <div className="bg-gradient-to-r from-gray-50 to-gray-100 border-t border-gray-200/50">
+                  <button
+                    className="w-full p-4 text-center text-sm font-semibold text-blue-600 hover:text-blue-800 hover:bg-white/50 transition-all duration-200 flex items-center justify-center space-x-2"
+                    onClick={() => {
+                      setShowPanel(false);
+                      navigate('/notificaciones');
+                    }}
+                  >
+                    <span>Ver todas las notificaciones</span>
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
+                    </svg>
+                  </button>
+                </div>
+              )}
             </div>
-          )}
+          </div>
         </div>
       )}
 
-      {/* Overlay para cerrar el panel al hacer clic fuera */}
+      {/* Overlay para cerrar el panel al hacer clic fuera con animación */}
       {showPanel && (
         <div
-          className="fixed inset-0 z-40"
+          className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm transition-all duration-300"
           onClick={() => setShowPanel(false)}
         />
       )}