/** * style/text.css — Páginas que son sólo texto * * Privacidad, términos, cookies, reintegros y el 404. Las escribe * scripts/generar_web.mjs desde scripts/legal/. * * NO ES UN SEGUNDO DISEÑO: usa las variables y las tipografías de base.css, y el * "Volver" de arriba es el mismo que el de /fronteras/consulta/. Lo único propio * de acá es cómo se lee un texto largo, que es otro problema que el de una * herramienta. * * La medida de la caja es lo único que de verdad importa: un renglón de más de * unos 70 caracteres obliga al ojo a buscar dónde empieza el siguiente, y estos * son textos que alguien tiene que leer entero antes de pagar. */ .pagina-texto { background: var(--bg); color: var(--ink); } /* EL MISMO ANCHO QUE /fronteras/consulta/ y que el panel de estado: 680 px, de `.pagina` en style/base.css. Las tres pantallas del sitio tienen que caer en la misma columna, porque se pasa de una a otra —de la consulta a la ayuda de coordenadas, de la ayuda a los textos legales— y una columna que se angosta al cambiar de página se lee como otro sitio. Son unos 79 caracteres por renglón, por encima de los 68 que tenía antes y de los 75 que se suelen dar como cómodos para leer de corrido. Es el precio de que las pantallas se sientan la misma, y está tomado a sabiendas. EL AIRE DE ARRIBA Y DE ABAJO NO ESTÁ ACÁ. Estas páginas usan la misma clase dos veces —una para el "Volver" y el título, otra para el
del texto—, así que un relleno vertical puesto acá se cobraría DOS veces. Los huecos los ponen `.hoja-cabecera` y el `main`, cada uno una sola vez, con las medidas de la nota de más abajo. */ .hoja-texto { max-width: 680px; margin: 0 auto; padding: 0 24px; font-family: var(--sans); font-size: 16px; line-height: 1.65; /* A LA IZQUIERDA, NUNCA JUSTIFICADO, y está escrito para que no se agregue por costumbre el día que alguien quiera que "quede prolijo". Justificar sin partición de palabras abre ríos de espacio entre las palabras, y esos ríos son justamente lo que más traba a quien lee con dislexia. En un texto que alguien tiene que leer entero antes de aceptarlo, eso no es un detalle. */ text-align: left; } /* Los cuatro huecos verticales de la página, los únicos que hay, copiados de /fronteras/consulta/ para que las pantallas se sientan la misma: 32 desde el borde de arriba hasta el "Volver" (.pagina, base.css) 18 desde el título hasta la fecha de vigencia 47 desde la fecha hasta el contenido 16 desde lo último hasta el pie (el relleno de .pagina) Ninguno es un número elegido: los cuatro están medidos en /fronteras/consulta/. El 18 es el que hay entre el título "Consulta" y la tira de progreso, y acá lo hereda la fecha, que ocupa el mismo lugar: una línea chica de servicio debajo del título. El 47 es el que hay entre ese título y la CAJA donde se elige el país, o sea hasta donde empieza el contenido de verdad; se arma con los 18 de arriba de la tira, los 3 que mide la tira y los 26 de abajo. No es el 18: la tira es un adorno de tres píxeles, no el contenido. Los 47 los pone la CABECERA y no el título, para que la cuenta siga dando en el 404, que no lleva fecha: ahí el hueco de 47 queda directamente abajo del título, sin tener que escribir una segunda regla. */ /* `position: relative` para que el selector de idioma se cuelgue de ESTA caja y no de la ventana. `.selector-idioma` es `absolute` con `right: 24px`, y sin un antepasado posicionado esos 24 se miden desde el borde del navegador: en una pantalla ancha el selector quedaba solo, a trescientos píxeles del texto, mientras el "Volver" seguía pegado al margen izquierdo de la hoja. Los dos tienen que estar a 24 del mismo borde, que es el de la hoja. Sólo el alto: los costados los sigue poniendo `.hoja-texto`, que es la misma caja. Escribir acá el atajo `padding` los volvería a fijar en 24, y en un teléfono, donde son 20, ganaría el que esté más abajo en el archivo. */ .hoja-cabecera { position: relative; padding-top: 32px; padding-bottom: 47px; } main.hoja-texto { padding-bottom: 16px; } /* Centrada y sin negrita: acompaña al título, que también está centrado, y no compite con él. En negrita y alineada a la izquierda parecería la primera línea del texto legal, y no lo es: es información sobre el documento. */ /* Dos clases y no una: `.hoja-texto p` tiene 16 px de margen abajo y le ganaría a `.vigencia` sola, como `.hoja-texto a` le gana al "Volver". Esos 16 se sumarían a los 47 de la cabecera y darían 63. */ .hoja-cabecera .vigencia { margin: 0; text-align: center; font-weight: 400; font-size: 14px; color: var(--ink2); } /* El primer título del texto ya tiene los 47 de la cabecera encima; su propio margen de arriba los duplicaría. */ /* Los textos legales publican los dos idiomas en la misma página, cada uno adentro de su `[data-idioma-texto]`, así que el primer título ya no es hijo directo del `main`: sin la segunda mitad de esta regla, el bloque entero arrancaba 44 px más abajo que la consulta. */ main.hoja-texto > :first-child, main.hoja-texto > [data-idioma-texto] > :first-child { margin-top: 0; } /* Sin esto el hueco de abajo serían 16 + el margen del último párrafo. El margen de un párrafo separa de lo que sigue, y del último no sigue nada. Va sobre `main` y no sobre `.hoja-texto`: escrito sobre la clase le pegaría también al

, que es el último de su caja, y ahí el título quedaría pegado al texto. */ main.hoja-texto > :last-child, main.hoja-texto > [data-idioma-texto] > :last-child { margin-bottom: 0; } .hoja-texto h1 { font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1.2; margin: 0 0 18px; } /* Los títulos de sección llevan aire ARRIBA y poco abajo: así quedan pegados a lo que titulan y separados de lo que terminó. */ .hoja-texto h2 { font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1.25; margin: 44px 0 12px; } .hoja-texto h3 { font-size: 17px; font-weight: 600; margin: 32px 0 8px; } .hoja-texto h4 { font-size: 15px; font-weight: 600; color: var(--ink2); margin: 24px 0 6px; } .hoja-texto p { margin: 0 0 16px; } .hoja-texto ul, .hoja-texto ol { margin: 0 0 16px; padding-left: 22px; } .hoja-texto li { margin: 0 0 7px; } /* Y el último de una lista no lo lleva, por lo mismo que el último párrafo de la página: ese margen separa de lo que sigue, y del último no sigue nada. Se nota cuando la lista cierra el documento —la de proveedores de la política de privacidad— porque esos 7 px se suman al aire de abajo. */ .hoja-texto li:last-child { margin-bottom: 0; } /* `:not(.atras-sitio)` no es un adorno: sin eso, el "Volver" de arriba saldría AZUL en las páginas de texto y gris en /fronteras/consulta/, porque `.hoja-texto a` (dos partes) le gana a `.atras-sitio` (una) aunque `.atras-sitio` esté escrito después y en otro archivo. Los enlaces DEL TEXTO sí van en el color de acento: adentro de un párrafo un enlace tiene que distinguirse de lo que lo rodea. El "Volver" no está adentro de ningún párrafo: es navegación, y va en gris como en el resto del sitio. */ .hoja-texto a:not(.atras-sitio) { color: var(--accent); } .hoja-texto a:not(.atras-sitio):hover { color: var(--accent-h); } .hoja-texto code { font-family: var(--mono); font-size: .9em; background: var(--bg3); padding: 1px 5px; border-radius: 4px; /* Una url larga adentro de un `code` no puede desbordar la caja en un teléfono: ahí es donde se lee la mitad de esto. */ overflow-wrap: anywhere; } .hoja-texto hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; } /* Una cita al principio de un documento: el aviso de borrador, la advertencia de que no es asesoramiento legal. Va con una barra al costado y no con fondo, para que no compita con el texto. */ .hoja-texto blockquote { margin: 0 0 20px; padding: 2px 0 2px 16px; border-left: 3px solid var(--border-md); color: var(--ink2); } .hoja-texto blockquote p:last-child { margin-bottom: 0; } /* Las tablas de estos textos son de dos o tres columnas y una de ellas suele ser una explicación larga. En un teléfono no entran: se dejan desplazar en su propia caja antes que apretar las palabras hasta partirlas por la mitad. */ .hoja-texto table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14.5px; display: block; overflow-x: auto; } .hoja-texto th, .hoja-texto td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border); } .hoja-texto th { font-weight: 600; border-bottom-color: var(--border-md); } /* ── LA LISTA DE /fronteras/legal/ ───────────────────────────────────────── Cuatro documentos, cada uno con su nombre, de qué trata y desde cuándo rige. Sin viñeta: no es una enumeración dentro de un texto sino un índice, y lo que tiene que verse primero es el nombre de cada documento. Los dos renglones de abajo van en gris y más chicos por el mismo motivo por el que están: ayudan a elegir, no se leen de corrido. SIN NINGUNA RAYA: los documentos se distinguen solos, porque cada uno arranca con su nombre en negrita y lo que sigue va en gris y más chico. Lo que separa es el aire, y por eso el espacio entre un documento y el siguiente es más grande que el que hay adentro de cada uno: esa diferencia es la que agrupa. */ .hoja-texto .lista-legal { list-style: none; padding: 0; margin: 0 0 24px; } .hoja-texto .lista-legal li { padding: 18px 0 0; } .hoja-texto .lista-legal a { font-weight: 600; /* En bloque para que el área que se puede apretar sea el renglón entero y no sólo las palabras: en un teléfono, un enlace de dos centímetros se falla. */ display: block; } .hoja-texto .lista-legal .det { display: block; margin-top: 3px; font-size: 14.5px; color: var(--ink2); } /* El pie de estas páginas es el mismo del resto —`