/**
 * i18n.css — Estilos para soporte RTL e internacionalización
 * Se activa cuando html[dir="rtl"] (árabe, hebreo, etc.)
 * Invierte márgenes, paddings, alineamientos y flechas para idiomas RTL.
 */

/* ══════════════════════════════════════════
 *  ALINEAMIENTO DE TEXTO
 * ══════════════════════════════════════════ */

html[dir="rtl"] body {
  direction: rtl;
  unicode-bidi: embed;
}

html[dir="rtl"] p,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] li,
html[dir="rtl"] td,
html[dir="rtl"] th,
html[dir="rtl"] label,
html[dir="rtl"] span,
html[dir="rtl"] div {
  text-align: right;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
  direction: rtl;
}

/* ══════════════════════════════════════════
 *  FLEXBOX — INVERTIR DIRECCIÓN
 * ══════════════════════════════════════════ */

html[dir="rtl"] .flex-row,
html[dir="rtl"] .d-flex,
html[dir="rtl"] [class*="flex-"] {
  flex-direction: row-reverse;
}

html[dir="rtl"] .flex-col,
html[dir="rtl"] [class*="flex-col"] {
  flex-direction: column; /* columnas no se invierten */
}

/* ══════════════════════════════════════════
 *  MÁRGENES — INTERCAMBIO LEFT ↔ RIGHT
 * ══════════════════════════════════════════ */

/* margin-left → margin-right y viceversa */
html[dir="rtl"] .ml-auto  { margin-left:  unset !important; margin-right: auto     !important; }
html[dir="rtl"] .mr-auto  { margin-right: unset !important; margin-left:  auto     !important; }
html[dir="rtl"] .ml-1     { margin-left:  unset !important; margin-right: 0.25rem  !important; }
html[dir="rtl"] .mr-1     { margin-right: unset !important; margin-left:  0.25rem  !important; }
html[dir="rtl"] .ml-2     { margin-left:  unset !important; margin-right: 0.5rem   !important; }
html[dir="rtl"] .mr-2     { margin-right: unset !important; margin-left:  0.5rem   !important; }
html[dir="rtl"] .ml-3     { margin-left:  unset !important; margin-right: 0.75rem  !important; }
html[dir="rtl"] .mr-3     { margin-right: unset !important; margin-left:  0.75rem  !important; }
html[dir="rtl"] .ml-4     { margin-left:  unset !important; margin-right: 1rem     !important; }
html[dir="rtl"] .mr-4     { margin-right: unset !important; margin-left:  1rem     !important; }
html[dir="rtl"] .ml-6     { margin-left:  unset !important; margin-right: 1.5rem   !important; }
html[dir="rtl"] .mr-6     { margin-right: unset !important; margin-left:  1.5rem   !important; }
html[dir="rtl"] .ml-8     { margin-left:  unset !important; margin-right: 2rem     !important; }
html[dir="rtl"] .mr-8     { margin-right: unset !important; margin-left:  2rem     !important; }

/* ══════════════════════════════════════════
 *  PADDINGS — INTERCAMBIO LEFT ↔ RIGHT
 * ══════════════════════════════════════════ */

html[dir="rtl"] .pl-2   { padding-left:  unset !important; padding-right: 0.5rem  !important; }
html[dir="rtl"] .pr-2   { padding-right: unset !important; padding-left:  0.5rem  !important; }
html[dir="rtl"] .pl-3   { padding-left:  unset !important; padding-right: 0.75rem !important; }
html[dir="rtl"] .pr-3   { padding-right: unset !important; padding-left:  0.75rem !important; }
html[dir="rtl"] .pl-4   { padding-left:  unset !important; padding-right: 1rem    !important; }
html[dir="rtl"] .pr-4   { padding-right: unset !important; padding-left:  1rem    !important; }
html[dir="rtl"] .pl-6   { padding-left:  unset !important; padding-right: 1.5rem  !important; }
html[dir="rtl"] .pr-6   { padding-right: unset !important; padding-left:  1.5rem  !important; }
html[dir="rtl"] .pl-8   { padding-left:  unset !important; padding-right: 2rem    !important; }
html[dir="rtl"] .pr-8   { padding-right: unset !important; padding-left:  2rem    !important; }

