/* Flex y Grid */
.flex {
  display: flex;
}
.row {
  flex-direction: row;
}
.col {
  flex-direction: column;
}
.wrap {
  flex-wrap: wrap;
}
.center {
  justify-content: center;
  align-items: center;
}

/* Espaciados */
.m-0 {
  margin: 0;
}
.mt-1 {
  margin-top: var(--spacing-sm);
}
.mb-1 {
  margin-bottom: var(--spacing-sm);
}
.mt-2 {
  margin-top: var(--spacing-md);
}
.mb-2 {
  margin-bottom: var(--spacing-md);
}
.p-1 {
  padding: var(--spacing-sm);
}
.p-2 {
  padding: var(--spacing-md);
}
.p-3 {
  padding: var(--spacing-lg);
}

/* Colores de fondo */
.bg-body {
  background-color: var(--color-body);
}
.bg-azul {
  background-color: var(--color-azul);
}
.bg-violeta {
  background-color: var(--color-violeta);
}
.bg-fucsia {
  background-color: var(--color-fucsia);
}
.bg-cyan {
  background-color: var(--color-cyan);
}
.bg-naranja {
  background-color: var(--color-naranja);
}
.bg-verde {
  background-color: var(--color-verde);
}
.bg-blanco {
  background-color: var(--color-blanco);
}

/* Colores de texto */
.text-azul {
  color: var(--color-azul);
}
.text-violeta {
  color: var(--color-violeta);
}
.text-fucsia {
  color: var(--color-fucsia);
}
.text-cyan {
  color: var(--color-cyan);
}
.text-naranja {
  color: var(--color-naranja);
}
.text-verde {
  color: var(--color-verde);
}
.text-blanco {
  color: var(--color-blanco);
}

/* Imágenes responsivas */
.img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--img-border-radius);
  box-shadow: var(--img-shadow);
}

/* Texto centrado */
.text-center {
  text-align: center;
}

/* Sombra */
.shadow {
  box-shadow: var(--img-shadow);
}

/* Tamaños de texto */
/* Tamaños de texto */
.text-xxs {
  font-size: var(--font-size-xxs);
}
.text-xs {
  font-size: var(--font-size-xs);
}
.text-sm {
  font-size: var(--font-size-sm);
}
.text-base {
  font-size: var(--font-size-base);
}
.text-lg {
  font-size: var(--font-size-lg);
}
.text-lx {
  font-size: var(--font-size-lx);
}
.text-xl {
  font-size: var(--font-size-xl);
}
.text-xxl {
  font-size: var(--font-size-xxl);
}

/* Pesos tipográficos */
.font-thin {
  font-weight: var(--font-weight-thin);
}

.font-extralight {
  font-weight: var(--font-weight-extralight);
}

.font-light {
  font-weight: var(--font-weight-light);
}

