/**
 * RTL Utilities - LA MEJOR VERSIÓN DEL MUNDO
 * Utilidades específicas para RTL de clase mundial
 * Inspirado en Tailwind CSS, Chakra UI, Material Design
 */

/* design-system.css YA se carga como <link> directo y versionado -- ver
 * nota completa en rtl-base.css sobre por que este @import se elimino
 * (2026-09-17, bug real de cache-busting roto). */

/* ===== UTILIDADES DE TEXTO ELITE ===== */
[dir="rtl"] .text-start {
  text-align: start !important;
}

[dir="rtl"] .text-end {
  text-align: end !important;
}

[dir="rtl"] .text-center {
  text-align: center !important;
}

[dir="rtl"] .text-justify {
  text-align: justify !important;
}

/* ===== UTILIDADES DE MARGIN ELITE ===== */
[dir="rtl"] .ms-auto {
  margin-inline-start: auto !important;
  margin-inline-end: 0 !important;
}

[dir="rtl"] .me-auto {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}

[dir="rtl"] .mx-auto {
  margin-inline: auto !important;
}

/* Spacing utilities usando logical properties */
[dir="rtl"] .ms-0 {
  margin-inline-start: 0 !important;
}
[dir="rtl"] .ms-1 {
  margin-inline-start: var(--space-1) !important;
}
[dir="rtl"] .ms-2 {
  margin-inline-start: var(--space-2) !important;
}
[dir="rtl"] .ms-3 {
  margin-inline-start: var(--space-3) !important;
}
[dir="rtl"] .ms-4 {
  margin-inline-start: var(--space-4) !important;
}
[dir="rtl"] .ms-5 {
  margin-inline-start: var(--space-5) !important;
}

[dir="rtl"] .me-0 {
  margin-inline-end: 0 !important;
}
[dir="rtl"] .me-1 {
  margin-inline-end: var(--space-1) !important;
}
[dir="rtl"] .me-2 {
  margin-inline-end: var(--space-2) !important;
}
[dir="rtl"] .me-3 {
  margin-inline-end: var(--space-3) !important;
}
[dir="rtl"] .me-4 {
  margin-inline-end: var(--space-4) !important;
}
[dir="rtl"] .me-5 {
  margin-inline-end: var(--space-5) !important;
}

/* Margin negativo */
[dir="rtl"] .ms-n1 {
  margin-inline-start: calc(var(--space-1) * -1) !important;
}
[dir="rtl"] .ms-n2 {
  margin-inline-start: calc(var(--space-2) * -1) !important;
}
[dir="rtl"] .ms-n3 {
  margin-inline-start: calc(var(--space-3) * -1) !important;
}
[dir="rtl"] .ms-n4 {
  margin-inline-start: calc(var(--space-4) * -1) !important;
}
[dir="rtl"] .ms-n5 {
  margin-inline-start: calc(var(--space-5) * -1) !important;
}

[dir="rtl"] .me-n1 {
  margin-inline-end: calc(var(--space-1) * -1) !important;
}
[dir="rtl"] .me-n2 {
  margin-inline-end: calc(var(--space-2) * -1) !important;
}
[dir="rtl"] .me-n3 {
  margin-inline-end: calc(var(--space-3) * -1) !important;
}
[dir="rtl"] .me-n4 {
  margin-inline-end: calc(var(--space-4) * -1) !important;
}
[dir="rtl"] .me-n5 {
  margin-inline-end: calc(var(--space-5) * -1) !important;
}

/* ===== UTILIDADES DE PADDING ELITE ===== */
[dir="rtl"] .ps-0 {
  padding-inline-start: 0 !important;
}
[dir="rtl"] .ps-1 {
  padding-inline-start: var(--space-1) !important;
}
[dir="rtl"] .ps-2 {
  padding-inline-start: var(--space-2) !important;
}
[dir="rtl"] .ps-3 {
  padding-inline-start: var(--space-3) !important;
}
[dir="rtl"] .ps-4 {
  padding-inline-start: var(--space-4) !important;
}
[dir="rtl"] .ps-5 {
  padding-inline-start: var(--space-5) !important;
}

[dir="rtl"] .pe-0 {
  padding-inline-end: 0 !important;
}
[dir="rtl"] .pe-1 {
  padding-inline-end: var(--space-1) !important;
}
[dir="rtl"] .pe-2 {
  padding-inline-end: var(--space-2) !important;
}
[dir="rtl"] .pe-3 {
  padding-inline-end: var(--space-3) !important;
}
[dir="rtl"] .pe-4 {
  padding-inline-end: var(--space-4) !important;
}
[dir="rtl"] .pe-5 {
  padding-inline-end: var(--space-5) !important;
}

