.modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 100; align-items: flex-end; }
.modal.active { display: flex; }
.modal-content { background: white; width: 100%; border-radius: 2rem 2rem 0 0; padding: 1.5rem; max-height: 80vh; overflow-y: auto; }
#cursos-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 200; overflow-y: auto; }

/* Capa de bloqueo para el desafío numérico */
.bloqueo-verificacion {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    color: white;
    font-family: sans-serif;
}

.numero-desafio {
    font-size: 80px;
    font-weight: bold;
    color: #a855f7; /* Morado 4D */
    margin: 20px;
}