/* ============================================================
   TEMARIUS REX — Flujo del test (elegir y hacer)
   Rediseño del 04/11/2026. Clases con prefijo tf- a propósito:
   .tema-card / .temas-grid / .question-num los comparten el temario
   de la academia y otros paneles, y al mezclarse dejaban los temas
   en una columna de 80 px. Aquí nada se agrupa con selectores ajenos.
   ============================================================ */

.tf-elegir, .tf-test { max-width: 860px; margin-inline: auto; padding-block: var(--s-6) var(--s-8); }
.tf-elegir [hidden], .tf-test [hidden] { display: none !important; }

/* ---------- Cabecera ---------- */
.tf-cabecera { margin-bottom: var(--s-6); }
.tf-cabecera h1 { font-size: var(--fs-h2); font-weight: var(--fw-light); letter-spacing: var(--ls-display); color: var(--ink); margin: 0 0 var(--s-2); }
.tf-cabecera p { margin: 0; color: var(--ink-muted); font-size: var(--fs-body); }

/* ---------- Aviso de fallos ---------- */
.tf-fallos {
    display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
    padding: var(--s-3) var(--s-4); margin-bottom: var(--s-6);
    background: var(--bad-wash); border-radius: var(--r-md);
    font-size: var(--fs-sm); color: var(--ink-body);
}
.tf-fallos p { flex: 1; min-width: 200px; margin: 0; }
.tf-fallos-ico { color: var(--bad-600); }

/* ---------- Pasos ---------- */
.tf-form { display: flex; flex-direction: column; gap: var(--s-7); }
.tf-paso-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.tf-paso-cab h2 { display: flex; align-items: center; gap: var(--s-3); margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-semi); color: var(--ink); letter-spacing: var(--ls-tight); }
.tf-paso-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--r-full);
    background: var(--surface-inverse); color: var(--ink-invert);
    font-size: var(--fs-caption); font-weight: var(--fw-bold);
}
.tf-atajos { display: flex; gap: var(--s-4); }
.tf-enlace {
    background: none; border: 0; padding: 4px 0; cursor: pointer;
    font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semi);
    color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px;
}
.tf-enlace:hover { color: var(--ink); }

