/**
 * RTL Base System - Internacionalización de clase mundial
 * Inspirado en Google Material Design, Microsoft Fluent, Apple HIG
 * Soporte para Arabic, Hebrew, Persian, Urdu
 */

/* design-system.css YA se carga como <link> directo y versionado en
 * templates/partials/head/22-design-system-css.html -- este @import
 * quedaba redundante y ademas tenia el mismo bug de cache-busting roto
 * que motivo este fix (ver nota en rtl.css, 2026-09-17). Las variables
 * CSS (custom properties) que este archivo consume via var(--...) se
 * siguen resolviendo correctamente sin este @import: todos los
 * <link rel="stylesheet"> son render-blocking, el navegador construye
 * el CSSOM completo (combinando TODOS los stylesheets) antes de pintar,
 * asi que el orden relativo de <link> en el documento no afecta la
 * resolucion de una variable que solo se DEFINE en un lugar (aqui,
 * design-system.css) y se CONSUME en otro -- verificado empiricamente
 * antes de eliminar este import, no asumido. */

/* ===== LOGICAL PROPERTIES BASE ===== */
:root {
  /* Direcciones lógicas */
  --direction: ltr;
  --text-align-start: left;
  --text-align-end: right;
  --border-start: border-left;
  --border-end: border-right;
  --margin-start: margin-left;
  --margin-end: margin-right;
  --padding-start: padding-left;
  --padding-end: padding-right;
}

[dir="rtl"] {
  /* Cambiar variables para RTL */
  --direction: rtl;
  --text-align-start: right;
  --text-align-end: left;
  --border-start: border-right;
  --border-end: border-left;
  --margin-start: margin-right;
  --margin-end: margin-left;
  --padding-start: padding-right;
  --padding-end: padding-left;
}

/* ===== DOCUMENT LEVEL RTL ===== */
[dir="rtl"] {
  text-align: start;
  direction: rtl;
}

[dir="rtl"] body {
  text-align: start;
  font-family: var(
    --font-family-rtl,
    "Noto Sans Arabic",
    "Segoe UI",
    system-ui,
    sans-serif
  );
}

/* ===== MODERN LOGICAL PROPERTIES ===== */
/* Usar propiedades lógicas modernas en lugar de left/right */
.container,
.card,
.btn,
.form-control,
.dropdown-menu {
  margin-inline: auto;
  padding-inline: var(--space-4);
  border-inline: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
}

/* ===== FLEXBOX INTELLIGENT ===== */
[dir="rtl"] .d-flex:not(.flex-column):not([data-preserve-direction]) {
  flex-direction: row-reverse;
}

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

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

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

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

/* ===== GRID SYSTEM RTL ===== */
[dir="rtl"] .row {
  flex-direction: row-reverse;
}

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

/* Grid offsets usando logical properties */
[dir="rtl"] .offset-1 {
  margin-inline-start: 8.333333%;
  margin-inline-end: 0;
}
[dir="rtl"] .offset-2 {
  margin-inline-start: 16.666667%;
  margin-inline-end: 0;
}
[dir="rtl"] .offset-3 {
  margin-inline-start: 25%;
  margin-inline-end: 0;
}
[dir="rtl"] .offset-4 {
  margin-inline-start: 33.333333%;
  margin-inline-end: 0;
}
[dir="rtl"] .offset-5 {
  margin-inline-start: 41.666667%;
  margin-inline-end: 0;
}
[dir="rtl"] .offset-6 {
  margin-inline-start: 50%;
  margin-inline-end: 0;
}

/* ===== TYPOGRAPHY RTL ===== */
[dir="rtl"] {
  /* Mejor renderizado para idiomas RTL */
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "liga", "kern", "calt";
  font-feature-settings: "liga", "kern", "calt";

  /* Espaciado de letras para idiomas RTL */
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  text-align: start;
  font-weight: var(--font-weight-bold);
}

[dir="rtl"] p,
[dir="rtl"] .lead {
  text-align: start;
  line-height: var(--line-height-relaxed);
}

/* ===== FORM CONTROLS RTL ===== */
[dir="rtl"] .form-control,
[dir="rtl"] .form-select,
[dir="rtl"] .form-check-input {
  text-align: start;
}

/* NOTA: los inputs de email/url/tel (datos inherentemente LTR: una
 * direccion de correo, una URL, un telefono se leen/escriben siempre de
 * izquierda a derecha, sin importar el idioma de la interfaz) YA NO se
 * corrigen aqui via CSS -- ver el atributo HTML dir="ltr" agregado
 * directamente a cada <input type="email/url/tel"> en sus templates.
 * El W3C i18n recomienda explicitamente el atributo dir sobre la
 * propiedad CSS direction para este caso: el atributo activa aislamiento
 * bidi real en el navegador (bidi isolation), que CSS direction por si
 * solo no replica -- ver
 * https://www.w3.org/International/articles/inline-bidi-markup/
 * ("tightly wrap every opposite-direction phrase in markup, and use the
 * dir attribute on that markup"). Bug real que motivo esto (2026-09-17,
 * screenshot real): el placeholder "tuemail@example.com" del campo de
 * registro se veia literalmente como "nail@example.com" -- el inicio del
 * texto se cortaba porque el input heredaba direction:rtl del documento. */

[dir="rtl"] .form-check {
  padding-inline-start: 0;
  padding-inline-end: 1.5em;
}

