/* ==== Reset básico ==== */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background-color: #f3f4f6; /* bg-gray-100 */
  color: #111827; /* text-gray-900 */
}

/* ==== Tipografía ==== */
.font-sans {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.text-gray-900 {
  color: #111827;
}
.text-white {
  color: #ffffff;
}
.text-red-700 {
  color: #b91c1c;
}
.text-blue-700 {
  color: #1d4ed8;
}

.text-xs {
  font-size: 0.85rem;
}
.text-sm {
  font-size: 0.95rem;
}
.text-base {
  font-size: 1.05rem;
}
.text-lg {
  font-size: 1.2rem;
}
.text-xl {
  font-size: 1.35rem;
}
.text-2xl {
  font-size: 1.6rem;
}

.font-bold {
  font-weight: 700;
}
.font-semibold {
  font-weight: 600;
}

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

/* ==== Colores de fondo ==== */
.bg-gray-100 {
  background-color: #f3f4f6;
}
.bg-white {
  background-color: #ffffff;
}
.bg-green-700 {
  background-color: #047857;
}
.bg-green-800 {
  background-color: #065f46;
}
.bg-blue-800 {
  background-color: #1e40af;
}

/* ==== Layout ancho, márgenes, padding ==== */
.max-w-7xl {
  max-width: 80rem; /* ~1280px */
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mt-8 {
  margin-top: 2rem;
}

/* ==== Flexbox ==== */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-1 {
  flex: 1 1 0%;
}

.items-center {
  align-items: center;
}

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

.gap-4 {
  column-gap: 1rem;
}

.gap-1 {
  row-gap: 0.25rem;
  column-gap: 0.25rem;
}

/* ==== Grid ==== */
.grid {
  display: grid;
}

/* Por defecto 1 columna (móvil) */
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* 8 columnas para escritorio (md:grid-cols-8) */
.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

/* Gaps en móvil */
.gap-2 {
  row-gap: 0.5rem;
  column-gap: 0.5rem;
}

/* ==== Espaciado vertical entre hijos ==== */
.space-y-1 > * + * {
  margin-top: 0.25rem;
}

.space-y-2 > * + * {
  margin-top: 0.5rem;
}

.space-y-6 > * + * {
  margin-top: 1.5rem;
}

/* ==== Bordes y divisores ==== */
.shadow {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.06);
}

.rounded-lg {
  border-radius: 0.5rem;
}

.border-gray-300 {
  border-color: #d1d5db;
}

.border-t {
  border-top-width: 1px;
  border-top-style: solid;
}

/* ==== Overflow ==== */
.overflow-x-auto {
  overflow-x: auto;
}

/* ==== Listas ==== */
.list-disc {
  list-style-type: disc;
}

.pl-5 {
  padding-left: 1.25rem;
}

/* ==== Enlaces ==== */
a {
  color: inherit;
  text-decoration: none;
}

a.underline {
  text-decoration: underline;
}

a.hover\:text-blue-900:hover {
  color: #1e3a8a;
}

/* ==== Responsive (md: >=768px) ==== */
@media (min-width: 768px) {
  /* Grid: a partir de md usamos 8 columnas para las filas que lo pidan */
  .md\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  /* Texto */

  .md\:text-sm {
    font-size: 0.95rem;
  }
  .md\:text-2xl {
    font-size: 1.6rem;
  }

  /* Eliminamos gaps entre «celdas» en desktop para parecer tabla */
  .md\:gap-0 {
    row-gap: 0;
    column-gap: 0;
  }
}