/* =========================
   SISTEMA DE GRID PERSONALIZADO
   Inspirado en TailwindCSS
   ========================= */

/* ====== GRID BASE ====== */
.grid {
  display: grid;
}

/* ====== COLUMNAS (1–12) ====== */
[class^="grid-cols-"] {
  display: grid;
}

:root {
  --col-min: 0;
  --col-max: 1fr;
}

.grid-cols-1 { grid-template-columns: repeat(1, minmax(var(--col-min), var(--col-max))); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(var(--col-min), var(--col-max))); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(var(--col-min), var(--col-max))); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(var(--col-min), var(--col-max))); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(var(--col-min), var(--col-max))); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(var(--col-min), var(--col-max))); }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(var(--col-min), var(--col-max))); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(var(--col-min), var(--col-max))); }
.grid-cols-9 { grid-template-columns: repeat(9, minmax(var(--col-min), var(--col-max))); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(var(--col-min), var(--col-max))); }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(var(--col-min), var(--col-max))); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(var(--col-min), var(--col-max))); }

.grid-cols-none { grid-template-columns: none; }
.grid-cols-custom { grid-template-columns: 200px 1fr 300px; }

/* ====== FILAS ====== */
.grid-rows-1 { grid-template-rows: repeat(1, minmax(var(--col-min), var(--col-max))); }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(var(--col-min), var(--col-max))); }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(var(--col-min), var(--col-max))); }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(var(--col-min), var(--col-max))); }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(var(--col-min), var(--col-max))); }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(var(--col-min), var(--col-max))); }
.grid-rows-none { grid-template-rows: none; }
.grid-rows-custom { grid-template-rows: auto 1fr auto; }

/* ====== GAP ====== */
:root {
  --gap-1: 0.25rem;
  --gap-2: 0.5rem;
  --gap-3: 0.75rem;
  --gap-4: 1rem;
  --gap-5: 1.25rem;
  --gap-6: 1.5rem;
  --gap-8: 2rem;
  --gap-10: 2.5rem;
}

.gap-0 { gap: 0; }
.gap-1 { gap: var(--gap-1); }
.gap-2 { gap: var(--gap-2); }
.gap-3 { gap: var(--gap-3); }
.gap-4 { gap: var(--gap-4); }
.gap-5 { gap: var(--gap-5); }
.gap-6 { gap: var(--gap-6); }
.gap-8 { gap: var(--gap-8); }
.gap-10 { gap: var(--gap-10); }

/* Columnas / Filas separadas */
.gap-x-1 { column-gap: var(--gap-1); }
.gap-x-2 { column-gap: var(--gap-2); }
.gap-y-1 { row-gap: var(--gap-1); }
.gap-y-2 { row-gap: var(--gap-2); }

/* ====== RESPONSIVE GAP ====== */
.gap-movil { gap: 1rem; }
@media (min-width: 768px) {
  .gap-movil { gap: 0 !important; }
}

.gap-pc { gap: 0; }
@media (min-width: 1024px) {
  .gap-pc { gap: 1.5rem !important; }
}

/* ====== DISPLAY ADAPTATIVO ====== */
.gap-display_pc { display: block; }
@media (min-width: 1024px) {
  .gap-display_pc { display: flex !important; gap: 1.5rem; }
}

.gap-display_movil { display: flex; gap: 1rem; }
@media (min-width: 1024px) {
  .gap-display_movil { display: block !important; gap: 0 !important; }
}

/* ====== VISIBILIDAD ====== */
.show-mobile { display: block; }
@media (min-width: 768px) {
  .show-mobile { display: none !important; }
}

.show-pc { display: none; }
@media (min-width: 1024px) {
  .show-pc { display: block !important; }
}

/* ====== GRID SPAN ====== */
.col-auto { grid-column: auto; }
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-full { grid-column: 1 / -1; }

.row-auto { grid-row: auto; }
.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }
.row-span-full { grid-row: 1 / -1; }

/* ====== JUSTIFICACIÓN / ALINEACIÓN ====== */
.justify-items-start { justify-items: start; }
.justify-items-end { justify-items: end; }
.justify-items-center { justify-items: center; }
.justify-items-stretch { justify-items: stretch; }

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

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

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

/* ====== RESPONSIVE GRILLAS ====== */
@media (min-width: 640px) {
  [class^="sm:grid-cols-"] { display: grid !important; }
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

@media (min-width: 768px) {
  [class^="md:grid-cols-"] { display: grid !important; }
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

@media (min-width: 1024px) {
  [class^="lg:grid-cols-"] { display: grid !important; }
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

@media (min-width: 1280px) {
  [class^="xl:grid-cols-"] { display: grid !important; }
  .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}