/* Estilos visuales de las fichas cognitivas, copiados (no movidos) del
   <style> de app/ficha-cognitiva-print.html (no se ha tocado ese archivo,
   ya validado en producción) y con cada selector prefijado con
   .cs-render-scope para poder incrustarlos dentro de otras páginas
   (p.ej. el builder visual del admin) sin que se filtren a body/table/etc
   globales. Reglas de solo impresión (@page, @media print) omitidas a
   propósito: aquí no se imprime, solo se muestra en pantalla. */

  .cs-render-scope{--band:#2e6da4;--band-dark:#1f4e79;--line:#b9cbdd;--box:#eef4f9;
    /* La regla base body{...} del print.html (font-family/font-size/
       line-height/color) se omitió a propósito al escopar el resto de
       selectores (ver comentario de cabecera) porque "body" no se puede
       escopar igual que una clase — pero sin ella el lienzo heredaba la
       tipografía del panel admin en vez de la del diseño real. Se repone
       aquí, sobre .cs-render-scope en vez de sobre body. */
    font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;font-size:13.5px;line-height:1.45;color:#1a1a1a}
  /* Modificadores de "Estilo visual" (panel de propiedades del builder,
     ver ficha-builder.js) — de momento solo afectan a la vista previa del
     builder, no al PDF/impresión real (ficha-cognitiva-print.html no se
     ha tocado). */
  .cs-render-scope.fb-spacing-compact .section{padding-top:8px}
  .cs-render-scope.fb-spacing-compact .qline{margin:2px 0}
  .cs-render-scope.fb-spacing-wide .section{padding-top:28px}
  .cs-render-scope.fb-spacing-wide .qline{margin:9px 0}
.cs-render-scope .toolbar {position:sticky;top:0;background:#222;color:#fff;padding:10px 16px;display:flex;gap:10px;align-items:center;z-index:10}
.cs-render-scope .toolbar button {border:none;border-radius:8px;padding:9px 16px;font-weight:700;cursor:pointer;background:#7a63ef;color:#fff;font-size:13px}
.cs-render-scope .toolbar span {font-size:12px;color:#bbb}
  /* display:flex + column en .sheet-page y margin-top:auto en .page-footer
     (en vez de position:absolute+bottom): así el pie siempre queda pegado
     justo después del contenido real. Si una página tiene poco contenido,
     el hueco flex lo empuja hasta el fondo (efecto visual idéntico al de
     antes); si una página se llena más de lo previsto y el contenido
     supera el alto de la hoja, el pie simplemente continúa a partir del
     contenido en vez de quedar fijo a una altura absoluta y solaparse con
     el texto (bug reportado: el pie tapaba/cortaba el contenido en páginas
     muy llenas). */
.cs-render-scope .sheet-page {background:#fff;width:210mm;min-height:295mm;margin:14px auto;padding:16mm 14mm 18mm;position:relative;box-shadow:0 3px 18px rgba(0,0,0,.35);display:flex;flex-direction:column}
.cs-render-scope .page-body {flex:1 0 auto}
.cs-render-scope h1.ficha-title {text-align:center;color:var(--band-dark);font-size:24px;letter-spacing:.03em;margin:0 0 4px;text-transform:uppercase}
.cs-render-scope .ficha-sub {text-align:center;color:var(--band);font-size:13px;margin:0 0 14px}
.cs-render-scope table {border-collapse:collapse;width:100%}
.cs-render-scope .meta-table td {border:1px solid var(--line);padding:6px 10px;font-size:13px}
  /* Un ejercicio nunca se parte al imprimir: si no cabe entero en lo que
     queda de la página física, pasa entero a la siguiente en vez de dejar
     el título/enunciado en una página y el contenido en la otra. */
  /* padding-top, no margin-top: en la paginación de impresión, un margen
     superior se recorta a 0 cuando el elemento acaba siendo lo primero de
     una página física nueva (comportamiento estándar de fragmentación
     CSS) — por eso la cabecera de un ejercicio podía quedar pegada al
     borde de la hoja tras un salto de página. El padding no se recorta
     igual, así que mantiene el hueco también justo después de un salto. */
.cs-render-scope .section {padding-top:16px;break-inside:avoid;page-break-inside:avoid}
.cs-render-scope .section-band {background:var(--band);color:#fff;font-weight:700;font-size:15px;padding:7px 12px;margin:0 0 8px}
.cs-render-scope .instr {margin:0 0 8px}
.cs-render-scope .content-box {border:1px solid var(--line);background:var(--box);padding:10px 14px;margin:8px 0;border-radius:2px}
.cs-render-scope .grid-box {border:1.5px solid var(--band);background:var(--box);padding:16px;margin:10px 0;text-align:center;font-size:16px;letter-spacing:.45em;font-weight:600;word-break:break-all}
.cs-render-scope .items-table td {border:1px solid var(--line);padding:7px 10px;background:#fdf8e8}
.cs-render-scope .plain-table td, .plain-table th {border:1px solid var(--line);padding:7px 10px;text-align:left}
.cs-render-scope .plain-table th {background:#e8eef5;font-weight:700}
.cs-render-scope .blank {display:inline-block;border-bottom:1.2px solid #333;min-width:150px;height:1em}
.cs-render-scope .blank.small {min-width:70px}
.cs-render-scope .qline {margin:5px 0}
.cs-render-scope .math-formula {font-size:16px;letter-spacing:.02em}
.cs-render-scope .plain-list {margin:6px 0;padding-left:22px}
.cs-render-scope .plain-list li {margin:3px 0}
.cs-render-scope .resp-table td {border:1px solid var(--line);padding:8px 10px}
.cs-render-scope ol.options {margin:6px 0;padding-left:0;list-style:none}
.cs-render-scope .stimulus-word {font-weight:800;font-size:18px;color:var(--band-dark);margin:6px 0}
.cs-render-scope ol.options li {margin:4px 0}
.cs-render-scope .ex-image {display:block;max-width:70mm;max-height:55mm;margin:8px auto;border:1px solid var(--line);border-radius:4px}
.cs-render-scope .pyramid-box {margin:12px 0;display:flex;flex-direction:column;align-items:center;gap:6px}
.cs-render-scope .pyramid-row {display:flex;gap:6px}
.cs-render-scope .pyramid-cell {display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;
    border:1.5px solid var(--band);border-radius:4px;background:var(--box);font-weight:700;font-size:14px}
.cs-render-scope .pyramid-cell.blank-cell {background:#fff;border-style:dashed}
.cs-render-scope .sg-grid td {text-align:center;font-weight:700;min-width:44px}
.cs-render-scope .sg-grid td.sg-label {font-weight:900;background:#e8eef5;text-align:left}
.cs-render-scope .sg-grid td.blank-cell {background:#fff;border-style:dashed}
.cs-render-scope .vf-grid {width:100%;border-collapse:collapse}
.cs-render-scope .vf-grid td {padding:10px 14px 10px 0}
.cs-render-scope .vf-grid .blank {min-width:100%;width:100%}
.cs-render-scope .qi-values {display:flex;flex-wrap:wrap;gap:16px;margin:14px 0}
.cs-render-scope .qi-val {border:2px solid #333;border-radius:10px;padding:10px 20px;font-size:20px;font-weight:700}
.cs-render-scope .qi-val-intruder {background:#ffd7d7;border-color:#b00020;text-decoration:line-through;text-decoration-color:#b00020}
.cs-render-scope .lg-diff {background:#ffd7d7;outline:2px solid #b00020;outline-offset:-2px}
.cs-render-scope .sol-fill {color:#0a6b2d;border-bottom:2px solid #0a6b2d;padding:0 4px;display:inline-block}
.cs-render-scope .scs-opt-correct {background:#d6f5e0;border-color:#0a6b2d;text-decoration:underline}
.cs-render-scope .si-op {margin:18px 0 0;padding:16px 20px;border:1.5px solid #333;border-radius:8px;width:240px}
.cs-render-scope .si-op-row {display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:5px 0}
.cs-render-scope .si-op-fixed {width:20px;text-align:center;font-size:20px;font-weight:700}
.cs-render-scope .si-op-symbol {display:inline-block;width:20px;height:20px;border:1.5px solid #333;border-radius:4px}
.cs-render-scope .si-op-blank {display:inline-block;width:170px;border:none;border-bottom:2px solid #333;height:1.3em}
.cs-render-scope .si-op-rule {border-top:2.5px solid #333;margin:10px 0 5px}
.cs-render-scope .lg-pair {display:flex;gap:24px;flex-wrap:wrap;margin:14px 0}
.cs-render-scope .lg-grid {border-collapse:collapse}
.cs-render-scope .lg-grid td {width:26px;height:26px;border:1px solid #333;text-align:center;padding:0;font-size:13px;font-weight:700}
.cs-render-scope .gp-grid {border-collapse:collapse;margin:14px 0}
.cs-render-scope .gp-grid td {width:44px;height:44px;border:1.5px solid #333;text-align:center;font-size:16px;font-weight:700}
.cs-render-scope .sar-table {width:100%;border-collapse:collapse;margin-top:10px}
.cs-render-scope .sar-table th,.sar-table td {border:1px solid var(--line);padding:8px 10px;text-align:left}
.cs-render-scope .sar-table .sar-rel {font-weight:700;white-space:nowrap}
.cs-render-scope .wof-board {display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:14px 0}
.cs-render-scope .wof-tile {display:inline-flex;align-items:center;justify-content:center;width:26px;height:30px;border:2px solid #333;border-radius:3px;font-weight:700;font-size:16px;text-transform:uppercase}
.cs-render-scope .wof-tile.wof-revealed {background:#333;color:#fff}
.cs-render-scope .wof-tile.wof-blank {background:#fff}
.cs-render-scope .wof-tile.wof-fill {background:#d6f5e0;border-color:#0a6b2d;color:#0a6b2d}
.cs-render-scope .wof-gap {display:inline-block;width:14px}
.cs-render-scope .gscm-wrap {display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.cs-render-scope .gscm-box {position:relative;width:170px;height:170px;border:2px solid #333;border-radius:4px;box-sizing:border-box}
.cs-render-scope .gscm-box.gscm-correct {background:#d6f5e0;border-color:#0a6b2d}
.cs-render-scope .gscm-num {position:absolute;top:4px;right:8px;font-weight:700;font-size:13px;z-index:1}
.cs-render-scope .gscm-shape {position:absolute;width:22px;height:22px}
.cs-render-scope .ds-wrap {display:flex;gap:24px;align-items:flex-start;margin:14px 0}
.cs-render-scope .ds-text {flex:1}
.cs-render-scope .wfm-wrap {display:flex;gap:28px;align-items:flex-start;margin:14px 0}
.cs-render-scope .wfm-fragments {display:flex;flex-direction:column;gap:8px}
.cs-render-scope .wfm-frag {display:inline-block;border:1.5px solid #333;border-radius:4px;padding:6px 14px;font-weight:700;text-align:center;min-width:50px}
.cs-render-scope .wfm-words {flex:1;display:flex;flex-direction:column;gap:8px}
.cs-render-scope .css-wrap {display:flex;flex-direction:column;gap:10px;margin:14px 0}
.cs-render-scope .css-row {display:flex;align-items:center;gap:6px}
.cs-render-scope .css-label {font-weight:700;margin-right:4px}
.cs-render-scope .css-tile {display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.3px solid #333;border-radius:4px;font-size:15px}
.cs-render-scope .css-blank {border-style:dashed}
.cs-render-scope .css-gap {width:10px}
.cs-render-scope .hwa-wrap {display:flex;flex-direction:column;gap:8px;margin:14px 0}
.cs-render-scope .hwa-row {display:flex;align-items:center;gap:8px}
.cs-render-scope .hwa-missing {display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1.3px solid #333;border-radius:4px;font-weight:700}
.cs-render-scope .hwa-blank {border-style:dashed}
.cs-render-scope .hwa-scrambled {letter-spacing:3px;font-weight:600}
.cs-render-scope .hwa-eq {margin:0 4px}
.cs-render-scope .hwa-target {font-weight:700}
.cs-render-scope .avc-grid {display:flex;flex-direction:column;gap:4px;margin:6px 0}
.cs-render-scope .avc-row {display:flex;gap:6px}
.cs-render-scope .avc-cell {display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:14px}
.cs-render-scope .avc-correct {background:#c8f7c5;border-radius:3px}
.cs-render-scope .lrc-soup {font-family:monospace;font-size:20px;font-weight:700;letter-spacing:4px;line-height:1.6;word-break:break-all;background:#f4eee6;border-radius:8px;padding:12px 16px;margin:10px 0}
.cs-render-scope .gdt-grid {border-collapse:collapse;margin:10px 0}
.cs-render-scope .gdt-grid td {width:24px;height:24px;border:1px solid var(--line);text-align:center;padding:0;font-size:12px}
.cs-render-scope .gdt-grid td.gdt-marked {background:#f4eee6}
.cs-render-scope .gdt-steps {width:100%;margin-top:8px}
.cs-render-scope .gdt-steps td {padding:3px 10px;font-size:13px;border:none}
.cs-render-scope .iis-grid {border-collapse:collapse;margin-top:8px}
.cs-render-scope .iis-grid td {border:none;text-align:center;padding:6px 14px}
.cs-render-scope .iis-grid td.iis-emoji {font-size:34px;line-height:1}
.cs-render-scope .iis-grid td.iis-blank .blank.small {min-width:36px;margin:0 auto;display:block}
.cs-render-scope .digit-blank {display:inline-block;border-bottom:1.2px solid #333;min-width:18px;height:1em;margin:0 2px}
.cs-render-scope .scs-opt {display:inline-block;border:1.5px solid var(--line);border-radius:4px;padding:2px 10px;font-weight:700}
.cs-render-scope .iwm-table {width:100%;margin:10px 0}
.cs-render-scope .iwm-table td {vertical-align:middle;padding:8px 10px}
.cs-render-scope .iwm-table td.iwm-num {width:32px;font-weight:700;text-align:right}
.cs-render-scope .iwm-table td.iwm-pic {width:90px;text-align:center}
.cs-render-scope .iwm-emoji-sm {font-size:34px;line-height:1}
.cs-render-scope .iis-list-table {width:100%}
.cs-render-scope .iis-list-table th {text-align:left;font-size:12px;color:#777;font-weight:700;padding:4px 10px;border-bottom:1.5px solid var(--line)}
.cs-render-scope .iis-list-table td {padding:8px 10px;vertical-align:middle}
.cs-render-scope .iis-list-table td.iis-col-num {width:32px;font-weight:700;text-align:right}
.cs-render-scope .iis-list-table td.iis-col-concept {width:26%;font-size:13px;font-style:italic;color:#555}
.cs-render-scope .iis-list-table td.iis-col-pics {white-space:nowrap}
.cs-render-scope .iis-list-table td.iis-col-pics .iwm-emoji-sm {margin-right:4px;font-size:24px}
.cs-render-scope .iis-list-table td.iis-col-answer {width:22%}
.cs-render-scope .iwm-table td.iwm-answer .blank {min-width:100%}
.cs-render-scope .moe-blank {display:inline-block;border:1.5px dashed var(--band);border-radius:4px;background:var(--box);min-width:26px;height:1.2em;vertical-align:middle}
.cs-render-scope .hd-box {margin:12px 0;display:inline-flex;flex-direction:column;align-items:flex-end;font-size:18px;font-weight:700}
.cs-render-scope .hd-row {display:flex}
.cs-render-scope .hd-cell {display:inline-flex;align-items:center;justify-content:center;width:28px;height:32px}
.cs-render-scope .hd-cell-sign {color:var(--band);font-weight:800}
.cs-render-scope .hd-cell-blank {border:1.5px dashed var(--band);border-radius:4px;color:#bbb;background:var(--box);margin:1px}
.cs-render-scope .hd-cell-empty {visibility:hidden}
.cs-render-scope .hd-line {width:100%;border-top:2px solid #333;margin:2px 0}
.cs-render-scope .solution-box {border:1.5px solid #2d9d5c;background:#eafaf0;color:#155c34;padding:8px 12px;margin:8px 0;border-radius:4px;font-size:12.5px}
.cs-render-scope .solution-box b {color:#0e4a28}
.cs-render-scope .rcet-inline {font-weight:400;font-size:11px;opacity:.75}
  /* width:auto anula la regla global table{width:100%}: sin esto, el
     navegador reparte el 100% del ancho de página entre solo 2-3 columnas,
     convirtiendo cada celda en un bloque enorme en vez de una casilla
     pequeña de rejilla. */
.cs-render-scope .ws-grid {border-collapse:collapse;margin:10px auto;width:auto}
.cs-render-scope .ws-grid td {border:1px solid var(--line);width:22px;height:22px;text-align:center;font-family:monospace;font-weight:700;font-size:13px}
.cs-render-scope .ws-words {text-align:center;margin-top:8px;font-weight:700;letter-spacing:.03em}
.cs-render-scope .ats-grid td.ats-hit {background:#fbdcc0;border:2px solid #e8a86b;border-radius:4px}
.cs-render-scope .hl-row {margin:8px 0;display:flex;align-items:center;gap:2px}
.cs-render-scope .hl-cell {display:inline-flex;align-items:center;justify-content:center;width:24px;height:28px;font-weight:700;font-size:15px}
.cs-render-scope .hl-cell-blank {border:1.5px dashed var(--band);border-radius:4px;background:var(--box)}
.cs-render-scope .ncw-grid {border-collapse:collapse;margin:10px auto;width:auto}
.cs-render-scope .ncw-grid td {width:30px;height:30px}
.cs-render-scope .ncw-grid td.ncw-fill {border:1.5px solid var(--band);background:var(--box)}
.cs-render-scope .ncw-grid td.ncw-block {border:none;background:transparent}
.cs-render-scope .cm-grid {margin:12px auto;border-collapse:collapse;width:auto}
.cs-render-scope .cm-grid td {text-align:center;padding:4px}
.cs-render-scope .cm-cell {display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:32px;font-weight:700;font-size:15px}
.cs-render-scope .cm-blank {border:1.5px dashed var(--band);border-radius:4px;background:var(--box)}
.cs-render-scope .cm-op {font-weight:800;color:var(--band);font-size:16px}
.cs-render-scope .cc-chain {display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0}
.cs-render-scope .cc-box {display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:34px;border:1.5px solid var(--band);border-radius:6px;background:var(--box);font-weight:700;font-size:15px;padding:0 8px}
.cs-render-scope .cc-blank {background:#fff;border-style:dashed}
.cs-render-scope .cc-op {font-weight:700;color:var(--band-dark);font-size:14px}
.cs-render-scope .cc-arrow {color:#999;font-size:14px}
  /* width:auto en las 3 rejillas: sin esto heredan width:100% de la regla
.cs-render-scope global table {...} y cada celda sale como un bloque enorme en vez de una
     casilla pequeña (mismo bug ya corregido antes en .ws-grid/.ncw-grid/.cm-grid). */
.cs-render-scope .gmc-grid {border-collapse:collapse;margin:10px auto;width:auto}
.cs-render-scope .gmc-grid td {width:24px;height:24px;text-align:center;border:1px solid var(--line);font-weight:700;font-size:12px}
.cs-render-scope .gmc-grid td.gmc-shaded {background:#d7dde4}
.cs-render-scope .gmc-grid td.ats-hit {background:#fbdcc0;border:2px solid #e8a86b;border-radius:4px}
/* Igual que .gmc-grid pero para celdas con palabras completas en vez de un
   solo dígito/símbolo (p.ej. "La palabra repetida"): ancho ajustado al
   contenido y padding real en vez del cuadro fijo de 24px pensado para 1 carácter. */
.cs-render-scope .cwr-grid {border-collapse:collapse;margin:10px auto;width:auto}
.cs-render-scope .cwr-grid td {text-align:center;border:1px solid var(--line);font-weight:700;font-size:12.5px;padding:8px 14px}
.cs-render-scope .cwr-grid td.ats-hit {background:#fbdcc0;border:2px solid #e8a86b;border-radius:4px}
.cs-render-scope .psg-grid {border-collapse:separate;border-spacing:8px 14px;margin:10px auto;width:auto}
.cs-render-scope .psg-grid td.psg-box {width:44px;text-align:center;border:1px solid var(--line);font-weight:700;font-size:13px;padding:4px 0;vertical-align:middle}
.cs-render-scope .psg-grid td.psg-box div {line-height:1.5}
.cs-render-scope .psg-grid td.psg-box-solved {background:#fbdcc0;border-color:#e8a86b}
.cs-render-scope .lps-list {display:flex;flex-wrap:wrap;gap:10px 18px;margin:10px 0}
.cs-render-scope .lps-num {font-weight:700;font-size:14px}
.cs-render-scope .ung-grid {border-collapse:collapse;margin:10px auto;width:auto}
.cs-render-scope .ung-grid td {width:52px;height:26px;text-align:center;border:1px solid var(--line);font-size:12px;font-family:monospace}
.cs-render-scope .wcs-table {font-size:10.5px;color:#555;margin:6px 0 10px;line-height:1.6}
.cs-render-scope .wcs-table span {display:inline-block;margin-right:6px}
.cs-render-scope .seq-symbols {font-size:16px;margin:10px 0;text-align:center}
.cs-render-scope .page-footer {margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;font-size:11px;color:#7a92a8;border-top:1px solid var(--line)}
.cs-render-scope .state {color:#fff;text-align:center;padding:60px}
  /* Sin esto, Chrome reserva SU PROPIO margen de impresión por defecto
     (~12.7mm arriba/abajo) además del padding que ya tiene .sheet-page
     (10mm+16mm=26mm en impresión). Ese margen extra reduce el área de
     contenido real disponible por debajo de lo que .sheet-page asume (una
     hoja A4 completa), así que una página con mucho contenido (fichas con
     retos que llenan un 85-95% del espacio estimado) puede desbordar a una
     segunda página física casi vacía — la causa real de las páginas en
     blanco intercaladas, que persistía aunque el pie ya estuviera oculto. */