/* Sistema de Grid y Layout */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0.5rem;
}

.grid {
    display: grid;
    column-gap: 0.5rem;
    row-gap: 0.35rem;
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 768px) {
    .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6 {
        grid-template-columns: 1fr;
    }
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }

.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.gap-xs { gap: 0.125rem; }
.gap-sm { gap: 0.25rem; }
.gap-md { column-gap: 0.5rem; row-gap: 0.35rem; }
.gap-lg { column-gap: 0.75rem; row-gap: 0.5rem; }

/* Alias de alineación (usados en templates JS) */
.align-start { align-items: flex-start; }
.align-end   { align-items: flex-end; }
.align-center{ align-items: center; }
.flex-1 { flex: 1 1 auto; }

/* Clases responsivas Tailwind-compat (usadas en diets.js y otros) */
.grid.grid-cols-1        { grid-template-columns: repeat(1, 1fr); }
.\:grid-cols-2           { grid-template-columns: repeat(2, 1fr); }
.md\:grid-cols-2         { grid-template-columns: repeat(2, 1fr); }
.lg\:grid-cols-3         { grid-template-columns: repeat(3, 1fr); }
.md\:grid-cols-3         { grid-template-columns: repeat(3, 1fr); }
.grid.md\:grid-cols-2    { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 768px) {
    .md\:grid-cols-2,
    .md\:grid-cols-3,
    .lg\:grid-cols-3,
    .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
}