/* ============================================================
   TEMARIUS REX — Estados que pone el JavaScript
   ------------------------------------------------------------
   Estas clases NO aparecen en el marcado: las añade el script
   mientras se hace un test (respuesta marcada, corrección,
   pregunta pendiente, cronómetro en rojo…). Si faltan, el test
   se queda mudo aunque el PHP funcione.
   ============================================================ */

/* ---- Opción elegida y corrección ---- */
.option-label.selected, .quiz-opt.selected, .tema-card.selected {
    border-color: var(--accent); background: var(--accent-wash); color: var(--ink);
}
.option-label.selected .option-letter, .quiz-opt.selected .option-letter {
    background: var(--accent); color: var(--navy-900);
}
.tema-card.selected { box-shadow: inset 0 0 0 1px var(--accent); }

.option-label.opt-correct, .quiz-opt.opt-correct, .review-option.opt-correct {
    border-color: var(--ok-600); background: var(--ok-wash); color: var(--ok-600);
}
.option-label.opt-correct .option-letter, .quiz-opt.opt-correct .option-letter {
    background: var(--ok-600); color: #fff;
}
.option-label.opt-wrong, .quiz-opt.opt-wrong, .review-option.opt-wrong {
    border-color: var(--bad-600); background: var(--bad-wash); color: var(--bad-600);
}
.option-label.opt-wrong .option-letter, .quiz-opt.opt-wrong .option-letter {
    background: var(--bad-600); color: #fff;
}

/* ---- Pregunta contestada / marcada para revisar ---- */
.question-card.answered, .quiz-card.answered { border-color: var(--ok-600); }
.question-card.marked, .quiz-card.marked, .question-card.is-marked {
    border-color: var(--warn-600); box-shadow: 0 0 0 3px var(--warn-wash);
}
.q-dot.answered { background: var(--ok-600); }
.q-dot.marked, .q-dot.is-marked { background: var(--warn-600); }
.q-dot.ok { background: var(--ok-600); }
.q-dot.ko { background: var(--bad-600); }

/* ---- Cronómetro ---- */
.test-timer.timer-warning, .quiz-timer.timer-warning, .simulacro-timer.timer-warning {
    background: var(--warn-wash); border-color: transparent; color: var(--warn-600);
}
.test-timer.timer-critical, .quiz-timer.timer-critical, .simulacro-timer.timer-critical {
    background: var(--bad-wash); border-color: transparent; color: var(--bad-600);
    animation: latido 1s var(--ease) infinite;
}
@keyframes latido { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .timer-critical { animation: none; } }

/* ---- Aciertos y fallos genéricos ---- */
.ok  { color: var(--ok-600); }
.ko  { color: var(--bad-600); }
.answered { }
.marked, .is-marked { }

/* ---- Botón en espera ---- */
.btn.loading { pointer-events: none; opacity: .65; }
.btn.loading::after {
    content: ""; width: 13px; height: 13px; margin-left: 2px;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---- Elementos que aparecen y desaparecen ---- */
.scroll-top, .back-to-top { opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.scroll-top.visible, .back-to-top.visible { opacity: 1; pointer-events: auto; }
.animate-in { animation: entrar var(--dur) var(--ease-out) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .animate-in { animation: none; } }


/* ============================================================
   PIEZAS QUE CONSTRUYE app.js
   No aparecen en ninguna plantilla, así que se escapan de
   cualquier inventario del marcado.
   ============================================================ */

/* Ojo para ver la contraseña: va DENTRO del campo */
.password-wrapper { position: relative; display: block; }
.password-wrapper input { padding-right: 42px; }
.password-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    background: transparent; border: 0; border-radius: var(--r-sm);
    color: var(--ink-faint); font-size: var(--fs-sm); cursor: pointer;
    transition: var(--transition);
}
.password-toggle:hover { color: var(--ink); background: var(--surface-subtle); }

/* Volver arriba */
.back-to-top {
    position: fixed; right: 20px; bottom: 20px; z-index: 90;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: var(--r-full);
    background: var(--surface-inverse); color: var(--ink-invert);
    border: 1px solid var(--line-invert); cursor: pointer;
    box-shadow: var(--sh-md);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { transform: translateY(-2px); background: var(--navy-700); color: var(--ink-invert); }

/* Aviso de estudio que arman algunas plantillas */
.estudio-feedback {
    padding: var(--s-4) var(--s-5); margin-top: var(--s-4);
    background: var(--surface-subtle); border: 1px solid var(--line);
    border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--ink-body);
}
.ef-head { font-weight: var(--fw-semi); color: var(--ink); margin-bottom: 4px; }