/* ============================================================================
INFORME IMPRIMIBLE — la portada convertida en PDF
Se carga con media="print", así que estas reglas no existen mientras se
navega: solo aparecen al imprimir (y "Guardar como PDF" del navegador es
imprimir). Para revisarlas en pantalla basta con cambiarle el media al
a "all" desde la consola.
El informe NO redibuja nada. Es la misma portada que se está viendo: se le
agrega una cabecera con el cliente y la fecha, se le saca el chasis de la
app y se acomoda a la hoja. Por eso lo que el cliente le muestra al mandante
y lo que ve en pantalla no pueden discrepar: son el mismo HTML.
VERTICAL (2026-09-08). Nació apaisado copiando el ancho de la pantalla, pero
eso obligaba a poner los dos gráficos de cada sección uno al lado del otro en
media hoja: doce meses en 13 cm quedaban en columnas de 4 mm y la tabla de
detalle partía "Compresor Principal Trasero" en tres líneas. En vertical cada
gráfico ocupa el ancho completo de la hoja —que es donde se lee— y las
secciones se apilan, que es como se leen igual. De paso el informe bajó de
cuatro hojas a tres y se archiva como cualquier otro documento.
============================================================================ */
/* Margen CERO y no 10 mm, y el margen de verdad puesto como relleno del
contenido. Es la única forma de que el navegador no estampe su propia
cabecera y su pie —la fecha y hora, el título de la pestaña, la URL y el
"2/4"— en cada hoja: los dibuja dentro del margen de @page, así que sin
margen no tiene dónde ponerlos. Eran cuatro líneas que no son del informe,
que delatan que esto salió de un navegador y que además fechan el documento
dos veces, porque la fecha buena ya está en el membrete.
El relleno horizontal va en .page y por eso sale en TODAS las hojas; el de
arriba lo pone cada bloque que empieza hoja (ver [data-corte] más abajo). */
@page { size: A4 portrait; margin: 0; }
/* Chrome imprime los fondos en blanco salvo que se le pida lo contrario, y
este informe ES sus colores: sin esto el semáforo desaparece. */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
html, body {
background: #fff !important;
height: auto !important; min-height: 0 !important; overflow: visible !important;
}
/* ---------------------------------------------------------------------------
FUERA EL CHASIS
El cajón, las barras, los botones y los avisos de acción son para operar la
app. En un documento que se imprime no hacen nada: ocupan hoja y confunden a
quien lo recibe, que no tiene dónde apretar.
--------------------------------------------------------------------------- */
.sidebar, .side-scrim, .topbar, .tabbar, .title-lg,
.toasts, .g-tip, .scrim, .modal, .hoja, .arranque, #login-view,
.btn, .btn-icon, .aviso-lectura, .tabla-barra, .instalar-app {
display: none !important;
}
.main { margin-left: 0 !important; min-height: 0 !important; }
.page {
max-width: none !important; margin: 0 !important;
/* Los 9 mm de costado del papel. Van acá y no en @page porque @page va en
cero para que el navegador no imprima su cabecera; puestos en un elemento
que abarca el documento entero, salen igual en todas las hojas. */
padding: 0 9mm !important;
}
#app-view { display: block !important; }
/* ---------------------------------------------------------------------------
CABECERA Y PIE DEL INFORME
Es lo único que el informe agrega: sin membrete una impresión de la pantalla
es una captura, no un documento que alguien pueda archivar.
--------------------------------------------------------------------------- */
.inf-cab {
display: flex !important;
align-items: center; gap: 12px;
/* El margen de arriba de la PRIMERA hoja: el de las siguientes lo pone el
bloque que las abre. Ver [data-corte]. */
padding: 0 0 6px; margin: 10mm 0 9px;
border-bottom: 2px solid #0f172a;
}
.inf-id { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.inf-logo-cliente { height: 30px; width: auto; object-fit: contain; }
.inf-titulo { display: grid; gap: 1px; }
.inf-eyebrow {
font-size: 7.5pt; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: #64748b;
}
.inf-titulo h1 { font-size: 14pt; line-height: 1.1; margin: 0; color: #0f172a; }
.inf-titulo p { font-size: 8pt; margin: 0; color: #64748b; }
/* Las cuatro cifras del membrete: son las que se dicen en voz alta al abrir la
reunión, antes de entrar a mirar equipo por equipo. En vertical el membrete
tiene 8 cm menos de ancho, así que van más juntas y un punto más chicas. */
.inf-resumen { display: flex; gap: 11px; }
.inf-resumen div { text-align: right; }
.inf-resumen b {
display: block; font-size: 11.5pt; line-height: 1.1; color: #0f172a;
font-variant-numeric: tabular-nums;
}
.inf-resumen span { font-size: 6.5pt; color: #64748b; text-transform: uppercase; letter-spacing: .03em; }
.inf-logo-la { height: 19px; width: auto; opacity: .85; }
.inf-pie {
display: flex !important;
justify-content: space-between; gap: 16px;
/* Los 10 mm de abajo de la última hoja, por lo mismo que el resto: @page va
en cero y el aire lo pone el contenido. */
margin: 12px 0 10mm; padding-top: 6px;
border-top: 1px solid #cbd5e1;
font-size: 7.5pt; color: #64748b;
break-inside: avoid;
}
/* ---------------------------------------------------------------------------
LA HOJA
Un punto menos de tipografía y las tarjetas más apretadas: en pantalla se
navega con scroll, en papel lo que se gana es que una sección entera quepa
en una hoja y no haya que dar vuelta la página para terminar de leer una
fila de equipos.
--------------------------------------------------------------------------- */
body { font-size: 9pt; }
.card {
box-shadow: none !important;
border: 1px solid #e2e8f0 !important;
padding: 9px 11px !important;
margin-bottom: 9px !important;
}
.seccion { margin: 8px 0 6px !important; break-after: avoid; }
.seccion h2 { font-size: 11.5pt !important; }
.card-head h3 { font-size: 10pt !important; }
/* El aire entre el título de la tarjeta y su contenido está pensado para el
dedo en un teléfono. En papel no se toca nada: son 3 cm por hoja regalados
entre encabezados y títulos de tabla. */
.card-head { margin-bottom: 8px !important; }
.list-title { padding: 10px 4px 5px !important; }
/* Las secciones marcadas empiezan hoja nueva: cada una es una conversación
distinta con el mandante —cómo está la flota, qué se movió, qué viene— y
partida a la mitad por el borde de la hoja se lee mal.
Como abren hoja, son ellas las que ponen el margen de arriba de esa hoja:
con @page en cero (ver arriba) el título quedaría pegado al filo del papel.
Este es también el motivo por el que los cortes se declaran y no se dejan
caer solos —donde cae el corte hay que poner el aire—, y por eso cada
sección está medida para caber entera en su hoja. */
[data-corte] { break-before: page; padding-top: 10mm; }
/* Y "Cambios por realizar" abre su propia hoja, aunque sea la segunda tarjeta
de la sección y no una sección. Las dos juntas no caben: la tabla de detalle
la alarga la cantidad de componentes que vengan, así que tarde o temprano el
corte cae adentro y las últimas filas quedan solas en la hoja siguiente, sin
el gráfico del que salieron. Cada gráfico con su tabla en una hoja: es la
unidad con la que se lee —"esto se hizo", "esto viene"— y así el corte queda
donde tiene que quedar en vez de donde alcance el papel.
Va como margen y no como relleno para que el aire quede FUERA del marco de la
tarjeta; en un corte forzado el navegador respeta el margen de arriba (en uno
natural lo descarta, y por eso el corte se fuerza). */
#card-sem-proy, #card-reprog { break-before: page; margin-top: 10mm !important; }
/* Nada de esto se puede partir sin que quede ilegible. */
.stat, .eq-card, .barras .b, .proy-cifras, .g-leyenda, .inf-cab { break-inside: avoid; }
.card { break-inside: auto; }
.grafico, .g-cols { break-inside: avoid; }
thead { display: table-header-group; } /* el encabezado se repite en cada hoja */
tr, .list-row { break-inside: avoid; }
/* La tarjeta y el título de su tabla no se separan del cuerpo: en una sola
columna una tarjeta puede empezar a 2 cm del borde de la hoja, y ahí lo que
se lleva la página siguiente tiene que ser la tarjeta entera, no su
encabezado solo. */
.card-head, .list-title { break-after: avoid; }
/* En pantalla la tabla de detalle es una caja con scroll de 300 px; en papel no
hay scroll, así que o se muestra entera o se pierde la mitad del detalle
—que es justo lo que el mandante pregunta. */
.tabla-cambios {
max-height: none !important; overflow: visible !important;
}
/* NADA pegajoso en papel. En pantalla el encabezado de la tabla es
`position: sticky` para que los rótulos sigan ahí mientras se baja por las
filas dentro de la caja de 300 px (y lo mismo hacen las columnas fijas de la
tabla grande y los encabezados de las hojas inferiores). Impreso ya no hay
caja ni scroll: lo pegajoso se agarra del borde de la hoja y el navegador
estampaba la fila SEMANA · EQUIPO · COMPONENTE a media tabla, ENCIMA de una
fila de datos —que quedaba escondida detrás, porque el encabezado lleva
z-index—. No es un corte de hoja mal puesto, es pintura en el lugar
equivocado, y por eso se apaga en todas partes de una vez en lugar de ir
tapando casos. Repetir el encabezado cuando una tabla sí cruza de hoja lo
sigue haciendo `table-header-group`, más abajo. */
.tabla-cambios th,
.table thead th,
.tabla-comp th.td-acciones, .tabla-comp td.td-acciones,
.tabla-comp th.td-agenda, .tabla-comp td.td-agenda,
.sheet-head, .sheet-pie {
position: static !important;
}
/* La fila de equipos: en la hoja vertical caben cinco. Se fija el número porque
repartirFlota() midió el ancho de la PANTALLA, no el del papel, y dejaría una
última fila coja.
El max-width en línea que deja esa misma función hay que anularlo: está
calculado con las columnas de la pantalla, así que imprimir desde un teléfono
dejaba la flota en una columna de 200 px al costado izquierdo de la hoja. */
.flota {
/* Columnas de un quinto del ancho, no cinco columnas elásticas: una faena de
tres equipos deja el hueco a la derecha en vez de inflar tres tarjetas al
doble de tamaño que las de la faena de al lado. */
grid-template-columns: repeat(auto-fill, calc((100% - 4 * 5px) / 5)) !important;
gap: 5px !important;
max-width: none !important;
}
.kpis { gap: 7px !important; margin-bottom: 9px !important; }
.kpis-portada { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
/* El KPI se queda con su banda de color a la izquierda. Se dice explícito
porque el `border` de una línea de más arriba pisaba el `border-left-color`
de app.css y las cuatro tarjetas salían impresas iguales de grises: la
primera cosa que se mira en la hoja es el semáforo, y sin color no hay
semáforo. */
.stat { box-shadow: none !important; border: 1px solid #e2e8f0 !important; border-left-width: 3px !important; }
.stat.k-atrasado { border-left-color: var(--est-atrasado) !important; }
.stat.k-aviso { border-left-color: var(--est-aviso) !important; }
.stat.k-normal { border-left-color: var(--est-normal) !important; }
.stat.k-cump { border-left-color: var(--primary) !important; }
/* Y el punto del rótulo toma el color de su estado: en la hoja la banda de 3 px
queda al borde de la tarjeta y el ojo la busca junto al texto. */
.stat.k-atrasado .label .ico { color: var(--est-atrasado) !important; }
.stat.k-aviso .label .ico { color: var(--est-aviso) !important; }
.stat.k-normal .label .ico { color: var(--est-normal) !important; }
.stat.k-cump .label .ico { color: var(--primary) !important; }
/* Una sola columna, no dos: en vertical la hoja tiene 19 cm de ancho y
partirlos en dos deja cada gráfico en 9, que es menos de lo que necesitan
doce meses de proyección y las seis columnas de la tabla de detalle. Apiladas
cada tarjeta usa el ancho completo y se sigue leyendo en el mismo orden —lo
hecho, y debajo lo que viene—; además así las dos tarjetas de una sección
caben en una misma hoja. */
.grid-mitades { grid-template-columns: 1fr !important; gap: 9px !important; }
/* Los interruptores de la leyenda siguen diciendo qué es cada relleno, pero en
papel no se aprietan: se les saca el aspecto de botón. */
.g-leyenda-item { cursor: default; }
.g-leyenda-item.apagado { display: none; }
/* El enlace de un aviso no lleva a ninguna parte en papel. */
a { text-decoration: none !important; color: inherit !important; }
/* Los gráficos con muchas columnas —doce meses— viven en una caja con scroll
horizontal. En papel no hay scroll: lo que se sale de la caja simplemente no
existe, y el informe llegaría al mandante con medio año cortado. Acá las
columnas se encogen para que el año entre completo en el ancho de la hoja.
Con el ancho completo de la hoja vertical ya no quedan apretadas, así que las
etiquetas recuperan medio punto. */
.grafico { overflow: visible !important; padding-bottom: 0 !important; }
/* Alto de las barras: 150 px en pantalla, 118 en papel. En la hoja vertical hay
cuatro gráficos que sumar y lo que se compara es la diferencia entre
columnas, que a 118 se ve igual de bien. Es una variable, así que se cambia
acá sin tocar el JS que dibuja. */
.grafico { --g-alto: 118px !important; }
.g-cols { min-width: 0 !important; gap: 4px !important; }
.g-c { flex: 1 1 0 !important; }
.g-x { font-size: 6.5pt !important; }
.g-x small { font-size: 6pt !important; }
.g-n { font-size: 7pt !important; }
.g-leyenda { font-size: 7pt !important; }
/* La tabla de detalle en papel: sin el borde de la caja con scroll, que ahí no
es una caja sino la tabla completa. Con el ancho entero de la hoja el nombre
del componente entra en una línea, que era el motivo de fondo por el que
había que dar vuelta la hoja para terminar de leerla. */
.tabla-cambios { border: 0 !important; }
.tabla-cambios table { font-size: 7.5pt !important; }
/* Filas de 26 px en vez de 30: la de una lista que se recorre con el dedo no
es la de una lista que se lee. Cuatro píxeles por fila son dos filas más por
hoja, y esta tabla es la que el mandante se lleva anotada. */
.tabla-cambios td, .tabla-cambios th { padding: 2px 6px !important; line-height: 1.25 !important; }
.tabla-cambios .sem { line-height: 1.15 !important; }
.tabla-cambios .sem small { font-size: 6pt !important; }
.tabla-cambios .chip-estado { padding: 0 5px !important; }
/* ---------------------------------------------------------------------------
QUE LA PRIMERA HOJA SEA UNA SOLA HOJA
Portada, flota y cumplimiento son la foto del estado de la faena: es la hoja
que se pone sobre la mesa en la reunión y no puede terminar dada vuelta. En
pantalla sobra el alto porque hay scroll; en A4 vertical hay 27,9 cm —8 más
que apaisado— pero también 4 tarjetas de equipo por fila en vez de 5, o sea
más filas, así que sigue habiendo que apretar. Menos que antes: el apretón
está calibrado para que una faena de doce equipos (tres filas) entre completa
con el gráfico de cumplimiento debajo. Para volver a medir, `media='all'` en
el de impresión y comparar el alto contra 1055 px (279 mm).
--------------------------------------------------------------------------- */
.stat { padding: 8px 10px !important; }
.stat .label { font-size: 7.5pt !important; }
.stat .value { font-size: 15pt !important; }
.stat .delta { font-size: 7pt !important; }
.aguja { max-width: 104px !important; }
.a-cifra { font-size: 12pt !important; }
/* La tarjeta de equipo bajó de 171 px a 123: cinco por fila en vez de cuatro,
la silueta a la mitad y las tres cifras como renglones de lectura y no como
botones con alto de toque. Diez equipos pasaron de tres filas a dos, y la
foto de la flota —que es lo que se mira primero— ocupa un tercio de la hoja
en vez de la mitad. Por debajo de esto la silueta deja de distinguir una pala
de un cargador, que es para lo que está. */
.eq-card { padding: 6px !important; gap: 2px !important; }
.eq-sil, .eq-card svg { max-height: 26px; }
.eq-sil { height: 26px !important; }
.barra-estados { height: 6px !important; }
.eq-top b { font-size: 8pt !important; }
.eq-cump { font-size: 6.5pt !important; }
.eq-nums { gap: 1px !important; }
.eq-n { font-size: 6.5pt !important; line-height: 1.2 !important; padding: 0 4px !important; }
.eq-n b { font-size: 7pt !important; }
/* Pie del horómetro (2026-10-01): mismo apretón que las cifras, y el color
de la alerta forzado a imprimirse —sin eso Chrome se salta el fondo de la
cápsula y la fecha pierde el color que dice si la lectura está vieja. */
.eq-horom { padding-top: 3px !important; margin-top: 1px !important; gap: 3px !important; }
.eq-horom .h-val { font-size: 6.5pt !important; }
.eq-horom .h-fecha { font-size: 6pt !important; padding: 0 4px !important; }
.eq-horom, .eq-horom * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.barras-cump { gap: 2px !important; }
.barras-cump .b { font-size: 7.5pt !important; }
.barras-cump .pista { height: 7px !important; }
.cump-pie { margin-top: 4px !important; font-size: 7pt !important; }
.flota { margin-bottom: 8px !important; }
.kpis .stat { padding: 7px 9px !important; }
/* ---------------------------------------------------------------------------
DASHBOARD CABLES (2026-10-06)
El mismo informe tipo tablero, ahora de la pantalla de cables: la misma
cabecera, el mismo pie y las mismas reglas de arriba. Acá solo se acomodan
las piezas propias de esa pantalla. Dos hojas: la primera es la foto de la
flota —KPIs y una tarjeta por pala— y la segunda (el [data-corte] que lleva
.cab-graficos) la historia y lo que viene. El apretón de las tarjetas está
medido para que nueve palas (tres filas) entren en la primera hoja.
--------------------------------------------------------------------------- */
/* Tres palas por fila: en 19 cm caben con las barras legibles; con cuatro, la
mini-gráfica de vida se come el texto de su lado. */
.cab-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important; margin-bottom: 4px !important;
}
.cab-card {
padding: 7px 9px !important; gap: 5px !important; margin-bottom: 0 !important;
break-inside: avoid;
/* Igual que con los KPI: el `border` de .card de más arriba pisa la raya de
color de arriba de la tarjeta, que es el semáforo de la pala. */
border-top: 3px solid var(--est-normal) !important;
}
.cab-card.n-aviso { border-top-color: var(--est-aviso) !important; }
.cab-card.n-atrasado { border-top-color: var(--est-atrasado) !important; }
.cab-head b { font-size: 10pt !important; }
.cab-head .muted { font-size: 7pt !important; }
.chip-est { font-size: 6.5pt !important; padding: 1px 6px !important; }
.cab-sec { gap: 3px !important; padding-top: 4px !important; }
.cab-tit { font-size: 7.5pt !important; }
.cab-tit .muted, .cab-inst { font-size: 6.5pt !important; }
.cab-inst { margin-top: -2px !important; }
.cab-ico { width: 10px !important; height: 10px !important; }
.cab-b-top { font-size: 7pt !important; }
.cab-b-sub { font-size: 6.5pt !important; }
.cab-b-pista { height: 5px !important; }
.badge-manda { font-size: 5.5pt !important; }
.cab-cambio { font-size: 7pt !important; }
.cab-pie { font-size: 7pt !important; gap: 6px !important; }
.cab-spark { height: 26px !important; width: 90px !important; gap: 2px !important; }
/* "ver ficha" lleva a la app; en papel no hay dónde apretar. */
.cab-link { display: none !important; }
/* El cuadro "Ritmo para cables" es para editar: en papel basta la cabecera de cada tarjeta. */
.rt-cab-panel { display: none !important; }
/* Segunda hoja: gráfico de 24 meses, vida lograda y próximos cambios. */
.cab-graficos { gap: 9px !important; margin-bottom: 0 !important; }
.vl-tabla { gap: 5px !important; font-size: 7.5pt !important; }
.vl-fila { grid-template-columns: 90px 1fr 1fr !important; gap: 8px !important; }
.vl-cab { font-size: 6.5pt !important; }
.vl-pista { height: 6px !important; }
.vl-txt { font-size: 6.5pt !important; }
.tl-leyenda { font-size: 7pt !important; margin-top: 6px !important; }
/* La caja con scroll horizontal de la tabla no corta nada en papel. */
.table-wrap:has(> .cab-prox) { overflow: visible !important; }
.cab-prox { font-size: 7.5pt !important; }
.cab-prox th, .cab-prox td { padding: 3px 6px !important; line-height: 1.25 !important; }
.cab-prox td .sub { font-size: 6.5pt !important; }