1. Fundamentos de @media print

La regla @media print permite aplicar estilos exclusivamente cuando el documento se envía a la impresora (real o virtual). Su sintaxis básica es:

@media print {
  /* reglas CSS específicas para impresión */
}

Los navegadores evalúan la media query "print" cuando el usuario abre el cuadro de diálogo de impresión o guarda como PDF.

2. Propiedades esenciales para una impresión impecable

• Color y fondo: color, background y background-image. Se recomienda background: none; para evitar consumos de tinta.
• Tipografía: aumente el tamaño de fuente para legibilidad (font-size: 12pt;), use familias tipográficas con buena renderización en papel (serif).
• Margenes de página: @page { margin: 2cm; } controla los márgenes de la hoja.
• Saltos de página: page-break-before, page-break-after y page-break-inside (alias break-before, break-after, break-inside).
• Ocultar elementos no imprimibles: .no-print { display: none !important; }.

3. Ejemplos prácticos

3.1. Ocultar la barra de navegación y el footer

@media print {
  header, nav, footer {
    display: none !important;
  }
}

3.2. Forzar salto de página después de cada artículo

@media print {
  .article {
    page-break-after: always; /* o break-after: page; */
  }
}

3.3. Añadir encabezado y pie de página con número de página

@page {
  size: A4 portrait;
  margin: 2cm;
  @top-center {
    content: "Mi Reporte – " attr(data-title);
    font-weight: bold;
    font-size: 10pt;
  }
  @bottom-center {
    content: "Página " counter(page) " de " counter(pages);
    font-size: 9pt;
  }
}

Nota: la sintaxis @top-center y @bottom-center está soportada en Chrome 93+, Safari y Firefox (con prefijos @-moz-document en versiones antiguas).

4. Comparativa con alternativas emergentes

Escoge la solución según tus requerimientos: si la impresión es ocasional, @media print es suficiente; si necesitas PDFs consistentes y con branding, considera una herramienta de servidor.

5. Buenas prácticas y checklist de publicación

1. Resetear estilos de fondo: background: none !important; para evitar manchas.
2. Usar unidades físicas (pt, cm, in) en márgenes y fuentes para mayor predictibilidad.
3. Probar en todos los navegadores principales, especialmente Firefox que maneja @page de forma distinta.
4. Validar saltos de página con contenido dinámico (tablas largas, imágenes).
5. Incluir meta‑etiqueta para impresión: <link rel="stylesheet" href="print.css" media="print"> permite cargar un CSS dedicado.
6. Optimizar imágenes: usar versiones en escala de grises o SVG sin color.
7. Evitar fuentes web externas que no se imprimen bien; provee fallback serif.
8. Probar con “Guardar como PDF” para validar la generación de archivos digitales.

6. Depuración (troubleshooting)

Si los estilos no aparecen al imprimir:

• Verifica que el media="print" esté correctamente escrito en el <link> o en la regla @media.
• Abre la herramienta de desarrollo (F12) y elige Print Preview o Emulación → Media → print para inspeccionar los estilos aplicados.
• Comprueba que no haya reglas con mayor especificidad que sobrescriban tus reglas de impresión (usa !important con cautela).
• En Firefox, revisa la consola por advertencias de @page no soportado.

7. Rendimiento y escalabilidad

Los estilos de impresión se cargan solo cuando el usuario abre la vista de impresión, por lo que el impacto en la carga inicial es nulo. Sin embargo, si el CSS imprimible es muy extenso, puede retrasar la generación del PDF. Recomendaciones:

• Separar el CSS imprimible en un archivo print.css y servirlo con Cache-Control: public, max-age=86400.
• Minificar el CSS (ej. cssnano) para reducir el peso.
• Limitar la cantidad de imágenes de alta resolución; usa versiones optimizadas para impresión.