/* ══════════════════════════════════════════
 *  BORDES — INTERCAMBIO LEFT ↔ RIGHT
 * ══════════════════════════════════════════ */

html[dir="rtl"] .border-l   { border-left:  none !important; border-right: 1px solid currentColor !important; }
html[dir="rtl"] .border-r   { border-right: none !important; border-left:  1px solid currentColor !important; }
html[dir="rtl"] .border-l-2 { border-left:  none !important; border-right: 2px solid currentColor !important; }
html[dir="rtl"] .border-r-2 { border-right: none !important; border-left:  2px solid currentColor !important; }
html[dir="rtl"] .border-l-4 { border-left:  none !important; border-right: 4px solid currentColor !important; }
html[dir="rtl"] .border-r-4 { border-right: none !important; border-left:  4px solid currentColor !important; }

/* Bordes de sidebar / nav */
html[dir="rtl"] .sidebar { border-right: none; border-left: 1px solid #e5e7eb; }
html[dir="rtl"] .nav-item.active { border-right: none; border-left: 3px solid #2563eb; }

/* ══════════════════════════════════════════
 *  FLECHAS E ICONOS DIRECCIONALES
 * ══════════════════════════════════════════ */

html[dir="rtl"] .arrow,
html[dir="rtl"] .next-icon,
html[dir="rtl"] .chevron-right,
html[dir="rtl"] .icon-arrow-right,
html[dir="rtl"] [class*="arrow-right"],
html[dir="rtl"] [class*="chevron-right"] {
  transform: scaleX(-1);
}

/* Iconos inline SVG de flecha */
html[dir="rtl"] svg.arrow,
html[dir="rtl"] svg.chevron {
  transform: scaleX(-1);
}

/* Botones con iconos de avance/retroceso */
html[dir="rtl"] .btn-next   .icon { transform: scaleX(-1); }
html[dir="rtl"] .btn-prev   .icon { transform: scaleX(-1); }
html[dir="rtl"] .btn-forward .icon { transform: scaleX(-1); }
html[dir="rtl"] .btn-back    .icon { transform: scaleX(-1); }

/* ══════════════════════════════════════════
 *  LISTAS
 * ══════════════════════════════════════════ */

html[dir="rtl"] ul,
html[dir="rtl"] ol {
  padding-left:  0;
  padding-right: 1.5rem;
}

html[dir="rtl"] .list-disc,
html[dir="rtl"] .list-decimal {
  padding-right: 1.5rem;
  padding-left:  0;
}

/* ══════════════════════════════════════════
 *  FORMULARIOS
 * ══════════════════════════════════════════ */

html[dir="rtl"] .form-group label {
  display: block;
  text-align: right;
}

html[dir="rtl"] .form-check {
  padding-left:  0;
  padding-right: 1.5rem;
}

html[dir="rtl"] .form-check .form-check-input {
  float: right;
  margin-left: 0;
  margin-right: -1.5rem;
}

/* ══════════════════════════════════════════
 *  POSICIONAMIENTO
 * ══════════════════════════════════════════ */

html[dir="rtl"] .left-0  { left:  unset !important; right: 0    !important; }
html[dir="rtl"] .right-0 { right: unset !important; left:  0    !important; }
html[dir="rtl"] .left-4  { left:  unset !important; right: 1rem !important; }
html[dir="rtl"] .right-4 { right: unset !important; left:  1rem !important; }

/* ══════════════════════════════════════════
 *  TABLAS
 * ══════════════════════════════════════════ */

html[dir="rtl"] table {
  direction: rtl;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
  text-align: right;
}

/* ══════════════════════════════════════════
 *  MODAL / DRAWER
 * ══════════════════════════════════════════ */

html[dir="rtl"] .modal .close-btn {
  left:  1rem;
  right: auto;
}

html[dir="rtl"] .drawer-left  { left: auto; right: 0; }
html[dir="rtl"] .drawer-right { right: auto; left: 0; }

/* ══════════════════════════════════════════
 *  NOTIFICACIONES / TOAST
 * ══════════════════════════════════════════ */

html[dir="rtl"] .toast,
html[dir="rtl"] .notification {
  right: auto;
  left: 1rem;
  text-align: right;
}