/* ═══════════════════════════════════════════════════════════════
   Cáscara compartida de las pantallas de examen

   La usan ExamTakingPage (/juegos/examenes/{tipo}/{id}) y
   SimulacroTakingPage (/juegos/examenes/simulacro). Vive aquí, y no
   en el CSS scoped de una de las dos, porque el CSS aislado de Blazor
   solo alcanza al componente dueño del archivo: el simulacro usaba
   este mismo vocabulario de clases y se renderizaba sin nada de
   estructura.

   Todo cuelga de :where(.exam-taking-content), la raíz de ambas
   páginas. El :where() deja la especificidad del ancestro en cero,
   así que cualquier regla scoped de una página gana sin pelear.
   ═══════════════════════════════════════════════════════════════ */

.exam-taking-content {
    position: relative;
    height: 100dvh;
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}

/* ── Carga ──────────────────────────────────────────────────── */

:where(.exam-taking-content) .loading-exam-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    text-align: center;
}

:where(.exam-taking-content) .exam-title-text {
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
    font-size: 1.5rem;
}

/* ── Pantalla de bienvenida ─────────────────────────────────── */

/* Es el contenedor quien scrollea. Antes el tope de 400px vivía en la
   tarjeta, así que el contenido más largo (el del simulacro) se salía
   de su propia caja en vez de desplazarse. */
:where(.exam-taking-content) .exam-intro-cards-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    max-height: 100%;
    overflow-y: auto;
    padding: 2rem 0;
}

:where(.exam-taking-content) .exam-intro-card {
    border-radius: var(--app-border-radius-lg);
    padding: 20px;
    max-width: 400px;
    width: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    animation: scaleIn 0.4s ease-out;
}

:where(.exam-taking-content) .exam-intro-header {
    border-bottom: 3px dashed grey;
}

:where(.exam-taking-content) .exam-metadata-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    font-style: italic;
    padding-bottom: 5px;
}

:where(.exam-taking-content) .exam-intro-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    margin: 20px 0px;
}

/* ── Cabecera del examen en curso ───────────────────────────── */

:where(.exam-taking-content) .exam-question-page {
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
}

:where(.exam-taking-content) .exam-taking-page-header {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: color-mix(in srgb, var(--mud-palette-background) 85%, transparent);
    border-radius: var(--app-border-radius-lg);

    z-index: 3;
}

:where(.exam-taking-content) .progress-bar-container {
    height: 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
}

/* Los estados van por token: en claro, el `white` y el `grey` de antes
   dejaban la barra invisible sobre el fondo de la página. */
:where(.exam-taking-content) .progress-bar-item {
    flex-grow: 1;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 20%, transparent);
    height: 3px;
    margin: 0px 5px;
    border-radius: var(--app-border-radius);
    transition: all 0.3s ease;
}

:where(.exam-taking-content) .progress-bar-item.progress {
    background-color: var(--mud-palette-primary);
    height: 6px;
    animation: pulse 1.5s ease-in-out infinite;
}

:where(.exam-taking-content) .progress-bar-item.completed {
    background-color: var(--mud-palette-text-secondary);
}

:where(.exam-taking-content) .progress-bar-item.correct {
    background-color: var(--mud-palette-success);
}

:where(.exam-taking-content) .progress-bar-item.incorrect {
    background-color: var(--mud-palette-error);
}

:where(.exam-taking-content) .exam-page-navigation-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
}

/* ── Pregunta ───────────────────────────────────────────────── */

:where(.exam-taking-content) .exam-question-content {
    margin: auto 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

:where(.exam-taking-content) .question-container {
    max-width: 500px;
    width: calc(100% - 20px);
    min-height: 300px;
    border-radius: var(--app-border-radius-lg);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 10px;
    animation: slideUp 0.4s ease-out;
    background-color: var(--mud-palette-background);
    position: relative;
    z-index: 2;
}

:where(.exam-taking-content) .question {
    text-align: center;
    font-size: 1.1rem;
    margin-top: auto;
    margin-bottom: 30px;
}

:where(.exam-taking-content) .pts-display {
    text-align: right;
    padding: 10px 10px 0px 0px;
    animation: fadeIn 0.5s ease-in;
}

/* ── Figura de apoyo ────────────────────────────────────────── */

:where(.exam-taking-content) .question-figure {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    padding: 0 1rem;
}

:where(.exam-taking-content) .question-figure-img {
    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--app-border-radius-sm);
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    padding: 0.5rem;
}