/* ---------- Casilla propia (grande, fácil de tocar) ---------- */
.tf-check { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
.tf-check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tf-caja {
    width: 22px; height: 22px; border-radius: 6px;
    border: 2px solid var(--line-strong); background: var(--surface-card);
    display: inline-flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.tf-check input:checked + .tf-caja, .tf-check input:indeterminate + .tf-caja { background: var(--accent); border-color: var(--accent); }
.tf-check input:checked + .tf-caja::after {
    content: ""; width: 6px; height: 11px; margin-top: -2px;
    border: solid var(--navy-900); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.tf-check input:indeterminate + .tf-caja::after { content: ""; width: 10px; height: 2.5px; background: var(--navy-900); border-radius: 2px; }
.tf-check input:focus-visible + .tf-caja { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.tf-check input:disabled + .tf-caja { opacity: .4; }

/* ---------- Bloques ---------- */
.tf-bloques { display: flex; flex-direction: column; gap: var(--s-2); }
.tf-bloque {
    background: var(--surface-card); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--dur) var(--ease);
}
.tf-bloque.has-sel { border-color: var(--accent); }
.tf-bloque-cab { display: flex; align-items: center; gap: var(--s-3); padding-left: var(--s-4); }
.tf-bloque-abrir {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-4) var(--s-4) var(--s-4) 0;
    background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.tf-bloque-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tf-bloque-etq { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-strong); }
.tf-bloque-nombre { font-size: var(--fs-body); font-weight: var(--fw-semi); color: var(--ink); line-height: var(--lh-snug); }
.tf-bloque-meta { flex-shrink: 0; font-size: var(--fs-caption); color: var(--ink-muted); white-space: nowrap; }
.tf-bloque.has-sel .tf-bloque-meta { color: var(--ink); font-weight: var(--fw-semi); }
.tf-chev { flex-shrink: 0; color: var(--ink-faint); font-size: var(--fs-caption); transition: transform var(--dur) var(--ease); }
.tf-bloque.is-open .tf-chev { transform: rotate(180deg); }
.tf-bloque-abrir:hover .tf-bloque-nombre { color: var(--accent-strong); }

/* ---------- Temas (lista, uno por fila) ---------- */
.tf-temas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tf-temas li + li { border-top: 1px solid var(--line); }
.tf-tema {
    display: grid; grid-template-columns: auto 64px 1fr auto; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4); cursor: pointer; transition: background var(--dur-fast) var(--ease);
}
.tf-tema:hover { background: var(--surface-subtle); }
.tf-tema:has(input:checked) { background: var(--accent-wash); }
.tf-tema.is-vacio { cursor: default; opacity: .55; }
.tf-tema-num { font-size: var(--fs-caption); font-weight: var(--fw-semi); color: var(--ink-muted); white-space: nowrap; }
.tf-tema-nombre { font-size: var(--fs-sm); color: var(--ink-body); line-height: var(--lh-snug); }
.tf-tema-n { font-size: var(--fs-caption); color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Píldoras (nº de preguntas) ---------- */
.tf-pildoras { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.tf-pildora { position: relative; cursor: pointer; }
.tf-pildora input { position: absolute; opacity: 0; pointer-events: none; }
.tf-pildora span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 64px; height: 48px; padding: 0 var(--s-4);
    border: 1px solid var(--line-strong); border-radius: var(--r-full);
    background: var(--surface-card); color: var(--ink);
    font-size: var(--fs-body); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums;
    transition: var(--transition);
}
.tf-pildora:hover span { border-color: var(--ink-muted); }
.tf-pildora input:checked + span { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--ink-invert); }
.tf-pildora input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Modos ---------- */
.tf-modos { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tf-modo {
    position: relative; display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-4); cursor: pointer;
    background: var(--surface-card); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    transition: var(--transition);
}
.tf-modo input { position: absolute; opacity: 0; pointer-events: none; }
.tf-modo:hover { border-color: var(--ink-muted); }
.tf-modo:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); }
.tf-modo:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tf-modo-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--r-full);
    background: var(--surface-sunken); color: var(--ink-muted);
}
.tf-modo:has(input:checked) .tf-modo-ico { background: var(--accent); color: var(--navy-900); }
.tf-modo strong { display: block; font-size: var(--fs-body); color: var(--ink); margin-bottom: 2px; }
.tf-modo small { display: block; font-size: var(--fs-caption); color: var(--ink-muted); line-height: var(--lh-normal); }

/* ---------- Barra fija de abajo ---------- */
.tf-barra {
    position: sticky; bottom: var(--s-4); z-index: 30;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
    padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
    background: color-mix(in srgb, var(--surface-card) 92%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--line); border-radius: var(--r-full); box-shadow: var(--sh-lg);
}
.tf-barra-info { margin: 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.tf-barra-info strong { color: var(--ink); }
.tf-barra .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ============================================================
   HACER EL TEST
   ============================================================ */
.tf-test-barra {
    position: sticky; top: calc(var(--nav-h) + 20px); z-index: 20;
    display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
    padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
    background: color-mix(in srgb, var(--surface-card) 92%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.tf-test-progreso { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 6px; }
.tf-test-cuenta { font-size: var(--fs-sm); color: var(--ink-muted); }
.tf-test-cuenta strong { color: var(--ink); }
.tf-test-pista { height: 6px; border-radius: var(--r-full); background: var(--surface-sunken); overflow: hidden; }
.tf-test-pista > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--dur) var(--ease); }
.tf-test-reloj {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-sm); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; color: var(--ink-muted);
}