[dir="rtl"] .px-0 {
  padding-inline: 0 !important;
}
[dir="rtl"] .px-1 {
  padding-inline: var(--space-1) !important;
}
[dir="rtl"] .px-2 {
  padding-inline: var(--space-2) !important;
}
[dir="rtl"] .px-3 {
  padding-inline: var(--space-3) !important;
}
[dir="rtl"] .px-4 {
  padding-inline: var(--space-4) !important;
}
[dir="rtl"] .px-5 {
  padding-inline: var(--space-5) !important;
}

/* ===== UTILIDADES DE BORDER ELITE =====
 * Fix 2026-09-17: --border-width/--border-style (sin prefijo) nunca se
 * definieron en ningun archivo -- CSS invalido silencioso, el border de
 * .border-start/.border-end nunca se aplicaba en RTL. Bootstrap SI define
 * los nombres reales (--bs-border-width: 1px, --bs-border-style: solid,
 * ver vendor/bootstrap.min.css) -- se usan esos, con fallback por si algun
 * dia esas variables de Bootstrap dejan de estar disponibles. */
[dir="rtl"] .border-start {
  border-inline-start: var(--bs-border-width, 1px) var(--bs-border-style, solid)
    var(--color-outline-variant) !important;
}

[dir="rtl"] .border-end {
  border-inline-end: var(--bs-border-width, 1px) var(--bs-border-style, solid)
    var(--color-outline-variant) !important;
}

[dir="rtl"] .border-start-0 {
  border-inline-start: 0 !important;
}

[dir="rtl"] .border-end-0 {
  border-inline-end: 0 !important;
}

/* Border radius logical */
[dir="rtl"] .rounded-start {
  border-start-start-radius: var(--radius-md) !important;
  border-end-start-radius: var(--radius-md) !important;
}

[dir="rtl"] .rounded-end {
  border-start-end-radius: var(--radius-md) !important;
  border-end-end-radius: var(--radius-md) !important;
}

[dir="rtl"] .rounded-start-0 {
  border-start-start-radius: 0 !important;
  border-end-start-radius: 0 !important;
}

[dir="rtl"] .rounded-end-0 {
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
}

/* ===== UTILIDADES DE POSICIÓN ELITE ===== */
[dir="rtl"] .start-0 {
  inset-inline-start: 0 !important;
}
[dir="rtl"] .start-25 {
  inset-inline-start: 25% !important;
}
[dir="rtl"] .start-50 {
  inset-inline-start: 50% !important;
}
[dir="rtl"] .start-75 {
  inset-inline-start: 75% !important;
}
[dir="rtl"] .start-100 {
  inset-inline-start: 100% !important;
}

[dir="rtl"] .end-0 {
  inset-inline-end: 0 !important;
}
[dir="rtl"] .end-25 {
  inset-inline-end: 25% !important;
}
[dir="rtl"] .end-50 {
  inset-inline-end: 50% !important;
}
[dir="rtl"] .end-75 {
  inset-inline-end: 75% !important;
}
[dir="rtl"] .end-100 {
  inset-inline-end: 100% !important;
}

/* Transform utilities */
[dir="rtl"] .translate-middle-x {
  transform: translateX(-50%) !important;
}

[dir="rtl"] .translate-start {
  transform: translateX(-100%) !important;
}

[dir="rtl"] .translate-end {
  transform: translateX(100%) !important;
}

/* ===== UTILIDADES DE FLOAT ELITE ===== */
[dir="rtl"] .float-start {
  float: inline-start !important;
}

[dir="rtl"] .float-end {
  float: inline-end !important;
}

[dir="rtl"] .float-none {
  float: none !important;
}

/* ===== FLEXBOX UTILITIES RTL ===== */
[dir="rtl"] .justify-content-start {
  justify-content: flex-start !important;
}

[dir="rtl"] .justify-content-end {
  justify-content: flex-end !important;
}

[dir="rtl"] .justify-content-between {
  justify-content: space-between !important;
}

[dir="rtl"] .align-items-start {
  align-items: flex-start !important;
}

[dir="rtl"] .align-items-end {
  align-items: flex-end !important;
}

[dir="rtl"] .align-self-start {
  align-self: flex-start !important;
}

[dir="rtl"] .align-self-end {
  align-self: flex-end !important;
}

[dir="rtl"] .order-first {
  order: -1 !important;
}

[dir="rtl"] .order-last {
  order: 13 !important;
}

