/* ============================================================================ HOJA DE IMPRESIÓN — el PDF sale de aquí ============================================================================ No se añade ninguna dependencia de PDF. El navegador ya tiene un motor de impresión que produce PDF vectorial, con texto seleccionable y fuentes reales. Una librería como pdfkit o puppeteer añadiría entre 2 y 300 MB para hacer peor lo que el navegador ya hace bien. El PDF va en blanco: la interfaz es oscura porque se mira en pantalla, pero un informe oscuro gasta tinta y se lee mal impreso. ============================================================================ */ /* Orientación según el reporte: las lecturas periódicas tienen muchas columnas y necesitan apaisado; resumen y fuera de rango caben en vertical y se leen mejor así. */ @page { size: A4 portrait; margin: 14mm 12mm 16mm 12mm; } @media print { body[data-orientation="landscape"] { --print-orientation: landscape; } } @page landscape { size: A4 landscape; } /* Fondo blanco y texto negro: se anulan los tokens del tema oscuro. */ :root { --bg: #FFFFFF; --panel: #FFFFFF; --panel-2: #F7F8FA; --panel-3: #FFFFFF; --text: #14181F; --dim: #55606E; --text-faint: #7A8592; --border: #D3D8DF; --border-strong: #B9C0C9; --accent: #0077BE; /* azul de marca: sobre blanco sí cumple */ --ok: #1E8E52; --warn: #A9731B; --alarm: #C0392F; --offline: #7A8592; --nolimits: #6B54D3; } body { background: #FFF !important; color: #14181F !important; padding-left: 0 !important; } /* Fuera todo lo que no es el informe. */ .no-print, .topbar, .topnav, .context-bar, #report-config, .btn-primary, .btn-secondary, .btn-ghost, .report-tabs { display: none !important; } .page { padding: 0 !important; max-width: none !important; } .panel { background: #FFF !important; border: 1px solid #D3D8DF !important; box-shadow: none !important; /* NO break-inside: avoid. BUG CORREGIDO: el
envuelve KPIs, limites y la tabla entera. Con break-inside: avoid, si el conjunto no cabia completo en la pagina 1 se movia ENTERO a la 2, dejando la primera casi vacia bajo el encabezado. Lo que no debe partirse son las FILAS y las tarjetas, no el contenedor: una tabla larga tiene que poder empezar en la pagina 1 y continuar. */ break-inside: auto; } /* --- Encabezado del informe --- */ .print-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid #0077BE; } .print-logo { height: 34px; width: auto; } .print-title { font-size: 15pt; font-weight: 800; margin: 0; color: #14181F; } .print-subtitle { font-size: 9pt; color: #55606E; margin: 2px 0 0 0; } .print-meta { font-size: 8pt; color: #55606E; text-align: right; line-height: 1.5; } .print-meta strong { color: #14181F; } /* Se repite en cada página impresa. */ thead { display: table-header-group; } tfoot { display: table-footer-group; } tr, .report-row { break-inside: avoid; } table { width: 100%; border-collapse: collapse; font-size: 8pt; } th, td { border: 1px solid #D3D8DF; padding: 3px 5px; text-align: left; } th { background: #EDF1F5 !important; color: #14181F !important; font-weight: 700; } td.sin-dato { color: #7A8592; font-style: italic; } /* --- Pie --- SE ELIMINÓ "Página X de Y". `counter(pages)` solo lo resuelven algunos motores; en el resto imprimía "Página 0 de 0", que es peor que no poner nada: parece un fallo. El navegador ya numera las páginas en su propio pie si el usuario lo activa. */ .print-footer { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding-top: 5px; border-top: 1px solid #D3D8DF; font-size: 7.5pt; color: #55606E; } .print-methodology { font-size: 7.5pt; color: #55606E; line-height: 1.45; border-top: 1px solid #D3D8DF; padding-top: 8px; margin-top: 12px; break-inside: avoid; } .print-methodology h4 { margin: 0 0 4px 0; font-size: 8pt; color: #14181F; } .compliance-bar-print { height: 7px; background: #E4E8ED; border-radius: 3px; overflow: hidden; } .compliance-bar-print > div { height: 100%; } a { color: #14181F !important; text-decoration: none !important; } canvas { max-width: 100% !important; } /* Tablas anchas: se reduce el cuerpo y se permite partir palabras largas antes que dejar que una columna se salga de la hoja. */ .report-table { font-size: 7pt; table-layout: fixed; width: 100%; } .report-table th, .report-table td { overflow-wrap: anywhere; word-break: break-word; padding: 2px 3px; } .report-table .hint { display: none; } /* los desfases sobran en papel */ .table-wrap { overflow: visible !important; } /* Aviso de histórico incompleto: debe verse también impreso. */ .coverage-warning { background: #FFF6E5 !important; border: 1px solid #E0B872 !important; color: #7A5A18 !important; font-size: 8pt; padding: 6px 9px; break-inside: avoid; margin-bottom: 8px; } /* ============================================================================ ANCHOS POR REPORTE No se arregla reduciendo la fuente hasta que quepa: se reparte el ancho segun lo que cada columna necesita de verdad. ============================================================================ */ /* --- A. Lecturas periodicas: apaisado, muchas columnas estrechas --- */ body[data-report="readings"] .report-table { font-size: 7pt; } body[data-report="readings"] .report-table th:first-child, body[data-report="readings"] .report-table td:first-child { width: 15%; } /* Las celdas numericas no necesitan partirse: se centran y respiran. */ .report-table td:not(:first-child) { text-align: center; } .report-table th { text-align: center; } .report-table th:first-child, .report-table td:first-child { text-align: left; } /* ============================================================================ IMPRESION: BLOQUES ESPECIFICOS No se copia la tabla de pantalla. Cada reporte tiene el reparto que necesita. ============================================================================ */ .print-only { display: block !important; } .screen-only { display: none !important; } /* --- A. Lecturas periodicas: apaisado, encabezados con aire --- */ body[data-report="readings"] .report-table { font-size: 7.5pt; } body[data-report="readings"] .report-table th { padding: 5px 4px; line-height: 1.3; vertical-align: middle; } /* Temperatura/Humedad necesitan espacio propio: apretados se solapaban. */ body[data-report="readings"] .report-table thead tr:nth-child(2) th { font-size: 6.5pt; font-weight: 600; padding: 3px 2px; } body[data-report="readings"] .report-table th:first-child, body[data-report="readings"] .report-table td:first-child { width: 14%; text-align: left; } /* --- B. Resumen: un bloque por equipo, no una tabla de 13 columnas --- */ .summary-print { display: flex !important; flex-direction: column; gap: 7px; } .summary-card { border: 1px solid #D3D8DF; border-left: 3px solid #0077BE; padding: 7px 10px; break-inside: avoid; } .summary-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #E4E8ED; } .summary-card-head strong { font-size: 10pt; } .sc-area { display: block; font-size: 7.5pt; color: #55606E; } .sc-compliance { text-align: right; white-space: nowrap; } .sc-pct { display: block; font-size: 14pt; font-weight: 800; line-height: 1; } .sc-label { font-size: 7pt; } .sc-compliance--good .sc-pct, .sc-compliance--good .sc-label { color: #1E8E52; } .sc-compliance--warning .sc-pct, .sc-compliance--warning .sc-label { color: #A9731B; } .sc-compliance--low .sc-pct, .sc-compliance--low .sc-label { color: #C0392F; } .sc-compliance--na .sc-pct, .sc-compliance--na .sc-label { color: #7A8592; } .summary-card-body { display: flex; gap: 22px; flex-wrap: wrap; } .sc-group { display: flex; align-items: baseline; gap: 11px; font-size: 8.5pt; } .sc-title { font-size: 7pt; font-weight: 700; color: #55606E; text-transform: uppercase; letter-spacing: 0.03em; min-width: 78px; } .sc-group em { font-style: normal; color: #7A8592; font-size: 7pt; margin-right: 2px; } .sc-eval { margin: 5px 0 0 0; padding-top: 4px; border-top: 1px solid #E4E8ED; font-size: 7.5pt; color: #55606E; } /* --- C. Fuera de rango: 6 columnas con aire --- */ .limits-used { margin-bottom: 9px; break-inside: avoid; } .limits-used .section-title { font-size: 8.5pt; margin-bottom: 4px; } .lu-row { display: flex; justify-content: space-between; font-size: 8pt; padding: 2px 0; border-bottom: 1px solid #EDF1F5; } .oor-print { font-size: 8.5pt; } .oor-print th, .oor-print td { padding: 4px 6px; } .oor-print th:nth-child(1) { width: 20%; } .oor-print th:nth-child(2), .oor-print th:nth-child(3) { width: 17%; } .oor-print th:nth-child(4) { width: 10%; } .oor-print th:nth-child(5) { width: 13%; } .oor-print th:nth-child(6) { width: 23%; } body[data-report="out-of-range"] .opening-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; break-inside: avoid; margin-bottom: 9px; } body[data-report="out-of-range"] .opening-summary > div { border: 1px solid #D3D8DF; padding: 5px 7px; } body[data-report="out-of-range"] .opening-summary .metric-value { font-size: 10pt; font-weight: 800; } body[data-report="out-of-range"] .opening-summary .metric-label { font-size: 6.5pt; } /* Válido para A4 y Carta: los márgenes en mm caben en ambos. */ @page { size: A4 portrait; margin: 15mm 12mm 15mm 12mm; } /* ============================================================================ FLUJO DE IMPRESION: APROVECHAR LA PAGINA 1 ============================================================================ */ /* La tabla puede empezar donde acabe lo anterior y seguir en las siguientes. Se exige un minimo de filas juntas para no dejar una fila suelta al pie. */ .report-table { break-inside: auto; break-before: auto; /* nunca forzar salto antes de la tabla */ } .report-table tbody tr { break-inside: avoid; } .report-table thead { break-inside: avoid; break-after: avoid; } /* Viudas y huerfanas: al menos 2 filas juntas a cada lado de un salto. */ .report-table tbody { orphans: 2; widows: 2; } /* KPIs y limites: compactos y sin partirse, pero SIN empujar la tabla. */ body[data-report="out-of-range"] .opening-summary { break-after: auto; } body[data-report="out-of-range"] .limits-used { break-after: auto; } /* --- División en bloques --- La selección no se limita: se divide la presentación. Cada bloque empieza en página nueva para que su cabecera quede con sus filas. */ .report-block { break-before: page; break-inside: auto; } .report-block:first-of-type { break-before: auto; } /* el primero no salta */ .block-title { font-size: 8.5pt; font-weight: 700; margin: 0 0 4px 0; padding-bottom: 3px; border-bottom: 1px solid #D3D8DF; break-after: avoid; } .summary-card.force-break { break-before: page; }