/*
 * utilities.css — Utilidades FLEXUS (limpiadas)
 *
 * Extraído de flexus.css. Correcciones aplicadas:
 * - .pd-y-5 duplicado → eliminado el segundo
 * - .h9-* duplicados con valores distintos → eliminado el segundo en todos los bp
 * - .nowrap eliminado (duplicaba a .flex-nowrap)
 * - .flex/.flex-wrap/.flex-nowrap/.flex-wrap-reverse movidas a grid.css (sección dirección)
 * - Prefijos IE11 eliminados: -ms-grid-row-align, -ms-justify-content, -ms-align-content
 * - display: table innecesario en clases de alineación flex → eliminado
 *
 * ESCALA DE ESPACIADO
 * Las clases pd/mg usan escala base-4 alineada con tokens.css:
 *   pd-1 = var(--space-1) = 0.25rem ( 4px)
 *   pd-2 = var(--space-2) = 0.5rem  ( 8px)
 *   pd-4 = var(--space-4) = 1rem    (16px)   ← valor "estándar"
 *   pd-6 = var(--space-6) = 1.5rem  (24px)
 *   pd-8 = var(--space-8) = 2rem    (32px)
 *   ... hasta pd-24 (6rem / 96px)
 
 */

/* ══════════════════════════════════════════════════════════════
   ALINEACIÓN FLEX — sin breakpoint
   ══════════════════════════════════════════════════════════════ */

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

/* align-items */
.align-start    { align-items: flex-start !important; }
.align-end      { align-items: flex-end !important; }
.align-center   { align-items: center !important; }
.align-stretch  { align-items: stretch !important; }
.align-baseline { align-items: baseline; }

/* align-self */
.self-start    { align-self: flex-start !important; }
.self-end      { align-self: flex-end !important; }
.self-center   { align-self: center !important; }
.self-stretch  { align-self: stretch !important; }
.self-baseline { align-self: baseline !important; }

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

/* ══════════════════════════════════════════════════════════════
   ATAJOS FLEX (display + alineación juntos)
   ══════════════════════════════════════════════════════════════ */

