/* ========================================================================== arabe.css — lo que cambia cuando el texto se escribe unido y de derecha a izquierda (2026-09-12) Se sirve SOLO en árabe (`base.html` la enlaza con `{% if idioma == 'ar' %}`) y CARGA LA ÚLTIMA, por el mismo motivo que `cjk.css`: en una hoja anterior perdería la cascada contra `chrome.css` y `publica.css` (§6.106). LA RETÍCULA NO SE ARREGLA AQUÍ. La dirección de la maqueta la dan `dir="rtl"` en el y las propiedades LÓGICAS de las hojas públicas, convertidas y medidas con cero diferencias en español (§6.107 para el panel; 225 cambios y 12.053 elementos para la web pública). Esta hoja se ocupa de lo que las propiedades lógicas NO pueden resolver: la TIPOGRAFÍA. CUATRO COSAS QUE NO SE ARREGLAN TRADUCIENDO: 1. EL ÁRABE ES CURSIVO. Las letras de una palabra van UNIDAS entre sí, y el `letter-spacing` —que en las latinas es decoración— las DESCONECTA. En chino separar ideogramas desarma un rótulo (§6.106); en árabe es peor: rompe las ligaduras y la palabra se vuelve ilegible. Por eso la regla es GENÉRICA y con `!important`, igual que en `cjk.css`: hay más de 200 declaraciones de tracking repartidas por catorce hojas y una lista de clases escrita a mano se queda corta en silencio. 2. NO HAY VERSALITAS. `text-transform: uppercase` no hace nada sobre una letra árabe, pero el tracking que suele acompañarla sí (punto 1). 3. INTERLINEADO. El árabe tiene ascendentes y DESCENDENTES profundos y los puntos diacríticos van por encima y por debajo: con el `line-height` apretado de un titular latino (1,0-1,1) las líneas se tocan y los puntos de una línea chocan con la siguiente. 4. LOS DATOS SIGUEN SIENDO LATINOS. Un correo, un teléfono, un IBAN, un CUPS o un DNI se escriben de izquierda a derecha también en una página árabe. Un campo que los recoge en `direction: rtl` coloca el cursor y la puntuación al revés mientras se teclean. ========================================================================== */ /* ---- Fuentes. Ninguna de las tres de marca tiene un solo glifo árabe, y el navegador resuelve la fuente GLIFO A GLIFO: se deja la de marca DELANTE (el latino y el wordmark conservan su dibujo) y a continuación una pila árabe del sistema, ANTES de `system-ui`, para que la letra no dependa de qué equipo tenga cada visitante. Sin carga de red: una fuente árabe web pesa cientos de KB y la pila del sistema cubre Windows (Segoe UI, Tahoma), macOS/iOS (Geeza Pro) y Android/Linux (Noto). Se redefine la VARIABLE en `html:lang` —(0,1,1) gana a `:root` (0,1,0)— para no tocar `tokens.css`, que sirve a los otros ocho idiomas. ---- */ html:lang(ar) { --lg-font-arabe: 'Noto Sans Arabic', 'Segoe UI', 'Geeza Pro', Tahoma, 'Arial'; --lg-font-brand: 'Space Grotesk', var(--lg-font-arabe), system-ui, sans-serif; --lg-font-ui: 'Inter', var(--lg-font-arabe), system-ui, sans-serif; } /* ---- 3. Interlineado: un escalón, no más — pasarse rompe el ritmo vertical de las tarjetas (mismo criterio que el chino). ---- */ :lang(ar) { line-height: 1.8; } /* ---- 1. y 2. El tracking de las latinas, apagado en TODO. ---- */ html:lang(ar) *, html:lang(ar) *::before, html:lang(ar) *::after { letter-spacing: normal !important; } /* LA EXCEPCIÓN, calcada de `cjk.css`: contenido latino por construcción, donde el tracking no es decoración sino lo que hace legible una cadena que se copia a mano. Entre dos `!important` del mismo origen decide la especificidad, y estas son mayores. */ html:lang(ar) .co-codigo-otp { letter-spacing: 0.35em !important; } html:lang(ar) .co-secreto__valor { letter-spacing: 0.18em !important; } html:lang(ar) .co-recovery__item { letter-spacing: 0.1em !important; } html:lang(ar) .co-mascara__valor { letter-spacing: 0.06em !important; } /* El wordmark es LATINO y no se toca: «luzgasia» conserva su dibujo y su interlineado, que es el de su lockup. */ html:lang(ar) .lz-marca, html:lang(ar) [class*="wordmark"], html:lang(ar) [class*="lzk-"] { line-height: normal; } /* ---- 4. Los campos de DATOS latinos se escriben de izquierda a derecha. `direction: ltr` pone el cursor y la puntuación donde tocan mientras se teclea; `text-align: end` (que con `ltr` es la derecha) los deja alineados con las etiquetas árabes, que van a la derecha. Los CÓDIGOS del sitio (CUPS, IBAN, DNI) se reconocen por su `autocomplete`/`inputmode`/nombre, no por una lista de clases. ---- */ html:lang(ar) input[type="email"], html:lang(ar) input[type="tel"], html:lang(ar) input[type="url"], html:lang(ar) input[type="number"], html:lang(ar) input[inputmode="numeric"], html:lang(ar) input[inputmode="decimal"], html:lang(ar) input[autocomplete="email"], html:lang(ar) input[autocomplete="tel"], html:lang(ar) input[name*="iban" i], html:lang(ar) input[name*="cups" i], html:lang(ar) input[name*="dni" i], html:lang(ar) input[name*="nif" i], html:lang(ar) input[name*="cif" i], html:lang(ar) input[name*="documento" i], html:lang(ar) input[name*="postal" i] { direction: ltr; text-align: end; } /* ========================================================================== 5. LO QUE SE MUEVE. Las propiedades lógicas colocan las cajas, pero no dan la vuelta a un `translateX`, a un degradado de 90° ni a un `transform-origin: left`: son coordenadas FÍSICAS. (2026-09-13) `--lg-sentido` vale -1 SOLO aquí. Las hojas públicas lo leen con respaldo `var(--lg-sentido, 1)`, así que en los otros ocho idiomas multiplican por 1 y no se mueve ni un píxel: el paso del funnel que entra, la flecha de «volver», las marquesinas y la bola del interruptor. ========================================================================== */ html[dir="rtl"] { --lg-sentido: -1; } /* Las barras que se RELLENAN crecen desde el inicio de la lectura, que en árabe es la derecha. Se da la vuelta a la PISTA entera —relleno, degradado que acaba en ámbar y la chispa de la punta—, no a cada pieza: una sola regla por barra y ninguna tiene texto dentro que salga del revés. `scale` es una propiedad aparte de `transform` y se compone con él, así que no pisa el `scaleX` con el que el JS mueve el relleno. */ html[dir="rtl"] .progreso__barra, html[dir="rtl"] .factura-preview__barra, html[dir="rtl"] .area-progreso__barra, html[dir="rtl"] .progreso-scroll, html[dir="rtl"] .lzi-sub__barra, html[dir="rtl"] .lzi-hitos__linea { scale: -1 1; } /* «Volver» apunta hacia donde se vuelve: a la derecha. */ html[dir="rtl"] .svia__volver::before { content: "→"; } /* ---- 6. LO QUE ES LATINO POR DIBUJO NO SE DA LA VUELTA. (2026-09-13) - El wordmark es una fila FLEX de letras sueltas (el efecto «electrificado»): con `dir="rtl"` la fila se invierte y salía «iagasluz». Se aísla en LTR. - Un `` de SVG sin `text-anchor` arranca en su `x` hacia el INICIO de la lectura: en RTL crece hacia la izquierda y el código tecleado del CUPS se cortaba fuera de su caja. Las ilustraciones están dibujadas en coordenadas LTR, así que su texto va en LTR; una palabra árabe dentro se sigue uniendo bien (la dirección base no rompe la escritura). ---- */ html[dir="rtl"] .lzk-marca { direction: ltr; unicode-bidi: isolate; } html[dir="rtl"] svg text { direction: ltr; }