/* ==========================================
   EXAMS.CSS - Módulo de Estudio y Evaluaciones
   ========================================== */

/* 1. SECCIÓN DE SEMANAS Y MATERIALES */
.semana-item { 
    background: rgba(255, 255, 255, 0.03); margin-bottom: 20px; padding: 25px; 
    border-radius: 15px; border-left: 5px solid var(--purple); transition: 0.3s;
}
.semana-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateX(5px); }
.semana-item h3 { margin-top: 0; color: #fff; font-size: 1.2rem; }
.semana-item.bloqueado { opacity: 0.5; pointer-events: none; filter: grayscale(100%); }

/* Botones de Acción Académica */
.btn-teoria { 
    background: var(--cian); color: black; border: none; padding: 12px 25px; 
    border-radius: 10px; font-weight: 800; cursor: pointer; transition: 0.3s;
    text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px;
}
.btn-teoria:hover { background: white; box-shadow: 0 0 20px var(--cian); }

.btn-examen { 
    background: var(--purple); color: white; border: none; padding: 12px 25px; 
    margin-left: 10px; border-radius: 10px; font-weight: 800; cursor: pointer; 
    transition: 0.3s; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px;
}
.btn-examen:hover { box-shadow: 0 0 20px var(--purple); background: #d07afc; }

/* 2. INTERFAZ DE PREGUNTAS */
.pregunta-card { 
    background: rgba(255, 255, 255, 0.02); border: 1px solid #222; 
    border-radius: 15px; padding: 25px; margin-bottom: 30px; 
    transition: border-color 0.3s;
}
.pregunta-card:hover { border-color: #444; }

.opciones-grid { display: grid; gap: 15px; margin-top: 20px; }
@media (min-width: 600px) { .opciones-grid { grid-template-columns: 1fr 1fr; } }

.btn-opt { 
    background: #0a0a0a; color: white; border: 1px solid #333; 
    padding: 18px; border-radius: 10px; cursor: pointer; 
    text-align: left; transition: 0.3s; font-size: 1rem; line-height: 1.4;
}
.btn-opt:hover { border-color: var(--cian); background: #111; }
.btn-opt.seleccionada { 
    background: rgba(72, 225, 217, 0.1) !important; color: var(--cian) !important; 
    border-color: var(--cian) !important; transform: scale(1.02); 
    box-shadow: 0 0 15px rgba(72, 225, 217, 0.3); font-weight: bold;
}

/* 3. REVISIÓN DE RESPUESTAS */
.btn-opt.correcta-rev { 
    background: rgba(72, 225, 217, 0.15) !important; border-color: var(--cian) !important; 
    color: var(--cian) !important; font-weight: bold; box-shadow: 0 0 15px rgba(72, 225, 217, 0.3);
}
.btn-opt.incorrecta-rev { 
    background: rgba(233, 69, 96, 0.15) !important; border-color: var(--accent) !important; 
    color: var(--accent) !important; text-decoration: line-through; opacity: 0.7; 
}
.explicacion-box { 
    margin-top: 20px; padding: 20px; background: rgba(72, 225, 217, 0.05); 
    border-left: 4px solid var(--cian); border-radius: 8px; line-height: 1.6;
}

/* 4. PANTALLA DE RESULTADOS ANIMADA (EPIC) */
.resultado-panel { 
    background: var(--card); padding: 50px 30px; border-radius: 20px; 
    border: 1px solid #333; max-width: 650px; margin: 0 auto; 
    text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}

.results-header { animation: fadeInDown 0.8s ease-out; }
.score-display { 
    font-size: 5rem; font-weight: 800; color: var(--cian); 
    text-shadow: 0 0 40px rgba(72, 225, 217, 0.6); margin: 10px 0; 
    animation: scorePulse 2s infinite; line-height: 1;
}

.results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin-top: 40px; }

.stat-card-anim { 
    opacity: 0; transform: translateY(30px); background: rgba(255,255,255,0.02); 
    border: 1px solid #222; padding: 25px 15px; border-radius: 15px; 
    text-align: center; animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}
.stat-card-anim:hover { border-color: #555; background: rgba(255,255,255,0.04); }

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

/* KEYFRAMES LOCALES */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-40px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUpFade {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scorePulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.08); filter: brightness(1.3); }
}
/* Mejora la legibilidad de las fórmulas MathJax */
mjx-container {
    color: var(--cian) !important; /* O el color que prefieras para resaltar */
    font-size: 1.1em !important;
    padding: 2px 4px;
    background: rgba(72, 225, 217, 0.05); /* Un toque de luz de fondo */
    border-radius: 4px;
}

/* Evita que las fórmulas largas se corten en móviles */
.pregunta-card mjx-container {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}