[dir="rtl"] .form-check-input {
  margin-inline-start: 0;
  margin-inline-end: -1.5em;
}

[dir="rtl"] .form-check-label {
  padding-inline-start: 0;
  padding-inline-end: 0.5em;
}

/* ===== BUTTONS RTL ===== */
[dir="rtl"] .btn-group {
  flex-direction: row-reverse;
}

[dir="rtl"] .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

[dir="rtl"] .btn-group > .btn:not(:first-child) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  margin-inline-start: -1px;
}

/* ===== NAVIGATION RTL =====
 * flex-direction:row-reverse solo tiene sentido en el breakpoint donde
 * Bootstrap mismo pone .navbar-nav en fila horizontal para el layout de
 * escritorio (.navbar-expand-lg .navbar-nav { flex-direction: row }, solo
 * activo desde min-width:992px -- ver bootstrap.min.css). Por debajo de
 * ese breakpoint, .navbar-nav es flex-direction:column por defecto (los
 * links se apilan verticalmente dentro del menu desplegable movil).
 *
 * Bug real confirmado en produccion (2026-09-17): esta regla estaba SIN
 * scope de breakpoint, asi que en arabe (RTL) tambien forzaba row-reverse
 * en mobile -- los ~5 links de navegacion quedaban en una sola fila
 * horizontal en vez de apilados, haciendo que .navbar-collapse se
 * desbordara a ~665px de ancho en un viewport de 375px, con gran parte
 * del menu (325px) cortada e invisible al lado izquierdo (RTL) del
 * viewport. Fix: mismo scope de breakpoint que su contraparte LTR de
 * Bootstrap, para que mobile en RTL se comporte identico a mobile en
 * LTR (apilado vertical), y el espejo horizontal solo aplique en
 * escritorio, donde ya funcionaba correctamente. */
@media (min-width: 992px) {
  [dir="rtl"] .navbar-nav {
    flex-direction: row-reverse;
  }
}

[dir="rtl"] .navbar-brand {
  margin-inline-end: auto;
  margin-inline-start: 0;
}

[dir="rtl"] .navbar-toggler {
  border: none;
  padding: var(--space-2);
}

/* ===== BREADCRUMBS RTL ===== */
[dir="rtl"] .breadcrumb {
  flex-direction: row-reverse;
}

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  content: var(--bs-breadcrumb-divider, "/");
  padding-inline-start: 0;
  padding-inline-end: var(--space-2);
  transform: scaleX(-1);
}

/* ===== PAGINATION RTL ===== */
[dir="rtl"] .pagination {
  flex-direction: row-reverse;
}

[dir="rtl"] .page-link {
  margin-inline-start: -1px;
  margin-inline-end: 0;
}

/* ===== ALERTS RTL ===== */
[dir="rtl"] .alert-dismissible {
  padding-inline-end: 3rem;
  padding-inline-start: 1.25rem;
}

[dir="rtl"] .alert-dismissible .btn-close {
  inset-inline-end: auto;
  inset-inline-start: 0;
}

/* ===== CARDS RTL ===== */
[dir="rtl"] .card-header {
  text-align: start;
}

[dir="rtl"] .card-body {
  text-align: start;
}

[dir="rtl"] .card-footer {
  text-align: start;
}

/* ===== TABLES RTL ===== */
[dir="rtl"] .table {
  text-align: start;
}

[dir="rtl"] .table th,
[dir="rtl"] .table td {
  text-align: start;
}

[dir="rtl"] .table-responsive {
  direction: rtl;
}

/* ===== MODALS RTL ===== */
[dir="rtl"] .modal-header {
  text-align: start;
}

[dir="rtl"] .modal-body {
  text-align: start;
}

[dir="rtl"] .modal-footer {
  justify-content: flex-start;
  flex-direction: row-reverse;
}

[dir="rtl"] .modal-header .btn-close {
  margin-inline-start: auto;
  margin-inline-end: -0.5rem;
}

/* ===== CSS GRID RTL ===== */
[dir="rtl"] .grid {
  direction: rtl;
}

[dir="rtl"] .grid-auto-flow-column {
  grid-auto-flow: column;
  direction: rtl;
}

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

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

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

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

/* ===== RTL UTILITIES ===== */
[dir="rtl"] .text-start {
  text-align: start !important;
}

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

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

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

[dir="rtl"] .ps-0 {
  padding-inline-start: 0 !important;
}
[dir="rtl"] .ps-1 {
  padding-inline-start: 0.25rem !important;
}
[dir="rtl"] .ps-2 {
  padding-inline-start: 0.5rem !important;
}
[dir="rtl"] .ps-3 {
  padding-inline-start: 1rem !important;
}
[dir="rtl"] .ps-4 {
  padding-inline-start: 1.5rem !important;
}
[dir="rtl"] .ps-5 {
  padding-inline-start: 3rem !important;
}

[dir="rtl"] .pe-0 {
  padding-inline-end: 0 !important;
}
[dir="rtl"] .pe-1 {
  padding-inline-end: 0.25rem !important;
}
[dir="rtl"] .pe-2 {
  padding-inline-end: 0.5rem !important;
}
[dir="rtl"] .pe-3 {
  padding-inline-end: 1rem !important;
}
[dir="rtl"] .pe-4 {
  padding-inline-end: 1.5rem !important;
}
[dir="rtl"] .pe-5 {
  padding-inline-end: 3rem !important;
}