/* ============================================================================= doc.css — Estandar Visual Terranova/Origen traducido a CSS Fase 3 de la consola: el itinerario grafico que se entrega al cliente. FUENTE DE VERDAD System/consola_4_fases/informe_visual.md (extraccion integra del Terranova-Origen-Visual-Presentation-Standard_ES.md + la hoja A3). Cada numero de este archivo sale de ahi. Donde INVENTO algo porque el estandar deja un hueco, lo marco con "HUECO DEL ESTANDAR" y explico el razonamiento. Nadie deberia tener que adivinar que es doctrina y que es decision mia. POR QUE ESTE ARCHIVO EXISTE EN ESTA FORMA El estandar es un documento paginado con medidas fisicas: 210x297 mm, margenes en mm, tipo en puntos, filetes de 1 pt. Si el CSS se escribe en pixeles "de pantalla" se pierde la unica garantia real del sistema, que es el copyfitting: los conteos de palabras del estandar (90 palabras de narrativa, 25 de promesa, 5 chips) estan calibrados contra una caja de 102 mm a 11 pt. Por eso TODA la geometria va en mm y TODO el tipo en pt. La pantalla solo aplica un zoom afin encima; la medida fisica no se toca. CERO DEPENDENCIAS EXTERNAS. Ni @import, ni CDN, ni fuentes remotas. Si algun dia se auto-hospedan Marcellus/Figtree, van en su propio archivo de @font-face; aqui solo se nombran en la pila. --------------------------------------------------------------------------- LO QUE UN NAVEGADOR NO PUEDE DAR — dicho de frente, sin maquillaje --------------------------------------------------------------------------- 1. CMYK / Pantone. El navegador es sRGB y punto. El estandar pide una conversion CMYK encargada para el Cream (#EADFCE) porque las paginas del socio se renderizan cerca de #E4D8C0 (deriva documentada). Aproximacion: #EADFCE es la referencia autoritativa para lo digital, y la conversion para imprenta se encarga aparte sobre el PDF exportado. Este CSS no la simula: falsear un "look CMYK" en sRGB produce un tercer color que no es ninguno de los dos. 2. Marcas de corte y sangrado real. Chrome no implementa `@page { marks: crop cross; bleed: 3mm }` (esta en Paged Media, no en el motor). Aproximacion implementada aqui: la variable --sangrado agranda la HOJA (papel) alrededor de la PAGINA (trim), de modo que las imagenes a sangre completa realmente sobresalen del trim y la guillotina externa tiene material que cortar. Las marcas de corte hay que ponerlas con una herramienta de preprensa fuera del navegador. 3. 300 ppi verdaderos. El PDF que produce Chrome vectoriza el texto (eso si sale nitido a cualquier resolucion) pero remuestrea las imagenes a la resolucion del trabajo de impresion. Como TODA la geometria de este archivo esta en mm, una imagen de 2480x3508 px colocada en una pagina de 210x297 mm ya esta a 300 ppi por construccion: el navegador no la agranda. Lo que no se puede garantizar desde CSS es que el usuario haya subido esa imagen. Eso lo valida el backend. 4. PDF etiquetado con orden de lectura. Chrome exporta PDFs practicamente sin etiquetar. Requiere libreria de servidor. No hay CSS que lo arregle. 5. Las tipografias reales. PP Fragment Sans y PP Fragment Glare son comerciales de Pangram Pangram y no estan compradas. Toda la escala del estandar esta calibrada contra SUS metricas. Con las sustitutas, 11 pt en 102 mm NO da exactamente 55-58 caracteres: da otra cosa parecida. Ver la seccion 1.3. Es un estado degradado que hay que detectar, no una condicion permanente (palabras del propio estandar). 6. La "prueba de entrecerrar los ojos" (zona detras del texto sobre foto). Es un juicio humano. Se puede aproximar por histograma en canvas, pero eso es JS y ademas exige imagenes del mismo origen o con CORS. Aqui solo se deja el velo exacto que el estandar especifica y la valvula de escape (mover el texto a un panel solido). ============================================================================= */ /* ============================================================================= 0. RESET MINIMO Y ANTI-SINTESIS TIPOGRAFICA ----------------------------------------------------------------------------- El estandar dice, textual: "Dos familias, cuatro pesos, sin excepciones — sin Bold, sin Italic". Un navegador, ante sobre un peso Light, SINTETIZA un bold engordando los trazos. El propio estandar llama a eso "genuinamente feo". `font-synthesis: none` lo prohibe, y ademas se neutralizan las etiquetas semanticas para que el redactor pueda escribir por semantica sin romper la pagina. El enfasis se hace con .t-enfasis (Sans Regular) o con versalitas ampliadas (.t-ficha-etiqueta), que es el recurso que el estandar recomienda explicitamente para llenar el hueco del "no hay bold". ============================================================================= */ .doc *, .doc *::before, .doc *::after { box-sizing: border-box; } .doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6, .doc p, .doc ul, .doc ol, .doc li, .doc figure, .doc blockquote { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; } .doc ul, .doc ol { list-style: none; } .doc { font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Sin bold, sin italic: se degradan a los dos pesos permitidos. */ .doc b, .doc strong { font-weight: var(--peso-regular); } .doc i, .doc em { font-style: normal; font-weight: var(--peso-regular); } /* ============================================================================= 1. TOKENS RAIZ — paleta, tipografia, constantes que no dependen de nada ============================================================================= */ /* ----------------------------------------------------------------------------- 1.1 PALETA CON ROLES El hex sin el rol es inutil: la mitad de las reglas del estandar son sobre DONDE puede y no puede aparecer cada color. El rol va en el comentario y se respeta en el resto del archivo. Contrastes WCAG 2.1 medidos por el estandar, citados donde deciden algo. -------------------------------------------------------------------------- */ .doc { /* Ink — todo el texto de cuerpo, fondos de pagina oscuros, color del velo. NUNCA como area plana grande en mas del 12% de las paginas (limite independiente del 11% de paginas C; aplica a cualquier uso de Ink como plano grande). Ese conteo lo hace el planificador, no el CSS. */ --ink: #1A2633; /* Deep — encabezados de seccion sobre White, paneles solidos sobre imagen, rellenos de chip. NUNCA como texto de cuerpo por debajo de 11 pt. Deep sobre Ink = 1,82:1 → prohibido por tentador que sea. */ --deep: #005565; /* Teal — etiquetas, numeros de dia, filetes, enlaces, estados activos. NUNCA como fondo de pagina (demasiado cercano a Deep, se lee como error de impresion). Teal sobre Cream = 4,54:1, aprueba al limite: sirve para etiquetas y encabezados, NO para cuerpo. Teal sobre Ink = 2,56:1 → solo ≥18 pt. */ --teal: #006D82; /* Green — SOLO relleno y acento: barras, rellenos de icono, bloques pequenos, filetes. NUNCA como color de texto sobre Cream (2,38:1) ni sobre White (3,13:1). Ambos fallan AA. */ --green: #7D9B5B; /* Green seguro — adicion propuesta por el estandar. Es el Green cuando el Green tiene que ser palabras y no una forma. 4,89:1 sobre Cream, 6,44:1 sobre White. Resuelve el conflicto documentado del acento "volcan". */ --green-seguro: #4C6636; /* Cream — fondo de pagina por defecto y superficie de lectura (44% del documento). NUNCA detras de tablas densas: enturbia filetes y bordes de columna. Para tablas existe White. */ --cream: #EADFCE; /* White — adicion propuesta por el estandar, no esta en el manual de marca. Superficies de ficha tecnica, material de cierre, tablas. NUNCA en la primera mitad del documento, y nunca una pagina White suelta: aparece como bloque contiguo al final. */ --white: #FFFFFF; /* Opacidades canonicas del mapa de color de texto (seccion 7). Se declaran como colores ya resueltos para que ningun bloque tenga que inventar un rgba a mano. */ --ink-70: rgba(26, 38, 51, .70); /* leyendas sobre Cream y White */ --ink-50: rgba(26, 38, 51, .50); /* numero de pagina, sello de version */ --ink-20: rgba(26, 38, 51, .20); /* costa y fronteras del mapa de ruta */ --white-80: rgba(255, 255, 255, .80); /* antetitulo y etiquetas sobre foto */ --white-75: rgba(255, 255, 255, .75); /* leyendas sobre Deep */ --cream-70: rgba(234, 223, 206, .70); /* leyendas sobre Ink */ /* ----------------------------------------------------------------------- 1.2 ACENTO DE CAPITULO — valor por defecto. El acento lo fija la clase de ecosistema en la pagina (seccion 8). Aqui solo existe el defecto para que ninguna pagina quede sin resolver. --acento → para RELLENOS y FILETES (formas). Admite Green crudo. --acento-texto → para PALABRAS. Nunca Green crudo; ver seccion 8. --acento-sobre → para PALABRAS ENCIMA de un relleno de acento. Hoy tiene un solo cliente, el numero de dia dentro del circulo de 4 mm del mapa de ruta (10.7), y existe porque ese es el unico sitio del documento donde un texto se apoya en el acento y no en el fondo de pagina. El valor sale de la tabla §5.4 leida al reves: sobre Ink, Deep y Teal gana Cream (11,65 · 6,41 · 4,54); sobre Green gana Ink (4,90), porque Cream sobre Green da 2,38 y falla. Aqui va el caso general y en la seccion 8 va la unica excepcion, la del volcan. -------------------------------------------------------------------- */ --acento: var(--deep); --acento-texto: var(--deep); --acento-sobre: var(--cream); /* ----------------------------------------------------------------------- 1.3 PILA DE REEMPLAZO TIPOGRAFICA Bloque literal del estandar (§4.5). Las familias reales van primero para que el dia que se compre la licencia web basta con auto-hospedarlas: no hay que tocar ni una regla de este archivo. ADVERTENCIA DEL ESTANDAR, no mia: PP Fragment es un lanzamiento comercial de Pangram Pangram y las licencias de escritorio y web son compras SEPARADAS. Si se publica el derivado web sin licencia web, la web renderiza en Marcellus/Figtree mientras el PDF renderiza en PP Fragment y "sus dos canales dejan de verse como la misma empresa". El reemplazo es un estado degradado que hay que detectar, no una condicion permanente. CONSECUENCIA PRACTICA que hay que tener presente al maquetar: los conteos de palabras del estandar estan calibrados contra las metricas de PP Fragment. Con las sustitutas el copyfitting es aproximado, y por eso el modo edicion marca el desborde en rojo en vez de confiar en el conteo. -------------------------------------------------------------------- */ --fuente-display: "PP Fragment Glare", "Marcellus", Optima, "Palatino Linotype", Georgia, serif; --fuente-texto: "PP Fragment Sans", "Figtree", "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* Cuatro pesos y ni uno mas. Light y Regular de cada familia. */ --peso-light: 300; --peso-regular: 400; } /* ============================================================================= 2. LIENZO PARAMETRICO — LA ORIENTACION ES UNA DIMENSION DE PRIMERA CLASE ----------------------------------------------------------------------------- Una sola clase en la raiz (.doc--horizontal) cambia lienzo, margenes, retícula, medida narrativa y escala tipografica. No hay un segundo sistema: hay el mismo motor con otros valores de las mismas variables. POR QUE VERTICAL ES EL MAESTRO (razon del socio, no mia) Ajustada a un viewport de telefono de 390 pt, una pagina 16:9 mide 219 pt de alto; una A4 vertical mide 551 pt → 2,5x el tamano de letra efectivo. El documento se REENVIA, no se presenta en vivo, y por eso el maestro es vertical. El estandar solo cambiaria a 16:9 si los documentos se presentaran en vivo. El horizontal sobrevive ahi como "recorte de presentacion" de 8 diapositivas. QUE HACE ESTE ARCHIVO DISTINTO El dueno de producto quiere el documento COMPLETO en ambas orientaciones, no un recorte. Eso se resuelve parametrizando el lienzo, no duplicando el CSS. El mazo de 8 diapositivas del socio sigue existiendo: es el PRESET .doc--recorte-presentacion (seccion 12), que filtra secciones sobre este mismo motor. ============================================================================= */ /* ----------------------------------------------------------------------------- 2.1 LA ESCALA DE PANTALLA, Y POR QUE LA MEDIDA FISICA NO SE PIERDE El estandar da dos columnas de numeros: "pt impresion" y "px pantalla @150 ppi" (A4 = 1240x1754 px). La tentacion es escribir el CSS en esos px. Seria un error: en cuanto cambie el zoom del visor o el segmento comercial, los px dejan de significar nada fisico. Lo que se hace aqui: - Geometria en mm y tipo en pt. Eso es la verdad fisica, y es lo que imprime. - La pantalla aplica UN zoom afin: `transform: scale(var(--zoom))` sobre la pagina entera. Un transform no altera ninguna medida declarada; solo cambia cuantos pixeles de dispositivo ocupa el resultado. LA RECONCILIACION EXACTA CON LA TABLA DEL ESTANDAR CSS define 1in = 96 px, luego 1 pt = 96/72 = 1,3333 px CSS. El estandar mide su columna de pantalla a 150 ppi, luego 1 pt = 150/72 = 2,0833 px de esa columna. El cociente es 150/96 = 1,5625. Por lo tanto: --zoom: 1.5625 ⇒ la pagina ocupa EXACTAMENTE 1240 x 1754 px y la columna "px pantalla" de la escala tipografica se cumple literalmente, glifo por glifo. Comprobacion: 210 mm = 793,7 px CSS; x1,5625 = 1240,2 ✓ 297 mm = 1122,5 px CSS; x1,5625 = 1753,9 ✓ 11 pt = 14,667 px CSS; x1,5625 = 22,92 ≈ 23 px ✓ (tabla: 23) 54 pt = 72 px CSS; x1,5625 = 112,5 ≈ 112 px ✓ (tabla: 112) 8 pt = 10,667 px CSS; x1,5625 = 16,67 ≈ 17 px ✓ (tabla: 17) Es decir: la tabla de "px pantalla" del estandar no es un sistema alterno, es este mismo sistema visto con --zoom: 1.5625. Cualquier otro zoom sigue siendo tipograficamente correcto porque escala TODO junto. -------------------------------------------------------------------------- */ .doc { /* Zoom del visor. 1 = tamano fisico real en una pantalla de 96 ppi. 1.5625 = el lienzo canonico de 1240x1754 del estandar. La consola lo escribe por JS al arrastrar el control de zoom. */ --zoom: 1; /* --------------------------------------------------------------------------- 2.2 ORIENTACION VERTICAL (por defecto) — A4 Trim 210 x 297 mm · 595 x 842 pt · 2480x3508 px @300 · 1240x1754 px @150. ------------------------------------------------------------------------ */ --pagina-ancho: 210mm; /* trim: el documento */ --pagina-alto: 297mm; /* Sangrado. 0 por defecto porque el entregable normal es un PDF de pantalla. Con --sangrado: 3mm la HOJA crece 3 mm por lado y las imagenes a sangre completa sobresalen del trim, que es lo unico que un navegador puede aportar a un flujo de imprenta. Las marcas de corte van fuera. */ --sangrado: 0mm; --hoja-ancho: calc(var(--pagina-ancho) + 2 * var(--sangrado)); --hoja-alto: calc(var(--pagina-alto) + 2 * var(--sangrado)); /* Margenes. El lateral lo fija el segmento comercial (seccion 4); aqui se declara el factor de orientacion, que en vertical es 1. Superior 18 mm. Inferior 20 mm: el estandar es explicito en que los 20 mm existen para dejar sitio al numero de pagina y al sello de version. */ --margen-factor: 1; --margen-top: 18mm; --margen-bottom: 20mm; /* Escala tipografica por orientacion. Es 1 en LAS DOS: la tabla del estandar se usa tal cual. Ver 6.1 para por que se quito el factor horizontal. */ --tipo-escala: 1; /* Columnas de la reticula. Vertical 12 (las del estandar), horizontal 19 (la misma columna de 10,25 mm continuada a lo ancho del 16:9). Se declara aqui, ANTES de .doc--horizontal, porque los bloques .doc posteriores tienen la misma especificidad y ganarian por orden de aparicion. */ --columnas: 12; /* Medida de linea, en tramos de columna. 7 col narrativa, 9 col ancha (resumen del itinerario y cuerpo del apendice). Textual del estandar, y las MISMAS en las dos orientaciones. Los ajustes por segmento estan en 4.3. */ --tramos-narrativa: 7; --tramos-ancha: 9; } /* ----------------------------------------------------------------------------- 2.3 ORIENTACION HORIZONTAL — 16:9, 1920x1080 px POR QUE 325,12 x 182,88 mm Y NO OTRA COSA El manual de marca del socio dice 1920x1080 px. Un px no es una medida fisica: hay que declarar a que resolucion. La unica resolucion que ya usa este sistema es la del propio estandar, 150 ppi (es la que produce el 1240x1754 del A4). Aplicandola: 1920 px / 150 ppi x 25,4 = 325,12 mm 1080 px / 150 ppi x 25,4 = 182,88 mm Consecuencia elegante y verificable: con --zoom: 1.5625 — el mismo zoom que da 1240x1754 en vertical — esta pagina mide exactamente 1920x1080 px. Las dos orientaciones caen sobre su lienzo nominal con el MISMO zoom. No hay dos convenciones de pixel conviviendo. DATO QUE MANDA SOBRE TODO LO DEMAS: LAS DOS AREAS SON CASI IGUALES. A4: 210 x 297 = 62.370 mm² 16:9: 325,12 x 182,88 = 59.457 mm² → 95,3% de la A4. Es decir, el 16:9 a 150 ppi no es "una version reducida": cabe practicamente la misma cantidad de tinta. Lo que cambia no es cuanto cabe, sino la FORMA: mucho ancho y poca altura. Por eso lo que hay que rehacer no es el contenido sino la reparticion: la misma medida de linea, repetida dos veces. LOS NUMEROS DE ESTE BLOQUE NO SE DECIDEN AQUI. Viven en geometria.js, que es de donde los leen el planificador, el renderizador y el editor, y pruebas_spine.mjs lee ESTE archivo y falla si una sola variable difiere. La derivacion completa esta en geometria.js §2; el resumen: 19 COLUMNAS. La columna del estandar (10,25 mm, medianil 5) continuada a lo ancho del 16:9: 19 x 10,25 + 18 x 5 = 284,75 mm, y sobran 20,185 mm de margen a cada lado. El mismo calculo da 12 EXACTAS en A4. 19 = 7 + 7 + 5: dos medidas narrativas completas y una columna de aparato. --margen-factor: 1.2615625 = 20,185 / 16. No es un numero elegido: es EL factor que hace que la reticula de 19 columnas cierre sobre la columna maestra de 10,25 mm. Se aplica sobre el margen del segmento, asi que classic → 17,66 mm, luxury → 20,19 mm, ultra → 27,75 mm. MARGENES SUPERIOR E INFERIOR: 11,08 y 12,32 mm, que son los 18 y 20 mm del A4 escalados por la razon de alturas (182,88 / 297 = 0,61576) y redondeados a la centesima. Antes eran 16 y 18 mm fijos, con el argumento de que el mobiliario (folio y sello, 8 pt) no encoge. El argumento sigue siendo cierto y sigue cumpliendose: 2,82 mm de mobiliario en 12,32 mm de margen, y la zona segura de proyeccion del 5% son 9,14 mm, por debajo de los 11,08 de arriba. Lo que cambio es que la altura util pasa de 148,88 a 159,48 mm, y esos 10,6 mm son casi dos lineas de cuerpo por columna. --tipo-escala: 1. Aqui habia un 1,25 que multiplicaba los quince niveles de la escala tipografica (ver 6.1). Se quito. IMPRESION DEL HORIZONTAL — honestidad 325 x 183 mm no es un papel comercial. Cabe holgado en A3 apaisado (420x297). En A4 apaisado (297x210) hay que imprimir con "ajustar a la pagina", lo que reduce todo al 91,3%. Eso NO viola la regla "corte el texto, nunca el tipo": esa regla prohibe encoger UNA caja para que quepa su texto, no reescalar uniformemente la salida. El sistema relativo queda intacto. -------------------------------------------------------------------------- */ .doc--horizontal { --pagina-ancho: 325.12mm; /* = 1920 px @150 ppi */ --pagina-alto: 182.88mm; /* = 1080 px @150 ppi */ --margen-factor: 1.2615625; --margen-top: 11.08mm; --margen-bottom: 12.32mm; --tipo-escala: 1; --columnas: 19; } /* Las medidas de linea NO se redeclaran aqui, y eso es la afirmacion central de todo el sistema: el horizontal usa los MISMOS 7 y 9 tramos que el vertical, sobre columnas del MISMO ancho, con el tipo al MISMO tamano. Lo unico que cambia es que caben dos medidas por pagina en vez de una. Si algun dia vuelve a aparecer un `--tramos-*` dentro de .doc--horizontal, es que alguien esta construyendo un segundo documento. */ /* ============================================================================= 3. LA PAGINA Y EL VISOR ----------------------------------------------------------------------------- Estructura contractual (el agente de plantillas escribe contra esto):
← orientacion + segmento + modo
← reserva el hueco ya escalado
…contenido en la reticula…

6

…
El .marco existe porque `transform: scale()` NO afecta al layout: sin el, las paginas se solaparian o dejarian huecos al cambiar el zoom. El .marco reserva exactamente el espacio que la pagina ocupa YA escalada. ============================================================================= */ .doc { /* La caja viva: lo que queda dentro de los margenes. Vertical luxury: 178,00 x 259,00 mm (el estandar da 178 y 297-18-20 = 259 ✓). Horizontal luxury: 284,75 x 159,48 mm (19 col de 10,25 + 18 medianiles). */ --margen-x: calc(var(--margen-x-base) * var(--margen-factor)); --caja-ancho: calc(var(--pagina-ancho) - 2 * var(--margen-x)); --caja-alto: calc(var(--pagina-alto) - var(--margen-top) - var(--margen-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8mm; /* separacion entre paginas EN EL VISOR */ font-family: var(--fuente-texto); font-weight: var(--peso-light); color: var(--ink); } .marco { width: calc(var(--hoja-ancho) * var(--zoom)); height: calc(var(--hoja-alto) * var(--zoom)); flex: 0 0 auto; position: relative; } .pagina { width: var(--hoja-ancho); height: var(--hoja-alto); position: relative; overflow: hidden; /* nada escapa del trim; ver nota de desborde */ transform: scale(var(--zoom)); transform-origin: 0 0; background-color: var(--cream); /* B es el defecto declarado del estandar */ font-size: var(--tam-cuerpo); line-height: 1.55; color: var(--color-cuerpo, var(--ink)); /* Los fondos de pagina son contenido, no decoracion: sin esto el PDF sale con paginas blancas donde deberia haber Cream, Ink o Deep. */ print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* La caja viva, posicionada dentro del trim y desplazada por el sangrado. Es tambien la reticula: 12 columnas en vertical, 19 en horizontal (seccion 4). El numero se escribe literal en cada regla y no como var(--columnas) porque `repeat()` con una variable depende de la sustitucion textual y no falla ruidosamente si algo sale mal: se queda en una sola columna. Este es el sitio del archivo donde un fallo silencioso costaria mas caro. */ .pagina__caja { position: absolute; top: calc(var(--sangrado) + var(--margen-top)); right: calc(var(--sangrado) + var(--margen-x)); bottom: calc(var(--sangrado) + var(--margen-bottom)); left: calc(var(--sangrado) + var(--margen-x)); display: grid; /* `minmax(0, 1fr)` y no `1fr` a secas. `1fr` es `minmax(auto, 1fr)`: una columna crece si su contenido no cabe, y entonces la reticula deja de ser regular y TODOS los tramos mienten. Con el minimo en 0 las columnas miden siempre lo mismo y lo que no cabe DESBORDA A LA VISTA, que es exactamente lo que el estandar manda: "corte el texto, nunca el tipo", y el desborde tiene que verse. Una reticula que se deforma en silencio esconde el problema. */ grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-content: start; row-gap: var(--ritmo); } .doc--horizontal .pagina__caja { grid-template-columns: repeat(19, minmax(0, 1fr)); } /* Capa a sangre completa: ocupa la HOJA entera, sangrado incluido. Es donde viven la foto de portada, los separadores de ecosistema y el cierre. */ .pagina__sangre { position: absolute; inset: 0; overflow: hidden; } /* ============================================================================= 4. RETICULA — 12 COLUMNAS EN A4, 19 EN 16:9, Y LA MISMA MEDIDA DE LINEA ============================================================================= */ /* ----------------------------------------------------------------------------- 4.1 LA COLUMNA SE DERIVA, NO SE DECLARA El estandar da 12 columnas de 10,25 mm con medianil de 5 mm, y la aritmetica cuadra exacta: 12 x 10,25 + 11 x 5 = 178; 178 + 2 x 16 = 210 ✓. Pero 10,25 mm es una CONSECUENCIA del margen de 16 mm, y el margen cambia por segmento (14 / 16 / 22 mm). Si se escribiera 10,25 mm fijo, en Classic la reticula dejaria de tocar los margenes. Por eso se deriva: --col = (caja-ancho - (columnas - 1) x medianil) / columnas Verificacion en los dos casos maestros: vertical (178,00 - 11 x 5) / 12 = 10,25 mm ✓ exacto horizontal (284,75 - 18 x 5) / 19 = 10,25 mm ✓ exacto Que la columna salga IDENTICA en las dos orientaciones al nivel maestro no es casualidad: es la definicion del factor de margen horizontal (2.3). Es tambien lo que permite que las dos orientaciones compartan medida de linea. El medianil de 5 mm SI es constante en las dos orientaciones y los tres segmentos: es una constante optica (la distancia a la que dos columnas dejan de leerse como una sola), no una proporcion del lienzo. REGLA DURA QUE EL CSS NO PUEDE IMPONER PERO EL MAQUETADOR DEBE RESPETAR: el cuerpo de texto NUNCA fluye de una columna a la siguiente. Sin texto a dos columnas, nunca. Las columnas son una reticula de POSICIONAMIENTO (donde empieza y termina un bloque), no un flujo. Razon declarada: un texto a dos columnas se comporta mal en telefono y hace que el documento se lea como informe y no como invitacion. Ojo con el matiz, que en horizontal importa: la pagina de dia horizontal SI tiene dos medidas narrativas, una al lado de la otra. No las usa para partir un texto en dos: usa cada una para un BLOQUE distinto (narrativa a la izquierda, aparato del dia a la derecha), que es la misma division que hace la pagina vertical de arriba abajo. Un bloque nunca se derrama de una medida a la otra; si no cabe, desborda a la vista y se marca en rojo. -------------------------------------------------------------------------- */ .doc { --medianil: 5mm; --col: calc((var(--caja-ancho) - (var(--columnas) - 1) * var(--medianil)) / var(--columnas)); } /* ----------------------------------------------------------------------------- 4.2 RITMO VERTICAL — HUECO DEL ESTANDAR, INVENTADO AQUI El estandar da 12 columnas horizontales y NADA vertical: ni linea base, ni escala de espaciado, ni margenes de parrafo, ni altura de chip. Verificado. Decision: la unidad vertical es UNA LINEA DE CUERPO. --ritmo = tam-cuerpo x 1,55 Luxury vertical: 11 pt x 1,55 = 17,05 pt = 6,02 mm. Por que asi y no un numero redondo en mm: porque escala solo con la orientacion y con el segmento. Si el cuerpo pasa a 11,5 pt en Ultra, todo el aire del documento crece con el, y el documento sigue viendose igual de respirado en vez de apretarse. Un ritmo en mm fijo se descuadraria en cada dial. Los pasos son multiplos: medio, uno, uno y medio, dos, tres. No hay mas. -------------------------------------------------------------------------- */ .doc { --ritmo: calc(var(--tam-cuerpo) * 1.55); --ritmo-05: calc(var(--ritmo) * .5); --ritmo-15: calc(var(--ritmo) * 1.5); --ritmo-2: calc(var(--ritmo) * 2); --ritmo-3: calc(var(--ritmo) * 3); } /* ----------------------------------------------------------------------------- 4.3 MEDIDA DE LINEA — EL PUNTO DONDE LAS DOS ORIENTACIONES SON, POR FIN, LA MISMA COSA Criterio unico y no negociable: el largo comodo de linea es 55-75 caracteres. El propio estandar se autoimpone 55-70 y verifica que 7 columnas a 11 pt dan 55-58. De ahi se saca la constante de calibracion del sistema: 102 mm / 56,5 caracteres / 11 pt = 0,1641 mm por caracter y por punto. (Con las tipografias sustitutas esto se corre un poco. Es una estimacion de diseno, no una promesa; por eso existe la marca roja de desborde.) POR QUE AHORA ES LA MISMA MEDIDA EN LAS DOS ORIENTACIONES Antes no podia serlo, por dos hechos que ya no existen: el horizontal componia el tipo un 25% mas grande, y su reticula de 12 columnas obligaba a una sola medida de 135 mm. Con esos dos hechos, 7 tramos daban 88 caracteres y habia que bajar a 6. Hoy la reticula horizontal tiene 19 columnas del mismo ancho que las del A4 y el tipo no se escala. 7 tramos son 101,75 mm en las dos orientaciones, o sea los mismos 56 caracteres. Y como caben DOS de esas medidas a lo ancho, la pagina no pierde capacidad: la reparte en dos bloques en vez de uno. TABLA VERIFICADA — cada celda calculada con la constante de arriba ┌──────────────┬─────────┬──────────┬───────────────────┬──────────────────┐ │ Orientacion │ margen │ columna │ narrativa │ ancha │ ├──────────────┼─────────┼──────────┼───────────────────┼──────────────────┤ │ V · classic │ 14,00mm │ 10,583mm │ 7c=104,1mm→60 car │ 8c=119,7mm→69 car│ │ V · luxury │ 16,00mm │ 10,250mm │ 7c=101,8mm→56 car │ 9c=132,3mm→73 car│ │ V · ultra │ 22,00mm │ 9,250mm │ 8c=109,0mm→58 car │ 9c=123,3mm→65 car│ │ H · classic │ 17,66mm │ 10,516mm │ 7c=103,6mm→60 car │ 8c=119,1mm→69 car│ │ H · luxury │ 20,19mm │ 10,250mm │ 7c=101,8mm→56 car │ 9c=132,3mm→73 car│ │ H · ultra │ 27,75mm │ 9,453mm │ 8c=110,6mm→59 car │ 9c=125,1mm→66 car│ └──────────────┴─────────┴──────────┴───────────────────┴──────────────────┘ Las doce celdas caen dentro de 55-73, y las dos filas Luxury son identicas caracter a caracter. La unica por encima del 70 que el estandar se autoimpone es la ancha de Luxury con 73, en LAS DOS orientaciones: viene de los 9 tramos que el estandar escribe textualmente, no de una decision de este archivo, y solo la usan el resumen del itinerario y el cuerpo del apendice, que son bloques de lectura corrida y no de escaneo. (Antes H·classic ancha daba 75. Ese era el peor dato de la tabla y se fue solo al unificar la reticula.) POR QUE ULTRA SUBE UN TRAMO Y CLASSIC BAJA UNO Ultra-Luxury sube margen (22 mm) Y cuerpo (11,5 pt) a la vez. Los dos acortan la linea: el margen le quita milimetros y el cuerpo le quita caracteres por milimetro. Con 7 tramos la narrativa de Ultra caeria a 51 caracteres, por debajo del piso. Un tramo mas la devuelve a 58. Classic hace el camino inverso en la medida ancha: con 9 tramos daria 78. Los dos ajustes valen igual en las dos orientaciones, que es lo que se espera de un dial de SEGMENTO: no tiene por que saber en que lienzo esta. -------------------------------------------------------------------------- */ .doc { --medida-narrativa: calc(var(--tramos-narrativa) * var(--col) + (var(--tramos-narrativa) - 1) * var(--medianil)); --medida-ancha: calc(var(--tramos-ancha) * var(--col) + (var(--tramos-ancha) - 1) * var(--medianil)); } /* Utilidades de medida. Un bloque de texto NUNCA se deja correr a la caja entera: o lleva .medida-narrativa o lleva .medida-ancha. */ .medida-narrativa { max-width: var(--medida-narrativa); } .medida-ancha { max-width: var(--medida-ancha); } /* Colocacion en la reticula. Solo por tramos: no hay posicionamiento libre. El estandar prohibe mover cajas; estas clases son el vocabulario completo. Llega hasta 19 porque esa es la reticula horizontal. CUIDADO al leer una maqueta: `col-12` es toda la caja viva en vertical y son 178 de 284,75 mm en horizontal. Para "todo el ancho" hay que escribir col-12 o col-19 segun la orientacion, y doc-render.js lo resuelve con una sola funcion (`TODO`) para que no dependa de que alguien se acuerde. */ /* SE ESCRIBE `grid-column-end`, NO EL ATAJO `grid-column`, Y NO ES UN DETALLE. `grid-column: span 5` es un ATAJO que fija start Y end. Cuando el mismo bloque lleva ademas `.col-inicio-8`, que fija `grid-column-start: 8`, el resultado es start 8 + end auto = UNA sola columna: la imagen de la pagina de dia salia de 10 mm de ancho en vez de 71. Y como las pistas son `1fr` —que es `minmax(auto, 1fr)`— el bloque estrujado empujaba su columna a lo ancho de su contenido minimo y descuadraba la reticula entera. El navegador no avisa de nada de esto: la pagina simplemente sale mal. Con `grid-column-end: span N` el inicio queda en `auto` (colocacion automatica) y `.col-inicio-M` puede fijarlo sin pisar el tramo. Las dos clases componen, que es lo que su nombre promete. */ .col-1 { grid-column-end: span 1; } .col-2 { grid-column-end: span 2; } .col-3 { grid-column-end: span 3; } .col-4 { grid-column-end: span 4; } .col-5 { grid-column-end: span 5; } .col-6 { grid-column-end: span 6; } .col-7 { grid-column-end: span 7; } .col-8 { grid-column-end: span 8; } .col-9 { grid-column-end: span 9; } .col-10 { grid-column-end: span 10; } .col-11 { grid-column-end: span 11; } .col-12 { grid-column-end: span 12; } .col-13 { grid-column-end: span 13; } .col-14 { grid-column-end: span 14; } .col-15 { grid-column-end: span 15; } .col-16 { grid-column-end: span 16; } .col-17 { grid-column-end: span 17; } .col-18 { grid-column-end: span 18; } .col-19 { grid-column-end: span 19; } .col-inicio-2 { grid-column-start: 2; } .col-inicio-4 { grid-column-start: 4; } .col-inicio-6 { grid-column-start: 6; } .col-inicio-7 { grid-column-start: 7; } .col-inicio-8 { grid-column-start: 8; } .col-inicio-13 { grid-column-start: 13; } /* panel/mapa a la derecha en 16:9 */ .col-inicio-15 { grid-column-start: 15; } /* columna de aparato en 16:9 */ /* ============================================================================= 5. PARAMETROS POR SEGMENTO — UNA CLASE EN LA RAIZ MUEVE LOS SIETE DIALES ----------------------------------------------------------------------------- El estandar es taxativo: SOLO estos 7 diales cambian por nivel. Todo lo demas (resto de la escala tipografica, paleta, ritmo de fondos, proporciones de imagen) es identico en los tres. ┌───────────────────────────┬─────────┬───────────────┬──────────────┐ │ Dial │ Classic │ Luxury (maes.)│ Ultra-Luxury │ ├───────────────────────────┼─────────┼───────────────┼──────────────┤ │ Narrativa del dia │ 60 pal. │ 90 pal. │ 120 pal. │ │ Imagenes por dia │ 1 │ 2 │ 2 │ │ Paginas a sangre completa │ 20% │ 28% │ 38% │ │ Margenes │ 14 mm │ 16 mm │ 22 mm │ │ Cuerpo de texto │ 10,5 pt │ 11 pt │ 11,5 pt │ │ Experiencias por dia │ 3 │ 2 │ 1 │ │ Paginas por dia │ 1,2 │ 1,5 │ 1,8 │ └───────────────────────────┴─────────┴───────────────┴──────────────┘ La contraintuitiva: experiencias por dia BAJA al subir el nivel. Los compradores de Classic quieren ver densidad de valor; los de Ultra leen un dia cargado como tour en bus. Ese dial no es CSS (lo aplica el planificador) pero se expone como variable para que la plantilla pueda leerlo. NOMENCLATURA: "Luxury" es abreviatura INTERNA. El manual de marca prohibe la palabra "luxury" y NUNCA puede aparecer en un documento de cara al cliente. Estas clases viven en el atributo class del HTML, que el cliente no lee; pero ningun texto visible puede contener la palabra. El nivel se comunica por los diales, no nombrandose. ============================================================================= */ /* Defecto = Luxury, que es el maestro declarado del estandar. Escrito en .doc para que un documento sin clase de segmento sea valido y sea el maestro. */ .doc { --margen-x-base: 16mm; --cuerpo-pt: 11pt; --imagenes-por-dia: 2; --experiencias-por-dia: 2; --paginas-por-dia: 1.5; --sangre-objetivo: .28; } .doc--classic { --margen-x-base: 14mm; --cuerpo-pt: 10.5pt; --imagenes-por-dia: 1; --experiencias-por-dia: 3; --paginas-por-dia: 1.2; --sangre-objetivo: .20; --tramos-ancha: 8; /* 9 tramos darian 78 caracteres: fuera de banda */ } .doc--luxury { --margen-x-base: 16mm; --cuerpo-pt: 11pt; --imagenes-por-dia: 2; --experiencias-por-dia: 2; --paginas-por-dia: 1.5; --sangre-objetivo: .28; } .doc--ultra { --margen-x-base: 22mm; --cuerpo-pt: 11.5pt; --imagenes-por-dia: 2; --experiencias-por-dia: 1; --paginas-por-dia: 1.8; --sangre-objetivo: .38; --tramos-narrativa: 8; /* ver 4.3: margen + cuerpo acortan la linea */ } /* Aqui vivian tres excepciones de medida para horizontal (.doc--horizontal.doc--classic, etc., a especificidad 0,2,0 para ganarle a los bloques de segmento). Ya no existen, y su ausencia es intencional: con la reticula de 19 columnas y el tipo sin escalar, el horizontal usa exactamente los mismos tramos que el vertical. Ver 4.3. */ /* NOTA: aqui hubo un cuarto dial inventado, --alto-imagen-dia (0,38 / 0,46 / 0,56 de la caja viva segun el segmento), para dar altura a la imagen de una pagina de dia. El estandar no lo pide y su unico consumidor, `.imagen-dia`, nunca se emitio; los dos se retiraron con D-12. Los siete diales del socio son los de la tabla de la seccion 5 y ni uno mas: si algun dia hace falta decidir cuanto ocupa la imagen de un dia, se decide en la reticula y con una proporcion de recorte de 9.1, que es donde el estandar sí habla. -------------------------------------------------------------------------- */ /* ============================================================================= 6. ESCALA TIPOGRAFICA — LOS 15 NIVELES, COMPLETOS ----------------------------------------------------------------------------- 6.1 EL FACTOR HORIZONTAL ES 1, Y POR QUE DEJO DE SER 1,25 Aqui hubo un x1,25 que multiplicaba los quince niveles de la escala. El razonamiento era honesto y esta escrito abajo entero, porque una decision revertida sin su motivo se vuelve a tomar sola dentro de seis meses. ERA UNA ELECCION ENTRE DOS LIMITES DEFENDIBLES: LIMITE ALTO = 1,548 (cociente de anchos, 325,12 / 210). Preserva el TAMANO APARENTE cuando el documento se ajusta al ancho de un telefono, que es exactamente el razonamiento con el que el socio justifica su A4: dos paginas ajustadas al mismo ancho de viewport rinden tipo en proporcion inversa a su ancho fisico. Costo: el cuerpo pasa a 17 pt y la pagina de dia deja de caber. LIMITE BAJO = 1,0 (no escalar nada). Preserva el COPYFITTING, que es la unica garantia dura del sistema: las areas de los dos lienzos difieren solo un 4,7%, asi que a igual tamano de tipo cabe practicamente lo mismo y los conteos de palabras del estandar siguen valiendo. Costo: en un telefono el horizontal rinde tipo un 35% mas chico que el vertical, que es justo la falla que el estandar describe para el 16:9. SE ELIGIO 1,25 ≈ √1,548, la media geometrica, para repartir la perdida por igual. Y estaba mal por dos razones, ninguna de ellas estetica: 1. NO ERA UNA DECISION DE ESTE ARCHIVO. El estandar re-especifica el cuerpo POR SEGMENTO (10,5 / 11 / 11,5 pt) y no contempla una tercera variable. Un dial que el socio no firmo no puede vivir escondido en un `calc()`. 2. ERA LA CAUSA ARITMETICA DE QUE EL DOCUMENTO PERDIERA DIAS. Con el cuerpo a 13,75 pt sobre una caja de 148,88 mm, una columna horizontal pasaba de 43 lineas a 19. El planificador, que calculaba con otra geometria, creia que en horizontal cabia MAS; el dibujante entregaba menos de la mitad. Entre los dos, un Ultra-Luxury de 16 dias salia con seis dias mudos. CON EL FACTOR EN 1, el cuerpo es el del estandar en las dos orientaciones (10,5 / 11 / 11,5 pt), la medida de linea es la misma (7 y 9 tramos), y la pagina horizontal recupera capacidad por donde tenia que recuperarla: con una SEGUNDA medida narrativa al lado de la primera, no con letra mas grande. El costo se asume y conviene tenerlo escrito: en un telefono el horizontal se lee un 35% mas chico. El estandar ya elige el A4 como maestro por eso mismo. 6.2 LA ESCALA SIGUE SIENDO UNA SOLA VARIABLE `--tipo-escala` se conserva, multiplicando los quince niveles, aunque hoy valga 1 en las dos orientaciones. No es codigo muerto: es el unico punto por el que un lienzo futuro (una tarjeta, un cuadrado para redes) podria escalar la jerarquia ENTERA de una vez. Escalar un lienzo a medias produce jerarquias rotas: un titulo de dia que no crece con su cuerpo deja de leerse como titulo. Si vuelve a valer algo distinto de 1, tiene que ser una decision firmada, y `geometria.js` es donde se firma. ============================================================================= */ .doc { /* Tamanos. Todos derivados del factor de orientacion; el cuerpo ademas del dial de segmento. Los valores en pt son literales de la tabla del estandar. La columna "px pantalla" del estandar aparece en el comentario para poder cotejar de un vistazo (se obtiene con --zoom: 1.5625). */ --tam-portada-titulo: calc(54pt * var(--tipo-escala)); /* 112 px */ --tam-portada-antetitulo:calc(11pt * var(--tipo-escala)); /* 23 px */ --tam-separador: calc(40pt * var(--tipo-escala)); /* 83 px */ --tam-seccion: calc(28pt * var(--tipo-escala)); /* 58 px */ --tam-cita: calc(26pt * var(--tipo-escala)); /* 54 px */ --tam-dia-titulo: calc(22pt * var(--tipo-escala)); /* 46 px */ --tam-entradilla: calc(14pt * var(--tipo-escala)); /* 29 px */ --tam-cuerpo: calc(var(--cuerpo-pt) * var(--tipo-escala)); /* 23 px */ --tam-ficha-valor: calc(10pt * var(--tipo-escala)); /* 21 px */ --tam-dia-etiqueta: calc(9pt * var(--tipo-escala)); /* 19 px */ --tam-apendice: calc(9pt * var(--tipo-escala)); /* 19 px */ --tam-ficha-etiqueta: calc(8pt * var(--tipo-escala)); /* 17 px */ --tam-leyenda: calc(8pt * var(--tipo-escala)); /* 17 px */ --tam-folio: calc(8pt * var(--tipo-escala)); /* 17 px */ /* HUECO DEL ESTANDAR: la declaracion de promesa (pagina 2, 25 palabras sola sobre Deep) no tiene fila en la escala. Los candidatos naturales son cita destacada (26 pt) y separador de ecosistema (40 pt). Elijo 32 pt, en medio, y explico por que ninguno de los dos sirve: a 40 pt las 25 palabras llenan la caja viva y la pagina pierde el aire que es toda su funcion (es una pagina de respiracion, no un titular); a 26 pt se lee como una cita metida dentro de una pagina, y no como LA pagina. Interlineado 1,30 — mas abierto que el 1,25 de la cita, porque aqui no hay nada mas en la pagina que sostenga el bloque. */ --tam-promesa: calc(32pt * var(--tipo-escala)); } /* ----------------------------------------------------------------------------- 6.3 LAS QUINCE CLASES. Cada una lleva familia, peso, tamano, interlineado, interletrado y caja EXACTOS de la tabla del estandar. El COLOR no se declara aqui: lo pone el fondo (seccion 7). Ese es el mecanismo que hace que el texto correcto salga solo por estar dentro de un fondo A/B/C/D. Conversion de interletrado: -1,5% → -0.015em; +18% → 0.18em; etc. Interlineado: multiplicadores adimensionales, tal cual. -------------------------------------------------------------------------- */ .t-portada-titulo { font-family: var(--fuente-display); font-weight: var(--peso-light); font-size: var(--tam-portada-titulo); line-height: .98; letter-spacing: -.015em; color: var(--color-titulo, var(--white)); } .t-portada-antetitulo { font-family: var(--fuente-texto); font-weight: var(--peso-light); font-size: var(--tam-portada-antetitulo); line-height: 1.20; letter-spacing: .18em; text-transform: uppercase; color: var(--color-etiqueta, var(--white-80)); } .t-separador { font-family: var(--fuente-display); font-weight: var(--peso-light); font-size: var(--tam-separador); line-height: 1.00; letter-spacing: -.01em; color: var(--color-titulo, var(--white)); } .t-seccion { font-family: var(--fuente-display); font-weight: var(--peso-light); font-size: var(--tam-seccion); line-height: 1.05; letter-spacing: -.005em; color: var(--color-titulo, var(--ink)); } .t-cita { font-family: var(--fuente-display); font-weight: var(--peso-light); font-size: var(--tam-cita); line-height: 1.25; letter-spacing: -.005em; color: var(--color-titulo, var(--cream)); } /* Ver 6.2: nivel inventado para llenar un hueco declarado del estandar. */ .t-promesa { font-family: var(--fuente-display); font-weight: var(--peso-light); font-size: var(--tam-promesa); line-height: 1.30; letter-spacing: -.005em; color: var(--color-titulo, var(--white)); } .t-dia-titulo { font-family: var(--fuente-display); font-weight: var(--peso-light); font-size: var(--tam-dia-titulo); line-height: 1.10; letter-spacing: -.005em; color: var(--color-titulo, var(--ink)); } .t-entradilla { font-family: var(--fuente-texto); font-weight: var(--peso-light); font-size: var(--tam-entradilla); line-height: 1.45; letter-spacing: 0; color: var(--color-cuerpo, var(--ink)); } .t-cuerpo { font-family: var(--fuente-texto); font-weight: var(--peso-light); font-size: var(--tam-cuerpo); line-height: 1.55; letter-spacing: 0; color: var(--color-cuerpo, var(--ink)); } /* El unico recurso de enfasis permitido dentro de un parrafo: subir de Light a Regular. No hay bold. No hay italica. */ .t-enfasis { font-family: var(--fuente-texto); font-weight: var(--peso-regular); font-size: var(--tam-cuerpo); line-height: 1.55; color: var(--color-cuerpo, var(--ink)); } .t-ficha-valor { font-family: var(--fuente-texto); font-weight: var(--peso-light); font-size: var(--tam-ficha-valor); line-height: 1.35; letter-spacing: 0; color: var(--color-cuerpo, var(--ink)); } /* Uno de los TRES unicos lugares del documento donde el acento puede aparecer. Los otros dos: el filete bajo el titulo del dia y los rellenos de chip. */ .t-dia-etiqueta { font-family: var(--fuente-texto); font-weight: var(--peso-light); font-size: var(--tam-dia-etiqueta); line-height: 1.20; letter-spacing: .22em; text-transform: uppercase; color: var(--acento-texto); } .t-apendice { font-family: var(--fuente-texto); font-weight: var(--peso-light); font-size: var(--tam-apendice); line-height: 1.50; letter-spacing: 0; color: var(--color-cuerpo, var(--ink)); } /* Sans REGULAR, no Light: es la unica fila de la escala que usa Regular ademas del cuerpo con enfasis. Es tambien el recurso de enfasis que el estandar recomienda para llenar el hueco del "no hay bold": versalitas con interletrado ampliado. */ .t-ficha-etiqueta { font-family: var(--fuente-texto); font-weight: var(--peso-regular); font-size: var(--tam-ficha-etiqueta); line-height: 1.20; letter-spacing: .20em; text-transform: uppercase; color: var(--color-etiqueta, var(--deep)); } .t-leyenda { font-family: var(--fuente-texto); font-weight: var(--peso-light); font-size: var(--tam-leyenda); line-height: 1.30; letter-spacing: 0; color: var(--color-leyenda, var(--ink-70)); } /* Aqui vivia `.t-folio`, que era `.folio` con otro nombre y sin cliente: la escala tipografica la declaraba como su nivel 15 y el numero de pagina lo pinta `.folio` (10.4), que ya trae ademas la colocacion de pliego. Dos clases con el mismo tipo y distinto nombre es una invitacion a que dentro de un ano alguien cambie una y no la otra. Se quedo la que se usa. */ /* ----------------------------------------------------------------------------- 6.4 CIFRAS TABULARES — vacio 5 del manual de marca que el estandar rellena. Duraciones, horas y numeros de dia necesitan ancho fijo para alinearse en columna. `tabular-nums` solo funciona si la fuente trae la caracteristica 'tnum'. Figtree e Inter la traen; Marcellus (display) es dudosa, y del propio PP Fragment el estandar admite no saberlo. Por eso la clase fuerza ademas la familia de TEXTO: si un numero necesita alinearse, se compone en la sans aunque este dentro de un titular. Eso tambien lo prescribe el estandar. -------------------------------------------------------------------------- */ .tabular { font-family: var(--fuente-texto); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* ============================================================================= 7. LOS CUATRO TRATAMIENTOS DE FONDO Y EL MAPA DE COLOR DE TEXTO ----------------------------------------------------------------------------- Proporciones objetivo del documento, tolerancia ±6 puntos: A imagen a sangre completa 28% texto solo en zona oscura verificada B Cream #EADFCE 44% el caballo de batalla; cada pagina de dia C oscuro Ink o Deep 11% pausa y puntuacion; max. una imagen chica D White #FFFFFF 17% ficha tecnica; SOLO material de cierre El % de A cambia por nivel (20/28/38); los otros tres no se re-especifican. Contarlas es trabajo del planificador; el CSS solo garantiza que cada tratamiento se vea como debe. LAS CINCO REGLAS DE ALTERNANCIA — no son CSS, son del planificador, pero van escritas aqui porque quien toque estas clases tiene que conocerlas: 1. Cream es el defecto. Toda pagina de dia es B salvo apertura de capitulo. 2. Nunca mas de tres Cream consecutivas sin imagen o corte oscuro. 3. Todo capitulo abre con una A, y dos A nunca van seguidas. 4. Una C cada cuatro a seis paginas, nunca junto a otra C, y en el empalme entre capitulos, no en medio de uno. 5. White solo en un bloque contiguo al final. Nunca una D suelta en la primera mitad. EL MECANISMO: cada clase de fondo redefine --color-cuerpo, --color-titulo, --color-etiqueta y --color-leyenda. Las clases tipograficas de la seccion 6 leen esas variables. Resultado: un parrafo con .t-cuerpo sale Ink sobre Cream, Cream sobre Ink y White sobre Deep sin que la plantilla decida nada. Es imposible equivocarse porque no hay donde equivocarse. ============================================================================= */ /* --- A · IMAGEN A SANGRE COMPLETA ------------------------------------------ Reservada a CUATRO ubicaciones y ninguna mas: la portada, cada separador de ecosistema, una pausa opcional a mitad de documento, y el cierre. Sobre foto SOLO hay blanco. Nada de acentos, nada de Cream, nada de Deep. Y no lleva leyenda NUNCA: por eso .t-leyenda se oculta aqui en vez de confiar en que el maquetador se acuerde. */ .fondo--a { --color-cuerpo: var(--white); --color-titulo: var(--white); --color-etiqueta: var(--white-80); --color-leyenda: transparent; --acento-texto: var(--white); /* el acento no toca el texto sobre foto */ background-color: var(--ink); /* respaldo mientras carga la imagen */ } .fondo--a .t-leyenda { display: none; } /* --- B · CREAM ------------------------------------------------------------- Cuerpo Ink, encabezados Ink, etiquetas Deep o acento del capitulo, leyendas Ink 70%. El acento como etiqueta sobre Cream es legal EXCEPTO en Green crudo; eso lo resuelve --acento-texto en la seccion 8. */ .fondo--b { --color-cuerpo: var(--ink); --color-titulo: var(--ink); --color-etiqueta: var(--deep); --color-leyenda: var(--ink-70); background-color: var(--cream); } /* --- C · OSCURO INK -------------------------------------------------------- Cuerpo Cream, encabezados White, leyendas Cream 70%. Las etiquetas son el punto delicado: el mapa del estandar dice "Teal, SOLO tamanos ≥18 pt", porque Teal sobre Ink mide 2,56:1 y falla AA en cuerpo. Todas las etiquetas de la escala (8 y 9 pt) estan por debajo de ese umbral, asi que la etiqueta por defecto sobre Ink es CREAM, no Teal. Para el caso legitimo ≥18 pt no hay clase: ninguna plantilla pone un titular en Teal sobre una pagina de pausa, y una escotilla sin usar acaba usandose donde no debe. Ademas: --acento-texto pasa a Cream. Sin esto, una pagina de pausa dentro de un capitulo con acento Deep pondria Deep sobre Ink = 1,82:1, la peor combinacion medida de todo el estandar. */ .fondo--c-ink { --color-cuerpo: var(--cream); --color-titulo: var(--white); --color-etiqueta: var(--cream); --color-leyenda: var(--cream-70); --acento-texto: var(--cream); background-color: var(--ink); } /* --- C · OSCURO DEEP ------------------------------------------------------- Cuerpo White, encabezados White, etiquetas Cream, leyendas White 75%. Es la superficie de la pagina de promesa. */ .fondo--c-deep { --color-cuerpo: var(--white); --color-titulo: var(--white); --color-etiqueta: var(--cream); --color-leyenda: var(--white-75); --acento-texto: var(--cream); background-color: var(--deep); } /* --- D · WHITE ------------------------------------------------------------- Cuerpo Ink, encabezados DEEP (no Ink: es la unica superficie donde el encabezado cambia de color), etiquetas Deep, leyendas Ink 70%. Existe porque Cream es una superficie de lectura calida y una superficie de tabla pobre: los filetes y bordes de columna pierden definicion sobre ella. */ .fondo--d { --color-cuerpo: var(--ink); --color-titulo: var(--deep); --color-etiqueta: var(--deep); --color-leyenda: var(--ink-70); background-color: var(--white); } /* Todos los fondos son contenido y deben imprimirse. */ .fondo--a, .fondo--b, .fondo--c-ink, .fondo--c-deep, .fondo--d { print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* Aqui vivia `.acento-grande`, la escotilla para el unico uso legal de Teal sobre Ink (≥18 pt, 2,56:1). Nunca la emitio nadie: el documento no tiene un solo titular en Teal sobre una pagina de pausa, y la regla queda escrita arriba, en el comentario de .fondo--c-ink, que es donde hay que leerla. Se borra la clase y no la doctrina: si algun dia hace falta un titular de ≥18 pt en Teal sobre Ink, la regla es `color: var(--teal)` y solo a ese tamano. Una clase que existe "por si acaso" es una invitacion a usarla en una etiqueta de 9 pt, que es exactamente lo que el estandar prohibe. */ /* ============================================================================= 8. ACENTO DE CAPITULO POR ECOSISTEMA ----------------------------------------------------------------------------- Cada capitulo lleva UN acento tomado de la paleta, jamas de fuera. Si alguien propone un color de destino que no es uno de estos, la respuesta es no. Bosque nuboso y tierras altas → Deep #005565 Volcan y bosque seco → Green #7D9B5B Costa y zona marina → Teal #006D82 Bosque lluvioso → Ink #1A2633 El acento aparece en EXACTAMENTE TRES lugares y en ningun otro: 1. la etiqueta del numero de dia (.t-dia-etiqueta) 2. el filete de 1 pt bajo el titulo del dia (.filete-acento) 3. los rellenos de chip de las paginas de ese capitulo (.chip) Resguardo textual: "el acento nunca toca el color del texto, el fondo de pagina, ni el logo". EL CONFLICTO QUE EL ESTANDAR NO RESUELVE, Y COMO SE RESUELVE AQUI El mapa de color dice que sobre Cream la etiqueta va en "Deep o el acento del capitulo". Pero si el ecosistema es volcan, el acento es Green #7D9B5B, que mide 2,38:1 contra Cream y 3,13:1 contra White — falla AA en las dos. Y la propia lista de verificacion del estandar exige "ningun texto en Green sobre Cream o White en ningun lugar". Las dos reglas se contradicen. Resolucion: se parte el acento en dos variables. --acento → formas: filete y relleno de chip. Green crudo, legal. --acento-texto → palabras: usa #4C6636 (Green seguro), la adicion que el propio estandar propone "para donde Green necesite ser palabras y no una forma". 4,89:1 sobre Cream ✓ Asi el volcan conserva su identidad cromatica en las formas y cumple AA en las palabras, sin inventar un color de fuera de la paleta. LA TERCERA VARIABLE, --acento-sobre, Y POR QUE SOLO EL VOLCAN LA MUEVE El circulo de parada del mapa de ruta (10.7) lleva el numero de dia DENTRO del relleno de acento. Ese texto no se rige por el fondo de pagina sino por el acento, asi que necesita su propia decision de contraste. La regla general —Cream— vive en 1.2 y cubre Deep, Teal e Ink. Green es la unica que se sale: Cream sobre Green da 2,38:1. Se resuelve con Ink (4,90:1), que es la misma fila de §5.4 que resuelve el caso "texto sobre relleno Green". Ojo: aqui NO sirve --acento-texto. Green seguro sobre Green mide 2,06:1 — es un Green oscurecido para ir SOBRE Cream, no para ir sobre su propio color. ============================================================================= */ .eco--bosque-nuboso { --acento: var(--deep); --acento-texto: var(--deep); } .eco--volcan { --acento: var(--green); --acento-texto: var(--green-seguro); --acento-sobre: var(--ink); } .eco--costa { --acento: var(--teal); --acento-texto: var(--teal); } .eco--lluvioso { --acento: var(--ink); --acento-texto: var(--ink); } /* Alias por si el mapeo de ecosistemas del backend usa los nombres del estandar (cloudforest · volcano · pacific · caribbean · osa). El estandar lista CINCO ecosistemas de referencia frente a los 12 de la base de datos: la tabla de mapeo 12→4 acentos la hace el backend, no el CSS. Estas cuatro clases son el destino de ese mapeo. */ .eco--cloudforest { --acento: var(--deep); --acento-texto: var(--deep); } .eco--volcano { --acento: var(--green); --acento-texto: var(--green-seguro); --acento-sobre: var(--ink); } .eco--pacific { --acento: var(--teal); --acento-texto: var(--teal); } .eco--caribbean { --acento: var(--teal); --acento-texto: var(--teal); } .eco--osa { --acento: var(--ink); --acento-texto: var(--ink); } /* ============================================================================= 9. IMAGENES — PROPORCIONES, VELO Y ENCUADRE ============================================================================= */ /* ----------------------------------------------------------------------------- 9.1 LAS NUEVE PROPORCIONES DE RECORTE Cada ubicacion tiene UNA proporcion y no otra. La lista de verificacion previa a exportacion exige que "cada imagen coincida EXACTAMENTE con la proporcion de recorte de su ubicacion". `aspect-ratio` + `object-fit: cover` lo garantiza a nivel de caja; que el ORIGEN tenga resolucion suficiente lo valida el backend. ┌──────────────────────────┬───────────┬────────────┬────────────┬───────┐ │ Ubicacion │ Recorte │ px @300 │ px @150 │ KB max│ ├──────────────────────────┼───────────┼────────────┼────────────┼───────┤ │ Portada a sangre completa│ 1:1,414 V │ 2480x3508 │ 1240x1754 │ 900 │ │ Separador de ecosistema │ 1:1,414 V │ 2480x3508 │ 1240x1754 │ 900 │ │ Banner de media pagina │ 3:2 H │ 2480x1653 │ 1240x827 │ 550 │ │ Retrato editorial │ 4:5 V │ 1240x1550 │ 620x775 │ 320 │ │ Horizontal en linea │ 3:2 H │ 1560x1040 │ 780x520 │ 280 │ │ Mosaico de cuadricula │ 1:1 │ 780x780 │ 390x390 │ 180 │ │ Miniatura de alojamiento │ 4:3 H │ 900x675 │ 450x338 │ 150 │ │ Franja de detalle/textura│ 3:1 H │ 2480x827 │ 1240x414 │ 300 │ │ Recuadro de mapa │ 4:5 V │ 1240x1550 │ 620x775 │ 250 │ └──────────────────────────┴───────────┴────────────┴────────────┴───────┘ Peso total: 5 MB objetivo, 8 MB techo duro. Si se pasa, la solucion es MENOS IMAGENES, NO MAS COMPRESION: los artefactos sobre un dosel de selva se ven baratos justo cuando se afirma vender algo extraordinario. OJO CON EL 1:1,414 VERTICAL. Un horizontal de camara girado NO sirve: un original de 4.000 px recortado a vertical da 1.886 px de ancho, un 24% por debajo de los 2.480 que exige la sangre completa. Las paginas A REQUIEREN origen vertical (≈5.300 px de lado largo si el original es horizontal). ESTO IMPORTA HOY: las 852 fotos de relleno de la base son Picsum y ninguna es vertical apta. Por eso existe .imagen--insuficiente (9.4): el sistema degrada con elegancia y avisa, en vez de estirar un horizontal de baja resolucion. -------------------------------------------------------------------------- */ .imagen { display: block; width: 100%; height: 100%; object-fit: cover; /* Encuadre: es el UNICO ajuste espacial que el editor permite sobre una foto. Mover la caja esta prohibido; mover la foto DENTRO de su caja no lo esta, porque no altera la maqueta. La consola escribe estas dos variables al arrastrar sobre la previsualizacion. */ object-position: var(--encuadre-x, 50%) var(--encuadre-y, 50%); background-color: var(--ink-20); /* respaldo visible mientras carga */ } .marco-imagen { position: relative; overflow: hidden; } .ratio--sangre { aspect-ratio: 1 / 1.414; } /* portada, separador, cierre */ .ratio--banner { aspect-ratio: 3 / 2; } /* banner de media pagina */ .ratio--retrato { aspect-ratio: 4 / 5; } /* retrato editorial, mapa */ .ratio--linea { aspect-ratio: 3 / 2; } /* horizontal en linea */ .ratio--mosaico { aspect-ratio: 1 / 1; } /* mosaico de cuadricula */ .ratio--miniatura { aspect-ratio: 4 / 3; } /* miniatura de alojamiento */ .ratio--franja { aspect-ratio: 3 / 1; } /* franja de detalle/textura */ /* Mosaico de cuadricula: tres por fila, textual del estandar. */ .mosaico { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--medianil); } /* Aqui vivia `.imagen-dia`, que ataba la altura de la imagen de una pagina de dia a una fraccion de la caja viva por segmento (0,38 / 0,46 / 0,56). Nunca se emitio: las paginas de dia colocan la imagen por RETICULA (`.col-*` mas una `.ratio--*`), que es lo que el estandar manda —"cada imagen coincide EXACTAMENTE con la proporcion de recorte de su ubicacion"— y una altura en fraccion de pagina pelea con la proporcion en vez de acompanarla. Se retiran la clase y su variable --alto-imagen-dia. La derivacion por segmento, que era un hueco del estandar rellenado a ojo, queda sin cliente y por tanto sin riesgo de que alguien la de por especificacion del socio. */ /* ----------------------------------------------------------------------------- 9.2 EL VELO (SCRIM) — especificacion exacta, sin margen de interpretacion "Degradado lineal anclado abajo, en Ink #1A2633, que va de 0% de opacidad al 45% de la altura de la pagina hasta 45% de opacidad en el borde inferior." Un velo Ink al 45% mantiene texto blanco por encima de 4,5:1 sobre cualquier zona subyacente de hasta ~73% de gris: cubre dosel, agua, piedra, arena en sombra y cielo de hora dorada. NO cubre cielo quemado, oleaje blanco, nublado de mediodia ni arena palida de estacion seca — "y eso es una fraccion grande de una biblioteca costarricense". LA REGLA DE DOS NIVELES, Y EL SEGUNDO ES EL QUE IMPORTA Si la zona de texto no es suficientemente oscura, NO se profundiza el velo. Un 65% pasaria el contraste y "convertiria su fotografia en barro gris". Lo que se hace es MOVER EL TEXTO fuera de la imagen, a un panel solido adyacente en Deep o Ink → clase .panel-solido. Por eso --velo-opacidad existe pero NO debe subirse. Esta ahi para poder bajarla en una foto ya oscura, no para rescatar una clara. Y HAY TRES CASOS DONDE NO VA TEXTO SOBRE LA IMAGEN, SIN EXCEPCION: 1. cualquier imagen con un rostro en el tercio inferior; 2. cualquier imagen donde el horizonte cruce la zona de texto; 3. TODA imagen de alojamiento o propiedad — son evidencia del Modo 3, y "la evidencia con un titular encima se lee como publicidad". -------------------------------------------------------------------------- */ .doc { --velo-inicio: 45%; --velo-opacidad: .45; } .velo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient( to bottom, rgba(26, 38, 51, 0) var(--velo-inicio), rgba(26, 38, 51, var(--velo-opacidad)) 100% ); print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* Panel solido: la valvula de escape del velo. Deep por defecto, Ink como alternativa. Lleva su propio mapa de color, igual que un fondo C. */ .panel-solido { --color-cuerpo: var(--white); --color-titulo: var(--white); --color-etiqueta: var(--cream); --color-leyenda: var(--white-75); --acento-texto: var(--cream); background-color: var(--deep); padding: var(--ritmo) var(--ritmo-15); print-color-adjust: exact; -webkit-print-color-adjust: exact; } .panel-solido--ink { --color-cuerpo: var(--cream); --color-leyenda: var(--cream-70); background-color: var(--ink); } /* ----------------------------------------------------------------------------- 9.3 LEYENDAS Una foto lleva leyenda SOLO cuando muestra algo que el lector no puede nombrar (especie, platillo, propiedad concreta, mirador con nombre) o cuando hace trabajo de evidencia. Todo lo demas va sin leyenda. Formato exacto: 8-16 palabras, sentence case, SIN PUNTO FINAL, alineada a la izquierda, directamente debajo de la imagen, 8 pt, Ink al 70%. Las imagenes a sangre completa NUNCA llevan leyenda (ver .fondo--a). -------------------------------------------------------------------------- */ .leyenda { font-family: var(--fuente-texto); font-weight: var(--peso-light); font-size: var(--tam-leyenda); line-height: 1.30; text-align: left; color: var(--color-leyenda, var(--ink-70)); margin-top: var(--ritmo-05); } /* ----------------------------------------------------------------------------- 9.4 DEGRADACION ELEGANTE CUANDO LA FOTO NO DA Estado que la consola marca por JS cuando la imagen no alcanza la resolucion o la orientacion que la ubicacion exige. No estira nada: baja la foto a un tratamiento que si soporta, y avisa. En modo cliente el aviso desaparece y queda solo la degradacion, que es silenciosa y digna. Regla de biblioteca escasa del estandar: con menos de 4 imagenes utilizables el capitulo entero colapsa a tratamiento guiado por texto — una pagina Ink con cita destacada y una sola franja 3:1 — y el destino se anota en el registro de deuda fotografica. -------------------------------------------------------------------------- */ .imagen--insuficiente { /* Nunca a sangre completa, nunca con tipo encima: se rebaja a mosaico. */ filter: saturate(.92); } .doc--edicion .imagen--insuficiente { outline: 1.5pt dashed var(--aviso); outline-offset: -1.5pt; } .doc--edicion .imagen--insuficiente::after { content: "Resolucion u orientacion insuficiente para esta ubicacion"; position: absolute; left: 0; bottom: 0; padding: .6mm 1.5mm; font-family: var(--fuente-texto); font-size: 7pt; letter-spacing: .06em; text-transform: uppercase; color: var(--white); background: var(--aviso); } /* ============================================================================= 10. COMPONENTES Y UTILIDADES ============================================================================= */ /* ----------------------------------------------------------------------------- 10.1 FILETE DE ACENTO — el segundo de los tres lugares del acento. 1 pt exacto bajo el titulo del dia. 1 pt = 0,353 mm; se declara en pt para que sobreviva a cualquier zoom y a la impresion. Usa --acento (forma), no --acento-texto: aqui Green crudo es legal. -------------------------------------------------------------------------- */ .filete-acento { border: 0; border-top: 1pt solid var(--acento); width: calc(var(--col) * 2 + var(--medianil)); /* dos tramos: marca, no linea */ margin: var(--ritmo-05) 0 var(--ritmo) 0; print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* `.filete-acento--ancho` (ancho completo) se retira: `filete()` en doc-render.js la tenia detras de un parametro que ningun llamador ponia en true, y el estandar describe el filete como una MARCA de dos tramos, no como una linea de separacion. Se fue tambien el parametro. */ /* ----------------------------------------------------------------------------- 10.2 CHIPS — el tercer y ultimo lugar del acento. Anatomia fija: etiqueta de ficha tecnica arriba a 8 pt MAYUSCULAS en el acento, valor abajo a 10 pt. Dos usos, ambos de cinco chips exactos: · la franja "de un vistazo" de la pagina de resumen — Ritmo / Fisico / Noches / Mejores meses / Tiempo en tierra (nunca "todo el ano"); · la ficha de alojamiento, cinco chips por propiedad. Extension: piso 1 palabra, objetivo 3, techo 5. "Balanceado" es mejor chip que "Bastante balanceado". El relleno usa --acento con opacidad baja para que Green crudo siga siendo forma y no palabra; el texto de la etiqueta usa --acento-texto. -------------------------------------------------------------------------- */ .chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--medianil); width: 100%; } .chip { display: flex; flex-direction: column; gap: var(--ritmo-05); padding: var(--ritmo-05) var(--ritmo-05); background-color: color-mix(in srgb, var(--acento) 12%, transparent); border-top: 1pt solid var(--acento); print-color-adjust: exact; -webkit-print-color-adjust: exact; } .chip__etiqueta { font-family: var(--fuente-texto); font-weight: var(--peso-regular); font-size: var(--tam-ficha-etiqueta); line-height: 1.20; letter-spacing: .20em; text-transform: uppercase; color: var(--acento-texto); } .chip__valor { font-family: var(--fuente-texto); font-weight: var(--peso-light); font-size: var(--tam-ficha-valor); line-height: 1.35; color: var(--color-cuerpo, var(--ink)); } /* Sobre fondo oscuro el relleno tenue del acento desaparece: se sustituye por un velo claro para que el chip siga siendo un objeto y no texto suelto. */ .fondo--c-ink .chip, .fondo--c-deep .chip, .panel-solido .chip { background-color: rgba(255, 255, 255, .10); border-top-color: var(--cream); } /* ----------------------------------------------------------------------------- 10.3 NUMERO DE PAGINA Y SELLO DE VERSION HUECO DEL ESTANDAR: solo se sabe que el margen inferior de 20 mm existe para alojarlos; no dice si el folio va a izquierda, centro o derecha. Decision: folio al pie EXTERIOR (derecha en pagina impar, izquierda en par) y sello de version al pie interior de la ultima pagina. Razon: el estandar exige numeros de pagina PARES para que el documento funcione como pliegos a doble cara, y en un pliego el folio exterior es el que se ve al hojear. Formato del sello, literal: "v1.2 · valido hasta marzo de 2027", 8 pt, Ink 50%. -------------------------------------------------------------------------- */ .folio { position: absolute; bottom: calc(var(--sangrado) + var(--margen-bottom) / 2); right: calc(var(--sangrado) + var(--margen-x)); font-family: var(--fuente-texto); font-weight: var(--peso-light); font-size: var(--tam-folio); line-height: 1; letter-spacing: .15em; font-variant-numeric: tabular-nums; color: var(--ink-50); } .pagina--par .folio { right: auto; left: calc(var(--sangrado) + var(--margen-x)); } /* Sobre fondos oscuros y sobre foto, Ink al 50% desaparece. */ .fondo--a .folio, .fondo--c-ink .folio, .fondo--c-deep .folio { color: var(--white-75); } .sello-version { position: absolute; bottom: calc(var(--sangrado) + var(--margen-bottom) / 2); left: calc(var(--sangrado) + var(--margen-x)); font-family: var(--fuente-texto); font-weight: var(--peso-light); font-size: var(--tam-folio); line-height: 1; color: var(--ink-50); } .fondo--a .sello-version { color: var(--white-75); } /* ----------------------------------------------------------------------------- 10.4 MARCADOR "DETALLES →" Destino: la pagina de apendice. Es "el mecanismo principal del PDF" para la divulgacion progresiva: la superficie carga el deseo y la estructura, la profundidad carga la prueba. ADVERTENCIA REAL: no esta verificado que Chrome print-to-PDF conserve las anclas #id internas, y el comportamiento ha variado entre versiones. Como TODO el modelo de divulgacion depende de esto, hay que probarlo empiricamente sobre el PDF exportado antes de comprometer el diseno. Si no sobrevive, el respaldo es el numero de pagina impreso junto al marcador. Y lo que NO se debe construir, textual: nada de acordeones ni paneles con pestanas — "cualquier cosa que construya como acordeon va a desaparecer silenciosamente en el momento en que alguien exporte a PDF, llevandose su informacion logistica con ella". Revelado al pasar el mouse: NUNCA. -------------------------------------------------------------------------- */ .detalles { font-family: var(--fuente-texto); font-weight: var(--peso-regular); font-size: var(--tam-ficha-etiqueta); letter-spacing: .20em; text-transform: uppercase; color: var(--teal); text-decoration: none; border-bottom: .5pt solid currentColor; } .fondo--c-ink .detalles, .fondo--c-deep .detalles, .fondo--a .detalles { color: var(--cream); } /* ----------------------------------------------------------------------------- 10.5 LOGO HUECO: el manual de marca no esta en el repositorio, asi que las "cuatro posiciones aprobadas" que la lista de verificacion exige NO se pueden implementar. Lo que si esta especificado es el tamano minimo propuesto: 28 mm de ancho el lockup, 8 mm el icono (120 px / 32 px en pantalla). Se implementa el minimo y se deja la posicion a la plantilla, documentando que es un hueco abierto. El icono suelto (`.logo--icono`, 8 mm) estuvo declarado y no lo pidio ninguna plantilla: el documento usa el lockup en la portada y el lockup en el cierre, y nada mas. Se retira. Cuando llegue el manual de marca con sus cuatro posiciones aprobadas habra que escribir este bloque entero de nuevo, y es mejor escribirlo entonces contra lo que el manual diga que arrastrar una suposicion nuestra de hoy. -------------------------------------------------------------------------- */ .logo { display: block; width: 28mm; min-width: 28mm; height: auto; } .logo--cierre { margin: 0 auto; } /* el cierre lo pide centrado abajo */ /* ----------------------------------------------------------------------------- 10.6 CODIGO QR (contraportada) — "el puente entre la version impresa y la version viva". Uno solo en todo el documento. YA NO ES UN HUECO. Bajo CSP estricta no se puede llamar a una API externa de QR; ese diagnostico (informe_visual, punto (m)) se cerro escribiendo el generador: qr.js emite el codigo como SVG vectorial, sin dependencias y sin red. Quedan por tanto DOS variantes que no se estorban: .qr la caja, comun a las dos. Reserva 24 mm y garantiza el margen quieto ("quiet zone") que un lector exige. .qr--vector el SVG de qr.js. Su zona tranquila viaja DENTRO del viewBox —son cuatro modulos del propio codigo, que es como la norma la define—, asi que aqui se le quita el relleno de 2 mm para no sumar margen dos veces, y se le apaga el `image-rendering: pixelated`: en un vectorial no hay pixeles que preservar, y "pixelated" sobre un es, segun el motor, ruido o nada. El SVG llega SIN un solo color en atributo, igual que el mapa de ruta tras D-09. El color lo ponen las dos reglas de abajo, por variable. Que un QR se pinte "solo" no es un detalle de estilo: si algun dia alguien cambia la pagina de cierre a fondo oscuro, el QR tiene que seguir siendo tinta oscura sobre campo claro o deja de leerse, y esa decision se toma AQUI, mirando la paleta entera, no dentro del generador. -------------------------------------------------------------------------- */ .qr { width: 24mm; height: 24mm; padding: 2mm; /* quiet zone */ background: var(--white); image-rendering: pixelated; /* nada de suavizado en un QR */ print-color-adjust: exact; -webkit-print-color-adjust: exact; } .qr--vector { padding: 0; background: none; image-rendering: auto; display: block; } /* Tinta y campo del codigo. Ink sobre White da 15,3:1 — un QR no necesita contraste "suficiente" sino el maximo disponible, porque el lector binariza una foto tomada de lado, con sombra y a veces a traves de un plastico. Deep (7,7:1) y Teal (6,3:1) existen como tokens porque el estandar admite firmar el cierre en el color de marca, pero NO son el defecto y no deberian usarse sobre Cream. */ .qr__fondo { fill: var(--white); } .qr__modulos { fill: var(--ink); } /* Modificadores. La lista es cerrada y la conoce qr.js: un token que no este aqui se ignora y el SVG sale con un comentario de aviso dentro, en vez de colar un color en linea por la puerta de atras. */ .qr__fondo--cream { fill: var(--cream); } .qr__fondo--ninguno { fill: none; } .qr__modulos--deep { fill: var(--deep); } .qr__modulos--teal { fill: var(--teal); } /* ----------------------------------------------------------------------------- 10.7 MAPA DE RUTA — la pagina mas escrutada del documento, y "suele ser la peor". Vectorial, NUNCA una captura de pantalla rasterizada. Costa y fronteras en Ink al 20%. Sin carreteras. Sin etiquetas politicas mas alla del contorno del pais. Cada parada: circulo de 4 mm en el acento del capitulo, numerado. Las lineas de conexion llevan etiqueta con tiempo y modo ("2 h 40 min · vehiculo privado"). Noches por parada: puntos pequenos debajo del circulo. Tiempo total en tierra: una sola vez, abajo, en etiqueta de ficha tecnica. QUIEN PONE QUE (correccion de la auditoria, D-09) ------------------------------------------------- El SVG lo escribe cr-map.js. Hasta la auditoria lo escribia con el color y la familia tipografica metidos en atributos en linea, y estas clases eran codigo muerto: el mapa vivia FUERA del sistema de estilo. El sintoma no era feo, era diferido — el dia que se compre PP Fragment y se cambie --fuente-texto aqui arriba, el mapa se habria quedado en Figtree, y nadie lo habria notado hasta tener el PDF del cliente delante. Peor: el mapa nombraba una variable que este archivo no declara (--tno-sans) y colaba 'Helvetica Neue', que no esta en la pila del estandar. El reparto de ahora no admite excepciones: · ESTE ARCHIVO pone lo que cambia cuando cambia la MARCA — familia, peso, color y opacidad. Siempre por variable del sistema, nunca una literal. · EL SVG pone lo que cambia cuando cambia el LIENZO — coordenadas, radios, grosores, tamano de tipo y paso del punteado. Todo derivado de los milimetros "de mapa" de §8.2 (circulo de 4 mm, tipo de 8 pt) por el factor de escala del encuadre, que solo cr-map.js conoce. POR QUE AQUI NO HAY NI UN font-size, NI UNA r, NI UN stroke-width Porque una declaracion de CSS gana a un atributo de presentacion de SVG. La version anterior de este bloque declaraba `font-size: var(--tam-ficha-etiqueta)` y `r: 2mm`, y el dia que el mapa hubiera empezado a llevar clases eso no lo habria ajustado: lo habria destrozado. Dentro del viewBox del mapa las unidades son de USUARIO, no de papel: 8 pt son 10,7 unidades, o sea 1,8 mm impresos, y el numero del dia se habria salido de su circulo. La geometria del mapa es autosemejante —el pin mide 4 mm de mapa tanto en A4 como en una diapositiva 16:9— y esa autosemejanza solo se puede calcular sabiendo el encuadre. La prueba (pruebas_mapa.mjs) falla si alguna de esas propiedades vuelve a aparecer aqui. EL ACENTO YA NO VIAJA POR PARAMETRO El circulo de parada usa var(--acento), o sea el acento de la pagina que lo aloja. Antes el acento entraba como hex por argumento y el mapa tenia su propio color por defecto (Teal) distinto del de este archivo (Deep): en la pagina 4, que no pertenece a ningun capitulo, los pines salian Teal mientras todo lo demas de esa misma pagina salia Deep. Ahora hay un solo acento por pagina, el que diga la clase .eco--* (seccion 8) o el defecto de 1.2. -------------------------------------------------------------------------- */ .mapa { width: 100%; aspect-ratio: 4 / 5; /* El mapa es contenido, no decoracion: tiene que salir en el PDF con sus colores igual que los fondos de pagina. */ print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* El SVG del mapa llega con `width`/`height` en PIXELES DE 150 ppi, que es la densidad con la que razona todo el sistema: 781 x 976 px para una caja de 132,25 x 165,31 mm. Pero un atributo `width` de un SVG se interpreta en PIXELES CSS, o sea a 96 ppi, y esos mismos 781 px miden 206,6 mm. El mapa se dibujaba un 56% mas grande que su hueco y se salia de la pagina por abajo. No se veia porque las pistas de la reticula eran `1fr` (minimo `auto`) y la columna se ensanchaba para acomodarlo, deformando la reticula entera en vez de delatar el problema. Con las pistas en `minmax(0, 1fr)` el ancho ya no cede, y esta regla pone la altura en su sitio: el SVG llena su contenedor y su `viewBox` hace el resto de la escala. */ .mapa > svg { display: block; width: 100%; height: 100%; } /* Costa y fronteras. --ink-20 esta declarada en 1.1 con este uso escrito al lado: es la variable que se invento para esta linea. */ .mapa__contorno { fill: none; stroke: var(--ink-20); } /* Ruta punteada entre paradas. El estandar no le da color; lleva el acento porque la ruta pertenece al capitulo igual que el pin, y al 55% para que no compita con los circulos, que son lo que se lee primero. */ .mapa__enlace { fill: none; stroke: var(--acento); stroke-opacity: .55; } /* Etiqueta de tramo: "2 h 40 min · vehiculo privado". Registro de leyenda. */ .mapa__enlace-etiqueta { fill: var(--ink-70); font-family: var(--fuente-texto); font-weight: var(--peso-light); } /* El acento entra UNA vez, en el grupo de cada parada, y el circulo (o la pastilla, cuando el pin junta varios dias) lo hereda: `fill` se hereda en SVG. Los hijos que NO van en el acento —el numero, el nombre, la guia— lo dicen ellos, en las reglas de abajo. */ .mapa__parada { fill: var(--acento); } /* Halo de la parada cuyo lat/long cae fuera del pais. Se dibuja igual que las demas —esconderla seria mentir— pero marcada. */ .mapa__parada-alerta { fill: none; stroke: var(--acento); stroke-opacity: .35; } /* El numero del dia, DENTRO del circulo. Unico texto del documento que se apoya en el acento: por eso tiene su propia variable de contraste (1.2 y seccion 8) y no --color-cuerpo ni --acento-texto. */ .mapa__parada-num { fill: var(--acento-sobre); font-family: var(--fuente-texto); font-weight: var(--peso-regular); } /* Nombre de la parada. Deep y no el acento: §5.4 admite "Deep o acento del capitulo" sobre Cream, pero con acento Green el texto mide 2,38:1 y el propio estandar lo prohibe. Deep pasa siempre (6,41) y no hay que sustituir color a mitad de dibujo. */ .mapa__parada-nombre { fill: var(--deep); font-family: var(--fuente-texto); font-weight: var(--peso-light); } /* Guia fina del pin a su nombre, cuando el nombre no cupo al lado. Ink al 30%: un punto por encima de la costa (20%) para que se siga leyendo a que pin pertenece el nombre, y muy por debajo del folio (50%) para que no compita con nada. Es el unico valor de opacidad del mapa que no estaba ya en el canon de 1.1, y vive aqui —en la hoja— y no dentro del SVG, que es de lo que iba D-09. */ .mapa__parada-guia { fill: none; stroke: var(--ink); stroke-opacity: .30; } /* Noches por parada: puntos pequenos debajo del circulo (§8.2). Pasadas seis se resumen en "×7", que ya es texto y va en el acento entero. */ .mapa__noche { fill: var(--acento); fill-opacity: .60; } .mapa__noches { fill: var(--acento); font-family: var(--fuente-texto); font-weight: var(--peso-light); } /* "TIEMPO TOTAL EN TIERRA · 31 H 15 MIN" al pie: etiqueta de ficha tecnica. El estandar la fija en Deep, MAYUSCULAS, tracking +20%. Las mayusculas las pone el SVG (el texto ya viaja en mayusculas) porque text-transform no aplica a en todos los motores; el tracking, que si aplica, va aqui. */ .mapa__pie { fill: var(--deep); font-family: var(--fuente-texto); font-weight: var(--peso-regular); letter-spacing: .2em; } /* ----------------------------------------------------------------------------- 10.8 NOTA DE PLANTILLA El estandar pide literalmente que la frase "corte el texto, nunca el tipo" viva VISIBLE dentro de la plantilla, como resguardo contra el modo de fallo numero uno (aumento progresivo del conteo de palabras + tipo encogido para ocultarlo). Se muestra solo en edicion y jamas se imprime. -------------------------------------------------------------------------- */ .nota-plantilla { display: none; } .doc--edicion .nota-plantilla { display: block; font-family: var(--fuente-texto); font-size: 8pt; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); } /* ----------------------------------------------------------------------------- 10.9 AVISO DURO DEL DOCUMENTO Los avisos del renderizador viajan como comentarios de HTML, que es suficiente para un dia sin foto vertical o un QR ausente: son cosas que se ven mirando la pagina. Hay dos que NO se ven mirando la pagina —un dia que no llego al documento y un dia que ninguna pagina aloja— y esos no pueden quedarse en un comentario, porque quien exporta no abre el codigo fuente. Salen aqui, arriba del todo, en el rojo de aviso, solo en edicion y jamas impresos. Mismo lenguaje visual que la marca de desborde: es el mismo tipo de problema, "esto no se puede entregar asi". -------------------------------------------------------------------------- */ .aviso-documento { display: none; } .doc--edicion .aviso-documento { display: block; max-width: 178mm; margin-bottom: 4mm; padding: 3mm 4mm; border-left: 3pt solid var(--aviso); background-color: color-mix(in srgb, var(--aviso) 8%, transparent); font-family: var(--fuente-texto); font-size: 9pt; line-height: 1.45; color: var(--ink); } .aviso-documento__linea + .aviso-documento__linea { margin-top: 2mm; } /* ============================================================================= 11. MODO EDICION — VER Y AJUSTAR DENTRO DE LA CONSOLA ----------------------------------------------------------------------------- Requisito del dueno de producto: poder VER el itinerario y EDITARLO dentro de la consola, no solo recibir un enlace. El enlace y el PDF se generan despues, desde lo que ya se vio y se ajusto. QUE SE PUEDE EDITAR — y por que exactamente esto y no mas El estandar prohibe por escrito el arrastre libre: "los elementos se pueden BLOQUEAR para que quien arma el documento pueda cambiar una imagen y editar texto SIN MOVER NADA", y "los tamanos de texto estan BLOQUEADOS en la plantilla". Su modo de fallo numero uno documentado es literalmente "alguien mueve o encoge cosas para que quepa". Una previsualizacion de arrastre libre reconstruye ese modo de fallo dentro del producto. Por eso el editor permite, y solo permite: · editar el TEXTO de cada bloque → [data-editable] · cambiar la FOTO y su ENCUADRE → --encuadre-x/y · REORDENAR paginas → .pagina__asa · elegir VARIANTE DE MAQUETA aprobada → .doc--variante-* No permite: mover cajas, cambiar tamanos de tipo, cambiar colores. TODO ESTE BLOQUE SE APAGA SOLO. Vive bajo .doc--edicion; sin esa clase el documento es exactamente lo que ve el cliente. Ademas se anula entero en @media print (seccion 12), asi que ni un pixel de andamiaje puede colarse en el PDF aunque alguien imprima con el modo edicion encendido. ============================================================================= */ .doc { --aviso: #B3261E; /* rojo de desborde. No pertenece a la paleta de marca a proposito: es andamiaje, y nunca se imprime. */ --foco: var(--teal); /* el estandar ya asigna Teal a "estados activos" */ } /* Contorno al pasar el mouse: tenue, para decir "esto se puede tocar" sin dibujar una interfaz encima del documento. */ .doc--edicion [data-editable] { outline: .75pt dashed transparent; outline-offset: 1.5pt; transition: outline-color 120ms linear; cursor: text; } .doc--edicion [data-editable]:hover { outline-color: color-mix(in srgb, var(--foco) 55%, transparent); } /* Foco visible y solido. Sin `outline: none` en ningun lado: quitar el foco rompe la navegacion por teclado y no hay razon para hacerlo. */ .doc--edicion [data-editable]:focus, .doc--edicion [data-editable]:focus-visible { outline: 1.25pt solid var(--foco); outline-offset: 1.5pt; background-color: color-mix(in srgb, var(--foco) 7%, transparent); } /* --- MARCA ROJA DE DESBORDE ------------------------------------------------ El estandar exige DESACTIVAR el auto-ajuste-para-caber en todo marco de texto "para que el desborde sea VISIBLE en vez de redimensionarse en silencio", y replicar las celdas en rojo de la hoja de contenido. El CSS no puede medir: la consola compara scrollHeight contra clientHeight y escribe data-desborde="1". Este bloque solo lo hace imposible de ignorar. El texto NO se recorta ni se encoge: se deja desbordar a la vista. Recortarlo escondería el problema, que es exactamente lo que el estandar prohibe. Y el aviso dice que hacer, porque la regla es una sola: cortar texto. */ .doc--edicion [data-desborde="1"] { outline: 1.5pt solid var(--aviso); outline-offset: 1.5pt; background-color: color-mix(in srgb, var(--aviso) 8%, transparent); } .doc--edicion [data-desborde="1"]::after { content: "Desborde · corte el texto, nunca el tipo"; display: block; margin-top: 1mm; padding: .6mm 1.5mm; font-family: var(--fuente-texto); font-weight: var(--peso-regular); font-size: 7pt; letter-spacing: .10em; text-transform: uppercase; color: var(--white); background: var(--aviso); } /* Aviso de conteo de palabras fuera de rango. Mismo lenguaje visual que el desborde porque son el mismo problema visto antes y despues de maquetar. */ .doc--edicion [data-conteo="excedido"] { box-shadow: inset 0 0 0 1.25pt var(--aviso); } .doc--edicion [data-conteo="corto"] { box-shadow: inset 0 0 0 1.25pt var(--foco); } /* --- TEXTO SOBRE FOTO SIN VELO: prohibido por el estandar ------------------- "Imagen sin velo → SIN TEXTO". Se marca en edicion para que no llegue al cliente. Es la unica regla del mapa de color que no se puede resolver sola, porque depende de que haya o no un .velo hermano. */ .doc--edicion .fondo--a:not(.velo) [data-editable] { outline: 1.5pt solid var(--aviso); } /* --- SELECCION Y REORDENAMIENTO DE PAGINAS --------------------------------- Lo unico que SI se mueve son las paginas enteras. El asa vive fuera del trim para no tapar contenido, y solo existe en edicion. */ .doc--edicion .marco { outline: .5pt solid rgba(26, 38, 51, .12); } .doc--edicion .marco[data-seleccionada="1"] { outline: 2pt solid var(--foco); } .pagina__asa { display: none; } .doc--edicion .pagina__asa { display: flex; align-items: center; gap: 1mm; position: absolute; top: 0; left: 100%; margin-left: 2mm; padding: 1mm 2mm; font-family: var(--fuente-texto); font-size: 8pt; letter-spacing: .10em; text-transform: uppercase; color: var(--white); background: var(--ink); cursor: grab; user-select: none; white-space: nowrap; } .doc--edicion .pagina__asa:active { cursor: grabbing; } .doc--edicion .marco[data-arrastrando="1"] { opacity: .55; } /* --- RETICULA VISIBLE ------------------------------------------------------ Ayuda de encuadre, no decoracion. Se enciende aparte del modo edicion porque se usa para revisar maquetas, no para redactar. Dibuja las columnas de la orientacion en curso —12 en A4, 19 en 16:9— y sus medianiles a partir de las MISMAS variables que gobiernan el layout: si la reticula visible cuadra, la real cuadra. Como el patron se repite cada --col + --medianil, sirve para las dos sin escribir dos reglas. */ .doc--reticula .pagina__caja::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 50; background-image: repeating-linear-gradient( to right, color-mix(in srgb, var(--foco) 14%, transparent) 0 var(--col), transparent var(--col) calc(var(--col) + var(--medianil)) ); } /* Y la linea base del ritmo vertical, que el estandar no define y este archivo si (4.2): sirve para verificar que los bloques caen en el ritmo. */ .doc--reticula-base .pagina__caja::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 50; background-image: repeating-linear-gradient( to bottom, color-mix(in srgb, var(--aviso) 12%, transparent) 0 .25pt, transparent .25pt var(--ritmo) ); } /* --- VARIANTES DE MAQUETA APROBADAS ---------------------------------------- La edicion es GUIADA: 2-3 variantes por tipo de pagina, y ninguna mas. La clase va en la PAGINA, no en la raiz, para que cada pagina pueda tener la suya. Aqui solo se declara el contrato: la geometria concreta de cada variante la escribe la plantilla, porque depende de que bloques existan en ese tipo de pagina. .variante--a imagen a la derecha del texto (defecto de pagina de dia) .variante--b imagen arriba, texto debajo .variante--c texto a plena medida, imagen en franja al pie No hay una cuarta. Anadir variantes es una decision de diseno con revision, no un campo libre en la consola. */ .variante--a, .variante--b, .variante--c { /* contrato declarado; geometria en la plantilla */ } /* ============================================================================= 12. PRESET: RECORTE DE PRESENTACION DE 8 DIAPOSITIVAS ----------------------------------------------------------------------------- El mazo de 8 del socio no es un segundo sistema: es un FILTRO sobre este mismo motor. Las 8 diapositivas declaradas son portada, promesa, resumen, tres separadores de ecosistema, una pagina de alojamiento y cierre; sin cuerpo de texto, solo imagenes y titulos. Se implementa ocultando lo que no pertenece al recorte. Las paginas siguen siendo las mismas paginas del documento completo, con la misma clase de fondo, el mismo acento y la misma reticula: por eso el mazo no puede divergir del documento. Marcar cada pagina con data-recorte="1" es trabajo del planificador. ============================================================================= */ .doc--recorte-presentacion .marco:not([data-recorte="1"]) { display: none; } /* En el mazo no hay cuerpo de texto: solo imagen y titulo. */ .doc--recorte-presentacion .t-cuerpo, .doc--recorte-presentacion .t-apendice, .doc--recorte-presentacion .leyenda { display: none; } /* ============================================================================= 13. IMPRESION ----------------------------------------------------------------------------- @page NO se puede seleccionar con una clase: es global al documento. La unica forma de tener dos tamanos de papel gobernados por la orientacion del .doc es PAGINAS CON NOMBRE (la propiedad `page`), soportada en Chrome desde la 110. SI LAS PAGINAS CON NOMBRE NO ESTAN SOPORTADAS: el motor cae al @page sin nombre, que aqui es A4 vertical. Un documento horizontal saldria entonces recortado, y el arreglo es elegir tamano de papel personalizado en el dialogo de impresion (325,12 x 182,88 mm) o A3 apaisado con "ajustar a la pagina". Esto hay que probarlo en el navegador objetivo antes de prometer el PDF. ============================================================================= */ @page { size: 210mm 297mm; margin: 0; } @page hoja-vertical { size: 210mm 297mm; margin: 0; } @page hoja-horizontal { size: 325.12mm 182.88mm; margin: 0; } .doc .pagina { page: hoja-vertical; } .doc--horizontal .pagina { page: hoja-horizontal; } /* Con sangrado, el PAPEL crece: la pagina con nombre tiene que crecer con el. No se puede calcular dentro de @page, asi que se declaran los dos casos que el sistema usa (3 mm es el sangrado estandar de imprenta). */ @page hoja-vertical-sangrado { size: 216mm 303mm; margin: 0; } @page hoja-horizontal-sangrado { size: 331.12mm 188.88mm; margin: 0; } .doc--sangrado { --sangrado: 3mm; } .doc--sangrado .pagina { page: hoja-vertical-sangrado; } .doc--sangrado.doc--horizontal .pagina { page: hoja-horizontal-sangrado; } @media print { /* El zoom es un artefacto del visor. En papel la pagina va a tamano fisico real, que es todo el sentido de haber escrito la geometria en mm. */ .doc { --zoom: 1; display: block; gap: 0; background: none; } .marco { width: auto; height: auto; outline: none; } .pagina { transform: none; /* Una pagina del documento = una pagina de papel. Sin excepcion: todo el estandar razona en paginas contadas (28% A, 44% B, numero par, "nunca dos A seguidas"). Si una pagina se partiera en dos, cada proporcion verificada dejaria de ser cierta. */ break-after: page; break-inside: avoid; overflow: hidden; } .pagina:last-child { break-after: auto; } /* Nada se corta a mitad de bloque. Un titulo de dia separado de su filete de acento, o una etiqueta de chip separada de su valor, son errores visibles. */ .pagina__caja > *, .chip, .marco-imagen, figure, blockquote, .panel-solido { break-inside: avoid; } /* Ni una viuda, ni una huerfana. El estandar no lo dice; es oficio basico y no contradice nada. */ p, li { orphans: 3; widows: 3; } /* Los fondos son contenido, no adorno. Sin esto el PDF sale con paginas blancas donde deberia haber Cream, Ink o Deep, y el ritmo de fondos —que es la mitad del estandar— desaparece. */ * { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; } /* TODO EL ANDAMIAJE DE EDICION DESAPARECE. Aunque alguien imprima con el modo edicion encendido, el cliente no puede recibir un PDF con contornos de foco, asas de arrastre ni marcas rojas. */ .doc--edicion [data-editable], .doc--edicion [data-editable]:hover, .doc--edicion [data-editable]:focus, .doc--edicion [data-desborde="1"], .doc--edicion [data-conteo="excedido"], .doc--edicion [data-conteo="corto"], .doc--edicion .imagen--insuficiente { outline: none !important; box-shadow: none !important; background-color: transparent !important; } .doc--edicion [data-desborde="1"]::after, .doc--edicion .imagen--insuficiente::after, .pagina__asa, .nota-plantilla, .aviso-documento, .doc--reticula .pagina__caja::before, .doc--reticula-base .pagina__caja::after { display: none !important; } /* Enlaces internos: se conservan como enlaces, sin decoracion de navegador. Que el ancla sobreviva a la exportacion es cosa del motor, no del CSS; ver la advertencia en 10.4. */ a { text-decoration: none; color: inherit; } } /* ============================================================================= ============================================================================= CONTRATO DE CLASES ----------------------------------------------------------------------------- Todo lo publico de este archivo, en una linea cada cosa. El agente que escriba las plantillas trabaja contra ESTA lista y no necesita leer nada mas de aqui arriba. Marca [H] = la clase o variable CAMBIA DE COMPORTAMIENTO segun la orientacion. ============================================================================= ── ESTRUCTURA OBLIGATORIA ──────────────────────────────────────────────────── .doc raiz del documento. Lleva orientacion + segmento + modo. .marco envoltorio de una pagina; reserva el hueco ya escalado por --zoom. Sin el, las paginas se solapan. [H] .pagina una pagina fisica. Va dentro de .marco. [H] .pagina__caja la caja viva dentro de los margenes; ES la reticula: 12 columnas en A4, 19 en 16:9, medianil 5 mm. [H] .pagina__sangre capa a sangre completa: ocupa la hoja entera, sangrado incluido. Para portada, separadores y cierre. [H] Ejemplo minimo:
…

6

── ORIENTACION ────────────────────────────────────────────────────────────── (sin clase) VERTICAL A4: 210x297 mm. Maestro. 12 columnas. Tipo x1. Narrativa 7 tramos, ancha 9. .doc--horizontal HORIZONTAL 16:9: 325,12x182,88 mm (= 1920x1080 @150 ppi). 19 columnas = 7 + 7 + 5, o sea DOS medidas narrativas y una columna de aparato. Tipo x1 (igual que el vertical). Narrativa 7 tramos, ancha 9 (igual que el vertical). Margen lateral x1,2615625; superior 11,08 / inferior 12,32 mm. Cambian solas con la orientacion: --pagina-ancho, --pagina-alto, --columnas, --margen-x, --margen-top, --margen-bottom, --col (por el numero de columnas, no por su ancho: mide 10,25 mm en las dos) y la retícula de .pagina__caja. No cambian nunca: la paleta, el medianil de 5 mm, la ANCHURA de la columna, la medida de linea, la escala tipografica, los interlineados, los interletrados y las proporciones de recorte de imagen. Ojo con .col-N: `col-12` es toda la caja viva en A4 y son 178 de 284,75 mm en 16:9. Para todo el ancho, col-12 o col-19 segun la orientacion. ── SEGMENTO COMERCIAL (una clase mueve los 7 diales) ──────────────────────── .doc--classic margen 14 mm · cuerpo 10,5 pt · 1 img/dia · 3 exp/dia · 1,2 pag/dia · 20% sangre · medida ancha 8 tramos. .doc--luxury MAESTRO y defecto. 16 mm · 11 pt · 2 img · 2 exp · 1,5 pag/dia · 28% sangre. .doc--ultra 22 mm · 11,5 pt · 2 img · 1 exp · 1,8 pag/dia · 38% sangre · narrativa +1 tramo (8, en las dos orientaciones). Recordatorio: "Luxury" es abreviatura INTERNA. La palabra no puede aparecer en ningun texto visible del documento. ── MODOS DE LA RAIZ ───────────────────────────────────────────────────────── .doc--edicion enciende TODO el andamiaje de edicion. Sin esta clase el documento es exactamente lo que ve el cliente. Se anula ademas por completo en @media print. .doc--reticula superpone las 12 columnas. Ayuda de encuadre. .doc--reticula-base superpone la linea base del ritmo vertical. .doc--sangrado activa 3 mm de sangrado y cambia el tamano de papel. .doc--recorte-presentacion preset del mazo de 8 diapositivas del socio: filtra a las paginas con data-recorte="1" y oculta el cuerpo de texto. Mismo motor, no un segundo sistema. ── FONDOS (ponen solo el color de texto correcto) ─────────────────────────── .fondo--a imagen a sangre completa. Texto SOLO White. Las leyendas se ocultan solas: una A nunca lleva leyenda. Solo en portada, separadores, pausa opcional y cierre. .fondo--b Cream #EADFCE. El caballo de batalla, 44% del documento. Toda pagina de dia. .fondo--c-ink Ink #1A2633. Pausa. Cuerpo Cream. Etiquetas Cream (Teal sobre Ink solo es legal a ≥18 pt, y hoy no lo usa ninguna plantilla: no hay clase para eso). .fondo--c-deep Deep #005565. La pagina de promesa. .fondo--d White #FFFFFF. Ficha tecnica. Encabezados en Deep. SOLO en el bloque contiguo del final. ── ACENTO DE CAPITULO (va en la pagina, no en la raiz) ────────────────────── .eco--bosque-nuboso acento Deep. (alias .eco--cloudforest) .eco--volcan acento Green; en palabras usa Green seguro #4C6636. (alias .eco--volcano) .eco--costa acento Teal. (alias .eco--pacific, .eco--caribbean) .eco--lluvioso acento Ink. (alias .eco--osa) Cada una fija --acento (formas), --acento-texto (palabras) y, solo el volcan, --acento-sobre (el numero DENTRO del pin del mapa, que sobre Green va en Ink). El acento aparece en TRES lugares del documento —.t-dia-etiqueta, .filete-acento y .chip— mas el pin del mapa de ruta, que el propio §8.2 pide "en el color de acento de ese capitulo". Nunca en el fondo de pagina, el cuerpo ni el logo. ── ESCALA TIPOGRAFICA (16 clases; el color lo pone el fondo) ──────────────── .t-portada-titulo Glare Light 54 pt · LH 0,98 · -1,5% · sentence case. .t-portada-antetitulo Sans Light 11 pt · LH 1,20 · +18% · MAYUSCULAS. .t-separador Glare Light 40 pt · LH 1,00 · -1,0%. .t-seccion Glare Light 28 pt · LH 1,05 · -0,5%. .t-cita Glare Light 26 pt · LH 1,25 · -0,5%. Cita destacada. .t-promesa Glare Light 32 pt · LH 1,30. INVENTADA: el estandar no da tamano para la declaracion de promesa. .t-dia-titulo Glare Light 22 pt · LH 1,10 · -0,5%. .t-entradilla Sans Light 14 pt · LH 1,45. Entradilla / intro. .t-cuerpo Sans Light 11 pt · LH 1,55. EL CUERPO. .t-enfasis Sans Regular 11 pt. Unico enfasis dentro de parrafo. .t-ficha-valor Sans Light 10 pt · LH 1,35. .t-dia-etiqueta Sans Light 9 pt · LH 1,20 · +22% · MAYUSCULAS · acento. .t-apendice Sans Light 9 pt · LH 1,50. .t-ficha-etiqueta Sans Regular 8 pt · LH 1,20 · +20% · MAYUSCULAS · Deep. .t-leyenda Sans Light 8 pt · LH 1,30 · Ink 70%. (el nivel 15, folio, no tiene clase de escala propia: lo pinta .folio, que ademas lo coloca. Habia una .t-folio duplicada y se retiro.) .tabular cifras de ancho fijo; fuerza la sans aunque este dentro de un titular. Para horas, duraciones y dias. Los 15 tamanos se multiplican por --tipo-escala, que vale 1 en las DOS orientaciones: el cuerpo del estandar es el cuerpo del estandar en A4 y en 16:9. La variable se conserva por si algun dia hay un tercer lienzo. Prohibido: bold, italica, y cualquier tamano por debajo de 8 pt. Glare nunca por debajo de 18 pt. ── MEDIDA Y RETICULA ──────────────────────────────────────────────────────── .medida-narrativa ancho maximo de la narrativa. 7 tramos = 101,75 mm en LAS DOS orientaciones (8 en Ultra). .medida-ancha resumen del itinerario y cuerpo de apendice. 9 tramos = 132,25 mm en las dos (8 en Classic). .col-1 … .col-19 span de columnas. Es el vocabulario COMPLETO de posicionamiento: no hay posicionamiento libre. Del 13 al 19 solo tienen sentido en horizontal. .col-inicio-2/-4/-6/-7/-8/-13/-15 columna de inicio. -13 y -15 son del 16:9: el panel o el mapa a la derecha, y la columna de aparato. Todo bloque de texto lleva .medida-narrativa o .medida-ancha. Ninguno se deja correr a la caja entera: en horizontal serian 157 caracteres por linea. El cuerpo de texto NUNCA fluye de una columna a la siguiente. La pagina de dia horizontal usa dos medidas, pero para dos BLOQUES distintos (narrativa a la izquierda, aparato del dia a la derecha), no para partir un texto. ── IMAGENES ──────────────────────────────────────────────────────────────── .marco-imagen contenedor con recorte. Va con una .ratio--*. .imagen el . Respeta --encuadre-x / --encuadre-y. .ratio--sangre 1:1,414 vertical. Portada, separador, cierre. .ratio--banner 3:2. Banner de media pagina. .ratio--retrato 4:5. Retrato editorial y recuadro de mapa. .ratio--linea 3:2. Horizontal en linea, al ancho del texto. .ratio--mosaico 1:1. Mosaico de cuadricula. .ratio--miniatura 4:3. Miniatura de alojamiento. Nunca a sangre completa. .ratio--franja 3:1. Franja de detalle / textura. .mosaico cuadricula de tres por fila. .imagen--insuficiente la foto no da la resolucion u orientacion que la ubicacion exige: degrada y AVISA en edicion. Nunca estira. Con Picsum esto sera el caso frecuente. .velo velo Ink anclado abajo: 0% de opacidad al 45% de la altura, 45% en el borde inferior. Obligatorio bajo todo texto sobre foto. NO subir la opacidad: si la zona es clara, el texto se muda a .panel-solido. .panel-solido panel Deep para sacar el texto de la foto. .panel-solido--ink para la variante en Ink. .leyenda 8-16 palabras, sentence case, sin punto final. Solo cuando la foto muestra algo que el lector no puede nombrar. Nunca sobre .fondo--a. ── COMPONENTES ───────────────────────────────────────────────────────────── .filete-acento filete de 1 pt bajo el titulo del dia, en el acento. Dos tramos de ancho: es una marca, no una linea. .chips fila de exactamente CINCO chips. .chip / .chip__etiqueta / .chip__valor etiqueta 8 pt MAYUSCULAS en el acento, valor 10 pt. 1-5 palabras por chip. .folio numero de pagina al pie exterior. .pagina--par lo pasa a la izquierda para que funcione como pliego. .sello-version "v1.2 · valido hasta marzo de 2027", 8 pt, Ink 50%. .detalles marcador "Detalles →" hacia el apendice. .logo / .logo--cierre minimo 28 mm el lockup. El manual de marca y sus cuatro posiciones aprobadas siguen sin existir. .qr QR de la contraportada, con su margen quieto. .qr--vector el QR dibujado por qr.js. Sin relleno propio: su zona tranquila son cuatro modulos del viewBox. .qr__fondo / .qr__modulos campo y tinta del codigo. Con sus modificadores --cream / --ninguno y --deep / --teal. Las emite qr.js y, como las del mapa, no llevan geometria aqui: el tamano del modulo sale del SVG. .mapa hueco 4:5 del mapa de ruta. .mapa__contorno costa y fronteras, Ink 20%. .mapa__enlace ruta punteada entre paradas, en el acento al 55%. .mapa__enlace-etiqueta "2 h 40 min · vehiculo privado". .mapa__parada grupo de una parada; pone el acento, que hereda el circulo (o la pastilla, si el pin junta varios dias). .mapa__parada-num el numero del dia DENTRO del circulo: --acento-sobre. .mapa__parada-nombre nombre de la parada, en Deep. .mapa__parada-guia guia fina del pin al nombre desplazado, Ink 30%. .mapa__parada-alerta halo de la parada con lat/long fuera del pais. .mapa__noche / .mapa__noches puntos de noche bajo el pin, y su resumen "×N". .mapa__pie "TIEMPO TOTAL EN TIERRA · …", etiqueta de ficha tecnica en Deep. Estas once las emite cr-map.js y NINGUNA lleva geometria aqui: el tamano del tipo, los radios y los grosores salen del SVG, en milimetros de mapa. Ver la explicacion completa en 10.7. .nota-plantilla "corte el texto, nunca el tipo". Solo en edicion. ── EDICION (todo bajo .doc--edicion; nada de esto se imprime) ─────────────── [data-editable] bloque de texto editable: hover tenue, foco solido. [data-desborde="1"] marca roja + aviso "corte el texto, nunca el tipo". Lo escribe la consola comparando scrollHeight contra clientHeight. El texto NO se recorta ni se encoge. [data-conteo="excedido"|"corto"] conteo de palabras fuera de rango. .pagina__asa asa de arrastre para REORDENAR paginas. Lo unico que se mueve son paginas enteras, nunca cajas. .marco[data-seleccionada="1"] pagina seleccionada. .marco[data-arrastrando="1"] pagina en arrastre. .variante--a / --b / --c variantes de maqueta aprobadas. Dos o tres por tipo de pagina, y ninguna mas. La geometria de cada una la escribe la plantilla. NO EXISTE, y es a proposito: arrastre libre de cajas, cambio de tamano de tipo, cambio de color. El estandar los prohibe por escrito y su modo de fallo numero uno es "alguien mueve o encoge cosas para que quepa". ── VARIABLES QUE LA CONSOLA ESCRIBE POR JS ───────────────────────────────── --zoom zoom del visor. 1 = tamano fisico. 1.5625 = el lienzo canonico de 1240x1754 (vertical) o 1920x1080 (horizontal). Un transform no altera ninguna medida declarada: la verdad fisica se conserva. [H] --encuadre-x/--encuadre-y encuadre dentro de la foto (object-position). El unico ajuste espacial que el editor permite. --sangrado 0 por defecto; .doc--sangrado lo pone en 3 mm. ── VARIABLES DE SOLO LECTURA (utiles para la plantilla) ──────────────────── --col ancho de columna derivado. V luxury 10,25 mm. [H] --medianil 5 mm. Constante en todas las orientaciones y niveles. --caja-ancho/--caja-alto la caja viva. V luxury 178x259 mm; H 275,52x148,88. [H] --ritmo una linea de cuerpo. Unidad vertical del sistema, con multiplos --ritmo-05, --ritmo-15, --ritmo-2, --ritmo-3. INVENTADA: el estandar no da ninguna metrica vertical. --acento / --acento-texto formas / palabras. Ver el conflicto del Green. --imagenes-por-dia, --experiencias-por-dia, --paginas-por-dia, --sangre-objetivo diales de segmento expuestos para el planificador. ── LO QUE ESTE ARCHIVO NO PUEDE HACER SOLO ───────────────────────────────── Contar las proporciones de fondo (28/44/11/17 ±6), verificar las cinco reglas de alternancia, alcanzar el numero par de paginas de la formula 8 + 1,5 x dias, agrupar dias en tramos combinados sobre el techo de 32, validar conteos de palabras y palabras prohibidas, medir el desborde, o comprobar que una foto es vertical y tiene 2.480 px. Todo eso es del planificador determinista y del validador. El CSS garantiza que, cuando esas decisiones ya estan tomadas, la pagina se vea exactamente como el estandar manda — en las dos orientaciones, en los tres niveles, en pantalla y en papel. ============================================================================= */