/* ===== GRID UTILITIES RTL ===== */
[dir="rtl"] .justify-items-start {
  justify-items: start !important;
}

[dir="rtl"] .justify-items-end {
  justify-items: end !important;
}

[dir="rtl"] .justify-self-start {
  justify-self: start !important;
}

[dir="rtl"] .justify-self-end {
  justify-self: end !important;
}

/* ===== DISPLAY UTILITIES RTL ===== */
[dir="rtl"] .ltr-only {
  display: none !important;
}

[dir="ltr"] .rtl-only {
  display: none !important;
}

/* ===== TRANSFORM UTILITIES RTL ===== */
[dir="rtl"] .flip-horizontal {
  transform: scaleX(-1) !important;
}

[dir="rtl"] .flip-vertical {
  transform: scaleY(-1) !important;
}

[dir="rtl"] .flip-both {
  transform: scale(-1) !important;
}

/* ===== OVERFLOW UTILITIES RTL ===== */
[dir="rtl"] .overflow-x-auto {
  overflow-x: auto !important;
}

[dir="rtl"] .overflow-x-hidden {
  overflow-x: hidden !important;
}

[dir="rtl"] .overflow-x-scroll {
  overflow-x: scroll !important;
}

/* ===== RESPONSIVE BREAKPOINTS RTL ===== */
/* SM (576px+) */
@media (min-width: 576px) {
  [dir="rtl"] .float-sm-start {
    float: inline-start !important;
  }
  [dir="rtl"] .float-sm-end {
    float: inline-end !important;
  }
  [dir="rtl"] .float-sm-none {
    float: none !important;
  }

  [dir="rtl"] .text-sm-start {
    text-align: start !important;
  }
  [dir="rtl"] .text-sm-end {
    text-align: end !important;
  }
  [dir="rtl"] .text-sm-center {
    text-align: center !important;
  }

  [dir="rtl"] .ms-sm-auto {
    margin-inline-start: auto !important;
  }
  [dir="rtl"] .me-sm-auto {
    margin-inline-end: auto !important;
  }

  [dir="rtl"] .start-sm-0 {
    inset-inline-start: 0 !important;
  }
  [dir="rtl"] .start-sm-50 {
    inset-inline-start: 50% !important;
  }
  [dir="rtl"] .start-sm-100 {
    inset-inline-start: 100% !important;
  }

  [dir="rtl"] .end-sm-0 {
    inset-inline-end: 0 !important;
  }
  [dir="rtl"] .end-sm-50 {
    inset-inline-end: 50% !important;
  }
  [dir="rtl"] .end-sm-100 {
    inset-inline-end: 100% !important;
  }
}

/* MD (768px+) */
@media (min-width: 768px) {
  [dir="rtl"] .float-md-start {
    float: inline-start !important;
  }
  [dir="rtl"] .float-md-end {
    float: inline-end !important;
  }
  [dir="rtl"] .float-md-none {
    float: none !important;
  }

  [dir="rtl"] .text-md-start {
    text-align: start !important;
  }
  [dir="rtl"] .text-md-end {
    text-align: end !important;
  }
  [dir="rtl"] .text-md-center {
    text-align: center !important;
  }

  [dir="rtl"] .ms-md-auto {
    margin-inline-start: auto !important;
  }
  [dir="rtl"] .me-md-auto {
    margin-inline-end: auto !important;
  }

  [dir="rtl"] .start-md-0 {
    inset-inline-start: 0 !important;
  }
  [dir="rtl"] .start-md-50 {
    inset-inline-start: 50% !important;
  }
  [dir="rtl"] .start-md-100 {
    inset-inline-start: 100% !important;
  }

  [dir="rtl"] .end-md-0 {
    inset-inline-end: 0 !important;
  }
  [dir="rtl"] .end-md-50 {
    inset-inline-end: 50% !important;
  }
  [dir="rtl"] .end-md-100 {
    inset-inline-end: 100% !important;
  }
}

/* LG (992px+) */
@media (min-width: 992px) {
  [dir="rtl"] .float-lg-start {
    float: inline-start !important;
  }
  [dir="rtl"] .float-lg-end {
    float: inline-end !important;
  }
  [dir="rtl"] .float-lg-none {
    float: none !important;
  }

  [dir="rtl"] .text-lg-start {
    text-align: start !important;
  }
  [dir="rtl"] .text-lg-end {
    text-align: end !important;
  }
  [dir="rtl"] .text-lg-center {
    text-align: center !important;
  }

  [dir="rtl"] .ms-lg-auto {
    margin-inline-start: auto !important;
  }
  [dir="rtl"] .me-lg-auto {
    margin-inline-end: auto !important;
  }

  [dir="rtl"] .start-lg-0 {
    inset-inline-start: 0 !important;
  }
  [dir="rtl"] .start-lg-50 {
    inset-inline-start: 50% !important;
  }
  [dir="rtl"] .start-lg-100 {
    inset-inline-start: 100% !important;
  }

  [dir="rtl"] .end-lg-0 {
    inset-inline-end: 0 !important;
  }
  [dir="rtl"] .end-lg-50 {
    inset-inline-end: 50% !important;
  }
  [dir="rtl"] .end-lg-100 {
    inset-inline-end: 100% !important;
  }
}

