/**
 * course-player-quiz.css — retoque visual del quiz nativo de MasterStudy
 * (tabla de Historial, primera pasada). No sustituye ninguna plantilla, solo
 * sobrescribe la hoja de estilos del propio plugin
 * (_core/assets/css/course-player/content/quiz-history.css), cargada con
 * menos especificidad que la nuestra en la mayoría de reglas — el resto usa
 * !important porque el orden de carga entre plugin y tema no está
 * garantizado (la hoja del plugin se encola dentro de la propia plantilla,
 * en tiempo de render).
 *
 * Problema que arregla: la tabla estaba topada a 860px de ancho dentro de
 * un contenedor mucho más ancho, dejando la mitad derecha de la pantalla en
 * blanco, y las columnas numéricas no quedaban alineadas con su cabecera.
 */

.masterstudy-course-player-quiz-attempts-wrapper {
    max-width: 100% !important;
    padding: 32px 24px 0 !important;
}

.masterstudy-course-player-quiz-attempts__header,
.masterstudy-course-player-quiz-attempt {
    padding-right: 24px !important;
}

.masterstudy-course-player-quiz-header__attempt,
.masterstudy-course-player-quiz-attempt__date {
    flex: 0 0 20% !important;
}

.masterstudy-course-player-quiz-header__questions,
.masterstudy-course-player-quiz-attempt__questions,
.masterstudy-course-player-quiz-header__correct,
.masterstudy-course-player-quiz-attempt__correct,
.masterstudy-course-player-quiz-header__incorrect,
.masterstudy-course-player-quiz-attempt__incorrect,
.masterstudy-course-player-quiz-header__grade,
.masterstudy-course-player-quiz-attempt__grade {
    flex: 0 0 10% !important;
    text-align: center !important;
}

.masterstudy-course-player-quiz-header__info,
.masterstudy-course-player-quiz-attempt__info {
    flex: 1 1 auto !important;
}

/* Barra de progreso: señal duplicada sin cabecera propia (la "Calificación"
   numérica y la etiqueta APROBADO/FALLIDO ya dicen lo mismo) - se quita en
   vez de intentar arreglarla, más limpio que dos indicadores para un mismo
   dato. */
.masterstudy-course-player-quiz-attempt__progress {
    display: none !important;
}

/* Pantalla de "primer acceso" a un cuestionario (antes de "Empezar
   Cuestionario"): a diferencia de la tabla de Historial, aquí el contenido
   real es poquísimo (una línea de metadatos + un botón), así que ensanchar
   a 100% lo dejaría aún más vacío. Se le da peso visual en forma de chips
   en vez de texto suelto, y se ensancha lo justo (860 -> 960) para
   aprovechar algo más el ancho disponible sin exagerar. */
/* Solo la pantalla de "antes de empezar": el propio plugin deja la clase
   `__form_hide` puesta en el formulario de preguntas hasta que se pulsa
   "Empezar Cuestionario" (showQuizInterface() en quiz.js se la quita en ese
   momento) - la usamos como señal para no afectar a la pantalla de
   preguntas ni a la de resultado, que comparten el mismo contenedor. */
.masterstudy-course-player-quiz:has(> .masterstudy-course-player-quiz__form.masterstudy-course-player-quiz__form_hide) {
    max-width: 560px !important;
    margin: 92px auto 0 !important;
    padding: 44px 52px !important;
    background: #fff !important;
    border: 1px solid #dfe7ef !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 34px rgba(15, 35, 55, 0.08) !important;
    text-align: center !important;
}

.masterstudy-course-player-quiz:has(> .masterstudy-course-player-quiz__form.masterstudy-course-player-quiz__form_hide) > .masterstudy-course-player-content__header_quiz h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
}

.masterstudy-course-player-quiz:has(> .masterstudy-course-player-quiz__form.masterstudy-course-player-quiz__form_hide) .masterstudy-course-player-quiz__content-meta {
    justify-content: center !important;
}

.masterstudy-course-player-quiz:has(> .masterstudy-course-player-quiz__form.masterstudy-course-player-quiz__form_hide) .masterstudy-course-player-quiz__start-quiz {
    justify-content: center !important;
}

/* Título movido dentro de la tarjeta por quiz-intro-card.js - quitarle el
   ancho/margen pensados para cuando vivía fuera, como bloque de página. */
.masterstudy-course-player-quiz > .masterstudy-course-player-content__header_quiz {
    max-width: none !important;
    width: auto !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

.masterstudy-course-player-quiz__content-meta {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 18px 0 !important;
}

.masterstudy-course-player-quiz__content-meta-item {
    background: #F7FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    margin: 0 !important;
}

.masterstudy-course-player-quiz__start-quiz {
    margin: 8px 0 30px !important;
}

/* Separador entre el enunciado de la pregunta y las opciones de respuesta:
   línea fina + acento en el teal de marca, para que no queden pegados y
   la pantalla de responder tenga algo más de estructura visual. */
.masterstudy-course-player-question__header {
    position: relative !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.masterstudy-course-player-question__header::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -1px !important;
    width: 56px !important;
    height: 3px !important;
    background: #0095A8 !important;
    border-radius: 3px !important;
}
