/* NeuroLab — quiz.css: estilos del motor js/quiz.js */
.quiz-shell { display: flex; flex-direction: column; gap: 1rem; }
.quiz-progress-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.quiz-progress-bar__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--violet), var(--pink)); transition: width .3s; }
.quiz-counter { font-size: .85rem; color: var(--gray-500); font-weight: 700; }
.quiz-counter__num { color: var(--violet-light); font-size: 1.1rem; }
.quiz-counter__sep { margin: 0 .2rem; }
.quiz-question__text { font-size: 1.08rem; font-weight: 600; line-height: 1.5; color: var(--white, #fff); margin-bottom: .9rem; }
.quiz-options { display: flex; flex-direction: column; gap: .55rem; }
.quiz-option {
    display: flex; align-items: center; gap: .8rem;
    width: 100%; text-align: left;
    padding: .75rem .9rem;
    font: inherit; font-size: .95rem; line-height: 1.4;
    color: var(--gray-100);
    background: rgba(255,255,255,.03);
    border: 1.5px solid var(--gray-700);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.quiz-option:hover:not(:disabled) { border-color: var(--violet); background: rgba(139,92,246,.1); }
.quiz-option:disabled { cursor: default; }
.quiz-option__letter {
    flex: 0 0 1.8rem; height: 1.8rem; border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 800; font-size: .8rem;
    background: rgba(139,92,246,.18); color: var(--violet-light);
}
.quiz-option.correct { border-color: #22C55E; background: rgba(34,197,94,.12); }
.quiz-option.correct .quiz-option__letter { background: #22C55E; color: #052e16; }
.quiz-option.wrong { border-color: #EF4444; background: rgba(239,68,68,.12); }
.quiz-option.wrong .quiz-option__letter { background: #EF4444; color: #fff; }
.quiz-option.disabled-opt { opacity: .55; }
.quiz-feedback { margin-top: .9rem; }
.quiz-feedback-inner { display: flex; gap: .7rem; padding: .8rem .9rem; border-radius: 10px; line-height: 1.5; }
.quiz-feedback-inner.ok  { background: rgba(34,197,94,.1);  border: 1px solid rgba(34,197,94,.4); }
.quiz-feedback-inner.err { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.4); }
.quiz-feedback-inner p { margin: .3rem 0 0; color: var(--gray-300); }
.quiz-feedback-icon { font-weight: 800; }
.quiz-feedback-inner.ok .quiz-feedback-icon  { color: #4ADE80; }
.quiz-feedback-inner.err .quiz-feedback-icon { color: #F87171; }
.quiz-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.quiz-nav__dots { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; flex: 1; }
.quiz-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--gray-700); cursor: pointer; }
.quiz-dot.active { outline: 2px solid var(--violet-light); outline-offset: 1px; }
.quiz-dot.correct { background: #22C55E; }
.quiz-dot.wrong { background: #EF4444; }
.quiz-results__score { text-align: center; padding: 1rem 0; }
.quiz-results__num { font-size: 2.6rem; font-weight: 800; color: var(--white, #fff); }
.quiz-results__num span { font-size: 1.3rem; color: var(--gray-500); }
.quiz-results__pct { font-size: 1.1rem; font-weight: 700; color: var(--violet-light); }
.quiz-results__grade { margin-top: .3rem; color: var(--gray-300); }
.quiz-results__summary { display: flex; flex-direction: column; gap: .4rem; margin-top: 1rem; }
.quiz-result-row { display: flex; gap: .6rem; align-items: baseline; padding: .5rem .7rem; border-radius: 8px; font-size: .9rem; background: rgba(255,255,255,.03); }
.quiz-result-row.err { background: rgba(239,68,68,.08); }
.quiz-result-row__icon { font-weight: 800; }
.quiz-result-row.ok .quiz-result-row__icon  { color: #4ADE80; }
.quiz-result-row.err .quiz-result-row__icon { color: #F87171; }
.quiz-result-row__text { flex: 1; color: var(--gray-100); }
.quiz-result-row__answer { font-weight: 700; color: var(--gray-500); }
.btn-bio { background: linear-gradient(90deg, var(--violet), var(--pink)); color: #fff; border: none; }