/* Mapa de preguntas */
.tf-mapa {
    padding: var(--s-4); margin-bottom: var(--s-4);
    background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.tf-mapa-leyenda { display: flex; gap: var(--s-4); flex-wrap: wrap; margin: 0 0 var(--s-3); font-size: var(--fs-caption); color: var(--ink-muted); }
.tf-mapa-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.tf-punto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line-strong); background: var(--surface-card); }
.tf-punto.is-resp { background: var(--ink); border-color: var(--ink); }
.tf-punto.is-marca { background: var(--warn-600); border-color: var(--warn-600); }
.tf-mapa-rejilla { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
.tf-mapa-n {
    height: 36px; border-radius: var(--r-sm); cursor: pointer;
    border: 1px solid var(--line-strong); background: var(--surface-card); color: var(--ink-body);
    font: inherit; font-size: var(--fs-caption); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums;
}
.tf-mapa-n.is-resp { background: var(--ink); border-color: var(--ink); color: var(--surface-card); }
.tf-mapa-n.is-marca { background: var(--warn-600); border-color: var(--warn-600); color: #fff; }
.tf-mapa-n.is-actual { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Pregunta */
.tf-pregunta {
    padding: var(--s-6); background: var(--surface-card);
    border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-xs);
}
.tf-pregunta-tema {
    margin: 0 0 var(--s-3); font-size: var(--fs-caption); font-weight: var(--fw-semi);
    color: var(--accent-strong); letter-spacing: .02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tf-pregunta-tema span { font-weight: var(--fw-reg); color: var(--ink-muted); }
.tf-pregunta-txt {
    /* Los h2 del sitio llevan text-wrap: balance, que en un enunciado largo
       deja líneas de media anchura. */
    margin: 0 0 var(--s-5); max-width: none; text-wrap: pretty; font-size: var(--fs-lg); font-weight: var(--fw-semi);
    line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--ink);
}
.tf-opciones { display: flex; flex-direction: column; gap: var(--s-2); }
.tf-opcion {
    position: relative; display: flex; align-items: flex-start; gap: var(--s-3);
    min-height: 56px; padding: var(--s-3) var(--s-4);
    border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
    background: var(--surface-card); cursor: pointer;
    font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--ink-body);
    transition: var(--transition);
}
.tf-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.tf-opcion:hover { border-color: var(--ink-muted); background: var(--surface-subtle); }
.tf-opcion:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tf-letra {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0; margin-top: -2px;
    border-radius: var(--r-full); background: var(--surface-sunken); color: var(--ink-muted);
    font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.tf-opcion-txt { flex: 1; padding-top: 2px; }
.tf-opcion:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); color: var(--ink); }
.tf-opcion:has(input:checked) .tf-letra { background: var(--accent); color: var(--navy-900); }

/* Corrección al momento */
.tf-opcion:has(input:disabled) { cursor: default; }
.tf-opcion:has(input:disabled):hover { background: var(--surface-card); border-color: var(--line-strong); }
/* :has(input:checked) pesa más que una clase sola: sin repetirlo aquí, la
   respuesta elegida y fallada se quedaba dorada en vez de roja. */
.tf-opcion.is-bien, .tf-opcion.is-bien:hover, .tf-opcion.is-bien:has(input:checked) { border-color: var(--ok-600); background: var(--ok-wash); color: var(--ink); }
.tf-opcion.is-bien .tf-letra, .tf-opcion.is-bien:has(input:checked) .tf-letra { background: var(--ok-600); color: #fff; }
.tf-opcion.is-mal, .tf-opcion.is-mal:hover, .tf-opcion.is-mal:has(input:checked) { border-color: var(--bad-600); background: var(--bad-wash); color: var(--ink); }
.tf-opcion.is-mal .tf-letra, .tf-opcion.is-mal:has(input:checked) .tf-letra { background: var(--bad-600); color: #fff; }
.tf-feedback {
    margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-md);
    font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-body);
}
.tf-feedback strong { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); }
.tf-feedback p { margin: var(--s-2) 0 0; }
.tf-feedback.is-bien { background: var(--ok-wash); }
.tf-feedback.is-bien strong { color: var(--ok-600); }
.tf-feedback.is-mal { background: var(--bad-wash); }
.tf-feedback.is-mal strong { color: var(--bad-600); }

/* Navegación */
.tf-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); }
.tf-nav .btn { min-height: 48px; }
.tf-marcar {
    background: none; border: 0; cursor: pointer; padding: var(--s-2);
    font: inherit; font-size: var(--fs-sm); color: var(--ink-muted);
}
.tf-marcar:hover { color: var(--ink); }
.tf-marcar.is-on { color: var(--warn-600); font-weight: var(--fw-semi); }
.tf-atajo-teclado { margin: var(--s-5) 0 0; text-align: center; font-size: var(--fs-caption); color: var(--ink-faint); }
.tf-atajo-teclado kbd {
    display: inline-block; min-width: 20px; padding: 1px 5px;
    border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface-card);
    font-family: inherit; font-size: var(--fs-micro); color: var(--ink-muted);
}

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
    .tf-elegir, .tf-test { padding-top: var(--s-4); }
    /* El contador apretaba el nombre del bloque a una columna estrecha;
       la casilla del bloque ya dice si hay temas elegidos. */
    .tf-bloque-meta { display: none; }
    .tf-tema { grid-template-columns: auto 1fr auto; row-gap: 2px; }
    .tf-tema-num { grid-column: 2; grid-row: 1; }
    .tf-tema-nombre { grid-column: 2 / 4; grid-row: 2; }
    .tf-tema .tf-check { grid-row: 1 / 3; }
    .tf-tema-n { grid-column: 3; grid-row: 1; text-align: right; }
    .tf-pildora span { min-width: 54px; height: 44px; }
    .tf-barra { flex-wrap: nowrap; gap: var(--s-2); border-radius: var(--r-lg); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); }
    .tf-barra-info { font-size: var(--fs-caption); line-height: var(--lh-snug); }
    .tf-barra .btn { flex-shrink: 0; padding-inline: var(--s-4); font-size: var(--fs-sm); }
    /* Los botones flotantes (WhatsApp, modo noche, subir) tapaban "Empezar"
       y las opciones del test: se suben por encima de la barra. */
    body:has(.tf-barra) :is(.wa-flotante, .theme-toggle, .back-to-top) { bottom: 96px; }
    body:has(.tf-test) :is(.wa-flotante, .theme-toggle, .back-to-top) { display: none; }
    .tf-test-barra { position: sticky; top: calc(var(--nav-h) + 8px); flex-wrap: nowrap; gap: var(--s-2); padding: var(--s-2) var(--s-3); }
    .tf-test-progreso { min-width: 0; }
    .tf-test-cuenta { font-size: var(--fs-caption); white-space: nowrap; }
    .tf-test-reloj { font-size: var(--fs-caption); }
    .tf-test-barra .btn { flex-shrink: 0; padding-inline: 12px; }
    .tf-solo-ancho { display: none; }
    .tf-pregunta { padding: var(--s-4); border-radius: var(--r-lg); }
    .tf-pregunta-txt { font-size: var(--fs-body); }
    .tf-opcion { font-size: var(--fs-sm); }
    .tf-atajo-teclado { display: none; }
}

/* ============================================================
   RESULTADO
   ============================================================ */
.tf-resultado { max-width: 860px; margin-inline: auto; padding-block: var(--s-6) var(--s-8); }
.tf-resultado [hidden] { display: none !important; }

.tf-nota-card {
    display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap;
    padding: var(--s-6) var(--s-7); border-radius: var(--r-xl);
    background: var(--surface-card); border: 1px solid var(--line); box-shadow: var(--sh-sm);
}
.tf-nota {
    display: flex; align-items: baseline; gap: 4px; flex-shrink: 0;
    padding: var(--s-4) var(--s-5); border-radius: var(--r-lg);
}
.tf-nota-card.is-aprobado .tf-nota { background: var(--ok-wash); color: var(--ok-600); }
.tf-nota-card.is-suspenso .tf-nota { background: var(--bad-wash); color: var(--bad-600); }
.tf-nota-num { font-size: 56px; line-height: 1; font-weight: var(--fw-semi); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tf-nota-max { font-size: var(--fs-lg); opacity: .7; }
.tf-nota-txt { flex: 1; min-width: 220px; }
.tf-nota-txt h1 { margin: 0 0 var(--s-3); font-size: var(--fs-h3); font-weight: var(--fw-light); letter-spacing: var(--ls-display); color: var(--ink); }
.tf-cifras { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-2) var(--s-5); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-muted); }
.tf-cifras strong { color: var(--ink); font-size: var(--fs-body); }
.tf-cifras .is-bien strong { color: var(--ok-600); }
.tf-cifras .is-mal strong { color: var(--bad-600); }

.tf-siguiente { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-4) 0 var(--s-7); }
.tf-siguiente-repaso {
    display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
    padding: var(--s-4) var(--s-5); border-radius: var(--r-lg);
    background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.tf-siguiente-repaso p { flex: 1; min-width: 220px; margin: 0; font-size: var(--fs-sm); color: var(--ink-body); }
.tf-siguiente-botones { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.tf-revision-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.tf-revision-cab h2 { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-semi); color: var(--ink); }
.tf-filtros { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-full); background: var(--surface-sunken); }
.tf-filtro {
    border: 0; background: none; cursor: pointer; font: inherit;
    padding: 7px 14px; border-radius: var(--r-full);
    font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink-muted);
}
.tf-filtro span { font-weight: var(--fw-reg); opacity: .75; margin-left: 2px; }
.tf-filtro.is-on { background: var(--surface-card); color: var(--ink); box-shadow: var(--sh-xs); }

.tf-rev {
    padding: var(--s-5); margin-bottom: var(--s-3);
    background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-lg);
    border-left: 4px solid var(--line-strong);
}
.tf-rev.is-bien { border-left-color: var(--ok-600); }
.tf-rev.is-mal { border-left-color: var(--bad-600); }
.tf-rev-cab { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); font-size: var(--fs-caption); }
.tf-rev-num { font-weight: var(--fw-bold); color: var(--ink); }
.tf-rev-tema { color: var(--ink-muted); }
.tf-rev-estado { margin-left: auto; font-weight: var(--fw-semi); color: var(--ink-muted); white-space: nowrap; }
.tf-rev.is-bien .tf-rev-estado { color: var(--ok-600); }
.tf-rev.is-mal .tf-rev-estado { color: var(--bad-600); }
.tf-rev-preg { margin: 0 0 var(--s-4); font-size: var(--fs-body); font-weight: var(--fw-semi); line-height: var(--lh-snug); color: var(--ink); }
.tf-rev-ops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tf-rev-ops li {
    display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
    font-size: var(--fs-sm); color: var(--ink-muted);
}
.tf-rev-ops li .tf-letra { width: 26px; height: 26px; margin-top: 0; font-size: var(--fs-caption); }
.tf-rev-op-txt { flex: 1; padding-top: 3px; }
.tf-rev-ops li.is-bien { background: var(--ok-wash); color: var(--ink); }
.tf-rev-ops li.is-bien .tf-letra { background: var(--ok-600); color: #fff; }
.tf-rev-ops li.is-mal { background: var(--bad-wash); color: var(--ink); }
.tf-rev-ops li.is-mal .tf-letra { background: var(--bad-600); color: #fff; }
.tf-rev-tuya { flex-shrink: 0; align-self: center; font-size: var(--fs-micro); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.tf-rev-expl {
    margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
    background: var(--info-wash); font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-body);
}
.tf-rev-expl i { color: var(--info-600); margin-right: 4px; }
.tf-academia { margin: var(--s-7) 0 0; text-align: center; font-size: var(--fs-sm); color: var(--ink-muted); }
.tf-academia a { color: var(--accent-strong); font-weight: var(--fw-semi); }

@media (max-width: 640px) {
    .tf-nota-card { padding: var(--s-5); gap: var(--s-4); }
    .tf-nota-num { font-size: 44px; }
    .tf-siguiente-repaso .btn, .tf-siguiente-botones .btn { flex: 1; justify-content: center; }
    .tf-filtros { width: 100%; }
    .tf-filtro { flex: 1; padding-inline: 8px; }
    .tf-rev { padding: var(--s-4); }
}