Gotchas y troubleshooting

SINTOMA: el body de la pagina es oscuro pero un marco de papel blanco lo rodea en el PDF. CAUSA: @page conserva un margen de impresion por default (Chrome usa ~0.4in), asi que tu fondo solo llena el area de contenido y el margen de papel queda blanco. FIX: pon @page { margin: 0 } y mueve la zona segura del texto a padding de un contenedor interno para que el color llene toda la hoja.

SINTOMA: fondos de color, badges y cebra de tablas se ven bien en pantalla pero imprimen en blanco liso. CAUSA: para ahorrar tinta, el motor descarta colores de fondo e imagenes salvo que lo desactives. FIX: agrega print-color-adjust: exact (con el prefijo -webkit- para Chrome) en los elementos que llevan fondo, casi siempre html o body.

SINTOMA: las paginas terminan medio vacias y la siguiente seccion arranca en pagina nueva, desperdiciando un tercio del papel. CAUSA: cada seccion va envuelta en un div de pagina de alto fijo o lleva break-before: page, forzando un salto aunque la pagina anterior aun tenga espacio. FIX: deja fluir el contenido, quita los wrappers de pagina por seccion, y solo protege unidades chicas con break-inside: avoid.

SINTOMA: una tarjeta, figura, bloque de codigo o fila de tabla queda partida por el salto de pagina, mitad al pie de una hoja y mitad al inicio de la siguiente. CAUSA: el motor de fragmentacion corta donde se le acaba el espacio salvo que le digas lo contrario. FIX: aplica break-inside: avoid al bloque. Nota: si el bloque es mas alto que una pagina el motor no tiene opcion y lo partira igual.

SINTOMA: el PDF exportado muestra una serif generica (a menudo Times) en vez de tu tipografia, y el layout se reacomoda. CAUSA: la fuente no se embebio, o en un flujo HTML a PDF la web font no habia terminado de cargar cuando disparo la impresion. FIX: espera a document.fonts.ready (o sube el --virtual-time-budget del headless) antes de imprimir, y confirma el embebido en preflight.

SINTOMA: una imagen que se veia nitida en pantalla imprime borrosa o dentada. CAUSA: su resolucion efectiva esta debajo de 300 PPI, ya sea porque el origen era de baja resolucion (un screenshot a 72 PPI) o porque se escalo hacia arriba en el layout. PPI efectivo = PPI original / factor de escala, asi que ampliar una imagen chica reduce a la mitad su resolucion real. FIX: entrega una imagen con al menos pulgadas finales × 300 pixeles; nunca escales una chica.

SINTOMA: tras cortar el tiraje, aparece una linea blanca fina en uno o mas bordes de un diseno a borde. CAUSA: sin sangrado, el arte paro justo en el trim y el vaiven de ±1mm de la guillotina expuso papel desnudo. FIX: extiende todo elemento que toca un borde 3mm mas alla del trim, y declara bleed: 3mm en @page para flujos HTML.

SINTOMA: colores vivos en pantalla (azules brillantes, verdes neon, naranja saturado) imprimen apagados y mas grises. CAUSA: RGB tiene un gamut mas amplio que CMYK; convertir a color de prensa recorta lo que CMYK no reproduce, y nunca previsualizaste el shift. FIX: haz soft-proof en el perfil CMYK destino (activa el aviso de gamut) y convierte antes de entregar para aprobar el resultado real, no la fantasia de pantalla.

SINTOMA: un titulo imprime hasta el fondo de una pagina mientras el parrafo que introduce arranca en la siguiente. CAUSA: nada mantiene el titulo pegado a su contenido. FIX: agrega break-after: avoid a h2, h3, h4 para que el motor empuje el titulo adelante y quede con su texto. Complementa con orphans/widows para control por linea.

SINTOMA: las lineas base de texto en columnas contiguas, o entre paginas enfrentadas, quedan a alturas ligeramente distintas y el pliego se ve tembloroso. CAUSA: el interlineado es inconsistente, imagenes y titulos empujan el flujo fuera de un ritmo comun, asi que no hay baseline grid compartido. FIX: fija el line-height del cuerpo a un valor constante y haz que cada espacio vertical sea multiplo de el para que todo el texto caiga en una rejilla.

SINTOMA: pones @page { size: A4 } pero el print-to-PDF de Chrome exporta Carta (o el papel seleccionado). CAUSA: el Chrome interactivo amarra la hoja al dropdown de papel del dialogo y no honra del todo size (issue 238303 de Chromium). FIX: en headless pasa el tamano explicito (--print-to-pdf si lee el @page size); interactivo, elige el papel a mano; o renderiza con Paged.js / WeasyPrint / Prince, que respetan size.

SINTOMA: el indice dice que un capitulo esta en la pagina 12 pero en realidad cae en la 14. CAUSA: el TOC se armo (o se genero por ultima vez) antes de que el contenido repaginara; ediciones, cambios de imagen o carga de fuentes corrieron cada pagina posterior. FIX: regenera el TOC despues de la paginacion final. En CSS Paged Media, target-counter() saca la pagina real de cada enlace para que los numeros nunca se desfasen.