/**
 * GRID SYSTEM - 12 Columnas
 * Sistema profesional de grid para layouts consistentes
 * Basado en mejores prácticas de diseño senior
 */

:root {
  /* Grid Variables */
  --grid-columns: 12;
  --grid-gap: 1.5rem; /* 24px */
  --grid-gap-sm: 1rem; /* 16px */
  --grid-gap-lg: 2rem; /* 32px */
  
  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1400px;
  
  /* Container Padding */
  --container-padding: 1.5rem; /* 24px */
  --container-padding-sm: 1rem; /* 16px */
  --container-padding-lg: 2rem; /* 32px */
}

/* Container Base */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Container Sizes */
.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
.container-2xl { max-width: var(--container-2xl); }

/* Row */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--grid-gap) / -2);
  margin-right: calc(var(--grid-gap) / -2);
}

.row.gap-sm {
  margin-left: calc(var(--grid-gap-sm) / -2);
  margin-right: calc(var(--grid-gap-sm) / -2);
}

.row.gap-lg {
  margin-left: calc(var(--grid-gap-lg) / -2);
  margin-right: calc(var(--grid-gap-lg) / -2);
}

/* Column Base */
.col {
  flex: 1 0 0%;
  padding-left: calc(var(--grid-gap) / 2);
  padding-right: calc(var(--grid-gap) / 2);
}

.row.gap-sm > .col {
  padding-left: calc(var(--grid-gap-sm) / 2);
  padding-right: calc(var(--grid-gap-sm) / 2);
}

.row.gap-lg > .col {
  padding-left: calc(var(--grid-gap-lg) / -2);
  padding-right: calc(var(--grid-gap-lg) / 2);
}

/* Column Sizes (1-12) */
.col-1 { flex: 0 0 auto; width: calc(100% / 12 * 1); }
.col-2 { flex: 0 0 auto; width: calc(100% / 12 * 2); }
.col-3 { flex: 0 0 auto; width: calc(100% / 12 * 3); }
.col-4 { flex: 0 0 auto; width: calc(100% / 12 * 4); }
.col-5 { flex: 0 0 auto; width: calc(100% / 12 * 5); }
.col-6 { flex: 0 0 auto; width: calc(100% / 12 * 6); }
.col-7 { flex: 0 0 auto; width: calc(100% / 12 * 7); }
.col-8 { flex: 0 0 auto; width: calc(100% / 12 * 8); }
.col-9 { flex: 0 0 auto; width: calc(100% / 12 * 9); }
.col-10 { flex: 0 0 auto; width: calc(100% / 12 * 10); }
.col-11 { flex: 0 0 auto; width: calc(100% / 12 * 11); }
.col-12 { flex: 0 0 auto; width: 100%; }

/* Offset */
.col-offset-1 { margin-left: calc(100% / 12 * 1); }
.col-offset-2 { margin-left: calc(100% / 12 * 2); }
.col-offset-3 { margin-left: calc(100% / 12 * 3); }
.col-offset-4 { margin-left: calc(100% / 12 * 4); }
.col-offset-5 { margin-left: calc(100% / 12 * 5); }
.col-offset-6 { margin-left: calc(100% / 12 * 6); }

/* Responsive Breakpoints */
@media (min-width: 640px) {
  .col-sm-1 { flex: 0 0 auto; width: calc(100% / 12 * 1); }
  .col-sm-2 { flex: 0 0 auto; width: calc(100% / 12 * 2); }
  .col-sm-3 { flex: 0 0 auto; width: calc(100% / 12 * 3); }
  .col-sm-4 { flex: 0 0 auto; width: calc(100% / 12 * 4); }
  .col-sm-5 { flex: 0 0 auto; width: calc(100% / 12 * 5); }
  .col-sm-6 { flex: 0 0 auto; width: calc(100% / 12 * 6); }
  .col-sm-7 { flex: 0 0 auto; width: calc(100% / 12 * 7); }
  .col-sm-8 { flex: 0 0 auto; width: calc(100% / 12 * 8); }
  .col-sm-9 { flex: 0 0 auto; width: calc(100% / 12 * 9); }
  .col-sm-10 { flex: 0 0 auto; width: calc(100% / 12 * 10); }
  .col-sm-11 { flex: 0 0 auto; width: calc(100% / 12 * 11); }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 768px) {
  .col-md-1 { flex: 0 0 auto; width: calc(100% / 12 * 1); }
  .col-md-2 { flex: 0 0 auto; width: calc(100% / 12 * 2); }
  .col-md-3 { flex: 0 0 auto; width: calc(100% / 12 * 3); }
  .col-md-4 { flex: 0 0 auto; width: calc(100% / 12 * 4); }
  .col-md-5 { flex: 0 0 auto; width: calc(100% / 12 * 5); }
  .col-md-6 { flex: 0 0 auto; width: calc(100% / 12 * 6); }
  .col-md-7 { flex: 0 0 auto; width: calc(100% / 12 * 7); }
  .col-md-8 { flex: 0 0 auto; width: calc(100% / 12 * 8); }
  .col-md-9 { flex: 0 0 auto; width: calc(100% / 12 * 9); }
  .col-md-10 { flex: 0 0 auto; width: calc(100% / 12 * 10); }
  .col-md-11 { flex: 0 0 auto; width: calc(100% / 12 * 11); }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1024px) {
  .col-lg-1 { flex: 0 0 auto; width: calc(100% / 12 * 1); }
  .col-lg-2 { flex: 0 0 auto; width: calc(100% / 12 * 2); }
  .col-lg-3 { flex: 0 0 auto; width: calc(100% / 12 * 3); }
  .col-lg-4 { flex: 0 0 auto; width: calc(100% / 12 * 4); }
  .col-lg-5 { flex: 0 0 auto; width: calc(100% / 12 * 5); }
  .col-lg-6 { flex: 0 0 auto; width: calc(100% / 12 * 6); }
  .col-lg-7 { flex: 0 0 auto; width: calc(100% / 12 * 7); }
  .col-lg-8 { flex: 0 0 auto; width: calc(100% / 12 * 8); }
  .col-lg-9 { flex: 0 0 auto; width: calc(100% / 12 * 9); }
  .col-lg-10 { flex: 0 0 auto; width: calc(100% / 12 * 10); }
  .col-lg-11 { flex: 0 0 auto; width: calc(100% / 12 * 11); }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1280px) {
  .col-xl-1 { flex: 0 0 auto; width: calc(100% / 12 * 1); }
  .col-xl-2 { flex: 0 0 auto; width: calc(100% / 12 * 2); }
  .col-xl-3 { flex: 0 0 auto; width: calc(100% / 12 * 3); }
  .col-xl-4 { flex: 0 0 auto; width: calc(100% / 12 * 4); }
  .col-xl-5 { flex: 0 0 auto; width: calc(100% / 12 * 5); }
  .col-xl-6 { flex: 0 0 auto; width: calc(100% / 12 * 6); }
  .col-xl-7 { flex: 0 0 auto; width: calc(100% / 12 * 7); }
  .col-xl-8 { flex: 0 0 auto; width: calc(100% / 12 * 8); }
  .col-xl-9 { flex: 0 0 auto; width: calc(100% / 12 * 9); }
  .col-xl-10 { flex: 0 0 auto; width: calc(100% / 12 * 10); }
  .col-xl-11 { flex: 0 0 auto; width: calc(100% / 12 * 11); }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* Utility Classes */
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-none { display: none; }

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

.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }