Mejorar navbar: cambiar menú de sidebar a horizontal con dropdowns y ajustar tarjeta de BD

assets/css/style.css

@@ -83,21 +83,76 @@ body {
 }
 
 #sidebar-wrapper {
-    min-height: 100vh;
-    width: 250px;
-    margin-left: -250px;
-    transition: margin .25s ease-out;
-    position: fixed; /* Added for mobile responsiveness */
-    z-index: 1000; /* Added for mobile responsiveness */
-}
-
-#wrapper.toggled #sidebar-wrapper {
-    margin-left: 0;
+    display: none;
 }
 
 #page-content-wrapper {
     min-width: 100vw;
-    flex-grow: 1; /* Added for mobile responsiveness */
+    flex-grow: 1;
+}
+
+/* Navbar styles */
+.navbar-brand {
+    font-weight: bold;
+    font-size: 1.2rem;
+}
+
+.navbar-dark .navbar-nav .nav-link {
+    color: rgba(255, 255, 255, 0.8);
+    transition: color 0.2s;
+}
+
+.navbar-dark .navbar-nav .nav-link:hover {
+    color: white;
+}
+
+.navbar-dark .navbar-nav .nav-link.active {
+    color: white;
+}
+
+.dropdown-menu {
+    animation: slideDown 0.2s ease;
+}
+
+.dropdown-menu.show {
+    display: block !important;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.dropdown-item {
+    transition: background-color 0.2s;
+}
+
+.dropdown-item:hover {
+    background-color: #f8f9fa;
+}
+
+.dropdown-item.active, .dropdown-item:active {
+    background-color: #0d6efd;
+    color: white;
+}
+
+/* Responsive navbar */
+@media (max-width: 991px) {
+    .navbar-collapse {
+        margin-top: 1rem;
+    }
+    
+    .d-flex.align-items-center.gap-2 {
+        flex-direction: column;
+        align-items: flex-start !important;
+        margin-top: 1rem;
+    }
 }
 
 #wrapper.toggled #page-content-wrapper {