/* ============================================================================= playground.edubox.app | hoja-impresion.css Fábrica de Fichas Imprimibles — todo lo relativo a la HOJA (.hl-hoja) y a la impresión (@media print). Se carga SIEMPRE después de hl-comun.css (que ya trae la regla base de impresión y el .hl-hoja genérico) y después de fichas-imprimibles.css. Fuera de @layer: gana a BoxUI por defecto. Sin !important fuera de @media print. ============================================================================= */ /* --------------------------------------------------------------------------- Vista previa = impreso. La hoja mide carta (21.59 × 27.94 cm). En pantalla se reduce con transform: scale(var(--hl-scale)) y el JS ajusta el tamaño del envoltorio (.hl-hoja-wrap) para que la escala no deje huecos. Al imprimir, scale(1). --------------------------------------------------------------------------- */ .hl-hoja { box-sizing: border-box; width: 21.59cm; min-height: 27.94cm; margin: 0; padding: 1.4cm; background: #ffffff; color: #111111; border-radius: var(--box-radius, 8px); box-shadow: 0 2px 14px rgba(0, 0, 0, .14); transform: scale(var(--hl-scale, 1)); transform-origin: top left; font-family: var(--box-font-sans, system-ui, sans-serif); } .hl-hoja-wrap { position: relative; width: 21.59cm; /* el JS ajusta ancho/alto tras escalar */ margin: 0 auto; overflow: hidden; } .hl-hoja-wrap + .hl-hoja-wrap { margin-top: 1.5rem; } /* Solución oculta en pantalla por defecto; se muestra con .hl-visible (la impresión la controla la clase del , ver @media print) */ .hl-hoja-solucion { display: none; } .hl-hoja-solucion.hl-visible { display: block; } /* --------------------------------------------------------------------------- Encabezado impreso siempre: título, centro, Nombre/Grado/Fecha --------------------------------------------------------------------------- */ .hl-cabecera { margin-bottom: .8rem; } .hl-titulo { margin: 0 0 .2rem; font-size: 20px; font-weight: 800; line-height: 1.2; text-align: center; color: #111; } .hl-centro { margin: 0 0 .55rem; font-size: 12px; font-weight: 600; text-align: center; color: #444; } .hl-datos { display: flex; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap; padding-bottom: .45rem; border-bottom: 2px solid #111; font-size: 12.5px; color: #111; } .hl-dato { display: inline-flex; align-items: baseline; gap: .35rem; } .hl-linea { display: inline-block; width: 7em; max-width: 34vw; border-bottom: 1px solid #111; } .hl-dato--grado .hl-linea { width: 3.5em; } .hl-dato--fecha .hl-linea { width: 5.5em; } /* --------------------------------------------------------------------------- Sopa de letras --------------------------------------------------------------------------- */ .hl-sopa { margin: 0 auto; border-collapse: collapse; table-layout: fixed; font-weight: 700; color: #111; font-size: 16px; /* se sobrescribe por tamaño de rejilla desde el JS */ } .hl-sopa td { border: 1px solid #111; width: 1.45em; height: 1.45em; padding: 0; text-align: center; vertical-align: middle; font-size: inherit; line-height: 1; break-inside: avoid; page-break-inside: avoid; } .hl-sopa-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.2rem; margin: .9rem 0 0; padding: 0; list-style: none; font-size: 13px; font-weight: 600; color: #111; } /* Solución: palabras colocadas resaltadas (gris suave, imprime bien en B/N) */ .hl-sopa td.hl-celda-sol { background: #d8e3d0; } .hl-sopa-aviso { margin: .9rem auto 0; max-width: 15cm; text-align: center; font-size: 12px; font-weight: 600; color: #b00020; } /* --------------------------------------------------------------------------- Crucigrama --------------------------------------------------------------------------- */ .hl-crucigrama { margin: 0 auto; border-collapse: collapse; table-layout: fixed; font-size: 15px; color: #111; } .hl-crucigrama td { position: relative; width: 2em; height: 2em; padding: 0; border: 1px solid #111; text-align: center; vertical-align: middle; font-weight: 700; font-size: inherit; line-height: 1; break-inside: avoid; page-break-inside: avoid; } .hl-crucigrama td.hl-celda-negra { background: #111; border-color: #111; } .hl-crucigrama td .hl-num { position: absolute; top: 1px; left: 2px; font-size: 9px; font-weight: 700; line-height: 1; color: #111; } .hl-crucigrama td .hl-letra { line-height: 1.6em; } .hl-pistas { margin: 1rem 0 0; font-size: 13px; color: #111; } .hl-pistas h3 { margin: .7rem 0 .25rem; font-size: 14px; border-bottom: 1px solid #111; padding-bottom: 2px; } .hl-pistas ol { margin: 0; padding-left: 1.4rem; } .hl-pistas li { margin-bottom: 2px; line-height: 1.35; } .hl-pistas .hl-largo { color: #555; font-style: italic; font-size: 11.5px; } /* --------------------------------------------------------------------------- Caligrafía Renglones + pautas dibujadas SOLO con gradients CSS (sin imágenes). --hl-tam lo inyecta el JS (tamaño de letra 24–72 px). Fuente escolar: no hay en /assets/lib/, se usa cursiva del sistema (ver PLAN.md §2.3 limitación). --------------------------------------------------------------------------- */ .hl-caligrafia { margin-top: .4rem; } .hl-calig-renglon { --hl-renglon-h: calc(var(--hl-tam) * 1.9); position: relative; height: var(--hl-renglon-h); margin-bottom: .12cm; overflow: hidden; break-inside: avoid; page-break-inside: avoid; } .hl-calig-texto { position: absolute; left: 0; right: 0; bottom: calc(var(--hl-tam) * 0.28); text-align: center; white-space: nowrap; font-size: var(--hl-tam); line-height: 1; font-weight: 500; color: #111; font-family: "Segoe Script", "Comic Sans MS", "Bradley Hand", "Brush Script MT", "Segoe Print", cursive; letter-spacing: .02em; } /* Repeticiones: separadas para que el alumno trace cada una */ .hl-calig-palabra { display: inline-block; margin-right: 1.6em; } /* Trazo: punteado (letras a puntos para calcar) */ .hl-trazo-punteado .hl-calig-texto { color: transparent; -webkit-text-stroke: 1px #6b6b6b; background-image: radial-gradient(circle, #555 1px, transparent 1.6px); background-size: 3.5px 3.5px; -webkit-background-clip: text; background-clip: text; } /* Trazo: gris claro para repasar encima */ .hl-trazo-gris .hl-calig-texto { color: #9a9a9a; } /* Trazo: solo la primera repetición visible, el resto en blanco */ .hl-trazo-primera .hl-calig-palabra { color: transparent; } .hl-trazo-primera .hl-calig-palabra:first-child { color: #111; } /* Pauta: línea simple */ .hl-pauta-simple .hl-calig-renglon { --hl-bas: calc(var(--hl-renglon-h) - var(--hl-tam) * 0.28); background-image: linear-gradient( to bottom, transparent 0, transparent calc(var(--hl-bas) - 1px), #8a8a8a calc(var(--hl-bas) - 1px), #8a8a8a var(--hl-bas), transparent var(--hl-bas) ); } /* Pauta: doble línea (lateral central + base) */ .hl-pauta-doble .hl-calig-renglon { --hl-bas: calc(var(--hl-renglon-h) - var(--hl-tam) * 0.28); --hl-mid: calc(var(--hl-bas) - var(--hl-tam) * 0.55); background-image: linear-gradient( to bottom, transparent 0, transparent calc(var(--hl-mid) - 1px), #c2c2c2 calc(var(--hl-mid) - 1px), #c2c2c2 var(--hl-mid), transparent var(--hl-mid) ), linear-gradient( to bottom, transparent 0, transparent calc(var(--hl-bas) - 1px), #8a8a8a calc(var(--hl-bas) - 1px), #8a8a8a var(--hl-bas), transparent var(--hl-bas) ); } /* Pauta: cuadrícula (el renglón mide 2× la letra y la letra va centrada) */ .hl-pauta-cuadricula .hl-calig-renglon { --hl-renglon-h: calc(var(--hl-tam) * 2); background-image: repeating-linear-gradient( to bottom, transparent 0, transparent calc(var(--hl-tam) * 0.5 - 1px), #c9c9c9 calc(var(--hl-tam) * 0.5 - 1px), #c9c9c9 calc(var(--hl-tam) * 0.5) ), repeating-linear-gradient( to right, transparent 0, transparent calc(var(--hl-tam) * 0.5 - 1px), #c9c9c9 calc(var(--hl-tam) * 0.5 - 1px), #c9c9c9 calc(var(--hl-tam) * 0.5) ); } .hl-pauta-cuadricula .hl-calig-texto { bottom: calc(var(--hl-tam) * 0.5); } /* Pauta Montessori: 4 líneas (superior, media, base, descendente) */ .hl-pauta-montessori .hl-calig-renglon { --hl-bas: calc(var(--hl-renglon-h) - var(--hl-tam) * 0.28); --hl-l1: calc(var(--hl-bas) - var(--hl-tam) * 0.62); --hl-l2: calc(var(--hl-bas) - var(--hl-tam) * 0.34); --hl-l3: calc(var(--hl-bas) + var(--hl-tam) * 0.26); background-image: linear-gradient( to bottom, transparent 0, transparent calc(var(--hl-l1) - 1px), #9a9a9a calc(var(--hl-l1) - 1px), #9a9a9a var(--hl-l1), transparent var(--hl-l1) ), linear-gradient( to bottom, transparent 0, transparent calc(var(--hl-l2) - 1px), #9a9a9a calc(var(--hl-l2) - 1px), #9a9a9a var(--hl-l2), transparent var(--hl-l2) ), linear-gradient( to bottom, transparent 0, transparent calc(var(--hl-bas) - 2px), #111 calc(var(--hl-bas) - 2px), #111 var(--hl-bas), transparent var(--hl-bas) ), linear-gradient( to bottom, transparent 0, transparent calc(var(--hl-l3) - 1px), #bdbdbd calc(var(--hl-l3) - 1px), #bdbdbd var(--hl-l3), transparent var(--hl-l3) ); } /* --------------------------------------------------------------------------- Planas de operaciones --------------------------------------------------------------------------- */ .hl-operaciones-instrucciones { margin: .3rem 0 .75rem; text-align: center; font-size: 12px; color: #444; } .hl-ejercicios { display: grid; gap: .7rem 1.1rem; align-items: start; } .hl-ejercicios.hl-columnas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hl-ejercicios.hl-columnas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hl-ejercicios.hl-columnas--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hl-ejercicio { break-inside: avoid; page-break-inside: avoid; font-variant-numeric: tabular-nums; font-weight: 600; color: #111; font-size: 16px; } /* Formato horizontal: 23 + 45 = ____ */ .hl-ejercicio-h { display: flex; align-items: baseline; justify-content: center; gap: .35rem; } .hl-respuesta { display: inline-block; min-width: 3.2em; height: 1.3em; border-bottom: 1.5px solid #111; text-align: center; } /* Formato vertical: formato de columna */ .hl-ejercicio-v { display: inline-flex; flex-direction: column; align-items: flex-end; justify-self: center; font-size: 16px; } .hl-ej-fila { display: flex; align-items: baseline; gap: .3rem; min-height: 1.25em; } .hl-ej-fila .hl-ej-op { color: #111; } .hl-ej-linea { width: 100%; border-top: 2px solid #111; height: 0; margin-top: 2px; } .hl-ej-res { min-width: 3em; min-height: 1.35em; text-align: center; border-bottom: 1.5px solid #111; } .hl-pie-semilla { margin-top: .8rem; text-align: right; font-size: 11px; color: #555; } /* En la hoja de solución las respuestas van sin la línea de relleno */ .hl-hoja-solucion .hl-respuesta, .hl-hoja-solucion .hl-ej-res { border-bottom-color: transparent; font-weight: 700; } /* --------------------------------------------------------------------------- Cuadrícula / papel especial (todo CSS puro, sin imágenes) --------------------------------------------------------------------------- */ .hl-hoja.hl-hoja-papel { position: relative; } .hl-papel { position: absolute; left: 1.4cm; right: 1.4cm; top: 3.9cm; bottom: 1.4cm; border: 1px solid #111; box-sizing: border-box; } /* Cuadrícula: celdilla configurable (0.5 / 0.7 / 1 cm) */ .hl-papel-cuadricula { background-image: repeating-linear-gradient( to bottom, transparent 0, transparent calc(var(--hl-celda) - 1px), #b9b9b9 calc(var(--hl-celda) - 1px), #b9b9b9 var(--hl-celda) ), repeating-linear-gradient( to right, transparent 0, transparent calc(var(--hl-celda) - 1px), #b9b9b9 calc(var(--hl-celda) - 1px), #b9b9b9 var(--hl-celda) ); } /* Papel pautado: líneas horizontales cada N mm + margen izquierdo. --hl-margen lo inyecta el JS (2 × interlineado) porque CSS calc no permite multiplicar variables. */ .hl-papel-pautado { background-image: repeating-linear-gradient( to bottom, transparent 0, transparent calc(var(--hl-inter) - 1px), #a5a5a5 calc(var(--hl-inter) - 1px), #a5a5a5 var(--hl-inter) ), linear-gradient( to right, #c03c3c 0, #c03c3c var(--hl-margen), transparent var(--hl-margen), transparent 100% ); } /* Milimetrado: 1 mm + refuerzo cada 5 mm */ .hl-papel-milimetrado { background-image: repeating-linear-gradient( to bottom, transparent 0, transparent calc(5mm - 1px), #d0d0d0 calc(5mm - 1px), #d0d0d0 5mm ), repeating-linear-gradient( to right, transparent 0, transparent calc(5mm - 1px), #d0d0d0 calc(5mm - 1px), #d0d0d0 5mm ), repeating-linear-gradient( to bottom, transparent 0, transparent calc(1mm - 1px), #e7e7e7 calc(1mm - 1px), #e7e7e7 1mm ), repeating-linear-gradient( to right, transparent 0, transparent calc(1mm - 1px), #e7e7e7 calc(1mm - 1px), #e7e7e7 1mm ); } /* Punteado (dot grid): puntos cada 5 mm */ .hl-papel-punteado { background-image: radial-gradient(circle, #7a7a7a 1.1px, transparent 1.5px); background-size: 0.5cm 0.5cm; } /* Historieta: viñetas 2×2 / 2×3 / 3×3 */ .hl-historieta { display: grid; grid-template-columns: repeat(var(--hl-hv, 2), 1fr); grid-template-rows: repeat(var(--hl-hr, 2), 1fr); gap: .45cm; height: 100%; } .hl-historieta .hl-vineta { position: relative; border: 2px solid #111; box-sizing: border-box; break-inside: avoid; page-break-inside: avoid; } .hl-historieta .hl-vin-num { position: absolute; top: .2cm; left: .35cm; font-size: 13px; font-weight: 800; color: #111; } .hl-historieta .hl-vin-texto { position: absolute; bottom: .2cm; right: .3cm; font-size: 10px; color: #777; } /* --------------------------------------------------------------------------- IMPRESIÓN — específico del PLAN §3. La regla base ya está en hl-comun.css (@page, ocultar nav/sidebar…). --------------------------------------------------------------------------- */ @media print { .hl-preview { padding: 0; overflow: visible; gap: 0; } .hl-hoja-wrap { width: auto !important; height: auto !important; margin: 0 !important; overflow: visible; } .hl-hoja { width: 100% !important; min-height: 27.94cm; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; transform: scale(1) !important; transform-origin: top left; break-after: page; page-break-after: always; } .hl-hoja:last-child { break-after: auto; page-break-after: auto; } /* La rejilla SIEMPRE en negro sobre blanco aunque el tema sea oscuro */ .hl-sopa, .hl-crucigrama { color: #000 !important; } .hl-sopa td, .hl-crucigrama td, .hl-sopa td.hl-celda-negra, .hl-crucigrama td.hl-celda-negra { border-color: #000 !important; } .hl-crucigrama td.hl-celda-negra { background: #000 !important; } .hl-sopa td.hl-celda-sol { background: #d0d0d0 !important; } /* nunca partir celdas/ítems a la mitad */ .hl-celda, .hl-item, .hl-calig-renglon, .hl-vineta { break-inside: avoid; page-break-inside: avoid; } /* Ficha y solución NUNCA juntas: - por defecto se imprime solo la ficha (la solución queda oculta) - body.hl-imprimir-ficha → solo fichas - body.hl-imprimir-solucion → solo soluciones */ .hl-hoja-solucion { display: none !important; } body.hl-imprimir-ficha .hl-hoja-ficha { display: block !important; } body.hl-imprimir-ficha .hl-hoja-solucion { display: none !important; } body.hl-imprimir-solucion .hl-hoja-ficha { display: none !important; } body.hl-imprimir-solucion .hl-hoja-solucion { display: block !important; } }