.font-regular {
  font-weight: var(--font-weight-regular);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-black {
  font-weight: var(--font-weight-black);
}

.font-heavy {
  font-weight: var(--font-weight-heavy);
}

/* Interlineado */
.lh-none {
  line-height: var(--line-height-none);
}

.lh-mini {
  line-height: var(--line-height-mini);
}

.lh-tight {
  line-height: var(--line-height-tight);
}

.lh-base {
  line-height: var(--line-height-base);
}

.lh-loose {
  line-height: var(--line-height-loose);
}


/* Espaciado entre letras */
.ls-tight {
  letter-spacing: var(--letter-spacing-tight);
}
.ls-base {
  letter-spacing: var(--letter-spacing-base);
}
.ls-wide {
  letter-spacing: var(--letter-spacing-wide);
}

/* MARGIN individual */
.mt-1 {
  margin-top: var(--spacing-sm);
}
.mt-2 {
  margin-top: var(--spacing-md);
}
.mt-3 {
  margin-top: var(--spacing-lg);
}

.mb-1 {
  margin-bottom: var(--spacing-sm);
}
.mb-2 {
  margin-bottom: var(--spacing-md);
}
.mb-3 {
  margin-bottom: var(--spacing-lg);
}

.ml-1 {
  margin-left: var(--spacing-sm);
}
.ml-2 {
  margin-left: var(--spacing-md);
}
.ml-3 {
  margin-left: var(--spacing-lg);
}

.mr-1 {
  margin-right: var(--spacing-sm);
}
.mr-2 {
  margin-right: var(--spacing-md);
}
.mr-3 {
  margin-right: var(--spacing-lg);
}

/* MARGIN combinados */
.m-0 {
  margin: 0;
}
.m-1 {
  margin: var(--spacing-sm);
}
.m-2 {
  margin: var(--spacing-md);
}
.m-3 {
  margin: var(--spacing-lg);
}

.mx-1 {
  margin-left: var(--spacing-sm);
  margin-right: var(--spacing-sm);
}
.mx-2 {
  margin-left: var(--spacing-md);
  margin-right: var(--spacing-md);
}
.mx-3 {
  margin-left: var(--spacing-lg);
  margin-right: var(--spacing-lg);
}

.my-1 {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}
.my-2 {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}
.my-3 {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

/* PADDING individual */
.pt-1 {
  padding-top: var(--spacing-sm);
}
.pt-2 {
  padding-top: var(--spacing-md);
}
.pt-3 {
  padding-top: var(--spacing-lg);
}

.pb-1 {
  padding-bottom: var(--spacing-sm);
}
.pb-2 {
  padding-bottom: var(--spacing-md);
}
.pb-3 {
  padding-bottom: var(--spacing-lg);
}

.pl-1 {
  padding-left: var(--spacing-sm);
}
.pl-2 {
  padding-left: var(--spacing-md);
}
.pl-3 {
  padding-left: var(--spacing-lg);
}

.pr-1 {
  padding-right: var(--spacing-sm);
}
.pr-2 {
  padding-right: var(--spacing-md);
}
.pr-3 {
  padding-right: var(--spacing-lg);
}

/* PADDING combinados */
.p-0 {
  padding: 0;
}
.p-1 {
  padding: var(--spacing-sm);
}
.p-2 {
  padding: var(--spacing-md);
}
.p-3 {
  padding: var(--spacing-lg);
}

.px-1 {
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}
.px-2 {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}
.px-3 {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.py-1 {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}
.py-2 {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}
.py-3 {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

/* FLEX DISPLAY */
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}

/* FLEX DIRECTION */
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}

/* JUSTIFY CONTENT */
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}

/* ALIGN ITEMS */
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-stretch {
  align-items: stretch;
}

/* ALIGN SELF (individual dentro del flex) */
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.self-end {
  align-self: flex-end;
}
.self-stretch {
  align-self: stretch;
}

/* GAP */
.gap-1 {
  gap: var(--spacing-sm);
}
.gap-2 {
  gap: var(--spacing-md);
}
.gap-3 {
  gap: var(--spacing-lg);
}

/* COMBINACIONES FRECUENTES */
.center-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.start-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.end-center {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Visibilidad responsive */
.only-desktop {
  display: block;
}
.only-mobile {
  display: none;
}

@media (max-width: 768px) {
  .only-desktop {
    display: none;
  }
  .only-mobile {
    display: block;
  }
}

/* PADDING LEFT RESPONSIVO */
.pl-responsive {
  padding-left: clamp(6rem, 10vw, 12rem);
}
.pl-responsive-sm {
  padding-left: clamp(3rem, 5vw, 6rem);
}

/* Línea divisoria */
.divisor-line {
  width: 100%;
  max-width: 500px;
  margin: var(--spacing-md) auto;
  display: block;
}

/* DEBUG VISUAL */
.debug {
  border: 1px dashed rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.05);
}
.debug-space {
  border: 1px dashed rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.05);
  padding: 0.5rem;
  margin: 0.5rem;
}
.debug-outline {
  outline: 2px dashed #f0f;
}
.debug-shadow {
  box-shadow: inset 0 0 0 20px rgba(0, 255, 255, 0.2);
}
.debug-clip {
  padding: 2rem;
  background-color: #ff0;
  background-clip: content-box;
}