/* Márgenes inferiores (bottom) */
.mb-10 { margin-bottom: 10px; }
.mb-9  { margin-bottom: 9px; }
.mb-8  { margin-bottom: 8px; }
.mb-7  { margin-bottom: 7px; }
.mb-6  { margin-bottom: 6px; }
.mb-5  { margin-bottom: 5px; }
.mb-4  { margin-bottom: 4px; }
.mb-3  { margin-bottom: 3px; }
.mb-2  { margin-bottom: 2px; }
.mb-1  { margin-bottom: 1px; }

/* Márgenes superiores (top) */
.mt-10 { margin-top: 10px; }
.mt-9  { margin-top: 9px; }
.mt-8  { margin-top: 8px; }
.mt-7  { margin-top: 7px; }
.mt-6  { margin-top: 6px; }
.mt-5  { margin-top: 5px; }
.mt-4  { margin-top: 4px; }
.mt-3  { margin-top: 3px; }
.mt-2  { margin-top: 2px; }
.mt-1  { margin-top: 1px; }

/* Márgenes izquierda */
.ml-10 { margin-left: 10px; }
.ml-9  { margin-left: 9px; }
.ml-8  { margin-left: 8px; }
.ml-7  { margin-left: 7px; }
.ml-6  { margin-left: 6px; }
.ml-5  { margin-left: 5px; }
.ml-4  { margin-left: 4px; }
.ml-3  { margin-left: 3px; }
.ml-2  { margin-left: 2px; }
.ml-1  { margin-left: 1px; }

/* Márgenes derecha */
.mr-10 { margin-right: 10px; }
.mr-9  { margin-right: 9px; }
.mr-8  { margin-right: 8px; }
.mr-7  { margin-right: 7px; }
.mr-6  { margin-right: 6px; }
.mr-5  { margin-right: 5px; }
.mr-4  { margin-right: 4px; }
.mr-3  { margin-right: 3px; }
.mr-2  { margin-right: 2px; }
.mr-1  { margin-right: 1px; }

.pb-10 { padding-bottom: 10px; }
.pb-9  { padding-bottom: 9px; }
.pb-8  { padding-bottom: 8px; }
.pb-7  { padding-bottom: 7px; }
.pb-6  { padding-bottom: 6px; }
.pb-5  { padding-bottom: 5px; }
.pb-4  { padding-bottom: 4px; }
.pb-3  { padding-bottom: 3px; }
.pb-2  { padding-bottom: 2px; }
.pb-1  { padding-bottom: 1px; }

.pt-10 { padding-top: 10px; }
.pt-9  { padding-top: 9px; }
.pt-8  { padding-top: 8px; }
.pt-7  { padding-top: 7px; }
.pt-6  { padding-top: 6px; }
.pt-5  { padding-top: 5px; }
.pt-4  { padding-top: 4px; }
.pt-3  { padding-top: 3px; }
.pt-2  { padding-top: 2px; }
.pt-1  { padding-top: 1px; }

.pl-10 { padding-left: 10px; }
.pl-9  { padding-left: 9px; }
.pl-8  { padding-left: 8px; }
.pl-7  { padding-left: 7px; }
.pl-6  { padding-left: 6px; }
.pl-5  { padding-left: 5px; }
.pl-4  { padding-left: 4px; }
.pl-3  { padding-left: 3px; }
.pl-2  { padding-left: 2px; }
.pl-1  { padding-left: 1px; }

.pr-10 { padding-right: 10px; }
.pr-9  { padding-right: 9px; }
.pr-8  { padding-right: 8px; }
.pr-7  { padding-right: 7px; }
.pr-6  { padding-right: 6px; }
.pr-5  { padding-right: 5px; }
.pr-4  { padding-right: 4px; }
.pr-3  { padding-right: 3px; }
.pr-2  { padding-right: 2px; }
.pr-1  { padding-right: 1px; }

.px-10 { padding-left: 10px; padding-right: 10px; }
.px-9  { padding-left: 9px;  padding-right: 9px; }
.px-8  { padding-left: 8px;  padding-right: 8px; }
.px-7  { padding-left: 7px;  padding-right: 7px; }
.px-6  { padding-left: 6px;  padding-right: 6px; }
.px-5  { padding-left: 5px;  padding-right: 5px; }
.px-4  { padding-left: 4px;  padding-right: 4px; }
.px-3  { padding-left: 3px;  padding-right: 3px; }
.px-2  { padding-left: 2px;  padding-right: 2px; }
.px-1  { padding-left: 1px;  padding-right: 1px; }

.py-10 { padding-top: 10px; padding-bottom: 10px; }
/* ... igual que px con top/bottom */



/* Base con Flexbox */
.align-items-center,
.align-items-start,
.align-items-end,
.justify-content-start,
.justify-content-center,
.justify-content-end {
  display: flex;
  flex-wrap: wrap;
}

/* Alineación vertical */
.align-items-start {
  align-items: flex-start;
}

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

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

/* Alineación horizontal */
.justify-content-start {
  justify-content: flex-start;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-end {
  justify-content: flex-end;
}