/* SVG inyectado (figura_svg): el SVG trae fondo blanco propio, así que
   el contenedor lo acompaña en vez de pelearse con él. */
:where(.exam-taking-content) .question-figure-svg {
    width: 100%;
    max-width: 360px;
    border-radius: var(--app-border-radius-sm);
    border: 1px solid var(--mud-palette-divider);
    background: #fff;
    padding: 0.5rem;
}

:where(.exam-taking-content) .question-figure-svg svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ── Opciones de respuesta ──────────────────────────────────── */

:where(.exam-taking-content) .item-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: auto;
    gap: 10px;
}

:where(.exam-taking-content) .item-option {
    min-height: 40px;
    flex-basis: 40%;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
    overflow-wrap: anywhere;
}

@media (hover: hover) {
    :where(.exam-taking-content) .item-option:hover .option-letter {
        transform: translateY(-2px);
        background-color: var(--mud-palette-action-default-hover);
    }
}

:where(.exam-taking-content) .item-option.selected .option-selected {
    opacity: 1;
}

:where(.exam-taking-content) .option-selected {
    position: absolute;
    color: white;
    transform: translate(-5px, -35px);
    font-size: 2rem;
    font-style: italic;
    font-weight: 900;
    opacity: 0;
    transition: opacity 0.3s ease;
}

:where(.exam-taking-content) .item-option.correct {
    color: var(--mud-palette-success-lighten);
}

:where(.exam-taking-content) .item-option.correct .option-letter {
    background-color: var(--mud-palette-success);
    color: var(--mud-palette-black);
}

:where(.exam-taking-content) .item-option.correct .option-check {
    opacity: 1;
}

:where(.exam-taking-content) .item-option.incorrect {
    color: var(--mud-palette-error-darken);
}

:where(.exam-taking-content) .item-option.incorrect .option-letter {
    background-color: var(--mud-palette-error-darken);
    color: var(--mud-palette-black);
}

:where(.exam-taking-content) .item-option.incorrect .option-cross {
    opacity: 1;
}

:where(.exam-taking-content) .option-letter {
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 45%, transparent);
    padding: 3px;
    border-radius: 100px;
    min-width: 30px;
    min-height: 30px;
    position: relative;
    transition: all 0.3s ease;
    max-height: 30px;
    max-width: 30px;
    align-content: center;
    text-align: center;
}

/* Hueco fijo al final de la opción donde se cruzan ✓ y ✗ al corregir.
   Antes era absoluto en `top: -40px` a 3rem, así que el glifo salía de
   la opción y caía encima de la fila de arriba. */
:where(.exam-taking-content) .option-check-area {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

:where(.exam-taking-content) .option-check-area * {
    position: absolute;
    inset: 0;
    font-size: 1.5rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ── Explicación tras responder ─────────────────────────────────
   Cuelga por debajo de .question-container: el margen negativo y las
   esquinas rectas de arriba la cosen a la tarjeta de la pregunta. */

:where(.exam-taking-content) .exam-explanation-container {
    margin-top: -20px;
    max-width: 500px;
    width: calc(100% - 20px);
    border-radius: 0 0 var(--app-border-radius-lg) var(--app-border-radius-lg);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 10px;
    padding-top: 30px;
    animation: slideUp 0.4s ease-out;
}

:where(.exam-taking-content) .exam-explanation-text {
    text-align: center;
    font-style: italic;
    width: calc(100% - 40px);
    margin: 0px auto;
}

/* ── Animaciones ────────────────────────────────────────────────
   La red global de prefers-reduced-motion de app.css las detiene. */

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scaleY(1);
    }

    50% {
        opacity: 0.7;
        transform: scaleY(1.5);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}