/* Reading workspace: bounded viewport, accessible controls, no content clipping. */
body.bf-test-reading-active #viewTestRunner { --reading-question: 23px; --reading-option: 18px; --reading-explanation: 17px; padding-bottom: 100px !important; }
body.bf-test-reading-active #viewTestRunner #testCard { min-height: 0 !important; padding: clamp(16px, 2.5vw, 32px) !important; }
body.bf-test-reading-active #testCard > h2 { font: 800 var(--reading-question)/var(--reading-line, 1.5) var(--reading-font, Manrope, sans-serif) !important; margin: 0 0 18px !important; overflow-wrap: anywhere; }
body.bf-test-reading-active #testCard .focus-opt-text { font: 600 var(--reading-option)/var(--reading-line, 1.5) var(--reading-font, Manrope, sans-serif) !important; min-width: 0; overflow-wrap: anywhere; }
body.bf-test-reading-active #testCard .focus-opt-text * { font-size: inherit !important; line-height: inherit !important; }
body.bf-test-reading-active #testCard .bf-test-answer-option { min-height: 48px; padding: 12px 16px !important; gap: 12px !important; transition: border-color 120ms, background-color 120ms !important; }
body.bf-test-reading-active #testCard .bf-test-answer-option > :first-child { flex: 0 0 26px; font-size: 12px !important; }
body.bf-test-reading-active #testCard > .space-y-3 > * + * { margin-top: 10px !important; }
body.bf-test-reading-active #viewTestRunner[data-reading-spacing="compact"] .bf-test-answer-option { padding-block: 8px !important; }
body.bf-test-reading-active #viewTestRunner[data-reading-spacing="roomy"] .bf-test-answer-option { padding-block: 18px !important; }
body.bf-test-reading-active #testCard .answer-feedback .bf-explanation-prose,
body.bf-test-reading-active #testCard .answer-feedback .feedback-body { font-size: var(--reading-explanation) !important; line-height: var(--reading-line, 1.5) !important; }
body.bf-test-reading-active #testCard .answer-feedback .bf-explanation-prose .bf-expl,
body.bf-test-reading-active #testCard .answer-feedback .bf-explanation-prose :is(div, p, li, td, th, span, strong, b, em, code, blockquote) { font-size: inherit !important; line-height: inherit !important; }
body.bf-test-reading-active #testCard .answer-feedback .bf-explanation-prose :is(h1, h2, h3, h4) { font-size: 1.15em !important; line-height: inherit !important; }
body.bf-test-reading-active #testCard .answer-feedback .bf-explanation-prose :is(sub, sup) { font-size: .75em !important; line-height: 0 !important; }
body.bf-test-reading-active #testNavBar { position: fixed !important; inset: auto auto var(--reading-bottom, 0px) var(--reading-nav-left, 0px); width: var(--reading-nav-width, 100%); z-index: 35; min-height: 64px; padding: 10px 12px !important; gap: 8px; background: #f8fafc; border-top: 1px solid #dce5f0; box-shadow: 0 -6px 20px rgb(15 23 42 / .05); }
body.bf-test-reading-active #testNavBar button { min-height: 44px; white-space: nowrap; transition: background-color 120ms !important; transform: none !important; }
body.bf-test-reading-active #btnNextQ { background: #2563eb !important; color: white !important; }
body.bf-test-reading-active #btnNextQ:hover { background: #1d4ed8 !important; }
body.bf-test-reading-active #focusToolsBtn { color: #1d4ed8 !important; border-color: #93c5fd !important; background: #eff6ff !important; }
/* Ya corregida: Anterior, Terminar y Siguiente van justo bajo la corrección y la
   explicación queda debajo. Mientras esos botones se ven, la barra fija se retira;
   al bajar a leer la explicación vuelve, para que Siguiente siga a mano. */
