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

This commit is contained in:
2026-02-02 19:17:50 -06:00
parent b73cd6a32f
commit c7ae363113

View File

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