style: añadir media queries para responsividad y corregir errores de sintaxis

public/assets/css/style.css

@@ -262,6 +262,7 @@ body {
 
 .drag-item:active {
     cursor: grabbing;
+}
 
 .drag-item:hover {
     border-color: var(--primary);
@@ -321,3 +322,74 @@ body {
 .justify-end {
     justify-content: flex-end;
 }
+
+/* Media Queries */
+@media (max-width: 768px) {
+    .navbar {
+        flex-direction: column;
+        gap: 1rem;
+        padding: 1rem;
+    }
+
+    .nav-menu {
+        flex-direction: column;
+        width: 100%;
+        gap: 0.75rem;
+        align-items: center;
+    }
+
+    .nav-menu div {
+        border-left: none !important;
+        border-top: 1px solid var(--border);
+        padding-top: 1rem;
+        padding-left: 0 !important;
+        margin-left: 0 !important;
+        width: 100%;
+        justify-content: center;
+    }
+
+    .container {
+        margin: 1rem auto;
+    }
+
+    .card-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+
+    .card-header .btn {
+        width: 100%;
+    }
+
+    .auth-card {
+        margin: 1rem;
+    }
+
+    .table th,
+    .table td {
+        padding: 0.75rem 0.5rem;
+        font-size: 0.875rem;
+    }
+
+    /* Modal responsiveness */
+    .modal-content {
+        margin: 1rem;
+        padding: 1.5rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .card {
+        padding: 1rem;
+    }
+
+    .auth-title {
+        font-size: 1.25rem;
+    }
+
+    .btn {
+        padding: 0.6rem 1rem;
+        font-size: 0.9rem;
+    }
+}