/* XL (1200px+) */
@media (min-width: 1200px) {
  [dir="rtl"] .float-xl-start {
    float: inline-start !important;
  }
  [dir="rtl"] .float-xl-end {
    float: inline-end !important;
  }
  [dir="rtl"] .float-xl-none {
    float: none !important;
  }

  [dir="rtl"] .text-xl-start {
    text-align: start !important;
  }
  [dir="rtl"] .text-xl-end {
    text-align: end !important;
  }
  [dir="rtl"] .text-xl-center {
    text-align: center !important;
  }

  [dir="rtl"] .ms-xl-auto {
    margin-inline-start: auto !important;
  }
  [dir="rtl"] .me-xl-auto {
    margin-inline-end: auto !important;
  }

  [dir="rtl"] .start-xl-0 {
    inset-inline-start: 0 !important;
  }
  [dir="rtl"] .start-xl-50 {
    inset-inline-start: 50% !important;
  }
  [dir="rtl"] .start-xl-100 {
    inset-inline-start: 100% !important;
  }

  [dir="rtl"] .end-xl-0 {
    inset-inline-end: 0 !important;
  }
  [dir="rtl"] .end-xl-50 {
    inset-inline-end: 50% !important;
  }
  [dir="rtl"] .end-xl-100 {
    inset-inline-end: 100% !important;
  }
}

/* XXL (1400px+) */
@media (min-width: 1400px) {
  [dir="rtl"] .float-xxl-start {
    float: inline-start !important;
  }
  [dir="rtl"] .float-xxl-end {
    float: inline-end !important;
  }
  [dir="rtl"] .float-xxl-none {
    float: none !important;
  }

  [dir="rtl"] .text-xxl-start {
    text-align: start !important;
  }
  [dir="rtl"] .text-xxl-end {
    text-align: end !important;
  }
  [dir="rtl"] .text-xxl-center {
    text-align: center !important;
  }

  [dir="rtl"] .ms-xxl-auto {
    margin-inline-start: auto !important;
  }
  [dir="rtl"] .me-xxl-auto {
    margin-inline-end: auto !important;
  }

  [dir="rtl"] .start-xxl-0 {
    inset-inline-start: 0 !important;
  }
  [dir="rtl"] .start-xxl-50 {
    inset-inline-start: 50% !important;
  }
  [dir="rtl"] .start-xxl-100 {
    inset-inline-start: 100% !important;
  }

  [dir="rtl"] .end-xxl-0 {
    inset-inline-end: 0 !important;
  }
  [dir="rtl"] .end-xxl-50 {
    inset-inline-end: 50% !important;
  }
  [dir="rtl"] .end-xxl-100 {
    inset-inline-end: 100% !important;
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
[dir="rtl"] .flip-horizontal,
[dir="rtl"] .flip-vertical,
[dir="rtl"] .flip-both {
  contain: layout style;
  will-change: transform;
}

/* ===== ACCESSIBILITY UTILITIES ===== */
[dir="rtl"] .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

[dir="rtl"] .visually-hidden-focusable:focus,
[dir="rtl"] .visually-hidden-focusable:focus-within {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* ===== PRINT UTILITIES ===== */
@media print {
  [dir="rtl"] .d-print-none {
    display: none !important;
  }

  [dir="rtl"] .d-print-block {
    display: block !important;
  }

  [dir="rtl"] .d-print-inline {
    display: inline !important;
  }

  [dir="rtl"] .d-print-inline-block {
    display: inline-block !important;
  }
}

/* ===== DEBUGGING RTL ELITE ===== */
@media screen and (max-width: 0px) {
  [dir="rtl"] .debug-rtl-utilities::before {
    content: "🛠️ RTL Utilities ELITE";
    position: fixed;
    top: 350px;
    right: 10px;
    background: var(--color-purple-500);
    color: var(--color-on-purple);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    z-index: var(--z-debug);
    opacity: 0.8;
  }
}