.flex-left     { display: flex; flex-wrap: wrap; justify-content: flex-start; text-align: left; }
.flex-center   { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }
.flex-right    { display: flex; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
.flex-top      { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; }
.flex-middle   { display: flex; flex-wrap: wrap; align-items: center; }
.flex-bottom   { display: flex; flex-wrap: wrap; align-items: flex-end; }
.flex-between  { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; }
.flex-around   { display: flex; flex-wrap: wrap; justify-content: space-around; align-content: space-around; }
.flex-baseline { display: flex; flex-wrap: wrap; align-items: baseline; }
.flex-reverse  { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
.flex-not-reverse { display: flex; flex-direction: row; flex-wrap: wrap; }

.flex-middle > * { vertical-align: middle; }
.flex-bottom > * { vertical-align: bottom; }

/* ══════════════════════════════════════════════════════════════
   DISPLAY ALTERNATIVO
   ══════════════════════════════════════════════════════════════ */

.d-table > * { display: table-cell; }
.d-table {
  display: table;
  table-layout: fixed;
}

.d-flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
}
.d-flexbox > * { display: inline-block; }

.d-normal { display: block; }
.d-normal > * { display: inline-block; }

/* ══════════════════════════════════════════════════════════════
   TIPOGRAFÍA
   ══════════════════════════════════════════════════════════════ */

.bold        { font-weight: bold; }
.bold-items > * { font-weight: bold; }

/* ══════════════════════════════════════════════════════════════
   BORDES
   ══════════════════════════════════════════════════════════════ */

.bd-0 { border: none; }

/* ══════════════════════════════════════════════════════════════
   PADDING
   Escala base-4 alineada con tokens.css:
     pd-1  = var(--space-1)  =  0.25rem  ( 4px)
     pd-2  = var(--space-2)  =  0.5rem   ( 8px)
     pd-3  = var(--space-3)  =  0.75rem  (12px)
     pd-4  = var(--space-4)  =  1rem     (16px)
     pd-5  = var(--space-5)  =  1.25rem  (20px)
     pd-6  = var(--space-6)  =  1.5rem   (24px)
     pd-8  = var(--space-8)  =  2rem     (32px)
     pd-10 = var(--space-10) =  2.5rem   (40px)
     pd-12 = var(--space-12) =  3rem     (48px)
     pd-16 = var(--space-16) =  4rem     (64px)
     pd-20 = var(--space-20) =  5rem     (80px)
     pd-24 = var(--space-24) =  6rem     (96px)
   ══════════════════════════════════════════════════════════════ */

.pd-0   { padding: 0 !important; }
.pd-t-0 { padding-top: 0 !important; }
.pd-b-0 { padding-bottom: 0 !important; }
.pd-l-0 { padding-left: 0 !important; }
.pd-r-0 { padding-right: 0 !important; }
.pd-x-0 { padding-left: 0 !important; padding-right: 0 !important; }
.pd-y-0 { padding-top: 0 !important;  padding-bottom: 0 !important; }

.pd-1   { padding: var(--space-1) !important; }
.pd-t-1 { padding-top: var(--space-1) !important; }
.pd-b-1 { padding-bottom: var(--space-1) !important; }
.pd-l-1 { padding-left: var(--space-1) !important; }
.pd-r-1 { padding-right: var(--space-1) !important; }
.pd-x-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.pd-y-1 { padding-top: var(--space-1) !important;  padding-bottom: var(--space-1) !important; }

.pd-2   { padding: var(--space-2) !important; }
.pd-t-2 { padding-top: var(--space-2) !important; }
.pd-b-2 { padding-bottom: var(--space-2) !important; }
.pd-l-2 { padding-left: var(--space-2) !important; }
.pd-r-2 { padding-right: var(--space-2) !important; }
.pd-x-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.pd-y-2 { padding-top: var(--space-2) !important;  padding-bottom: var(--space-2) !important; }

.pd-3   { padding: var(--space-3) !important; }
.pd-t-3 { padding-top: var(--space-3) !important; }
.pd-b-3 { padding-bottom: var(--space-3) !important; }
.pd-l-3 { padding-left: var(--space-3) !important; }
.pd-r-3 { padding-right: var(--space-3) !important; }
.pd-x-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.pd-y-3 { padding-top: var(--space-3) !important;  padding-bottom: var(--space-3) !important; }

.pd-4   { padding: var(--space-4) !important; }
.pd-t-4 { padding-top: var(--space-4) !important; }
.pd-b-4 { padding-bottom: var(--space-4) !important; }
.pd-l-4 { padding-left: var(--space-4) !important; }
.pd-r-4 { padding-right: var(--space-4) !important; }
.pd-x-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.pd-y-4 { padding-top: var(--space-4) !important;  padding-bottom: var(--space-4) !important; }

.pd-5   { padding: var(--space-5) !important; }
.pd-t-5 { padding-top: var(--space-5) !important; }
.pd-b-5 { padding-bottom: var(--space-5) !important; }
.pd-l-5 { padding-left: var(--space-5) !important; }
.pd-r-5 { padding-right: var(--space-5) !important; }
.pd-x-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.pd-y-5 { padding-top: var(--space-5) !important;  padding-bottom: var(--space-5) !important; }

.pd-6   { padding: var(--space-6) !important; }
.pd-t-6 { padding-top: var(--space-6) !important; }
.pd-b-6 { padding-bottom: var(--space-6) !important; }
.pd-l-6 { padding-left: var(--space-6) !important; }
.pd-r-6 { padding-right: var(--space-6) !important; }
.pd-x-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.pd-y-6 { padding-top: var(--space-6) !important;  padding-bottom: var(--space-6) !important; }

.pd-8   { padding: var(--space-8) !important; }
.pd-t-8 { padding-top: var(--space-8) !important; }
.pd-b-8 { padding-bottom: var(--space-8) !important; }
.pd-l-8 { padding-left: var(--space-8) !important; }
.pd-r-8 { padding-right: var(--space-8) !important; }
.pd-x-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
.pd-y-8 { padding-top: var(--space-8) !important;  padding-bottom: var(--space-8) !important; }

.pd-10   { padding: var(--space-10) !important; }
.pd-t-10 { padding-top: var(--space-10) !important; }
.pd-b-10 { padding-bottom: var(--space-10) !important; }
.pd-l-10 { padding-left: var(--space-10) !important; }
.pd-r-10 { padding-right: var(--space-10) !important; }
.pd-x-10 { padding-left: var(--space-10) !important; padding-right: var(--space-10) !important; }
.pd-y-10 { padding-top: var(--space-10) !important;  padding-bottom: var(--space-10) !important; }

.pd-12   { padding: var(--space-12) !important; }
.pd-t-12 { padding-top: var(--space-12) !important; }
.pd-b-12 { padding-bottom: var(--space-12) !important; }
.pd-l-12 { padding-left: var(--space-12) !important; }
.pd-r-12 { padding-right: var(--space-12) !important; }
.pd-x-12 { padding-left: var(--space-12) !important; padding-right: var(--space-12) !important; }
.pd-y-12 { padding-top: var(--space-12) !important;  padding-bottom: var(--space-12) !important; }

.pd-16   { padding: var(--space-16) !important; }
.pd-t-16 { padding-top: var(--space-16) !important; }
.pd-b-16 { padding-bottom: var(--space-16) !important; }
.pd-l-16 { padding-left: var(--space-16) !important; }
.pd-r-16 { padding-right: var(--space-16) !important; }
.pd-x-16 { padding-left: var(--space-16) !important; padding-right: var(--space-16) !important; }
.pd-y-16 { padding-top: var(--space-16) !important;  padding-bottom: var(--space-16) !important; }

.pd-20   { padding: var(--space-20) !important; }
.pd-t-20 { padding-top: var(--space-20) !important; }
.pd-b-20 { padding-bottom: var(--space-20) !important; }
.pd-l-20 { padding-left: var(--space-20) !important; }
.pd-r-20 { padding-right: var(--space-20) !important; }
.pd-x-20 { padding-left: var(--space-20) !important; padding-right: var(--space-20) !important; }
.pd-y-20 { padding-top: var(--space-20) !important;  padding-bottom: var(--space-20) !important; }

.pd-24   { padding: var(--space-24) !important; }
.pd-t-24 { padding-top: var(--space-24) !important; }
.pd-b-24 { padding-bottom: var(--space-24) !important; }
.pd-l-24 { padding-left: var(--space-24) !important; }
.pd-r-24 { padding-right: var(--space-24) !important; }
.pd-x-24 { padding-left: var(--space-24) !important; padding-right: var(--space-24) !important; }
.pd-y-24 { padding-top: var(--space-24) !important;  padding-bottom: var(--space-24) !important; }

/* ══════════════════════════════════════════════════════════════
   MARGIN
   Misma escala base-4 que padding + variantes auto
   ══════════════════════════════════════════════════════════════ */

.mg-0      { margin: 0 !important; }
.mg-t-0    { margin-top: 0 !important; }
.mg-b-0    { margin-bottom: 0 !important; }
.mg-l-0    { margin-left: 0 !important; }
.mg-r-0    { margin-right: 0 !important; }
.mg-x-0    { margin-left: 0 !important; margin-right: 0 !important; }
.mg-y-0    { margin-top: 0 !important;  margin-bottom: 0 !important; }

.mg-auto   { margin: auto !important; }
.mg-t-auto { margin-top: auto !important; }
.mg-b-auto { margin-bottom: auto !important; }
.mg-l-auto { margin-left: auto !important; }
.mg-r-auto { margin-right: auto !important; }
.mg-x-auto { margin-left: auto !important; margin-right: auto !important; }
.mg-y-auto { margin-top: auto !important;  margin-bottom: auto !important; }

.mg-1   { margin: var(--space-1) !important; }
.mg-t-1 { margin-top: var(--space-1) !important; }
.mg-b-1 { margin-bottom: var(--space-1) !important; }
.mg-l-1 { margin-left: var(--space-1) !important; }
.mg-r-1 { margin-right: var(--space-1) !important; }
.mg-x-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mg-y-1 { margin-top: var(--space-1) !important;  margin-bottom: var(--space-1) !important; }

.mg-2   { margin: var(--space-2) !important; }
.mg-t-2 { margin-top: var(--space-2) !important; }
.mg-b-2 { margin-bottom: var(--space-2) !important; }
.mg-l-2 { margin-left: var(--space-2) !important; }
.mg-r-2 { margin-right: var(--space-2) !important; }
.mg-x-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mg-y-2 { margin-top: var(--space-2) !important;  margin-bottom: var(--space-2) !important; }

.mg-3   { margin: var(--space-3) !important; }
.mg-t-3 { margin-top: var(--space-3) !important; }
.mg-b-3 { margin-bottom: var(--space-3) !important; }
.mg-l-3 { margin-left: var(--space-3) !important; }
.mg-r-3 { margin-right: var(--space-3) !important; }
.mg-x-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
.mg-y-3 { margin-top: var(--space-3) !important;  margin-bottom: var(--space-3) !important; }

.mg-4   { margin: var(--space-4) !important; }
.mg-t-4 { margin-top: var(--space-4) !important; }
.mg-b-4 { margin-bottom: var(--space-4) !important; }
.mg-l-4 { margin-left: var(--space-4) !important; }
.mg-r-4 { margin-right: var(--space-4) !important; }
.mg-x-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.mg-y-4 { margin-top: var(--space-4) !important;  margin-bottom: var(--space-4) !important; }

.mg-5   { margin: var(--space-5) !important; }
.mg-t-5 { margin-top: var(--space-5) !important; }
.mg-b-5 { margin-bottom: var(--space-5) !important; }
.mg-l-5 { margin-left: var(--space-5) !important; }
.mg-r-5 { margin-right: var(--space-5) !important; }
.mg-x-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
.mg-y-5 { margin-top: var(--space-5) !important;  margin-bottom: var(--space-5) !important; }

.mg-6   { margin: var(--space-6) !important; }
.mg-t-6 { margin-top: var(--space-6) !important; }
.mg-b-6 { margin-bottom: var(--space-6) !important; }
.mg-l-6 { margin-left: var(--space-6) !important; }
.mg-r-6 { margin-right: var(--space-6) !important; }
.mg-x-6 { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
.mg-y-6 { margin-top: var(--space-6) !important;  margin-bottom: var(--space-6) !important; }

.mg-8   { margin: var(--space-8) !important; }
.mg-t-8 { margin-top: var(--space-8) !important; }
.mg-b-8 { margin-bottom: var(--space-8) !important; }
.mg-l-8 { margin-left: var(--space-8) !important; }
.mg-r-8 { margin-right: var(--space-8) !important; }
.mg-x-8 { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }
.mg-y-8 { margin-top: var(--space-8) !important;  margin-bottom: var(--space-8) !important; }

.mg-10   { margin: var(--space-10) !important; }
.mg-t-10 { margin-top: var(--space-10) !important; }
.mg-b-10 { margin-bottom: var(--space-10) !important; }
.mg-l-10 { margin-left: var(--space-10) !important; }
.mg-r-10 { margin-right: var(--space-10) !important; }
.mg-x-10 { margin-left: var(--space-10) !important; margin-right: var(--space-10) !important; }
.mg-y-10 { margin-top: var(--space-10) !important;  margin-bottom: var(--space-10) !important; }

.mg-12   { margin: var(--space-12) !important; }
.mg-t-12 { margin-top: var(--space-12) !important; }
.mg-b-12 { margin-bottom: var(--space-12) !important; }
.mg-l-12 { margin-left: var(--space-12) !important; }
.mg-r-12 { margin-right: var(--space-12) !important; }
.mg-x-12 { margin-left: var(--space-12) !important; margin-right: var(--space-12) !important; }
.mg-y-12 { margin-top: var(--space-12) !important;  margin-bottom: var(--space-12) !important; }

.mg-16   { margin: var(--space-16) !important; }
.mg-t-16 { margin-top: var(--space-16) !important; }
.mg-b-16 { margin-bottom: var(--space-16) !important; }
.mg-l-16 { margin-left: var(--space-16) !important; }
.mg-r-16 { margin-right: var(--space-16) !important; }
.mg-x-16 { margin-left: var(--space-16) !important; margin-right: var(--space-16) !important; }
.mg-y-16 { margin-top: var(--space-16) !important;  margin-bottom: var(--space-16) !important; }

.mg-20   { margin: var(--space-20) !important; }
.mg-t-20 { margin-top: var(--space-20) !important; }
.mg-b-20 { margin-bottom: var(--space-20) !important; }
.mg-l-20 { margin-left: var(--space-20) !important; }
.mg-r-20 { margin-right: var(--space-20) !important; }
.mg-x-20 { margin-left: var(--space-20) !important; margin-right: var(--space-20) !important; }
.mg-y-20 { margin-top: var(--space-20) !important;  margin-bottom: var(--space-20) !important; }

.mg-24   { margin: var(--space-24) !important; }
.mg-t-24 { margin-top: var(--space-24) !important; }
.mg-b-24 { margin-bottom: var(--space-24) !important; }
.mg-l-24 { margin-left: var(--space-24) !important; }
.mg-r-24 { margin-right: var(--space-24) !important; }
.mg-x-24 { margin-left: var(--space-24) !important; margin-right: var(--space-24) !important; }
.mg-y-24 { margin-top: var(--space-24) !important;  margin-bottom: var(--space-24) !important; }

/* ══════════════════════════════════════════════════════════════
   TIPOGRAFÍA — tamaños y alineación
   ══════════════════════════════════════════════════════════════ */

.text-xs   { font-size: var(--text-xs) !important; }
.text-sm   { font-size: var(--text-sm) !important; }
.text-lg   { font-size: var(--text-lg) !important; }
.text-xl   { font-size: var(--text-xl) !important; }
.text-2xl  { font-size: var(--text-2xl) !important; }

.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

/* ══════════════════════════════════════════════════════════════
   BORDER RADIUS
   ══════════════════════════════════════════════════════════════ */

.rounded      { border-radius: var(--radius-md) !important; }
.rounded-sm   { border-radius: var(--radius-sm) !important; }
.rounded-lg   { border-radius: var(--radius-lg) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* ══════════════════════════════════════════════════════════════
   COLORES DE FONDO — semánticos IT
   ══════════════════════════════════════════════════════════════ */

.bg-base       { background-color: var(--color-bg) !important; }
.bg-surface    { background-color: var(--color-surface) !important; }
.bg-surface-2  { background-color: var(--color-surface-2) !important; }

.bg-primary    { background-color: var(--color-primary) !important; }
.bg-secondary  { background-color: var(--color-secondary) !important; }
.bg-success    { background-color: var(--color-success) !important; }
.bg-warning    { background-color: var(--color-warning) !important; }
.bg-danger     { background-color: var(--color-danger) !important; }
.bg-info       { background-color: var(--color-info) !important; }

.bg-primary-light   { background-color: var(--color-primary-light) !important; }
.bg-secondary-light { background-color: var(--color-secondary-light) !important; }
.bg-success-light   { background-color: var(--color-success-light) !important; }
.bg-warning-light   { background-color: var(--color-warning-light) !important; }
.bg-danger-light    { background-color: var(--color-danger-light) !important; }
.bg-info-light      { background-color: var(--color-info-light) !important; }

/* ── Colores de fondo — paleta creativa ─────────────────────── */

.bg-rose-light   { background-color: var(--rose-light) !important; }
.bg-rose         { background-color: var(--rose) !important; }
.bg-rose-dark    { background-color: var(--rose-dark) !important; }

.bg-pink-light   { background-color: var(--pink-light) !important; }
.bg-pink         { background-color: var(--pink) !important; }
.bg-pink-dark    { background-color: var(--pink-dark) !important; }

.bg-purple-light { background-color: var(--purple-light) !important; }
.bg-purple       { background-color: var(--purple) !important; }
.bg-purple-dark  { background-color: var(--purple-dark) !important; }

.bg-blue-light   { background-color: var(--blue-light) !important; }
.bg-blue         { background-color: var(--blue) !important; }
.bg-blue-dark    { background-color: var(--blue-dark) !important; }

.bg-teal-light   { background-color: var(--teal-light) !important; }
.bg-teal         { background-color: var(--teal) !important; }
.bg-teal-dark    { background-color: var(--teal-dark) !important; }

.bg-green-light  { background-color: var(--green-light) !important; }
.bg-green        { background-color: var(--green) !important; }
.bg-green-dark   { background-color: var(--green-dark) !important; }

.bg-amber-light  { background-color: var(--amber-light) !important; }
.bg-amber        { background-color: var(--amber) !important; }
.bg-amber-dark   { background-color: var(--amber-dark) !important; }

.bg-gray-light   { background-color: var(--gray-light) !important; }
.bg-gray         { background-color: var(--gray) !important; }
.bg-gray-dark    { background-color: var(--gray-dark) !important; }

/* ══════════════════════════════════════════════════════════════
   COLORES DE TEXTO — semánticos IT
   ══════════════════════════════════════════════════════════════ */

.text-muted    { color: var(--color-text-muted) !important; }
.text-subtle   { color: var(--color-text-subtle) !important; }
.text-white    { color: #ffffff !important; }
.text-black    { color: #000000 !important; }

.text-primary   { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-success   { color: var(--color-success) !important; }
.text-warning   { color: var(--color-warning) !important; }
.text-danger    { color: var(--color-danger) !important; }
.text-info      { color: var(--color-info) !important; }

/* ── Colores de texto — paleta creativa ─────────────────────── */
/* Usa el tono dark para legibilidad sobre fondos claros         */

.text-rose    { color: var(--rose-dark) !important; }
.text-pink    { color: var(--pink-dark) !important; }
.text-purple  { color: var(--purple-dark) !important; }
.text-blue    { color: var(--blue-dark) !important; }
.text-teal    { color: var(--teal-dark) !important; }
.text-green   { color: var(--green-dark) !important; }
.text-amber   { color: var(--amber-dark) !important; }
.text-gray    { color: var(--gray) !important; }

/* ══════════════════════════════════════════════════════════════
   ALINEACIÓN RESPONSIVE — XL (min-width: 1400px)
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 1400px) {
  .justify-xl-start   { justify-content: flex-start !important; }
  .justify-xl-end     { justify-content: flex-end !important; }
  .justify-xl-center  { justify-content: center !important; }
  .justify-xl-between { justify-content: space-between !important; }
  .justify-xl-around  { justify-content: space-around !important; }

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

  .self-xl-start    { align-self: flex-start !important; }
  .self-xl-end      { align-self: flex-end !important; }
  .self-xl-center   { align-self: center !important; }
  .self-xl-stretch  { align-self: stretch !important; }
  .self-xl-baseline { align-self: baseline !important; }

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

/* ══════════════════════════════════════════════════════════════
   ALINEACIÓN RESPONSIVE — LG (max-width: 1199px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {
  .justify-lg-start   { justify-content: flex-start !important; }
  .justify-lg-end     { justify-content: flex-end !important; }
  .justify-lg-center  { justify-content: center !important; }
  .justify-lg-between { justify-content: space-between !important; }
  .justify-lg-around  { justify-content: space-around !important; }

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

  .self-lg-start    { align-self: flex-start !important; }
  .self-lg-end      { align-self: flex-end !important; }
  .self-lg-center   { align-self: center !important; }
  .self-lg-stretch  { align-self: stretch !important; }
  .self-lg-baseline { align-self: baseline !important; }

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

/* ══════════════════════════════════════════════════════════════
   ALINEACIÓN RESPONSIVE — MD (max-width: 991px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  .justify-md-start   { justify-content: flex-start !important; }
  .justify-md-end     { justify-content: flex-end !important; }
  .justify-md-center  { justify-content: center !important; }
  .justify-md-between { justify-content: space-between !important; }
  .justify-md-around  { justify-content: space-around !important; }

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

  .self-md-start    { align-self: flex-start !important; }
  .self-md-end      { align-self: flex-end !important; }
  .self-md-center   { align-self: center !important; }
  .self-md-stretch  { align-self: stretch !important; }
  .self-md-baseline { align-self: baseline !important; }

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

/* ══════════════════════════════════════════════════════════════
   ALINEACIÓN RESPONSIVE — SM (max-width: 767px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .justify-sm-start   { justify-content: flex-start !important; }
  .justify-sm-end     { justify-content: flex-end !important; }
  .justify-sm-center  { justify-content: center !important; }
  .justify-sm-between { justify-content: space-between !important; }
  .justify-sm-around  { justify-content: space-around !important; }

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

  .self-sm-start    { align-self: flex-start !important; }
  .self-sm-end      { align-self: flex-end !important; }
  .self-sm-center   { align-self: center !important; }
  .self-sm-stretch  { align-self: stretch !important; }
  .self-sm-baseline { align-self: baseline !important; }

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

/* ══════════════════════════════════════════════════════════════
   ALINEACIÓN RESPONSIVE — XS (max-width: 575px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 575px) {
  .justify-xs-start   { justify-content: flex-start !important; }
  .justify-xs-end     { justify-content: flex-end !important; }
  .justify-xs-center  { justify-content: center !important; }
  .justify-xs-between { justify-content: space-between !important; }
  .justify-xs-around  { justify-content: space-around !important; }

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

  .self-xs-start    { align-self: flex-start !important; }
  .self-xs-end      { align-self: flex-end !important; }
  .self-xs-center   { align-self: center !important; }
  .self-xs-stretch  { align-self: stretch !important; }
  .self-xs-baseline { align-self: baseline !important; }

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