/* =========================
   FLEX (Bootstrap 5)
========================= */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }

/* =========================
   GAP (no existe en B3)
========================= */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }

/* =========================
   WIDTH / HEIGHT
========================= */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

/* =========================
   SPACING (muy usado)
========================= */
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }

/* =========================
   TEXT
========================= */
.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }

/* =========================
   CARDS (MUY IMPORTANTE)
========================= */
.card {
  position: relative;
  display: block;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
}

.card-body {
  padding: 15px;
}

.card-title {
  font-size: 18px;
  margin-bottom: 10px;
}

/* =========================
   ROW FIX (muy importante)
========================= */
.row {
  display: flex;
  flex-wrap: wrap;
}

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