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

public/assets/css/style.css

@@ -262,62 +262,134 @@ body {
 
 .drag-item:active {
     cursor: grabbing;
+}
 
-    .drag-item:hover {
+.drag-item:hover {
-        border-color: var(--primary);
+    border-color: var(--primary);
-    }
+}
 
-    .drag-item.dragging {
+.drag-item.dragging {
-        opacity: 0.5;
+    opacity: 0.5;
-        background: #f1f5f9;
+    background: #f1f5f9;
-    }
+}
 
-    .drag-handle {
+.drag-handle {
-        margin-right: 1rem;
+    margin-right: 1rem;
-        color: var(--text-light);
+    color: var(--text-light);
-    }
+}
 
-    /* Alerts */
+/* Alerts */
-    .alert {
+.alert {
+    padding: 1rem;
+    border-radius: 0.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.alert-success {
+    background: #dcfce7;
+    color: #166534;
+    border: 1px solid #bbf7d0;
+}
+
+.alert-error {
+    background: #fee2e2;
+    color: #991b1b;
+    border: 1px solid #fecaca;
+}
+
+/* Utilities */
+.text-center {
+    text-align: center;
+}
+
+.mt-2 {
+    margin-top: 0.5rem;
+}
+
+.mt-4 {
+    margin-top: 1rem;
+}
+
+.mb-4 {
+    margin-bottom: 1rem;
+}
+
+.flex {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.justify-end {
+    justify-content: flex-end;
+}
+
+/* Media Queries */
+@media (max-width: 768px) {
+    .navbar {
+        flex-direction: column;
+        gap: 1rem;
         padding: 1rem;
-        border-radius: 0.5rem;
-        margin-bottom: 1.5rem;
     }
 
-    .alert-success {
+    .nav-menu {
-        background: #dcfce7;
+        flex-direction: column;
-        color: #166534;
+        width: 100%;
-        border: 1px solid #bbf7d0;
+        gap: 0.75rem;
+        align-items: center;
     }
 
-    .alert-error {
+    .nav-menu div {
-        background: #fee2e2;
+        border-left: none !important;
-        color: #991b1b;
+        border-top: 1px solid var(--border);
-        border: 1px solid #fecaca;
+        padding-top: 1rem;
+        padding-left: 0 !important;
+        margin-left: 0 !important;
+        width: 100%;
+        justify-content: center;
     }
 
-    /* Utilities */
+    .container {
-    .text-center {
+        margin: 1rem auto;
-        text-align: center;
     }
 
-    .mt-2 {
+    .card-header {
-        margin-top: 0.5rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
     }
 
-    .mt-4 {
+    .card-header .btn {
-        margin-top: 1rem;
+        width: 100%;
     }
 
-    .mb-4 {
+    .auth-card {
-        margin-bottom: 1rem;
+        margin: 1rem;
     }
 
-    .flex {
+    .table th,
-        display: flex;
+    .table td {
-        gap: 0.5rem;
+        padding: 0.75rem 0.5rem;
+        font-size: 0.875rem;
     }
 
-    .justify-end {
+    /* Modal responsiveness */
-        justify-content: flex-end;
+    .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;
+    }
+}