/* ============================================================ typeset.css — ALINEACIÓN Y JUSTIFICACIÓN v18.0 ------------------------------------------------------------ Una sola hoja se hace cargo de cómo se compone el texto, para que la decisión no quede repartida entre siete ficheros. CRITERIO. No se justifica todo a ciegas: la justificación sólo mejora la lectura en bloques de prosa con anchura suficiente para repartir el espacio sin abrir ríos blancos. Por eso: · PROSA (párrafos, avisos, preguntas frecuentes, listas de principios) → justificada, con partición de palabras. · RÓTULOS, CIFRAS, BOTONES, PESTAÑAS, ETIQUETAS → jamás. Un texto corto justificado se estira de forma grotesca. · TABLAS → cifras a la derecha y en cifra tabular, para que las unidades queden en columna; texto a la izquierda. · MÓVIL ESTRECHO → se retira la justificación por debajo de cierta anchura: con renglones de pocas palabras los huecos entre palabras se vuelven insalvables. La partición de palabras es imprescindible: justificar sin partir es lo que produce los ríos blancos que se le achacan a la justificación. Requiere que el elemento declare su idioma, y de ello se encarga I18N al fijar `lang` en . ============================================================ */ /* ============================================================ 1 · CIMIENTO ============================================================ */ /* Partición activa en toda la obra. Los navegadores necesitan `lang` para elegir el diccionario; I18N lo mantiene al día. */ html { -webkit-hyphens: auto; hyphens: auto; /* No partir dejando menos de estas letras huérfanas. */ -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; hyphenate-limit-chars: 6 3 3; } /* Evita que una palabra larga (un término anatómico, una URL) desborde su contenedor sin posibilidad de partirse. */ body { overflow-wrap: break-word; text-wrap: pretty; /* reparte los últimos renglones con criterio */ } /* Los idiomas de escritura ideográfica no se parten: no tienen guion de partición y el resultado sería incorrecto. */ html[lang="zh"], html[lang="ja"], html[lang="ko"] { -webkit-hyphens: none; hyphens: none; } /* ============================================================ 2 · PROSA JUSTIFICADA ------------------------------------------------------------ Se enumera explícitamente cada bloque de prosa. Un selector universal habría alcanzado también a rótulos y cifras. ============================================================ */ .seo-landing p, .seo-landing li, .seo-features li, .seo-faq details > p, .seo-disclaimer, .splash-claim, .guide-hero p, .info-card > p, .guide-card > p, .guide-list li, .legal-inline-content p, .legal-section p, .legal-list li, .ars-section-sub { text-align: justify; /* El último renglón de un párrafo justificado va a la izquierda; estirarlo sería un error de composición. */ text-align-last: left; text-justify: inter-word; } /* En árabe o hebreo el último renglón iría a la derecha. La obra aún no incluye idiomas de derecha a izquierda, pero la regla evita una corrección futura. */ [dir="rtl"] .seo-landing p, [dir="rtl"] .guide-hero p, [dir="rtl"] .legal-inline-content p, [dir="rtl"] .info-card > p { text-align-last: right; } /* ============================================================ 3 · LO QUE NUNCA SE JUSTIFICA ------------------------------------------------------------ Rótulos, cifras y controles. Se declara después de la sección anterior para ganar por orden de aparición cuando un elemento quede alcanzado por ambas. ============================================================ */ h1, h2, h3, h4, h5, h6, button, .btn, .nav-item, .tab-btn, .chip, .filter-chip, .splash-btn, .splash-eyebrow, .splash-stat, .splash-stat-num, .splash-stat-label, .splash-badges li, .splash-credits, .seo-stats li, .seo-stats b, .seo-stats span, .seo-terms li, .seo-faq summary, .badge, .tag, .pill, .pair-id, .pair-badge, .body-view-label, .mag-view-role, .magnet-label, .click-hint, .polarity-label, .guide-num, .info-icon, .stat-num, .stat-label, .sidebar-stat-num, .ars-chart-title, input, select, textarea, option, label, th, caption, figcaption, time, code, kbd, pre { /* `inherit`, NO `initial`. `initial` equivale a «izquierda» y arrasaría el centrado que estos elementos reciben de su contenedor: los créditos y el selector de idioma de la portada se descolgaron a la izquierda por ese motivo. `inherit` sólo impide que se justifiquen, respetando la alineación que el diseño ya les había dado. */ text-align: inherit; text-align-last: auto; -webkit-hyphens: none; hyphens: none; } /* Las cabeceras de tabla son la excepción: no heredan de un contenedor centrado, sino que fijan su propia convención. */ th { text-align: left; } /* Los encabezados admiten un equilibrado de renglones que evita dejar una palabra sola en la última línea. */ h1, h2, h3, .splash-title, .guide-hero h2, .seo-landing h2 { text-wrap: balance; } /* ============================================================ 4 · REJILLAS Y TARJETAS ALINEADAS ------------------------------------------------------------ «Alinear» no es sólo cosa del texto: las tarjetas de una misma fila deben empezar y acabar a la misma altura, y su contenido debe asentarse sobre una línea base común. ============================================================ */ /* Las tarjetas se estiran hasta igualar la altura de su fila y distribuyen su interior en columna, de modo que el pie de cada una quede alineado con el de sus vecinas. */ .seo-features li, .seo-stats li { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; height: 100%; } .seo-stats li { justify-content: center; align-items: center; } /* Las cifras comparables se componen en cifra tabular: así los dígitos ocupan el mismo ancho y las columnas de números quedan verticalmente alineadas aunque cambien de valor. */ .seo-stats b, .splash-stat-num, .stat-num, .sidebar-stat-num, td.num, th.num, time { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* Rejilla de cifras de la portada: tres columnas de igual ancho con los separadores centrados entre ellas. */ .splash-stats { align-items: center; } .splash-stat { flex: 1 1 0; min-width: 0; } /* El selector de idioma centra sus botones con `justify-content`, pero la caja en sí llevaba `max-width` sin márgenes automáticos: quedaba pegada al borde izquierdo de la columna en lugar de centrada bajo el resto de la portada. */ .splash-lang-selector { margin-left: auto; margin-right: auto; } /* ============================================================ 5 · TABLAS ------------------------------------------------------------ Convención de composición numérica: el texto a la izquierda, las cifras a la derecha. Alinear cifras a la derecha pone las unidades, decenas y centenas en columna y permite comparar magnitudes de un vistazo. ============================================================ */ table { border-collapse: collapse; width: 100%; } th, td { text-align: left; vertical-align: top; -webkit-hyphens: none; hyphens: none; } th[data-num], td[data-num], th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; } /* Las tablas del informe de auditoría son de lectura densa: la cabecera se mantiene visible al desplazarse. */ .audit-table th { position: sticky; top: 0; background: var(--bg-card, #1E293B); z-index: 1; } /* ============================================================ 6 · LISTAS ============================================================ */ /* Las viñetas cuelgan fuera del bloque de texto, de modo que todos los renglones de un mismo punto arranquen en la misma vertical («sangría francesa»). */ .guide-list li, .seo-landing ul li, .sources-list li { text-indent: 0; } /* Las fuentes son nombres propios: no se justifican ni se parten, porque un nombre partido se lee mal. */ .sources-list li { text-align: left; -webkit-hyphens: none; hyphens: none; } /* ============================================================ 7 · MÓVIL ESTRECHO ------------------------------------------------------------ Por debajo de 430 px un renglón cabe apenas seis o siete palabras. Justificar en esa medida abre huecos enormes entre palabras, así que la prosa vuelve a bandera izquierda. La partición se conserva: es lo que evita los renglones cortos. ============================================================ */ @media (max-width: 430px) { .seo-landing p, .seo-landing li, .seo-features li, .seo-faq details > p, .seo-disclaimer, .splash-claim, .guide-hero p, .info-card > p, .guide-card > p, .guide-list li, .legal-inline-content p, .legal-section p, .legal-list li, .ars-section-sub { text-align: left; } } /* Quien haya pedido menos artificio tipográfico en su sistema recibe texto a bandera: la justificación con partición puede dificultar la lectura en dislexia. */ @media (prefers-reduced-motion: reduce) { /* deliberadamente vacío: la justificación no es movimiento. Se deja constancia para que nadie lo añada aquí por error. */ } /* ============================================================ 8 · IMPRESIÓN ------------------------------------------------------------ En papel la medida es ancha y estable: es donde la justificación luce mejor. Se refuerza y se evita que los párrafos y las tarjetas se partan entre páginas. ============================================================ */ @media print { .seo-landing p, .guide-hero p, .info-card > p, .guide-card > p, .guide-list li, .legal-inline-content p, .legal-section p, .legal-list li { text-align: justify; text-align-last: left; } p, li, blockquote { orphans: 3; widows: 3; } .info-card, .guide-card, .seo-features li { break-inside: avoid; } h1, h2, h3 { break-after: avoid; } }