/* ============================================================
   utilidades.css — Clases de utilidad de una sola propiedad
   Inspirado en Tailwind pero con nombres en español.
   ============================================================ */

/* ── Display ─────────────────────────────────────────────── */
.bloque         { display: block; }
.en-linea       { display: inline; }
.en-linea-bloque { display: inline-block; }
.flex           { display: flex; }
.flex-col       { display: flex; flex-direction: column; }
.grilla         { display: grid; }
.oculto         { display: none; }

/* ── Flexbox ─────────────────────────────────────────────── */
.items-centro        { align-items: center; }
.items-inicio        { align-items: flex-start; }
.items-fin           { align-items: flex-end; }
.items-estirar       { align-items: stretch; }
.justificar-centro   { justify-content: center; }
.justificar-entre    { justify-content: space-between; }
.justificar-inicio   { justify-content: flex-start; }
.justificar-fin      { justify-content: flex-end; }
.flex-envolver       { flex-wrap: wrap; }
.flex-crecer         { flex: 1; }
.flex-ninguno        { flex: none; }

/* ── Espaciado — gap ─────────────────────────────────────── */
.brecha-1  { gap: var(--espacio-1); }
.brecha-2  { gap: var(--espacio-2); }
.brecha-3  { gap: var(--espacio-3); }
.brecha-4  { gap: var(--espacio-4); }
.brecha-6  { gap: var(--espacio-6); }
.brecha-8  { gap: var(--espacio-8); }

/* ── Margen ──────────────────────────────────────────────── */
.m-auto  { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-2  { margin-top: var(--espacio-2); }
.mt-4  { margin-top: var(--espacio-4); }
.mt-6  { margin-top: var(--espacio-6); }
.mt-8  { margin-top: var(--espacio-8); }
.mb-2  { margin-bottom: var(--espacio-2); }
.mb-4  { margin-bottom: var(--espacio-4); }
.mb-6  { margin-bottom: var(--espacio-6); }
.mb-8  { margin-bottom: var(--espacio-8); }

/* ── Padding ─────────────────────────────────────────────── */
.p-2  { padding: var(--espacio-2); }
.p-4  { padding: var(--espacio-4); }
.p-6  { padding: var(--espacio-6); }
.p-8  { padding: var(--espacio-8); }
.px-4 { padding-left: var(--espacio-4); padding-right: var(--espacio-4); }
.py-4 { padding-top: var(--espacio-4); padding-bottom: var(--espacio-4); }
.py-8 { padding-top: var(--espacio-8); padding-bottom: var(--espacio-8); }
.py-16 { padding-top: var(--espacio-16); padding-bottom: var(--espacio-16); }

/* ── Ancho ───────────────────────────────────────────────── */
.ancho-completo { width: 100%; }
.ancho-auto     { width: auto; }

/* ── Texto ───────────────────────────────────────────────── */
.texto-xs     { font-size: var(--tam-xs); }
.texto-sm     { font-size: var(--tam-sm); }
.texto-base   { font-size: var(--tam-base); }
.texto-lg     { font-size: var(--tam-lg); }
.texto-xl     { font-size: var(--tam-xl); }
.texto-2xl    { font-size: var(--tam-2xl); }
.texto-3xl    { font-size: var(--tam-3xl); }

.negrita      { font-weight: var(--peso-bold); }
.semibold     { font-weight: var(--peso-semibold); }
.normal       { font-weight: var(--peso-normal); }

.texto-centro  { text-align: center; }
.texto-derecha { text-align: right; }
.texto-izquierda { text-align: left; }

.mayusculas   { text-transform: uppercase; }
.minusculas   { text-transform: lowercase; }
.capitalizar  { text-transform: capitalize; }

.sin-salto    { white-space: nowrap; }
.truncar      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Colores de texto ────────────────────────────────────── */
.texto-tierra        { color: var(--color-tierra); }
.texto-tierra-oscuro { color: var(--color-tierra-oscuro); }
.texto-noche         { color: var(--color-noche); }
.texto-gris          { color: var(--color-gris-500); }
.texto-gris-oscuro   { color: var(--color-gris-700); }
.texto-exito         { color: var(--color-exito); }
.texto-error         { color: var(--color-error); }
.texto-advertencia   { color: var(--color-advertencia); }
.texto-blanco        { color: var(--color-blanco); }

/* ── Bordes ──────────────────────────────────────────────── */
.borde         { border: var(--borde); }
.borde-radio   { border-radius: var(--radio-md); }
.borde-pill    { border-radius: var(--radio-pill); }
.sin-borde     { border: none; }

/* ── Sombras ─────────────────────────────────────────────── */
.sombra-sm { box-shadow: var(--sombra-sm); }
.sombra-md { box-shadow: var(--sombra-md); }
.sombra-lg { box-shadow: var(--sombra-lg); }
.sin-sombra { box-shadow: none; }

/* ── Posición ────────────────────────────────────────────── */
.relativo   { position: relative; }
.absoluto   { position: absolute; }
.fijo       { position: fixed; }
.pegajoso   { position: sticky; }

/* ── Overflow ────────────────────────────────────────────── */
.desborde-oculto { overflow: hidden; }
.desborde-auto   { overflow: auto; }

/* ── Cursor ──────────────────────────────────────────────── */
.cursor-puntero  { cursor: pointer; }
.cursor-defecto  { cursor: default; }
.cursor-espera   { cursor: wait; }

/* ── Opacidad ────────────────────────────────────────────── */
.opaco-50 { opacity: 0.5; }
.opaco-75 { opacity: 0.75; }

/* ── Tarjeta ─────────────────────────────────────────────── */
.tarjeta {
  background-color: var(--color-blanco);
  border-radius: var(--radio-lg);
  padding: var(--espacio-6);
  box-shadow: var(--sombra-sm);
  border: 1px solid var(--color-gris-200);
}

/* ── Separador visual ────────────────────────────────────── */
.separador {
  height: 1px;
  background-color: var(--color-gris-200);
  margin: var(--espacio-4) 0;
}

/* ── Sección de página ───────────────────────────────────── */
.seccion {
  padding: var(--espacio-12) 0;
}

.seccion--reducida {
  padding: var(--espacio-8) 0;
}

/* ── Grilla de 2 columnas ─────────────────────────────────── */
.grilla-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-4);
}

.grilla-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espacio-4);
}

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