/* ============================================================================= RUTINITAS — IMPRESIÓN ============================================================================= Se aplica al módulo de impresión (admin-impresion.html). El tamaño de hoja y la orientación se inyectan como regla `@page` desde el script de esa pantalla, porque `@page { size: … }` no se puede condicionar por selector. La hoja impresa lleva EXACTAMENTE el mismo sistema de completitud que la app: una casilla de tilde y una casilla de estrella por actividad. Es el mismo contrato en digital y en papel. ============================================================================= */ /* Default de página. Las pantallas que necesitan otro tamaño (impresión de la rutina, cartas recortables) inyectan su propia `@page` al final del , que pisa a esta por orden. */ @page { size: A4 portrait; margin: 1.5cm; } @media print { :root { color-scheme: light; } /* La hoja manda: se apaga toda la piel de la app */ body { background: var(--rt-papel); color: var(--rt-tinta); margin: 0; } .rt-header, .rt-nav, .rt-scrim, .rt-snack, .rt-celebrate, .rt-print-controls, .rt-print-toolbar, .skip-link, .rt-no-print { display: none !important; } .rt-shell { display: block; min-height: 0; } html, body, .rt-shell, .rt-main, .rt-print-layout, #hojas { overflow: visible !important; min-width: 0 !important; min-height: 0 !important; max-height: none !important; } .rt-main { padding: 0; } .rt-main > * { max-width: none; } .rt-print-layout { display: block; } .rt-sheet-stage { padding: 0; background: transparent; border: 0; border-radius: 0; overflow: visible; display: block; } /* ========================================================================= LA HOJA TIENE QUE OCUPAR EL ANCHO DE LA PÁGINA ========================================================================= En pantalla, `.rt-sheet-stage` es una grilla con `place-items: start center` para centrar la previsualización. Eso hace que `#hojas` —el contenedor de las hojas— se achique al contenido en vez de ocupar el ancho disponible. Al imprimir eso sale caro y de forma nada obvia: la hoja quedaba de 472px dentro de una página de 703px útiles, la grilla de actividades envolvía en más filas de las que le tocaban, la hoja crecía de alto y **se pasaba a una segunda página física**. En A4 vertical con 16 por página, una hoja de 1032px de alto disponible medía 1919px: casi el doble. Cada «hoja» salía cortada en dos y las cartas quedaban partidas al medio. Se veía sólo en algunas combinaciones —A4 con 8 por página entraba igual— y por eso pasaba desapercibido. La comprobación que lo encuentra es contar: si el PDF tiene más páginas que hojas, algo se desbordó. `width: 100%` en los dos, explícito. No alcanza con ponérselo a la hoja: si el contenedor está achicado, el 100% es 100% de lo achicado. */ #hojas, .rt-sheet { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* La previsualización escala las hojas con `transform: scale()` INLINE para que entren en el ancho de la pantalla, y compensa el hueco que deja la escala con un `margin-bottom` NEGATIVO, también inline. Los dos tienen que morir al imprimir, y los dos necesitan `!important` porque un estilo inline le gana a cualquier regla que no lo lleve. Sin el `!important` en el margen, en un teléfono la escala baja a ~0.35 y el inline queda en unos −680px: cada página se monta sobre la anterior y el PDF sale ilegible. En un monitor ancho la escala es 1, el margen es +24 y el bug no se ve — por eso aparecía sólo en mobile. EL PADDING TAMBIÉN VA INLINE, Y TAMBIÉN NECESITA `!important`. La hoja de cartas se arma con `padding:1cm` inline para simular el margen del papel en la previsualización. Al imprimir, ese margen ya lo pone `@page`: si el inline sobrevive, la caja de contenido pierde 2cm de alto, la última fila de cartas no entra y —como la hoja lleva `overflow:hidden` para no partirse en dos páginas— se recorta EN SILENCIO. El PDF sale con el número de páginas correcto y con media hoja de cartas sin su nombre ni su línea de corte, que es justo lo que no puede pasar en algo hecho para recortar. Un `padding: 0` sin `!important` pierde contra el inline. */ .rt-sheet { min-height: 0; margin: 0 !important; padding: 0 !important; box-shadow: none; transform: none !important; page-break-inside: avoid; break-inside: avoid-page; page-break-after: always; break-after: page; } .rt-sheet:last-child { page-break-after: auto; break-after: auto; } .rt-sheet-item, .rt-carta { break-inside: avoid; } /* Cartas: cada hoja de frentes y cada hoja de dorsos es una página propia */ .rt-cartas-hoja { align-content: flex-start; } /* Reportes del tutor: se imprimen como documento, no como hoja simulada */ .rt-reporte { display: block; } .rt-reporte .rt-card { box-shadow: none; border-color: #d1cec9; break-inside: avoid; margin-bottom: 0.6cm; } .rt-reporte h1, .rt-reporte h2, .rt-reporte h3 { break-after: avoid; } .rt-solo-print { display: flex !important; } .rt-reporte-cabecera { align-items: center; gap: 0.5cm; padding-bottom: 0.3cm; margin-bottom: 0.5cm; border-bottom: 0.06cm solid #c0bcb6; } /* Los tintes de franja tienen que sobrevivir al render del navegador */ .rt-sheet, .rt-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ═══════════════════════════════════════════════════════════════════════ RESPALDO PARA NAVEGADORES ANTERIORES A 2023 Arriba cada valor quedó como color fijo, calculado con la misma matemática oklab que usa el navegador. Acá se restituye la mezcla para los que la entienden, así cambiar un token sigue arrastrando a sus derivados. Un navegador viejo ignora este bloque entero y se queda con los fijos: la misma pantalla, sin nada transparente. Generado desde scripts/colores.cjs · el gate es scripts/compat.cjs ═══════════════════════════════════════════════════════════════════════ */ @supports (color: color-mix(in oklab, red 50%, blue)) { @media print { .rt-reporte .rt-card { border-color: color-mix(in oklab, var(--rt-tinta) 22%, var(--rt-papel)); } } @media print { .rt-reporte-cabecera { border-bottom: 0.06cm solid color-mix(in oklab, var(--rt-tinta) 30%, var(--rt-papel)); } } }