body.bf-test-reading-active #viewTestRunner.bf-inline-nav-visible #testNavBar { display: none !important; }
#testCard .bf-inline-nav { display: grid; grid-template-columns: auto 1fr minmax(0, 1.4fr); align-items: stretch; gap: 8px; }
#testCard .bf-inline-nav > button { min-height: 48px; margin: 0 !important; width: auto; transform: none; }
#testCard .bf-inline-nav__next { grid-column: 3; }
#testCard .bf-inline-nav__finish { grid-column: 2; }
@media (max-width: 600px) {
  #testCard .bf-inline-nav { grid-template-columns: auto auto 1fr; gap: 6px; }
  #testCard .bf-inline-nav > button { padding-inline: 12px !important; font-size: 14px !important; }
  #testCard .bf-inline-nav__long { display: none; }
}
/* Al corregir no se desplaza nada: la corrección solo aparece. */
body.bf-test-reading-active #testCard .answer-feedback.animate-in { animation: bfReadingFade 160ms ease-out both; }
@keyframes bfReadingFade { from { opacity: 0; } to { opacity: 1; } }
body.bf-test-reading-active #testCard { scroll-padding-block: 18px; overscroll-behavior: contain; }
body.bf-test-reading-active #testCard :is(img, table, pre, video) { max-width: 100%; }
body.focus-mode.bf-test-reading-active #scrollContainer { padding: 8px 12px !important; overflow: hidden; }
body.focus-mode.bf-test-reading-active #appMain { margin-left: 0 !important; width: 100%; }
body.focus-mode.bf-test-reading-active #scrollContainer > .max-w-7xl { padding-bottom: 0 !important; }
body.focus-mode.bf-test-reading-active #viewTestRunner:not(.hidden) { display: flex !important; flex-direction: column; height: var(--reading-viewport, calc(100dvh - 90px)); padding-bottom: 0 !important; max-width: 1200px; margin-inline: auto; }
body.focus-mode.bf-test-reading-active #viewTestRunner[data-reading-width="standard"] { max-width: 1000px; }
body.focus-mode.bf-test-reading-active #viewTestRunner[data-reading-width="full"] { max-width: none; }
body.focus-mode.bf-test-reading-active #viewTestRunner > .sticky { position: relative; flex: 0 0 auto; padding-block: 4px !important; }
body.focus-mode.bf-test-reading-active #viewTestRunner #testCard { flex: 0 1 auto; min-height: 0 !important; overflow-y: auto; margin-bottom: 8px !important; border-radius: 20px !important; }
body.focus-mode.bf-test-reading-active #testCard > .flex:first-child { margin-bottom: 6px !important; }
body.focus-mode.bf-test-reading-active #testNavBar { position: relative !important; inset: auto; width: 100%; flex: 0 0 auto; border-radius: 14px; box-shadow: none; }
body.focus-mode.bf-test-reading-active #testGridPanel { flex: 0 0 auto; max-height: 72px; overflow: auto; margin-top: 6px !important; padding: 6px 10px !important; }
body.focus-mode.bf-test-reading-active #testGridPanel > .flex { margin-bottom: 4px !important; }
body.focus-mode.bf-test-reading-active #testGrid { gap: 4px; }
body.focus-mode.bf-test-reading-active #testCard *:not(h2):not(.focus-opt-text):not(.answer-feedback):not(.answer-feedback *) { font-size: revert; }
body.focus-contrast.bf-test-reading-active #testCard .focus-opt-text { color: inherit; }
html.bf-dark-test body.bf-test-reading-active #testNavBar,
body.focus-mode.focus-contrast.bf-test-reading-active #testNavBar { background: #111827; border-color: #334155; }

#focusToolsPanel.bf-reading-panel { position: fixed; z-index: 65; inset: 16px 16px auto auto; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; background: white; border: 1px solid #dbe4f0; border-radius: 20px; box-shadow: 0 16px 56px rgb(15 23 42 / .2); color: #0f172a; }
.bf-reading-panel__head { display: flex; align-items: flex-start; gap: 12px; padding: 18px; background: #eff6ff; border-bottom: 1px solid #dbeafe; }
.bf-reading-panel__head h2 { font-size: 18px; font-weight: 800; }
.bf-reading-panel__head p { font-size: 12px; color: #475569; margin-top: 4px; }
.bf-reading-panel__head button { margin-left: auto; flex: 0 0 44px; height: 44px; border-radius: 12px; background: white; border: 1px solid #dbeafe; font-size: 22px; }
.bf-reading-panel__body { padding: 18px; display: grid; gap: 18px; }
.bf-reading-field { display: grid; gap: 8px; font-size: 14px; font-weight: 700; }
.bf-reading-field > span { display: flex; justify-content: space-between; gap: 8px; }
.bf-reading-field output { color: #1d4ed8; font-variant-numeric: tabular-nums; }
.bf-reading-field input[type="range"] { width: 100%; min-height: 36px; accent-color: #2563eb; cursor: pointer; }
.bf-reading-field select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 12px; background: #f8fafc; font-size: 14px; }
.bf-reading-scale { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; }
.bf-reading-scale button { min-height: 44px; border: 1px solid #cbd5e1; border-radius: 12px; background: #f8fafc; font-size: 20px; }
.bf-reading-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 700; cursor: pointer; }
.bf-reading-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: #2563eb; flex: 0 0 20px; }
.bf-reading-check small, .bf-reading-note { display: block; font-size: 12px; font-weight: 500; line-height: 1.5; color: #475569; margin-top: 4px; }
.bf-reading-reset { min-height: 44px; border: 1px solid #dbeafe; border-radius: 12px; color: #1d4ed8; font-size: 14px; font-weight: 700; background: #eff6ff; }
.bf-reading-panel :is(button, input, select):focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
@media (max-width: 600px) {
  body.bf-test-reading-active #testNavBar { gap: 4px; padding: 8px !important; }
  body.bf-test-reading-active #testNavBar button { font-size: 12px !important; padding: 10px 8px !important; }
  body.bf-test-reading-active #testCard > h2 { font-size: min(var(--reading-question), 36px) !important; }
  #focusToolsPanel.bf-reading-panel { inset: 8px 8px auto; width: auto; max-height: calc(100dvh - 84px); }
  body.focus-mode.bf-test-reading-active #testGridPanel { max-height: 56px; }
}
@media (prefers-reduced-motion: reduce) { body.bf-test-reading-active #testCard { animation: none !important; } }