/**
 * Grid System - 12 Columnas
 * Sin dependencias externas
 */

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

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: var(--container-2xl);
  }
}

/* Row */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

/* Columns - Mobile first */
.col {
  grid-column: span 12;
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Offset */
.col-offset-1 { grid-column: 2 / span 11; }
.col-offset-2 { grid-column: 3 / span 10; }
.col-offset-3 { grid-column: 4 / span 9; }
.col-offset-4 { grid-column: 5 / span 8; }
.col-offset-5 { grid-column: 6 / span 7; }
.col-offset-6 { grid-column: 7 / span 6; }

/* Tablet */
@media (min-width: 768px) {
  .col-md { grid-column: span 12; }
  .col-md-1 { grid-column: span 1; }
  .col-md-2 { grid-column: span 2; }
  .col-md-3 { grid-column: span 3; }
  .col-md-4 { grid-column: span 4; }
  .col-md-5 { grid-column: span 5; }
  .col-md-6 { grid-column: span 6; }
  .col-md-7 { grid-column: span 7; }
  .col-md-8 { grid-column: span 8; }
  .col-md-9 { grid-column: span 9; }
  .col-md-10 { grid-column: span 10; }
  .col-md-11 { grid-column: span 11; }
  .col-md-12 { grid-column: span 12; }

  .col-md-offset-1 { grid-column: 2 / span 11; }
  .col-md-offset-2 { grid-column: 3 / span 10; }
  .col-md-offset-3 { grid-column: 4 / span 9; }
  .col-md-offset-4 { grid-column: 5 / span 8; }
  .col-md-offset-5 { grid-column: 6 / span 7; }
  .col-md-offset-6 { grid-column: 7 / span 6; }
}

/* Desktop */
@media (min-width: 1024px) {
  .col-lg { grid-column: span 12; }
  .col-lg-1 { grid-column: span 1; }
  .col-lg-2 { grid-column: span 2; }
  .col-lg-3 { grid-column: span 3; }
  .col-lg-4 { grid-column: span 4; }
  .col-lg-5 { grid-column: span 5; }
  .col-lg-6 { grid-column: span 6; }
  .col-lg-7 { grid-column: span 7; }
  .col-lg-8 { grid-column: span 8; }
  .col-lg-9 { grid-column: span 9; }
  .col-lg-10 { grid-column: span 10; }
  .col-lg-11 { grid-column: span 11; }
  .col-lg-12 { grid-column: span 12; }

  .col-lg-offset-1 { grid-column: 2 / span 11; }
  .col-lg-offset-2 { grid-column: 3 / span 10; }
  .col-lg-offset-3 { grid-column: 4 / span 9; }
  .col-lg-offset-4 { grid-column: 5 / span 8; }
  .col-lg-offset-5 { grid-column: 6 / span 7; }
  .col-lg-offset-6 { grid-column: 7 / span 6; }
}

/* Large Desktop */
@media (min-width: 1280px) {
  .col-xl { grid-column: span 12; }
  .col-xl-1 { grid-column: span 1; }
  .col-xl-2 { grid-column: span 2; }
  .col-xl-3 { grid-column: span 3; }
  .col-xl-4 { grid-column: span 4; }
  .col-xl-5 { grid-column: span 5; }
  .col-xl-6 { grid-column: span 6; }
  .col-xl-7 { grid-column: span 7; }
  .col-xl-8 { grid-column: span 8; }
  .col-xl-9 { grid-column: span 9; }
  .col-xl-10 { grid-column: span 10; }
  .col-xl-11 { grid-column: span 11; }
  .col-xl-12 { grid-column: span 12; }

  .col-xl-offset-1 { grid-column: 2 / span 11; }
  .col-xl-offset-2 { grid-column: 3 / span 10; }
  .col-xl-offset-3 { grid-column: 4 / span 9; }
  .col-xl-offset-4 { grid-column: 5 / span 8; }
  .col-xl-offset-5 { grid-column: 6 / span 7; }
  .col-xl-offset-6 { grid-column: 7 / span 6; }
}

/* Utilidades comunes */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }